Photoshop tutorial: making an animated photo
April 21st, 2007
On popular demand a short tutorial on how to make a photo series into one animated photo (gif) with Photoshop and ImageReady.
Make a series of pictures with your camera on a tripod so that all the pictures are taken from the same spot at the same angle. Put your lens in Manual Focus so the focal point remains the same, too.
Open the whole series in Photoshop. Resize them all to your desired resolution. Remember, if you publish them on the web, the file size of your animated picture will be about the size of all the pictures that are in it combined.
Focus on the first picture and drag it to the side of your screen, away from the other pictures.

Focus on the second picture (you can find all your pictures under the window-menu) and drag it on top of the first one. Make sure it aligns (use ’snap to grid’ under the view menu). Your first picture will now have two layers.

Close the second picture and focus on the third one. Drag it on top of the first one and close it. Do the same with all your pictures.
You will now have only one picture that contains all the pictures in different layers. Open it in ImageReady (from the file menu).

In ImageReady open the Animation palette (from the window menu).
In the animation palette, under the thumbnail, choose your delay between the pictures and choose if you want your animation to play once or forever.

In the layer palette uncheck all the ‘eyes’ except for the background layer. This will make only the first picture visible.

In the animation palette click ‘duplicate current frame’ and make only the second picture visible in the layer palette (uncheck the background layer and check layer one).


Duplicate the second frame and make only layer two visible.
Continue the same with all your layers.

Now you can see the result by pressing play in the animation palette.
Under the file menu click ‘Save optimized as…’

Done!
Entry Filed under: Photos
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed