For those of you who have both Xara X and Photoshop:
Intructions to make a transparent animated gif have a fringe of pixels of your chosen background color around the anti-aliasing. In the same way you create drawings in Xara with the background a certain color, and Xara exports transparent gifs with a fringe of pixels with the background color around the anti-aliasing, the following procedure does the same with animated gifs.
Requires using Xara and Photoshop. The procedure may be translatable into other bitmap programs that produce animations, too.
There are two reasons for using Xara and Photoshop:
a - Xara cannot import transparent gifs with actual transparency (they come out with white backgrounds)
b - Xara cannot export a background color for animation frames (neither can PS)
NOTE: This entire procedure could be done in Photoshop, but Xara X handles small text and small drawings much better than Photoshop, and produces cleaner results.
I use a two frame animation example to make it simple to follow.
Here it is: http://talkgraphics.infopop.net/1/Op...&ul=3001938225
1 - Take your .xar animation file and make each frame of the animation into one regular .xar drawing, with each different element in the animation on a separate layer, so that the different elements can be turned on & off at will.
Example: Maya's CROW was the element of animation in her signature, so I put each version of the crow on a separate layer from the text, making it possible to make each version visible or invisible as needed.
2 - Make the background the color of your web page(Ctrl+Click & Drag from the Color Line to the Background), so that the exported transparent gifs will have some colored pixels around the anti-aliasing instead of white pixels. That is the whole point of this! I used light grey for Maya's signature.
3 - Line up the different elements in the drawing perfectly, then turn one element off. In Maya's sig, I also had to make sure that both exported gifs would come out the exact same size, so I had to drop the level of the crows, so that the top wing of the wing-up crow did not go higher than the text. The gifs have to be the same size to line up right in Photoshop.
3 - Save a transparent gif version for each frame of the animation. I saved two versions of Maya's, one with wing up(wing-up layer visible and wing-down layer not visible), one with wing down(wing-down layer visible and wing-up layer not visible), as transparent gifs.
Export two gifs for two frames of animation
4 - Photoshop/ImageReady can import these with the background transparent. Bring them into ImageReady, the sub-program of PS that is used for image slicing and animations.
5 - I opened both gifs in ImageReady. I took one and started to make an animation with it. I added an extra frame to the animation(which defaults to copy the last frame), and then had to turn off the visibility of that gif in the second animation frame.
6 - I created a new blank layer for the second animation frame. I then selected the other gif using Select All, and copied and pasted it into the second animation frame of the first gif, into the new layer I created. I lined the two animation frames up to match, set the timing, and exported the animated gif.
It's a bit of trouble to get the hang of it, but works great! You can now have a transparent animated gif go onto any color of background, and look like it is part of that background, without any annoying fringe of white pixels.
http://talkgraphics.infopop.net/1/Op...&ul=1101906325 [img]/infopop/emoticons/icon_smile.gif[/img] Eye Site Web Design
Why, I’m afraid I can’t explain myself, sir, because I’m not myself, you know...
- Lewis Carroll
[This message was edited by Dale Landry on June 26, 2002 at 18:08.]
Reply With Quote
Bookmarks