Adobe photoshop 6 0 p15

470 LESSON 17 Creating Animated Images for the Web In the Animation palette, click the New Frame button ( ) to create a second frame In the Layers palette, click to turn off the link icon ( ) between the layer and clipping path thumbnails Turning off the link icon lets you move the layer independent of its layer mask Select the move tool ( ) In the Layers palette, click the layer thumbnail for the juice layer to select the layer In the image, position the move tool over the orange color, and drag to reposition the orange color beneath the curve of the “U.” In the Animation palette, drag to reverse the order of frames and ADOBE PHOTOSHOP 6.0 471 Classroom in a Book Because you have defined the two frames by repositioning a single layer, you can generate intermediate frames automatically using the Tween command Choose Tween from the Animation palette menu Select All Layers and Position; deselect Opacity and Effects; for Tween With, choose Next Frame; and enter in the Frames to Add text box Click OK In the Animation palette, select frame 1; in the Layers palette, select the Photo layer and show it From the Animation palette menu, choose Match Layer Across Frames to reveal the photo in all frames 10 In the Animation palette, select frame Then click the Play button ( ) to play the animation Click the Stop button ( ) to stop the animation 11 Choose File > Preview In, and choose a browser application from the submenu to play the animation with accurate timing You can also select Preview in Default Browser in the toolbox 12 Choose File > Save Optimized As, name the file Logo3.gif, and click Save Then choose File > Close to close the original file without saving changes Using clipping groups to create animations Now you’ll create the effect of strawberries shaking inside the logo text Choose File > Open, and open the file Logo4.psd from the Lessons/Lesson17 folder In the Layers palette, make sure that both the Strawberries and Text layers are visible To make the strawberries appear only through the shape of the logo text, you’ll create a clipping group 472 LESSON 17 Creating Animated Images for the Web In the Layers palette, select the Strawberries layer Hold down Alt (Windows) or Option (Mac OS), position the pointer over the solid line dividing two layers in the Layers palette (the pointer changes to two overlapping circles), and click the dividing line between the layers You can also choose Layer > Group with Previous Notice that the strawberries now appear masked by the logo text The thumbnail for the Strawberries layer is indented with a downward-pointing arrow ( ), indicating that the layer is grouped with the layer that precedes it In the Animation palette, click the New Frame button For the second animation frame, you’ll reposition the Strawberries layer slightly In the Layers palette, select the Strawberries layer Then select the move tool ( ) In the image, drag the Strawberries layer slightly to the right, or use the arrow keys to move the layer ADOBE PHOTOSHOP 6.0 473 Classroom in a Book Click the Play button ( ) to play the animation The strawberries shake from side to side inside the logo text Click the Stop button ( ) to stop the animation Choose File > Preview In, and choose a browser application from the submenu to play the animation with accurate timing 10 Choose File > Save Optimized As, name the file Logo4.gif, and click Save ImageReady saves the animation as a GIF using the current settings in the Optimize palette 11 Choose File > Close to close the original file without saving changes 474 LESSON 17 Creating Animated Images for the Web Review questions Describe a simple way to create animation In what instances can you tween animation frames? When can’t you tween frames? How you optimize an animation? What does optimizing an animation accomplish? What is frame disposal? Which frame disposal method should you generally use? How you edit an existing animation frame? What file formats can you use for animations? Review answers A simple way to create animation is to start with a layered Photoshop file Use the New Frame button in the Animation palette to create a new frame, and use the Layers palette to alter the position, opacity, or effects of one of the selected frames Then create intermediate frames between the selection and the new frame either manually using the New Frame button or automatically using the Tween command You can instruct Adobe ImageReady to tween intermediate frames between any two frames, to change layer opacity or position between two frames, or to add new layers to a sequence of frames You cannot tween discontiguous frames Click the Show Options button in the Optimize palette, and then choose File > Save Optimized to optimize animations Choose Optimize Animation from the Animation palette menu to perform optimization tasks specific to animation files, including removing redundant pixels and cropping frames according to the bounding box In addition to the optimization tasks applied to standard GIF files, ImageReady generates an adaptive, perceptual, or selective palette for the file based on all frames in the animation if you selected one of those palettes ImageReady applies a special dithering technique to ensure that dither patterns are consistent across all frames, to prevent flickering during playback The application also optimizes frames so that only areas that change from frame to frame are included, greatly reducing the file size of the animated GIF ADOBE PHOTOSHOP 6.0 475 Classroom in a Book A frame disposal method specifies whether to discard the selected frame before displaying the next frame when an animation includes background transparency This option determines whether the selected frame will appear through the transparent areas of the next frame Generally, the Automatic option is suitable for most animations This option selects a disposal method based on the presence or absence of transparency in the next frame, and discards the selected frame if the next frame contains layer transparency To edit an existing animation frame, you first select the frame, either by clicking the frame thumbnail in the Animation palette or by navigating to the desired frame using the First Frame, Backward, or Forward buttons in the Animation palette or Layers palette Then edit the layers in the image to update the contents of the selected frame Files for animations must be saved in GIF format or as a QuickTime movie You cannot create animations as JPEG or PNG files Lesson Lesson Start and finished artwork Lesson Lesson Lesson Lesson Lesson Lesson 10 Lesson 12 Start file Corrected file Lesson 14 Lesson 15 Lesson 16 Lesson 16 (cont.) 1-1: Toolbox overview The marquee tools make rectangular, elliptical, single row, and single column selections The move tool moves selections, layers, and guides The lasso tools make freehand, polygonal (straightedged), and magnetic* (snap-to) selections The magic wand tool selects similarly colored areas The crop tool trims images The slice tool creates slices The slice selection tool selects slices The airbrush tool paints soft-edged strokes The paintbrush tool paints brush strokes The pencil tool paints hardedged strokes The clone stamp tool paints with a sample of an image The pattern stamp tool* paints with part of an image as a pattern The history brush tool* paints a copy of the selected state or snapshot into the current image window The art history brush tool* paints with stylized strokes that simulate the look of different paint styles, using a selected state or snapshot The eraser tool erases pixels and restores parts of an image to a previously saved state The background eraser tool* erases areas to transparency by dragging * Photoshop only § ImageReady only 1-1: Toolbox overview (cont.) The magic eraser tool erases solid-colored areas to transparency with a single click The gradient tools create straight-line, radial*, angle*, reflected*, and diamond* blends between colors The paint bucket tool* fills similarly colored areas with the foreground color The blur tool blurs hard edges in an image The sharpen tool sharpens soft edges in an image The smudge tool smudges data in an image The dodge tool lightens areas in an image The burn tool darkens areas in an image The sponge tool changes the color saturation of an area The path selection tools* make shape or segment selections showing anchor points, direction lines, and direction points The type tool creates type on an image The pen tools* let you draw smooth-edged paths The custom shape tool* makes customized shapes selected from a custom shape list The annotations tool* makes notes and voice annotations that can be attached to an image The eyedropper tool samples colors in an image The measure tool* measures distances, locations, and angles * Photoshop only § ImageReady only 1-1: Toolbox overview (cont.) The hand tool moves an image within its window The zoom tool magnifies and reduces the view of an image The image map tools§ define image map areas in an image The image map select tool§ selects image maps The toggle image map visibility tool§ toggles between showing and hiding image maps The toggle slices visibility tool§ toggles between showing and hiding slices in an image The rollover preview tool§ previews rollover effects directly in ImageReady The preview in default browser tool§ previews animations in a Web browser * Photoshop only § ImageReady only 3-1: Layer mode samples Layer Background Dissolve, 50% opacity Multiply Screen Overlay Soft Light Hard Light Color Dodge Color Burn Darken Lighten Difference Exclusion Hue Saturation Color Luminosity 4-1: Application of brush stroke to background using blending modes Normal, 100% opacity Normal, 50% opacity Dissolve, 50% opacity Multiply Screen Soft Light Hard Light Color Dodge Color Burn Darken Lighten Difference Exclusion Hue Saturation Color Luminosity 5-1: Selecting in Standard mode and Quick Mask mode A B Lesson start file Standard mode Quick Mask mode A Selected areas B Hidden areas 5-2: Painting in Quick Mask mode Quick Mask mode Painting with white Resulting selection Painting with black Resulting selection 11-1: Setting the monitor’s white point A shade cooler A shade warmer A neutral gray 12-1: RGB image with red, green, and blue channels 12-2: CMYK image with cyan, magenta, yellow, and black channels 12-3: Color gamuts 12-4: RGB color model A B 12-5: CMYK color model Green Magenta Red Blue Cyan Yellow Black White C Yellow Cyan Green A Natural color gamut B RGB color gamut C CMYK color gamut Blue Red Magenta 14-1: Optimized continuous-tone images GIF, 128 colors, 88% dither GIF, 128 colors, No dither GIF, 32 colors, 88% dither GIF, 32 colors, No dither GIF, 64 colors, 88% dither GIF, 64 colors, No dither GIF, Web palette, auto colors JPEG, Quality 60 JPEG, Quality 10 14-2: Optimized solid graphics GIF, 128 colors, 88% dither GIF, 128 colors, No dither GIF, 32 colors, 88% dither GIF, 32 colors, No dither GIF, 64 colors, 88% dither GIF, 64 colors, No dither GIF, Web palette, auto colors JPEG, Quality 60 JPEG, Quality 10 [...]... colors, No dither GIF, 64 colors, 88% dither GIF, 64 colors, No dither GIF, Web palette, auto colors JPEG, Quality 60 JPEG, Quality 10 14-2: Optimized solid graphics GIF, 128 colors, 88% dither GIF, 128 colors, No dither GIF, 32 colors, 88% dither GIF, 32 colors, No dither GIF, 64 colors, 88% dither GIF, 64 colors, No dither GIF, Web palette, auto colors JPEG, Quality 60 JPEG, Quality 10 ... animations in a Web browser * Photoshop only § ImageReady only 3-1: Layer mode samples Layer 1 Background Dissolve, 50% opacity Multiply Screen Overlay Soft Light Hard Light Color Dodge Color Burn Darken Lighten Difference Exclusion Hue Saturation Color Luminosity 4-1: Application of brush stroke to background using blending modes Normal, 100 % opacity Normal, 50% opacity Dissolve, 50% opacity Multiply Screen... list The annotations tool* makes notes and voice annotations that can be attached to an image The eyedropper tool samples colors in an image The measure tool* measures distances, locations, and angles * Photoshop only § ImageReady only 1-1: Toolbox overview (cont.) The hand tool moves an image within its window The zoom tool magnifies and reduces the view of an image The image map tools§ define image...Lesson 16 (cont.) 1-1: Toolbox overview The marquee tools make rectangular, elliptical, single row, and single column selections The move tool moves selections, layers, and guides The lasso tools make freehand,... styles, using a selected state or snapshot The eraser tool erases pixels and restores parts of an image to a previously saved state The background eraser tool* erases areas to transparency by dragging * Photoshop only § ImageReady only 1-1: Toolbox overview (cont.) The magic eraser tool erases solid-colored areas to transparency with a single click The gradient tools create straight-line, radial*, angle*, ... 88% dither GIF, 32 colors, No dither GIF, 64 colors, 88% dither GIF, 64 colors, No dither GIF, Web palette, auto colors JPEG, Quality 60 JPEG, Quality 10 14-2: Optimized solid graphics GIF, 128... 88% dither GIF, 32 colors, No dither GIF, 64 colors, 88% dither GIF, 64 colors, No dither GIF, Web palette, auto colors JPEG, Quality 60 JPEG, Quality 10 ... from frame to frame are included, greatly reducing the file size of the animated GIF ADOBE PHOTOSHOP 6. 0 475 Classroom in a Book A frame disposal method specifies whether to discard the selected