Table of Contents for
Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe Software Landscape

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe Software Landscape by Jennifer Harder Published by Apress, 2018
  1. Navigation
  2. Cover
  3. Front Matter
  4. Part I. Welcome to the Adobe Creative Cloud. Where Should You Begin?
  5. 1. Entering the Software Maze or Labyrinth
  6. Part II. Working with Photoshop to Create Web Graphics and Animations
  7. 2. Getting Started
  8. 3. Color Choices: CMYK, RGB, Grayscale, and Index
  9. 4. Saving or Exporting Your Files for the Web
  10. 5. Actions to Speed up File Conversion and Slicing Tools
  11. 6. Tools for Animation
  12. 7. Tools for Video
  13. 8. Other Miscellaneous Items in Photoshop That You Can Use for Web Design
  14. 9. Putting It into Practice with Photoshop CC
  15. Part III. Working with Illustrator to Create Web Graphics
  16. 10. Getting Started with Illustrator CC
  17. 11. Color Choices: CMYK, RGB, and Grayscale
  18. 12. Saving or Exporting Your Files for the Web
  19. 13. Actions to Speed up File Conversion and Slicing Tools
  20. 14. Tools for Animation and Video
  21. 15. Other Miscellaneous Items in Illustrator That You Can Use for Web Design
  22. 16. Putting It into Practice with Illustrator CC
  23. Part IV. Working with Animate to Create Animations, Movies, and HTML5 Canvas
  24. 17. Getting Started with Animate CC
  25. 18. Color Choices: RGB
  26. 19. Importing Your Artwork
  27. 20. Import Your Audio and Video
  28. 21. Working with the Timeline Panel
  29. 22. Exporting Your Files to the Web
  30. 23. Other Miscellaneous Items in Animate that You Can Use for Web Design
  31. 24. Putting It into Practice with Animate CC
  32. Part V. Working with Media Encoder to Create Audio and Video Files
  33. 25. Getting Started with Media Encoder
  34. 26. Working with Your RAW Video Files (AVI and MOV)
  35. 27. Working with Your RAW Video Files and Converting Them to Audio
  36. 28. Working with Your RAW Video Files and Converting Them to an Image Sequence
  37. 29. Putting It into Practice with Media Encoder CC
  38. Part VI. Working with Dreamweaver: Adding Images, Animations, and Multimedia to HTML5 Pages
  39. 30. Getting Started with Dreamweaver CC
  40. 31. Working with Images and Tags
  41. 32. Working with CSS
  42. 33. Working with Images for Mobile Web Design
  43. 34. What Is JavaScript?
  44. 35. Working with Bootstrap, Templates, Library Items, and the Assets Panel
  45. 36. Working with Video, Audio, and Animations
  46. 37. Additional Options to Apply Images in Dreamweaver
  47. 38. Final Testing, Getting Ready to Upload Your Site
  48. 39. Putting It into Practice with Dreamweaver CC
  49. Part VII. Further Dreamweaver Integration with Other Adobe Products for Websites
  50. 40. What Other Programs That Are Part of Adobe Creative Cloud Can I Use to Display My Graphics or Multimedia Online?
  51. Back Matter
© Jennifer Harder 2018
Jennifer HarderGraphics and Multimedia for the Web with Adobe Creative Cloudhttps://doi.org/10.1007/978-1-4842-3823-3_6

6. Tools for Animation

Jennifer Harder1 
(1)
Delta, BC, Canada
 

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.

Note

This chapter does not have any actual projects; however, you can use the files in the Chapter 6 folder to practice opening and viewing for this lesson. They are at https://github.com/Apress/graphics-multimedia-web-adobe-creative-cloud .

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).
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig1_HTML.jpg
Figure 6-1

Layers in the Layers panel can be used to create a GIF animation that appears to transform in size, position, opacity, and color effects

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig2_HTML.jpg
Figure 6-2

The Timeline panel in Create Frame animation mode before the setting has been clicked

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig3a_HTML.jpg../images/466782_1_En_6_Chapter/466782_1_En_6_Fig3b_HTML.jpg
Figure 6-3

A preview of the first frame of the animation in the Timeline panel based on which layers are selected

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig4_HTML.jpg
Figure 6-4

Menu options for the Frame Animation Timeline panel

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig5_HTML.jpg
Figure 6-5

Duplicate Selected Frames icon

Once you have two frames, your play features become accessible. Refer to Figure 6-6.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig6_HTML.jpg
Figure 6-6

When you add a new frame, it is a duplicate of the first frame

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig7_HTML.jpg
Figure 6-7

When a layer eye is turned on or off in the Layers panel, this alters the selected frame

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig8_HTML.jpg
Figure 6-8

Creating repeating frames in the Timeline panel

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig9_HTML.jpg
Figure 6-9

Choose Delete Animation if you want to set the animation back to the first frame

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig10_HTML.jpg
Figure 6-10

All layers are added as frames to the animation

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig11a_HTML.jpg../images/466782_1_En_6_Chapter/466782_1_En_6_Fig11b_HTML.jpg
Figure 6-11

Notice how the layers and frames have been organized into a timeline animation with four frames

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.

../images/466782_1_En_6_Chapter/466782_1_En_6_Fig12a_HTML.jpg../images/466782_1_En_6_Chapter/466782_1_En_6_Fig12b_HTML.jpg
Figure 6-12

Objects on layers can be moved to a new position and not effect a previous frame

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig13a_HTML.jpg../images/466782_1_En_6_Chapter/466782_1_En_6_Fig13b_HTML.jpg
Figure 6-13

An effect or layer style like “Pattern Overlay” could be added to a layer in one frame, but not be present in a previous frame

Likewise, layer fill or adjustment layers could be turned on or off in sequence, as seen in Figure 6-14.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig14_HTML.jpg
Figure 6-14

Add a layer fill or adjustment layer to alter color in a specific frame

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).
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig15_HTML.jpg
Figure 6-15

The play and preview features of the animation in the Timeline panel

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig16_HTML.jpg
Figure 6-16

The play icon turns into a stop icon

You can also choose the number of times that you want the animation to run; see the drop-down menu in Figure 6-17.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig17_HTML.jpg
Figure 6-17

Choose how long you want the animation to play

  • 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.

../images/466782_1_En_6_Chapter/466782_1_En_6_Fig18_HTML.jpg
Figure 6-18

Choose the number of times you want the animation to play

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig19_HTML.jpg
Figure 6-19

Set custom durations of time for each frame

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig20_HTML.jpg
Figure 6-20

Reverse the order of the frames

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig21_HTML.jpg
Figure 6-21

Match layers so they have similar effects

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).

../images/466782_1_En_6_Chapter/466782_1_En_6_Fig22_HTML.jpg
Figure 6-22

Flattening frames into layers

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig23_HTML.jpg
Figure 6-23

Select the two layers that you want to create a transition tween

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig24_HTML.jpg
Figure 6-24

Select the two layers that you want to create a transition tween

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig25_HTML.jpg
Figure 6-25

The first frame tweens with the last

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig26_HTML.jpg
Figure 6-26

A GIF animation with several tween layers

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig27_HTML.jpg
Figure 6-27

Optimize the animation by bounding box or by removing redundant pixels

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.
../images/466782_1_En_6_Chapter/466782_1_En_6_Fig28_HTML.jpg
Figure 6-28

You can now review and test the animation one more time before exporting it

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.

For an interesting tutorial on how to create a flowing water GIF animation, visit https://helpx.adobe.com/photoshop/how-to/make-animated-gif.html .

Note

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.