NJCUJanet Pihlblad, Instructor

jpihlblad@njcu.edu

Demonstration: Animation, Using Photoshop

Creating an Animated GIF in Photoshop CC

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 auto-matically, 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.