Open Image Ready and bring up the PSD file you saved. Looks like PS isn't it? Now since you had everything un-visible, your first frame will be blank. Click on the first frame to highlight it, then make the color layer visible. Then click on the Duplicate current frame button, the one left to the trashcan button. This will create a new frame similar to the one highlighted (duplicate, duh). Click as many as you want. Highlight the first frame and make the first smiley layer visible.

Since Image Ready can do some image editing, you can do your finishing touches here. Like adding color to certain frames for mouths, hit effects, or items. When you edit a layer, all frames using that layer would get the effect. Like filling a white color on mouths. But I have noticed that changing the position of a graphic in a layer, it won't take effect on the other frames using that layer.

Now that you have your animated and colored smiley, just go to menu File -> Save Optimized As.. and save your GIF. You can also save the PSD file but it will save the frame information too. The transparent parts of the layers will automatically be the transparent parts of the GIF so you don't have to set the transparent color and mask your GIFs or whatever. Here's the end result: .

Just in case you need it, here's the final .PSD file. it's saved in Image Ready so the frame timings are saved too.

tutorial.psd

<< Previous