Turning Photoshop Layers into Frames

If you create an animation using different layers in Photoshop, such as a distorted or "Liquified" object, then there's a simple way to convert each layer into a single frame of animation. You might choose to create an animation in Photoshop because some tools and brushes are not readily available in ImageReady (Figure 1.1).

A

0

La^ri ' OiiiMii ■I'j'.h: V

F3

No

ral : ' Osatitv

Lx

FBI

Il®

_1

T—

^ j Layer Itoa* 12

o-

r

^P Lavs r 1 CD 0<t 11

o-

S>

^^ Layer 1 copy 10

o-

j—

^ j Law 1 «bsv 9

O"

r

jj) j Layer 1 co ay £

r |

| Lwr 1 conT

A

ra, . ,

o. a: B. J J

Several layers created for an animation sequence

Figure 1.1

Several layers created for an animation sequence a

After you jump from Photoshop to ImageReady, select the Make Frames From Layers option from the Animation palette menu. This will insert the background layer as Frame 1 and the subsequent layers as frames in order of layer hierarchy (see Figure 1.2). Because in most cases you won't want the background layer to be inserted as a frame in the animation, simply delete Frame 1 from the Animation palette. This will eliminate the background color/texture behind the animated pieces in the example animation. Choose Select All Frames from the Animation palette menu and make the background layer visible.

1 Animation fflt1

Fo^ver t i

il i

Dock to Palette Well

New Frame

Delete T ramr Delete Animation

Copy Frame

Rtlle FtiWTI).

Select All Frames

Reverie Frames Optimize Animation..

Make Frames From Layers

Flatten Frames Into Layers ~

Create Layer for Each New Frame V New Layers Visible in All States/Frames

Palette Options...

Figure 1.2

Selecting Make Frames From Layers from the Animation palette menu

Now the animation sequence is in place and is ready for any adjustments in timing or output options and previewing in the default web browser for quick reference (see Figure 1.3). Even though the animation will appear as an animated GIF, it will run at normal playback speed, though it's not in full resolution. It will give you a better idea of the actual flow and real-time animation than the Playback button in ImageReady, and you don't have to export the animation to a QuickTime movie just to preview the animation sequence timing.

Figure 1.3

Previewing the animation in the default web browser

Figure 1.3

Previewing the animation in the default web browser

Note: Look for finished examples of many of the book's projects and animations on the enclosed DVD.

This first volume will guide you through the basics of Photoshop. Well start at the beginning and slowly be working our way through to the more advanced stuff but dont worry its all aimed at the total newbie.