common object example


Animated gif Slideshow in Photoshop

    ●   Create an animated .gif of all your work in this class and post it to your portfolio.   You will be graded on the number of slides you create - a MINIMUM of 4.  

    ●   You will also be graded on completing the loop - in other words, your animation should tween back to the beginning slide so you can't tell where your animation begins or ends.

    ●   Your animation should also PAUSE on the important slides, allowing the viewer to see the images between the "tweens."Create an animated .gif of all your work in this class and post it to your portfolio.  

Learn About:

Crop ToolAnimated .gifFrames

  •   This tutorial is often used as a final exam task.

Other People's Work:

Here are examples of work inspired by this tutorial.


Step #1: Open your Project in PhotoShop ~

Open your Project in PhotoShop




… (Remember: all these tutorials are intended to be
applied to YOUR PROJECT) …

Step #2: Image Size ~

Then go to: Image > Image Size

… lower the size to approximately 300 or 400 pixels high …

image size

… and set the resolution to 72 pixels per inch.


Step #6: Animation ~

Go to: Window > Timeline and the Timeline window appears and click "Create Frame Animation" (if necessary) …

With Frame 1 of the animation selected, turn off the visibility of all your layers except the last one by clicking on the of each layer …

Step #7: Add New Frames ~

Click the little icon at the bottom of the Animation panel to add a new frame.

duplicate selected frames

With the Duplicate Frame selected …

duplicate frame

… turn the visibility ON in the next layer of your Photoshop document.

layer vis

Step #8: Select Both Frames ~

Select both frames by holding shift-key and clicking on them …

Step #9: Frame Delay ~

Then click the seconds at the bottom of a frame …

… and set the frame delay to .1 or .2 seconds.

Step #10: Forever ~

Set the number of times your animation plays, click here …

select looping options

… and set it to Forever.



To speed up or slow down your animation, select all the frames by holding shift-key and clicking on the first and last frames.


You probably want your animation to play quickly …

frame delay time


Step #11: Tweens ~

With both frames still selected, click on the Tween icon …

tweens animation icon

… set the Frames to Add number to 10 and hit OK.


Step #12: Keep Going ~

With the last frame of your animation still selected, hit the Duplicate selected frames button again …

… then go to Layers and turn the visibility ON of the next layer and OFF for all the others.

Tween that frame with the frame before it the same way you did before:

Then add ANOTHER frame AND another Layer …




Make a tween between those to frames …




Keep going! Add tweens and frames for all your layers …




You may end up with 100 frames or more…


Step #13: Slow the 1st Frame ~

Click on the 1st frame …

… and set it for .5 second delay.

Step #14: Slow the 12th Frame ~

Click frame 12 …

… and set that frame to .5 seconds.

Step #13: Save for Web …

When you are done with all your layers, go to: File > Save for Web … and save your work as a .gif …


Check the file size in the lower left hand corner. Try to keep below 2 megabytes if you can.

Animated gifs are supposed to be small - that's their purpose. To make your file smaller, shrink the pixel size …

Step #14: Upload to your Portfolio …

Attach your animated gif to your portfolio.

Last Step: The Link ~

Navigate to the EXACT PAGE in your browser where your files and reflections are posted …

… copy the URL address of your page …

    ●   Then paste the URL address of THE SPECIFIC PAGE of your Portfolio so that when the link is clicked, it takes you directly to the example on your website.

Remember: Paste the address into your reply so when the link is clicked it goes directly to the page that contains your evidence.

Attach your .psd File Too ~

Also attach your completed .psd file too!