Working With Animation, Video, Photography - Advanced

I. INTRODUCTION
Understanding Animation
A quick display of an image sequence, or animation, creates the appearance of movement. In
Photoshop, you can generate animation from your images. You can create an animation by making
slight changes to several images, and then adjusting the timing between their appearances. When
you convert an image to HTML for display on a web page, slices become cells in an HTML table and
animations become files in object folders.
Extending Photoshop Skills to Video
Photoshop Extended and Apple QuickTime application can be used to play and modify video.
Almost any Photoshop skill you can apply to images can be applied to video clips. And you don't have
to invest in sophisticated, expensive video camera equipment to shoot video. Just about any
commonly available point-and-shoot digital camera has the capability to shoot video. (So get ready to
harness your inner-Scorsese!)
Fine-Tuning Images with Camera Raw
Images that you take with your own digital camera can be tweaked using Adobe Bridge and the
Camera Raw dialog box. You can use the Camera Raw dialog box to adjust images in RAW format (as
well as those in JPG and TIFF formats) while preserving all the original image data.
II. CREATE AND PLAY BASIC ANIMATION
Understanding Animation
You can use nearly any type of graphics image to create interesting animation effects. You can move
objects in your image or overlap them so that they blend into one another. Once you place the
images that you want to animate in a fi le, you can determine how and when you want the animation
to play.
Creating Animation on the Animation Panel
Remember that an animation is nothing more than a series of still images displayed rapidly to give
the illusion of motion. The Animation panel displays a thumbnail of the animation image in each
frame. A frame is an individual image that is used in animation. When you create a new frame on the
Animation panel, you duplicate the current frame, and can then modify the duplicate frame as
desired. The layers that are visible on the Layers panel appear in the selected frame, and thus, in the
animation. Here's all that's involved in creating a simple animation:
Place images on layers in the fi le.
Hide all but one layer.
Duplicate the frame, turn off the displayed layer, and then turn on the layer you want to see.

Animating Images
If you look at the Layers panel in Figure below, you'll see that there are images on two layers. The
Animation panel contains two frames: one for each of the layers. When frame 1 is selected, the man
appears in the image; when frame 2 is selected, the woman appears. When the animation is played,
the images of the man and woman alternate. Web Design in Cayman
Moving and Deleting Frames
To move a frame to a different spot, click the frame on the Animation panel, and drag it to a new
location. To select contiguous frames, press and hold [Shift ], and then click the frames you want to
include. To select noncontiguous frames, press and hold [Ctrl] (Win) or (Mac), and then click the
frames you want to include. You can delete a frame by clicking it on the Animation panel, and then
dragging it to the Deletes selected frames button on the Animation panel.
Looping the Animation
You can set the number of times the animation plays by clicking the Selects looping options list
arrow on the Animation panel, and then clicking Once, 3 times, Forever, or Other. When you select
Other, the Set Loop Count dialog box opens, where you can enter the loop number you want.
Previewing the Animation
When you're ready to preview an animation, you have a few choices:
You can use the buttons on the bottom of the Animation panel. When you click the Plays
animation button, the animation plays.
You can preview and test the animation in your browser by clicking the Preview the optimized
image in a browser button in the Save for Web & Devices dialog box.
Converting Animation Frames to a Timeline
By default, the Animation panel displays frames, but you can change the panel so it shows a timeline.
You change the display by clicking the Convert to timeline animation button in the lower-right
corner of the Animation (Frames) panel. (Return to displaying frames by clicking the Convert to
frame animation button when the timeline is displayed.) Figure below shows the Animation
(Timeline) panel. As you drag the bars for each of the layers in the animation, the image updates to
show the effect of your changes. By default, the Animation panel displays frames, but you can
change the panel so it shows a timeline. You change the display by clicking the Convert to timeline
animation button in the lower-right corner of the Animation (Frames) panel. (Return to displaying
frames by clicking the Convert to frame animation button when the timeline is displayed.) Figure
below shows the Animation (Timeline) panel. As you drag the bars for each of the layers in the
animation, the image updates to show the effect of your changes.
Exporting to Zoomify
Using the Export to Zoomify feature, you can post your high-resolution images on the web so
viewers can pan and zoom them in more detail. Using this feature, your image will download in the
same time as an equivalent size JPEG file. Figure below shows the ZoomifyTM Export dialog box
which you can open by clicking File on the Application bar, pointing to Export, and then clicking

Zoomify.
Create and duplicate animation frames
1. Open any image from the drive and folder where you store your Data Files, then save it as Pretty
Package.
2. Display the Motion workspace, then display the rulers in pixels.
3. Adjust the opacity setting of the Paper layer to 50% on the Layers panel.
4. Click the Duplicates selected frames button on the Animation panel.
A new Animation frame is created and is now the active frame.
5. Adjust the opacity setting of the Paper layer to 100%, then compare your screen to Figure below
left.
6. Click on the Animation panel.
7. Click the Indicates layer visibility button on the Paper layer on the Layers panel to hide this layer.
8. Click on the Ribbons layer on the Layers panel to hide this layer.
9. Click the Bow layer to make it active. The content from the Bow layer appears in frame 3 of the
Animation panel. See Figure below right.
Adjust animation frames
1. Set the opacity setting of the Bow layer to 50%.
2. Click the Duplicates selected frames button on the Animation panel, then adjust the opacity
setting of the Bow layer to 100%.
3. Click on the Animation panel. You have now created five frames.
4. Click the Indicates layer visibility button on the Bow layer to hide it.
5. Click the Ribbons layer on the Layers panel to make it active, then click the Indicates layer
visibility button on the Layers panel to display this layer.
6. Adjust the opacity setting to 50%.
7. Click on the Animation panel, then adjust the opacity setting of the Ribbons layer to 100%.
Play animation in the image and browser
1. Verify that Forever is selected in the Selects looping options menu, click the first frame in the
Animation panel, then click the Plays animation button on the Animation panel. The Plays/stops
animation button changes its

appearance depending on the current state of the animation. See Table 1 for a description of the
buttons on the Animation panel.
2. Click the Stops animation button on the Animation panel. The animation stops, displaying the
currently active frame.
3. Turn off the ruler display, then save your work.
4. Click File on the Application bar, click Save for Web & Devices, then click the Preview the
optimized image in a browser button, then compare your preview to Figure below.
TIP The first time you use this feature you may have to add a browser.
5. Close your browser, then click Cancel in the Save for Web & Devices dialog box.
III. ADD TWEENING AND FRAME DELAY
Understanding Tweening
To create animation, you assemble a series of frames, and then play them quickly to create the
illusion of continuous motion. Each frame represents a major action point. Sometimes the variance
of action between
the frames creates erratic or rough motion. To blend the motion in between the frames, you can
tween your animation. Tweening adds frames that change the action in slight
increments from one frame to the next. The origin of this term predates computer animation, when
an artist known as an in betweener hand-drew each frame that linked major action frames (at 24
frames per second!), and thus the term tweening was born.
Using Tweening on the Animation Panel
You can add tweening to a frame by clicking the Tweens animation frames button on the Animation
panel, and then entering the number of in-between frames you want in the Tween dialog box. You
can choose whether you want the tweening to affect all layers or just the selected layer, and if you
want the image to change position, opacity, or effects. You can also specify the frame on which you
want the tweening to start, and specify the number of frames to add in between the frames (you can
add up to 999 frames in a single tween). Figure below shows a two-frame animation after four tween
frames were added. The opacity of the man is 100% in the first frame and 0% in the last frame.
Adding five tween frames causes the two images to blend into each other smoothly, or morph
(metamorphose).
Understanding Frame Delays
When you create frames on the Animation panel, Photoshop automatically sets the frame delay, the
length of time that each frame appears. You can set the delay time in whole or partial seconds by
clicking the Selects frame delay time button below each frame. You can set the frame delay time you
want for each frame, or you can select several frames and apply the same frame delay time to them.
Setting Frame Delays

To change the delay for a single frame, click a frame, click the Selects frame delay time button, and
then click a length of time. To change the delay for contiguous frames, press and hold [Shift ], click
the frames you want to include, and then click the Selects frame delay time button on any of the
selected frames. To change the delay for noncontiguous frames, press and hold [Ctrl] (Win) or (Mac),
click the frames you want to include, and then click the Selects frame delay time button on any of
the selected frames.

Correcting Pixel Aspect Ratio in Video

This feature automatically corrects the ratio of
pixels displayed for the monitor in use. Without
this correction, pixels viewed in a 16:9 monitor
(such as a widescreen TV) would look squashed in
a 4:3 monitor (typical rectangular TV). You can
assign a pixel aspect ratio to a document by
clicking View on the Application bar, pointing to
Pixel Aspect Ratio, and then selecting a pixel
aspect ratio. (Unless you are using the image for
video, Square is the recommended setting.) When
you have selected a pixel aspect ratio, the Pixel
Aspect Ratio Correction option will be checked on
the View menu. Uncheck the Pixel Aspect Ratio Correction command to turn off the scaling
correction and view the image as it looks on a computer (square pixel) monitor. Photoshop
automatically converts and scales the image to the pixel aspect ratio of the non-square pixel
document. Images brought in from Adobe Illustrator will also be properly scaled.
Tween animation frames
1. Click frame 3 on the Animation panel.
2. Click the Tweens animation frames button on the Animation panel.
3. Adjust the settings in your Tween dialog box so that they match those shown in Figure below left.
4. Click OK. Two additional frames are added after frame 3.
5. Click the Plays animation button on the Animation panel, then view the animation.
6. Click the Stops animation button on the Animation panel, then compare your panel to Figure
below right, which now has eight frames.
Set frame delay
1. Click frame 2 on the Animation panel.
2. Click the Selects frame delay time button at the bottom of the selected frame.
3. Compare your frame delay menu to Figure below left, then click 0.5.

The frame delay for frame 2 changes from

0.2 to 0.5 seconds.
4. Click the Plays animation button on the
Animation panel, then view the animation.
5. Click the Stops animation button on the
Animation panel.
6. Open the Save for Web & Devices dialog
box, then click the Preview the optimized
image in a browser button.
7. Close your browser, then close the Save for Web & Devices dialog box.
8. Compare your screen to Figure below right, then save your work.
9. Close the image.