Demonstration: Animation, Using Photoshop
Creating an Animated GIF in Photoshop CC
NJCU
Janet Pihlblad, Instructor
[email protected]
1. First create a series of images that you want to make into an animation. These should be a series of
sequential images you collaged together, in Photoshop.
2. For the combined/collaged images, start with
File > New Document:
550 pixels high by 800 pixels wide, 72 ppi resolution. This is a good size for a computer screen.,
and also a good size to place onto a website.
3. Create a new folder in which to save the sequential images, which will become the frames.
4. You can make one, many-layered Master Photoshop file. (Think background/foreground).
5. Then move the elements slightly, and save each one as a different, flattened file with a number.
Save to the new folder. They must be sequential images which will work together to appear to be
in motion.
6. Number them 01 through 99, or 001 through 999, depending on how many images you plan to
have. The extra zeros help the computer keep them in sequence (instead of seeing 11 come after 1,
and before 2).
7. Once all your sequential images are gathered into one
folder, not including the layered Photoshop master
document, you are ready to proceed.
8. Click File > Scripts > Load Files into Stack.
When the Load Layers window pops up, click Browse
to select & then open your image files, and then click OK.
Leave other boxes unchecked.
9. This should import the files you selected as individual
layers in one document. You can reverse the order automatically, later, if necessary. At this point, you could
renumber them, or make manual changes to the stacking
order.
10. Now open the Timeline panel (Window > Timeline ).
11. In the middle of the panel, you will see a button with a
drop-down menu, allowing you to choose either Create Video Timeline or Create Frame
Animation.
You want to choose & then click the Create Frame
Animation button. It doesn’t look like a button, but it is, just
click on the words and watch what happens.
12. In the Animation/Timeline panel fly-out menu (top right
corner of the panel), click Make Frames From Layers. Now
your layers will become frames in an animation.
You can also click Reverse Frames (they usually load
backward).
13. Play your animation by clicking the play-arrow at the bottom right of the Timeline Panel.
You can also play it by clicking the spacebar.
If you do not see thumbnail icons of all your layers in the Animation/Timeline panel, you might be in
the Video Timeline. If so, click the icon in the lower left corner (the hover text will say “Convert to Frame
Animation”.
Change the duration: Now you could change the duration of individual frames, or groups of
fames.
•
Select a frame by clicking on the frame, or hold down on the shift key while selecting multiple
frames.
•
Click the drop down button just underneath a frame or group of frames.
•
This will bring up a menu where you can set a duration.
•
If all frames are selected, all frames will be set to the same time. You can create slow-motion this
way.
Do You Want to Make it Loop?
•
At the bottom left of the Timeline Panel, you will see the word, “Once” Here is a drop-down button
which will change how many times your animation will loop; either a fixed number of times, or
forever. You chose which is right for your animation.
Save The Animation
14. Once the frame order and timing as been set up, it is time to save the animation.
Click File > Save for Web & Devices, make sure the file format is set to GIF, change any other
options if needed, and save.
15. Make sure you go to File > Save for Web & Devices to save
the GIF. This opens up a large dialog box. Choose Presets:
GIF 32 Dither.
Steps to Save:
1. Save for Web >
2. Save >
3. In the Format drop-down choose Images Only
4. Save to its own folder, (GIF_ Final).
The file should play when you drag it over a browser icon in the
dock. Or chooce Safari > File > Open > Browse for your GIF file.