Tài iệu Photoshop cs5 by Dayley part 121 ppsx

l Make Frames from Layers: This option is available when the animation contains only one frame or image.. l Flatten Frames into Layers: Create an individual layer for each selected fr

Animation (Frames) panel menu

Just in case you hadn’t noticed yet, the Animation (Frames) panel menu lets you know that you are not working with the same tools as the Animation (Timeline) panel As shown in Figure 28.5, the menus not only look different, but they have completely different options

FIGURE 28.5

Comparing the Animation (Frames) panel menu with the Animation (Timeline) panel menu

These differences highlight the features of each panel and reasons why each panel can perform equally important but different functions I define the features found on the Animation (Frames) panel here Many of these options are self-explanatory, but a few may be new concepts If you find that a short definition isn’t enough, don’t worry, You’ll see more on these features later on in this chapter:

l New Frame: This creates a frame at the end of the animation This frame is a duplicate of

the last frame in the animation

l Delete Frame: This deletes any selected frames.

l Delete Animation: This deletes all frames except the first, leaving an image rather than an

animation

l Copy Frame: This copies selected frames.

l Paste Frame: This pastes copied frames You can choose four options for pasting a frame:

l Replace Frames: This replaces all selected frames and their accompanying layers with

the copied frames

l Paste over selection: This pastes the copied frames over the selected frames, creating

two levels of layers—the layers in view, belonging to the copied frames, and the layers that are hidden, belonging to the selected frames

l Paste before selection: This pastes the copied frames before the first selected frame.

l Paste after selection: This pastes the copied frames after the last selected frame.

l Link Added Layers: This automatically links layers in the pasted frame It is a good

idea to link the layers of frames in the animation so that you can more easily make adjustments during animation editing

l Select All Frames: This selects all frames within the animation.

l Go To: This selects the frame specified—next, previous, first, or last.

l Tween: This performs the same function as the tween icon in the panel It creates a

specified number of frames in between two selected frames to bridge the gap in their differences

l Reverse Frames: This reverses the order of any selected frames If only one frame is

selected, the order of the entire animation is reversed

l Optimize Animation: You can reduce the file size of an animation by optimizing the

frames to include only areas or pixels that change from frame to frame You have two options for optimization: Bounding Box crops each frame to an area around the changing pixel, and Redundant Pixel Removal makes any unchanged pixels transparent Both of these options can be enabled when optimizing the animation

l Make Frames from Layers: This option is available when the animation contains only

one frame or image Select Make Frames from Layers, and all the layers contained in the image become an individual frame

l Flatten Frames into Layers: Create an individual layer for each selected frame in the

Layers panel by selecting this option

l Match Layer Across Frames: This option allows you to align layers according to the

parameter of position, visibility, and style

l Create New Layer for Each New Frame: This creates a new layer in the Layers panel for

every frame created in the Animation (Frames) panel

l New Layers Visible in All Frames: When this option is checked, the new layers that you

create on any frame are visible in all the frames Uncheck this if you want to add a layer to

a selected number of frames

l Convert to Timeline: Just like the Convert to Timeline Animation icon on the Animation

panel, choosing this option converts your Animation (Frames) panel to the Animation (Timeline) panel

l Panel Options…: This option allows you to set a thumbnail size for the frames in your

animation

Layers panel features

When you are using the Animation (Frames) panel, you not only see differences in the Animation panel and the Panel menu, you see differences in the Layers panel as well Added to the Layers panel is an array of tools that allow you to unify changes made to the layers displayed in the Layers panel The properties that can be unified are the same properties that can be animated By default, making changes to these properties takes place only on the selected frame By unifying these properties, changes can be made to all the frames at once, similar to changing an entire layer across the timeline Figure 28.6 shows the icons that are used for this purpose

FIGURE 28.6

The Unify icons in the Layers panel

Unify layer visibility Unify layer position Unify layer style

l Unify layer position: Click the Unify layer position icon to make changes in the position

of a layer throughout the animation Deselecting this option allows you to make changes

in the position of the selected image only, leaving the rest as they were

l Unify layer visibility: When this option is selected, changing the visibility of a layer will

change the visibility in all frames; otherwise only the selected frame(s) will be changed

l Unify layer style: Create a layer style across all the frames in the animation by selecting

this option

l Propagate Frame 1: When this box is checked, all the changes made in the first frame of

the animation also are made to subsequent frames in the animation This is an easy way to make the changes that can be animated in other frames and still be able to change the position, opacity, and style of all the frames at once

Creating Tweened Frame Animations

Now that I’ve shown you all the basics of the Animation (Frames) panel, I show you the steps needed to create a frame-based animation In this section, I show you how to create an animation using the tweening process, which essentially produces the same results as using keyframes in the Animation (Timeline) panel

Opening an image to animate

The first step is to open or create a file in which you want to animate at least one of three properties:

position, opacity, or effects An image that is composed of several layers and styles can be much more interesting and fun to animate than simpler images Figure 28.7 shows an image created by using a composite of a photo, a 3D object, and several layer styles to show a gateway to another world I use this image to animate the gateway opening

FIGURE 28.7

A mysterious gateway…

After opening a file, choose Window ➪ Animation if you don’t already have the Animation panel open The Animation panel opens by default to the Animation (Timeline) panel Use the Convert

to Frame Animation icon at the bottom-right corner of the panel to convert the panel to Animation (Frames) You also can choose Convert to Frame Animation from the Panel menu

Your image has become the first frame in your new frame animation For simple animations, you may want take a moment to change the frame rate to a smaller speed, such as 15 fps, by clicking the arrow at the bottom of the frame thumbnail This makes the file smaller, but less smooth in transitions Remember that you also can change the size of the thumbnails by opening the Panel menu and choosing Panel Options

Creating keyframes

Now that you’ve opened a document and the animation panel, you need to create keyframes I know, you’re thinking that we left keyframes behind in the Animation (Timeline) panel It’s true that the Animation (Timeline) panel allowed you to create keyframe icons that let you visualize where the changes were being made It’s also true that a keyframe is defined as a frame that determines a change in the animation process In Frame Animation mode, we can actually visualize our keyframes themselves, because they each have a frame thumbnail in the panel The downside

is that after we’ve tweened those keyframes, nothing distinguishes them from any other frame in the panel

To create a keyframe, you need to determine what you plan to animate and how you want that animation to proceed Is the image you opened the first, middle, or last of your animation? Before you create a new frame, change anything you need to in the first image to make it look like you want your first frame to look

I want to make two new keyframes for my other-world gateway First, I want to have the gateway appear, and then I want the gateway to activate Because I start with a view of just the photo, I change the opacity of the layer containing the arch and the layer style to zero, as shown in Figure 28.8

FIGURE 28.8

The first keyframe

Now you are ready to create a new frame Click the Duplicates Selected Frames icon at the bottom

of the Animation (Frames) panel A new frame is created that has the exact same features of the first frame—same frame rate and same image You need to make changes to this second frame to make it your second keyframe

In my example, I turn the opacity of the gate up to 100 percent to create my second keyframe The gate is in Dissolve Blend mode After tweening these two frames, my gate dissolves into being over several frames, shown in Figure 28.9 I want my gate to dissolve in more slowly than I want it to activate, so I change the frame rate of my second keyframe to one-half second, which is half the rate of the first keyframe

FIGURE 28.9

The second keyframe

You can continue to create keyframes just like this—create a new frame and make changes to it to create one more step in your animation I have one more keyframe to create in my animation, so I create another frame and turn the opacity of the layer style up to 100 percent in that layer Now I have the same image that I brought in, creating three distinct keyframes, as shown in Figure 28.10

FIGURE 28.10

I created three distinct keyframes

Tweening keyframes

Now that you’ve created the keyframes, it’s time to create an animation by tweening them Select the first keyframe, and click the tween icon at the bottom of the animation panel The Tween dialog box opens, allowing you to determine the tween settings Tween to the next frame, and enter the number of frames to add to the animation If you made changes to more than one layer, tween All Layers; if not, choose Selected Layers Deselect any properties that are not being tweened

With my first frame selected, I add five frames to tween it to the next frame The only parameter I changed between the first frame and the second is the opacity of the gateway, so I choose Selected Layers and Opacity, as shown in Figure 28.11 After I add the frames between the first and second frame, I select the second keyframe and repeat the process The result is 13 frames, creating the animation of the appearing gateway, as shown in Figure 28.12

FIGURE 28.11

I customized the Tween dialog box to fit my animation properties

FIGURE 28.12

By tweening three keyframes, I created a complete animation

As you create more frames, you start to see the limitations of frame animation If you created an animation at the video standard, it would be 30 frames per second of animation My gateway animation is 9.5 seconds long; it is very jerky, and with the relatively miniscule number of 13 frames, it is already unwieldy and hard to manage You can imagine what it would be like if I had tweened it out to 300 frames to create a smooth animation!

So even though the Animation (Frames) panel has the capability of animating almost anything that the Animation (Timeline) panel can, its feasibility is limited to small animated GIFs

On the Web Site

The project file used in Figures 28.7 through 28.12 is available as Figure 28-12 on the Web site as a PSD file

You can play the animation and try adding your own background and adjusting the animation n

Creating a Frame-by-Frame Animation

When you want to create an animation using the Paint tools in Photoshop, you need to animate it frame by frame, using a new layer for every frame so you can add whatever paint or effects you want to each frame without affecting any of the other frames

In this section, I show you how to use the Photoshop Paint tools to build an animation frame by frame You can do this in two different ways: You can create a layered image, containing all the elements needed for an animation and then turn it into an animation, or you can simply start building the animation right in the Animation (Frames) panel I show you how to create an animation both ways

Creating an animation from a layered image

When you create an animation from a layered image, you need to first create an image with several layers that eventually become frames in your animation You can create an image in Photoshop that contains all the layers needed to turn it into an animation in just a few simple steps:

On the Web Site

You should try to do this activity with your own animation, just to get the hang of it If you want to look at my

final project, however, it is available as Figure 28-16 on the Web site as a PSD file n

1 Open a new document in Photoshop.

2 Fill the background layer however you want, or leave it blank.

3 Click the Create A New Layer icon in the Layers panel to create a new layer.

4 In the new layer, create any part of the animation that will be present in every

frame, as shown in Figure 28.13.

5 Create another layer

In this layer, you create what is going to be the first real frame of your animation This layer, combined with the first two layers, should make a complete image

6 Continue creating new layers, changing each layer to create movement from the

last

Toggle your views of previous layers on and off when helpful When you are finished,

you should have a file that contains several layers, as shown in Figure 28.14

FIGURE 28.13

To animate a flower opening, I create a stem that is consistent throughout the animation

FIGURE 28.14

My animated flower contains six individual layers When all the layers are visible, it looks very jumbled

8 Choose Window ➪ Animation to open the animation panel.

9 Click the Frame animation icon at the base of the Animation (Timeline) panel to

convert it to the Animation (Frames) panel.

10 From the Animation (Frames) panel menu, choose Make Frames from Layers

Each layer of your project becomes a separate frame inside the animation, as shown in Figure 28.15

FIGURE 28.15

Before and after making frames from layers

11 With the first frame selected (the background layer) and the Propagate Frame 1

selected in the Layers panel, turn the visibility of the second frame on

This should make the second layer visible in all other layers, as shown in Figure 28.16

FIGURE 28.16

After turning the visibility of the second layer on with the Propagate Frame option selected, the stem is now visible throughout all the layers

12 With the first frame selected, choose Match Layer Across Frames from the

Animation (Frames) panel menu

This opens a dialog box that asks you which properties you want to match Choose one

or all of the properties, and click OK Now you should have a solid background in each frame

13 Now that each frame is exactly how it should look, you can discard frames 1 and 2

Click the Delete icon twice to accomplish this You should be left with the full frames shown in Figure 28.17 You need to click the Yes button after clicking the delete icon

14 From the Animation (Frames) panel menu, choose Select All Frames.

15 Click the arrow in the bottom-right corner of the first frame, and change the frame delay time to 1 frame per second

Now your animation is ready to preview