Photoshop: Animate a series of images

Create the artwork in Photoshop
Download the Muybridge photograph The Horse in Motion, 1878 by right-clicking (PC) or Control-clicking (MAC) on the thumbnail and selecting Save Target As from the context menu. Open the image in Photoshop. This is your multiple sequence source file.
	Eadweard Muybridge The Horse in Motion, 1878	Follow my animation web links to find out more about Muybridge, one of the pioneers of photography and the moving image.
Click on the Rectangular Marquee tool and drag a rectangular selection around the first horse. Choose Edit > Copy (Control + C), File > New, and Edit > Paste (Control + V) to create a single image. Save As muyb_horse.psd. Choose Photoshop (PSD, PDD) as the file type because the animation will be created from a layered file.

Click on the source file to reactivate it and with the Rectangular Marquee tool still selected, carefully drag the selection marquee onto the second horse. Again choose Edit > Copy (Control + C), but this time click on your new file muyb_horse.psd before selecting Edit > Paste (Control + V). The second horse is added as a new layer.
Repeat step 3 until all 12 horse images have been transferred. Close The Horse in Motion source file.

You should have a stack of 12 layers plus the white background layer on the Layer palette. As the background is not needed, drag it to the Delete Layer bin.

Top

	Create the animation
	Open ImageReady by clicking on the Jump to ImageReady icon at the bottom of the Tool Palette or use the keyboard shortcut Control+Shift+M.
	Working with both the Animation and Layers Palettes, click on the first frame of the animation.

	With the new frame selected go to the Layers Palette and toggle off all the visibility icons except for Layer 1. Click on the Duplicate frame icon to create the next frame in the animation and toggle off the visibility for Layer 1, but click on the icon for Layer 2 to make that visible.

	Continue duplicating frames and toggling on visibility for the corresponding layer until you have a separate frame for all 12 layers. The default timing setting is 0 sec or No delay. If you want to change any of the timings, click on the small black arrow below an individual frame and make a selection from the drop down menu.

	Click Play on the Animation Palette to play the animation.

	Set the animation to play once only, continuously or for a fixed number of repetitions using the Loop Count option: Once/Forever/ Other > enter the number of plays. Top
	Optimize and save
	Optimize the animation to reduce file size/download times. If the Optimize palette is not visible, select it from the Window menu. In the preview window, choose either the 2-Up or 4-Up tab, click on a version of your animation and try different options on the Optimize palette. You can compare how the different settings affect image quality and file size. With my selection set at GIF, Perceptual, No Dither, Colours > 16, Dither 0%, the file size was compressed from 190 KB to 33.26 KB, taking 13 seconds to download at 28.8 KB per second.

	You can check what your animation will look like in a browser: choose File > Preview In and select your preferred browser from the menu.
	Finally save your animation. Select the optimised version you prefer and on the File menu choose Save Optimised As. Animations must be saved as GIF files, as JPEGs flatten files to the first frame. Top
	Variations
	Multiple image animations can be created from any sequence of images that have been cropped or saved with the same dimensions. Try animating all the faces in a class group. In the same way I've animated a series of Michael Jackson pictures from the Internet, illustrating his facial transformation (not shown). In the animation below the same technique has been applied to a series of birthday photos from day one to eighteenth birthday.

	You can also create a sequence of drawn images, either on the computer in Photoshop, or using traditional drawing tools and scanning the drawings. The hippy was drawn in Photoshop, duplicating layers and erasing and changing elements on each, rather than re-drawing every time.

	Even sequences of disparate images or figures can create an effective animation, suggesting dreams or surreal transformations.

Top
© RKM 2002 - 2007
Home - Animation - Video - Projects - Image Manipulation - IWBs - Interactive - Presentations - Multimedia Tutorials - Other Tutorials - Art Links - Gallery - About