How to make your own animated GIFs

[JEEB]

Originally Posted by Komari

Also, if you want to make animated gifs from movie files, you'll need to capture the desired images from your shows. I prefer to use VirtualDubMod for this; in it, it lets you set a start and stop time for frame capture, and from there you can export the image sequence in BMP, TARGA, or PNG format.

VirtualDub is all fine and dandy for this kind of stuff, sure (and with using an Avisynth script as input [or those plugins available] it can load even more files). But please -- pretty please -- stop recommending VirtualDubMod -- someone might actually try doing something useful with it.

TheFluff and others have gone over this way too many times.

This is in no way personal, but every time someone mentions VirtualDubMod something inside me dies. Not to mention the age of the aforementioned spinoff, it also really doesn't have any real features compared to the current, up-to-date VirtualDub.

[Lennstar]

hm im the only one with the problem that i cannot open mkv in virtualdub or virtualdubmod (with avisynth the same). [OS is w7 64bit] ^^ With Vista 64bit everything is fine. Only option is to convert mkv to avi etc. right?

everything is fine now 2 codecs were currupted.

sry for this stupid post ... *bow*

[Yozuru]

Originally Posted by ~Fancy Tea~

I never used a software to get it, it was from this site already gif'd and moving~ http://safebooru.donmai.us/post/show...id_headdress-r but I'm not sure how to make my windows 7 open gifs up wthout using the internet automatically, because naturally gif's dont move when you open them up in windows photo viewer~

Your going to have to use another image viewer to view gifs. Such as FastStone Image Viewer, not only does it views gif, it allows you to edit your photos.

[SeijiSensei]

Irfanview gets good reviews as well.

[Green²]

Animated PNG Conversion Guide 1.0

Requirements:

VirtualDub (optional)
GIMP, or any other image editor.
APNG Anime Maker
Ready to animate PNG frame sequences.


Limitations:

Animated PNG files only work in a few image viewers and web browsers. See: http://en.wikipedia.org/wiki/APNG#Application_support for more info.

Image viewers and web browsers that do not support animated png will generally render the image as a static image. This would be the first frame only.

Some image file host providers, such as ImageShack, do not support animated png.


Process - The short version:

1) In the earlier GIMP guides, this is where you do not want to convert your ordered frames to Indexed mode. Instead, you will need to save each individual layer as a PNG image. (Lowest layer being image #1, second lowest layer being #2, and so forth...)

One method of doing this without having to delete frames, is to toggle visibility on the Layers window so that only one eye is visible.

Spoiler for Eye Example:

Then when you do File/Save As, save the first frame as 001.png. Once you click on Save, you will see a pop-up stating that the PNG plug-in can't handle layers. Select from the below option, Merge Visible Layers, and then select Export. Within the next pop-up window, the only thing to make sure not to enable is the interlaced option. Save, then toggle visibility for the next upper layer, and untick the eye below that. Then repeat the saving process, but with saving with a different file name; a name that will indicate the frame sequence.

Spoiler for Eye Example:

2) Using the APNG Anime Maker program, Select Open, then navigate the pop-up window to the folder that contains your edited PNG images that you had created at step one, select the images, and then open.

Spoiler for APNG Anime Maker:

Make sure that the frames are ordered, the top being the first frame sequence. If a frame is listed out of sequence, select with a left-click of the mouse the out of ordered frame from the list, and select from the above options, Move Up or Move Down, depending on the direction of where you need to relocate the frame.

Once in the order that you desire, select Save to save as a animated PNG. (File extension will be .png ...the same as a static png image.)

Spoiler for APNG Anime Maker:

[Yozuru]

How do I pick the frames to use when using Photoshop Cs5?

[Well]

You can create animated avatar and convert video to gif using Video Avatar.Also convert video to gif. It's really cool prog)

[Dist]

I need some help.

I've never used Photoshop in my life before ( except today ), or created an animated GIF for that matter.. I only have the most basic knowledge that I got from reading the tutorials around AnimeSuki.

Setting aside the times in frames and such, could anyone see if they can reduce This GIF into 50kb or less, and then tell me how they did it ? I do realise there are 39 frames which is ALOT, but since all frames are different, I have no idea what frames I could remove - if any.

I used the auto-optimization tool in Photoshop but the quality came out really awful ..

There was also some guide for reducing file size where you deleted some of the backround or something.. but I dont know if it would work here, and if it would .. how ? The guide presumed I had previous knowledge of Photoshop so I had no idea what to do.

Oh and, any tips as how to use the tween effectively ? It just doesn't seem right to me what I did there with that gif.
---

Is there an alternative program for VirtualDub ? For now I'm using ffdshow but it's quite troublesome to use .. VirtualDub would have been nice if it had actually worked. The normal version doesn't even support .mkv files, and when I got some mod for it that let me load .mkv .. Well, when I chose time frame, it didn't tell me how many frames were in that time frame, neither it did let me save those frames as pictures onto my computer ..

[Kudryavka]

Originally Posted by Dist

I need some help.

I've never used Photoshop in my life before ( except today ), or created an animated GIF for that matter.. I only have the most basic knowledge that I got from reading the tutorials around AnimeSuki.

Setting aside the times in frames and such, could anyone see if they can reduce This GIF into 50kb or less, and then tell me how they did it ? I do realise there are 39 frames which is ALOT, but since all frames are different, I have no idea what frames I could remove - if any.

I used the auto-optimization tool in Photoshop but the quality came out really awful ..

There was also some guide for reducing file size where you deleted some of the backround or something.. but I dont know if it would work here, and if it would .. how ? The guide presumed I had previous knowledge of Photoshop so I had no idea what to do.

Oh and, any tips as how to use the tween effectively ? It just doesn't seem right to me what I did there with that gif.
---

Is there an alternative program for VirtualDub ? For now I'm using ffdshow but it's quite troublesome to use .. VirtualDub would have been nice if it had actually worked. The normal version doesn't even support .mkv files, and when I got some mod for it that let me load .mkv .. Well, when I chose time frame, it didn't tell me how many frames were in that time frame, neither it did let me save those frames as pictures onto my computer ..

For Virtual Dub, try extracting the video stream from the mkv, then converting the video into AVI. That is, if you absolutely must use Virtual Dub.

Fixing that without doing something drastic, like making it grayscale, to be less than 50 kb is near impossible. Not to mention when I try to edit it, I get a trash file.

[SeijiSensei]

Originally Posted by Dist

Setting aside the times in frames and such, could anyone see if they can reduce This GIF into 50kb or less, and then tell me how they did it ? I do realise there are 39 frames which is ALOT, but since all frames are different, I have no idea what frames I could remove - if any.

It's really not possible to rework that graphic because it's already been differenced. I opened it in the GIMP and saw that many of the frames were essentially empty.

Here's what I'd suggest. Start with the original sequence and go through each frame one at a time in a graphics viewer. Watch how the frames change. Typically you'll see that each frame is repeated two or three times. Keep only the ones that are different. Then try creating an animated avatar from the resulting frames and see how small it is. If it's still bigger than the 50K limit, you'll need to start dropping intermediate frames. You'll be surprised at how few frames it takes to create a reasonably smooth animation. My current avatar has only nine frames. That's because nearly every frame is identical except for the arm and mouth movements.

Creating a good animated avatar within the AS limits takes a lot of experimentation. I often spend an hour or two before I find the right set of frames that preserves the look of the original yet fits within the limits. You might find you'll need to make something smaller than 100x100 to comply.

You'll also need to work out the timings. Remember that there are roughly 24 frames each second, so if a frame is repeated three times in the original sequence, it needs to be displayed for about an eighth of a second, or about 125 milliseconds, to preserve the timings.

I work entirely in Linux and use mplayer from the command line to extract frames. Both I and Green² have written up methods for doing this that appear in the thread above. I'm not suggesting you switch operating systems, but whatever you use shouldn't require that you convert to AVI. You just need software that will extract the frames as individual GIF or PNG images. If VirtualDub can do that, you should be able to reassemble the frames as layers in Photoshop or GIMP.

Edit: For a truly awesome example of what can be done within the AS size limits, take a look at this avatar by Pellisier.

[Dist]

Thanks for reply.

My friend actually tried to open the same GIF in his GIMP and said something about empty frames aswell.. I don't really know what's going on with that, since it doesn't appear like that in Photoshop .. I used Save for Web and it got to the size that it is atm.

I read a guide by Evil Rick ( I think ) that said something about removing static backround from each image to reduce file size, but the guide presumed previous knowledge of Photoshop and I have none so I don't know how to do that .. Unless it has been done already by PS ( seeing as you got empty frames ).

Also I did that and removed all duplicate frames, but I didn't know about the timing thing.. Could you be more precise what you mean by reworking the timing ? Lets say there's two identical frames.. I delete one and what should I add as the time for the other ? What if there are 3, 4 or even 5 identical frames ?

I also need some feedback/tips with the Tween effect, I only added it to the end as an experiment but I don't really know how it works or how it should be used.

And lastly, like I said VD doesn't open MKV files for me so I can't use it. I would be fine with any other program there is, that can do the job but I don't know any .. Well, I suppose I could use Movie Maker to get the clip but then I'm still left with what software to use ( free if ossible .. )

[SeijiSensei]

Originally Posted by Dist

My friend actually tried to open the same GIF in his GIMP and said something about empty frames aswell.. I don't really know what's going on with that, since it doesn't appear like that in Photoshop .. I used Save for Web and it got to the size that it is atm.

I read a guide by Evil Rick ( I think ) that said something about removing static backround from each image to reduce file size, but the guide presumed previous knowledge of Photoshop and I have none so I don't know how to do that .. Unless it has been done already by PS ( seeing as you got empty frames ).

I don't use Photoshop so I'll have to answer using some broader concepts. If you look at the sequence of frames (or "layers") in the original, you'll see they each include all the pixels. However most animated gifs use compression technologies so that only the pixels that change are included in each frame. Typically you'll have a complete "background" layer followed by a sequence of layers that are largely empty except for the changes.

When you say "it doesn't appear like that in Photoshop," are you talking about the original before you "saved for web?" Or did you open the gif itself separately in Photoshop after saving? If the latter, I'd be surprised that you can't see the empty layers.

Now you do have to make sure that you're looking at each layer by itself, not superimposed on the background. In GIMP there's a simple method to do this; opening the Layers window shows each layer as a separate image. I'm sure there must be a way to accomplish the same thing in PS, I just don't know how you'd do so.

For example, here's the "background" frame of my avatar followed by one of the differenced frames:

Also I did that and removed all duplicate frames, but I didn't know about the timing thing.. Could you be more precise what you mean by reworking the timing ? Lets say there's two identical frames.. I delete one and what should I add as the time for the other ? What if there are 3, 4 or even 5 identical frames ?

You may think you removed the duplicates, but the gif you linked to says otherwise. Those empty layers I and your friend can see represent frames that were essentially identical to the ones before them.

Timing is simply a matter of arithmetic. Most anime is shot at (approximately) 24 frames per second, so each one appears on screen for 1/24 second. To save money, animators often repeat a frame multiple times; most televised anime is shot "on threes," meaning each frame is repeated a multiple of three times. So it's pretty common to see three, six, nine, etc., identical frames in sequence depending on how long the director wants the image to remain on screen.

Animated gifs use a different method to control how long a frame appears. When you save to gif, you can designate how long each frame should be displayed, typically in milliseconds (1/1000's of a second). So if you find three identical frames in sequence, you can reproduce the director's timings by using just one of those frames, but displaying it for 3*(1/24) seconds, or about 125 milliseconds. Often I'll have the initial background frame, and sometimes the final frame, display longer than the intermediate ones, as in this case:



Here the background appears for 2.5 seconds while the motion frames appear for just 0.12 seconds each.

I also need some feedback/tips with the Tween effect, I only added it to the end as an experiment but I don't really know how it works or how it should be used.

Can't help you there. I don't using "tweening." That's the technique where intermediate frames are created between two different images to create a smooth transition from one image to another. I've tried it on a couple of occasions for avatars without much success. Generally there are too many intermediate layers created to keep the result within the AS size limits. If I have an avatar with different images, I just put them in order like these:



Not as spiffy as tweening, but it works as an avatar.

And lastly, like I said VD doesn't open MKV files for me so I can't use it. I would be fine with any other program there is, that can do the job but I don't know any .. Well, I suppose I could use Movie Maker to get the clip but then I'm still left with what software to use ( free if ossible .. )

Many media players can save a succession of frames. I use SMPlayer, a nice front-end to mplayer that's available for Windows and Linux. You can give it a command to start saving frames at a particular point as you're watching then turn it off when you're done. That's not how I save frames in practice, but it should work for you. mplayer handles pretty much all common formats including MKV.

[Dist]

Originally Posted by SeijiSensei

I don't use Photoshop so I'll have to answer using some broader concepts. If you look at the sequence of frames (or "layers") in the original, you'll see they each include all the pixels. However most animated gifs use compression technologies so that only the pixels that change are included in each frame. Typically you'll have a complete "background" layer followed by a sequence of layers that are largely empty except for the changes.

When you say "it doesn't appear like that in Photoshop," are you talking about the original before you "saved for web?" Or did you open the gif itself separately in Photoshop after saving? If the latter, I'd be surprised that you can't see the empty layers.

Now you do have to make sure that you're looking at each layer by itself, not superimposed on the background. In GIMP there's a simple method to do this; opening the Layers window shows each layer as a separate image. I'm sure there must be a way to accomplish the same thing in PS, I just don't know how you'd do so.

I can't find a way to do so but there is this window already on the right side, and all layers are like the ones you see in the picture.. There are no empty frames.. And yes, I opened the GIF I linked you at with PS. The amount of layers on the right side is 39, which is also the amount of frames that are displayed at the bottom..

About the backround thing.. So if I understood correctly, is this done automatically or do I have to do it manually ? Seeing as you are already seeing empty frames on your side, does that mean that PS did it already when I used Save for Web ? It still strikes me as odd that I can't see it though. And if this indeed is being done by PS already automatically, then I have no other choice with the avatar than reduce the frames or do with crap quality ?

For example, here's the "background" frame of my avatar followed by one of the differenced frames:





You may think you removed the duplicates, but the gif you linked to says otherwise. Those empty layers I and your friend can see represent frames that were essentially identical to the ones before them.

Timing is simply a matter of arithmetic. Most anime is shot at (approximately) 24 frames per second, so each one appears on screen for 1/24 second. To save money, animators often repeat a frame multiple times; most televised anime is shot "on threes," meaning each frame is repeated a multiple of three times. So it's pretty common to see three, six, nine, etc., identical frames in sequence depending on how long the director wants the image to remain on screen.

Animated gifs use a different method to control how long a frame appears. When you save to gif, you can designate how long each frame should be displayed, typically in milliseconds (1/1000's of a second). So if you find three identical frames in sequence, you can reproduce the director's timings by using just one of those frames, but displaying it for 3*(1/24) seconds, or about 125 milliseconds. Often I'll have the initial background frame, and sometimes the final frame, display longer than the intermediate ones, as in this case:



Here the background appears for 2.5 seconds while the motion frames appear for just 0.12 seconds each.

Yeah I pretty much understood this part now.. thanks.


Can't help you there. I don't using "tweening." That's the technique where intermediate frames are created between two different images to create a smooth transition from one image to another. I've tried it on a couple of occasions for avatars without much success. Generally there are too many intermediate layers created to keep the result within the AS size limits. If I have an avatar with different images, I just put them in order like these:



Not as spiffy as tweening, but it works as an avatar.

I actually only wanted to use tweening since someone requested the avatar I am working on.. Well, I only took it as a something to experiment with, not really expecting to finish this one. It looked odd to me if I didn't use tween and it just started from over again since the girl in picture was in different position at the beginning ..



Many media players can save a succession of frames. I use SMPlayer, a nice front-end to mplayer that's available for Windows and Linux. You can give it a command to start saving frames at a particular point as you're watching then turn it off when you're done. That's not how I save frames in practice, but it should work for you. mplayer handles pretty much all common formats including MKV.

Thanks, I'll give it a shot tomorrow. Also if it plays mkv files normally fine ( and avi files ), maybe I can dump MPC and use this :P. ( I got weird problem with MPC and avi files .. )

The message you have entered is too short. Please lengthen your message to at least 10 characters.

[SeijiSensei]

I can't find a way to do so but there is this window already on the right side, and all layers are like the ones you see in the picture.. There are no empty frames.. And yes, I opened the GIF I linked you at with PS. The amount of layers on the right side is 39, which is also the amount of frames that are displayed at the bottom..

I'm afraid I can't help any more with this. Someone who uses Photoshop needs to chime in here.

Good luck, Dist! I'm sure you'll work things out.

[felix]

I don't understand what the question is.

[Dist]

^Go back to my first post. GIF with 39 frames already saved for web and size is 86kb. Trying to reduce the size any lower makes it look awful. I'm trying to ask how to reduce the file size some more, and how to benefit from the guide Evil Rick posted to remove the static backround from each image ( so only parts that move are saved except for first layer ) to reduce file size even more ..

Although now I am not too sure if that's done by PS automatically or not. I'm using CS5, and my knowledge of PS is zero.

[felix]

You mean reduce that already optimized gif (which always ends up badly). Like this:

(86.35 KB)

(49.96 KB)

Or, make avatars under 50k in general?

[Dist]

Well the original image sequence was like 150kb and then I optimized it to 80 which was still acceptable, but getting it to 50 seemed near impossible.

What I was trying to find out here was how to do this to the original image sequence that I hadn't optimized yet. ( My bad I told it was by Evil Rick, somehow confused the names )

But then, when I had optimized the GIF and my friend opened it in GIMP he said there were alot essentially empty layers so I don't really understand if Photoshop CS5 does what that guide explains automatically when optimizing, or should I do what's told in the guide ?

Additionally, the guide presumes previous knowledge of PS but I have none so I dont know how to begin with that guide.

[felix]

Summary: The answer to your question is 42.

Photoshop is basically a set of tools. For simple stuff using just the tools is sufficient, and in your case using just a few of them in combination is sufficient.

The following are the so called "basics," feel free to skim though them at your leisure. If from the first few words of the paragraph you feel you are familiar with the concepts, I recommend skipping forward to the next.

Layers, Frames & Transparency
Layers are exactly what they say, they are "layers," overlapping pieces that form a hole. Layers go (intuitively) from bottom to top in a stack. So, whats typically called, foreground is at at the top, and the background is at the bottom of the stack.

Lets say I take a picture of a circle and a picture of a triangle (pixels outside the shape are transparent). I put these two on their own layer. If I have the layer of the circle above the one with the triangle I have a circle covering a triangle. I can move the circle layer down the stack (by dragging) and have a triangle covering a circle. In short: each layers covers the one bellow it.

You can duplicate layers, create new empty layers, dispose (ie. delete) of unneeded layers and so forth though the options at the bottom of the Layers Pallet (F7). Remember, you can hover over them for a tooltip.

You can set the transparency of the layer with the control at the top of the pallet, you can also set the transparency of only the layer contents and not the effects (such as a drop shadow etc.) by adjusting the "Fill" of the layer. Besides all this you can also set transparency per pixel though various methods. These will be discussed shortly.

At the bottom of each documents layer stack there is a invisible layer of black and white squares in a chess board pattern. If you can see through to them then the layer is transparent. Of course this example is true if you don't have any intermediate layer between. If you had and there were opaque pixels there, you would see those.

You can set the pixels in the layer to be transparent individually, but that's destructive. Yes, you could undo, but... What if you save, exit, and come back? Can't undo anymore can you. The simple solution is to just separate this hole business of transparency/visibility to another layer. Basically a so called Mask is what you use in photoshop to hide pixels; just as you would use a mask at a ball to hide part of your face. For convenience, when you "mask a layer," the mask of the layer shows on the same line as the layer.

So for example, I have a layer with a triangle. If I select the layer and go to Layer > Layer Mask > Hide All you'll see black square appear next to the layer thumbnail. That's the Layer Mask.

The pixels in the layer mask are Black, White and everything between. Just remember Black as darkness and White as light. As with everywhere else, darkness hides, light reveals (and everything between does what you'd expect).

Figure 1: Two layers in Photoshop CS3, one with a Layer Mask hiding its contents.

If you understand Layers, frames are easy. A frame is basically a state in history. Frames follow the timeline paradigm. The left side is closer to the beginning of the animation, the right side is closer to its end.

Say you have a circle. In the first frame (which always exists by default) you place the circle in the middle of the document. You then can create another frame, select it, and move the circle somewhere else. If you select the first frame you'll notice your circle is still in the middle there.

Our circle example in the above paragraph isn't very pleasant animation wise. It doesn't really feel like its moving when it just appears somewhere else. A Tween is the process of creating intermediate frames between two key points. In our case its layer movement, but it could also be layer transparency or something else.

To create a Tween select two adjacent frames and then from the button right bellow the minimize and close buttons of the pallet select Tween. Select how many frames you want to add, click Ok, and you're done.

Tools & Misc
The Tools pallet (on the left side of photoshop) contains various tool sets. At any given time one tool in the tool set is shown. You can select another tool from the tool set by Click-Hold (for a moment) on the tool set. Some tool sets actually contain only one tool (eg. Zoom, Hand) but those are in the minority.

Photoshop has different Workspace presets. You can go to Window > Workspace and select one appropriate for your current task. This may make it better or worse; if you wish to go back simply go and select Default from the same menu. Photoshop also has different Views (go to View > Screen Mode). Personally I prefer working in Full Screen Mode With Menu Bar, its typically more flexible since I can drag the document around instead of scrolling.

You can show different pallets from the Window menu. They are intuitively named, if you know what you want you should be able to find it (eg. Animation).

Each time you use select a tool, its Options will appear as a strip at the top, bellow the menubar.

Now that you know how to get around the interface. I'll cover some of the important tools (in order from top to bottom), remember you can Shift+(Tool Hotkey) to select a different tool in the set:

• To move the layer (be it pixels, vector shape or text) use the Move tool (black arrow), shortcut V. Just click and drag.
• To make a quick rough selection use the Lasso tool (click and drag around the shape), Polygonal Lasso tool (click to create points defining the shape), or Magnetic Lasso tool (click and drag, it will try to detect the edge). Shortcut L.
• Another way to make quick selection is the Magic Wand tool (click on a space, get the sensitivity right and it will select the area), or the Quick Selection tool (its like a brushing magnetic lasso). Shortcut W.
• To crop, or in other words constrain the image boundaries further use the Crop tool (drag a rectangle, shift for perfect square shape -- make sure View > Snap is off). Shortcut C.
• Brush and Pencil tools should be self-explanatory. Shortcut B.
• Clone Stamp tool is used to copy pixels from one spot to another. Its used often in deleting stuff. Say you want to delete something on the face, simply copy some skin from the vicinity. The way it works is you first hold alt and select a area then start brushing in the target area. Shortcut S.
• Eraser tool does what it says. Shortcut E.
• Gradient and Pain Bucket tools are color fill tools. Paint bucket is self explanatory, the Gradient tools works by click and drag. Shortcut G.
• Sharpen and Blur tool do what you think. One makes it more crispy (sharp), the other makes things more blurry. Think of them as each others opposite if it makes it easier. They are useful in your case after you re-size a image. Typically you can never re-size perfectly and you might want to retouch it and make some details more "detailed." Shortcut R.
• Horizontal Type Text (or just Text) tool is what you will use 99% of the time. It does what you think, allows you to type text. Shortcut T.
• Eyedropper tool is used to pick a color from a image. Shortcut is I but its often accessible via Alt for many tools and also color dialogs.
• Hand tool is used to move your view. Just press space when in any of the full screen modes. Think of it as working similar to how you MiddleClick+Drag on a webpage.
• Zoom tool is used for zooming. Click to zoom in. Alt+Click to zoom out. You can also drag select a area to auto-zoom in on it. Shortcut Z.

I've omitted a lot of the tools that have to do with photography or are not that useful in general. I also omitted the ones that need a lot of explaining.

A few other things you should know:

• To resize, rotate etc something on the fly simply press Ctrl+T.
• To increase the size of the document, you can crop outside the boundaries or you can go to Image > Canvas Size... for precision.

Congratulation you are not a newb anymore.

When you import images as frames, or open a gif file, you'll get a layer for each "frame image" you extracted from the video, or in the gif. Layers can obviously exist with out frames but for the moment there's a one-to-one relationship.

I'll use your gif as a example, but do try to start from proper frames when you make them.

If you zoom in to 400% you'll see something like this:

Figure 2: Problem #1, duplicate frames.

If you have 4 frames (or whatever number) like that then just remove 3 of them and make the one remaining frame have 4 times the normal timing. In this particular instance there's not much movement in pixels, so even that big ass avatar example in fig.2 is only 42.11 KB, but it could be a lot worse. Don't bother with shallow details, things like eyes flickering are barely noticeable. Other details like mouth opening are arguably equally redundant for a gif but that's personal preference.

Figure 3: Problem #2, more pixels moving in the static part of the animation.

When you save it at 100px by 100px, people are not going to notice the small fluctuation in pixels, but the size will get effected. More movement, bigger the file size. When you lower colors some of these issues tend to go away since a lot of the pixel movement is basically color fluctuation from the video. But you don't want to sacrifice color for reasons like this.

There are quite the number of ways to get rid of this. The closer to the top the easier to pull of, the closer to the bottom the more extreme:

• Select all that junk, RightClick > Create Layer Via Copy. Now just drag the layer so it covers all the frames with the problem, and make sure its visible on them too (you can select frames and toggle visibility of layer to toggle it for all of them). This method is easy as pie.
• A alternative method is to just add Masks to the layers and hide stuff that way. You might want to do this for more sophisticated animations but its tedious if you're not experienced enough. Remember you can copy/paste masks around, fill via Alt+Backspace etc.
• Sometimes you just have something like a big anime character face. Since anime characters are more or less blobs of color you can just take a pencil or brush, and erase away with one solid color. Don't worry its easy to do a "good enough" job when working with things that are avatar size, even for complete newbies.
  
• A more extreme way is to just get rid of the background. Just add a white layer on top, then a white layer bellow. Basically as a foreground and background for the entire animation. Now add a Mask to the top layer and try to cover all the useless bits shared by all the layers. Now go to each layer and add a Mask and cover any remaining details by masking away (by hiding pixels you show though to the background layer). You can use black instead of white for the foreground/background or some other color, but try to use a solid color and not something sophisticated or this will become incredibly tedious. The thing here its easy (with some practice or experience) to quickly and sloppily mask away stuff. Again small size helps hide your sloppiness.
  
• The most extreme way is when you have to use the Clone Stamp tool to get it done. Ugh.
  

The transition is a Tween. Create a frame with the end layer at 100% transparency, then another with 0% and 100% on the first frame. Then create a Tween between them, all done.

When saving, you want to do the following, by priority:

• Keep as many colors as possible!
• Make sure Dither is set to Diffusion and is not 100%. Never!!
• Sacrifice some Diffusion to save space, up to around 50% (but depends), it helps a lot when it comes to keeping things look nice; such as gradients. More clear gradients you have, higher you want this.
• Apply anything from 10 to 30 loosy, more if you have to and can safely.
• Go back to photoshop and the animation and see if you can't squeeze some more out of it.
• Reduce colors as a last resort.

Also, always preview the timing in the browser! not photoshop. You can use photoshop to get an idea but don't bother with anything more then that. You'll find the button for preview in browser at the bottom of the Save for web... dialog.

[triskelion]

Hey guys, I have a quick question. When I export an image sequence in virtualdub, I try to open it in imageready(to add border) and when I view the optimize tab, it's all black/white/gray.

Same problem comes up when I export a .gif from vdub and try to add border.

Just wondering, is there any other way I can add a border without using Photoshop/Imageready?