This chapter focuses on one specific file format: the GIF animation. As you saw in Chapters 4 and 5, GIF files are static images used for illustrations or logos; however, unlike the other image formats you have read about so far, they can also be used to create small animations within Photoshop CC and used on a website in several diverse ways, which you explore in Part 6.
Let’s look at how to create a GIF animation. Animations in Photoshop, for the most part, appear like a collection of layers that are in a sequence or order. Each layer is void of movement until they are added to frames that are programed to move in a sequence, one after the other. Until then, there is no animation (see Figure 6-1).
You don’t have to go to animation school to become an animator in Photoshop CC. Creating a basic animation just requires a bit of drawing skill, imagination, and creativity. A GIF animation also can take up very little space or can be very subtle, such as appearing somewhere behind text in the background of a website. Let’s look at ways that you can accomplish a GIF animation.
GIF (animated) (.gif)
With your Layers panel and Photoshop tools, you may have designed backgrounds, part of a banner as an advertisement, or a procedural animation for a client’s website. Once you have the layers and parts of your design to your liking, you can add movement. At this point, you might wonder if you need to export the layers and create the animation in a program like Adobe Animate CC (formerly Flash). Not necessarily. If you are comfortable designing animations with Animate CC, do it that way. You will look at that option in Part 4; however, if you are new to Animate CC, you can create a very simple animation to suit your purposes without leaving Photoshop CC.
For now, let’s locate the Timeline panel in the main menu.
The Timeline Panel
The Timeline panel is a long horizontal panel that allows you to preview all your frames in an animation. It has two options in its drop-down button: Create Frame Animation and Create Video Timeline (see Chapter 7). You can choose which one you want to use. Let’s look at Create Frame Animation first. Refer to Figure 6-2.
If the Timeline panel appears at the bottom of the page, you can drag it out by its upper tab and place it somewhere else on the screen, so that it does not block your image.
Note
Until the Create Frame Animation button is clicked, both panels’ menu options appear for the video and frame; once the button is clicked, only those options for the frame or video are available.
Click the Create Frame Animation button to start your GIF animation.
The Timeline panel changes and gives you one starting frame to begin with. The layers that you have turned on or off in the Layers panel dictate the way that the first frame appears. Refer to the GIF animation start file and Figure 6-3.
You’ll also notice that the Timeline panel’s submenu has now changed to reflect the fact that you are creating a frame animation. Refer to Figure 6-4.
Adding a Frame
An animation cannot take place unless you create another frame. This is done either via the menu (New Frame), or on the bottom edge of the panel, click the Duplicate Selected Frames icon. Refer to Figure 6-5.
Once you have two frames, your play features become accessible. Refer to Figure 6-6.
To alter the second frame, you need to change something in the Layers panel while the second frame is selected. You can do this by turning on or off a layer eye, as seen in Figure 6-7.
When you have more than one frame selected (using the Shift key), you can use this icon to create the same number of frames of the same kind. For example, if you have three frames in a sequence, you can select them all and press the Duplicate Selected Frames icon and the three frames will be duplicated. This brings you to a total of six frames, as seen in Figure 6-8.
A frame can be deleted by selecting it, and then choosing Delete Frames from the menu or by clicking the Trash icon (delete selected frames) in the Timeline panel. If you don’t like your entire animation, you can choose Delete Animation from the menu, which resets you back to the first frame. Refer to Figures 6-3 and 6-9.
Adding, Altering, and Removing Frames
Assuming that you currently have only one frame in your animation, you now want to alter the second frame. Using the Layers panel, you can do one of several things.
If you have already set up movement with the layers, you can choose from the Make Frames From Layers menu. This adds all the layers as separate frames into the timeline and overrides the current frame, as seen in Figure 6-10.
This may not be what you want. You may need to delete a few frames or turn off a few layer eyes in each frame to get the desired result.
Choose Layers and turn them on or off while a frame is selected, and then move to the next frame and do the same thing. Refer to Figure 6-11.
Note
If required for your animation, while on a Layer using the Move Tool found in tools panel, Nudge with your keyboard’s arrow keys or move the object around while the tool is selected on the Layer for a specific frame. This alters the position of a shape on a layer for that frame, but not for another frame in the sequence, as seen in Figure 6-12. Clicking back to a previous frame, the shape will be back in its original position on the layer.
Notice that I added a fifth frame to show how the object moved on the layer. If I select frame 4, the object moves back to its original location on the layer. For now, I will remove frame 5 by clicking the Trash icon and returning it to the way it appeared in Figure 6-11.
Add Layer Style Effects and Turn Them On or Off in the Frame Sequence
Optionally, frame 5 could have effects(fx) or layer styles added to a layer while in frame 4 No effects would appear or they would be turn off in the layer panel. Refer to Figure 6-13 if you want to add this option to your animation.
Likewise, layer fill or adjustment layers could be turned on or off in sequence, as seen in Figure 6-14.
At this point, you may want to preview or play your GIF animation. Click the play animation arrow to see how it runs (see Figure 6-15).
The arrows on the left move you back to the first frame or previous frame, and the arrow on the right moves to the next frame.
Click the square icon to stop the animation. Refer to Figure 6-16.
You can also choose the number of times that you want the animation to run; see the drop-down menu in Figure 6-17.
Once: The default; the animation plays one time.
3 times: The animation plays three times.
Forever: The animation never stops.
Other: You can set the number of times that you want the animation to play, as seen in Figure 6-18.
For each frame, you can also set the duration with the little down arrow or leave it at the default time of 0 seconds. Refer to Figure 6-19.
If you want your animation to play in reverse order, select all or some frames, and from the Timeline panel, choose Reverse frames. This places the frames in reverse order in the Timeline panel, as seen in Figure 6-20.
To undo this right away, choose Edit ➤ Undo Reverse Frames.
To make frames match each other, choose Match Layer. Here you can choose how you want the layers to match to give them a similar look in their layer’s position, visibility, and style, as seen in Figure 6-21. You can check or uncheck the areas you want to affect.
Note
If you want to convert any frames into actual layers, from the Timeline panel’s menu, choose Flatten Frames into Layers. This adds those frames to the Layers panel and is a quick way to keep a setting in an animation (see Figure 6-22).
Tweening Layers in the Timeline
When you played the animation seen in Figure 6-15, it was a bit choppy. How can you make a smoother transition between the layers? In Adobe Animate CC, there is an option called tweening, which allows you to create additional transitory frames that give a smoother appearance of gradual change. The change might involve movement, opacity, or various effects. Select the frames that you want to tween, as seen in Figure 6-23.
Choose Tween from the Timeline menu, or choose the Tween Animation Frames icon from the panel, which creates the tween. Figure 6-24 shows the dialog box.
Different types of tween effects can be accomplished by selecting one, two, or all frames at once. If you select two frames, for example, you can enter the number of frames you want to transition between them. When one frame is selected, you have access to Tween With: First Frame, Next Frame, Previous Frame, or Last Frame. This makes a smooth transition if you are planning to do some looping in the timeline of the GIF animation. For example, the last frame blends into the first when you tween the last frame. Refer to Figure 6-25.
For layers, you can choose the tween to happen on all layers or on selected layers.
If you have selected all the parameters, Photoshop will adjust for all of them or only the ones being used, and reflect the selected frames.
For a smoother appearance, continue to tween frames with choppy transitions before you export. You can also continue to alter the tween frames with the layers for an even smoother appearance. You can see my final example in this chapter’s GIF Animation folder, which may look slightly different from Figure 6-26.
Once you have tested your animation and it plays to your liking, make sure that you save the PSD file that you created it, in case you need to return to it or alter it later. Note that you can further optimize the animation using this option, but be aware that it may alter the quality of the image, so make sure to run a test on a copy first. Refer to Figure 6-27.
Export Animated GIF
Now it’s time to export. Go to File ➤ Export ➤ Save for Web (Legacy).
The Save for Web dialog box automatically recognizes that you are creating a GIF animation, because now the animation portion of the box is editable, as seen in Figure 6-28.
At this point in the dialog box as you did earlier in Chapter 4 with your static GIF you can spend time adjusting the quality of the file.
In the right column the bottom of the Animation area allows you to preview the animation and confirm the looping options. When done, click the Save button to save the GIF with the format of image only as you did in Chapter 4 with static GIFs with an image only format. When the file is saved it will be a single file containing the animation frames.
A GIF animation does not contain audio. You need to create a video timeline if you want sound in your animation. You look at video with audio in the next chapter.
Summary
This chapter explored how to create a simple GIF animation that can be placed on a webpage. These types of animations can be used as background, behind text, or as part of the text, such as a bullet on a webpage. While there are a lot of creative things that you can do with GIF animations, they unfortunately don’t contain audio, and their quality is not always the best for photos. You will look at how to create a video with audio in the next chapter.