Adobe Photoshop 6.0- P15

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:21

Thêm vào BST

Báo xấu

101
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Adobe Photoshop 6.0- P15: Adobe Photoshop 6.0 delivers powerful, industry-standard image-editing tools for professional designers who want to produce sophisticated graphics for the Web and for print. Included with Photoshop 6.0 is ImageReady 3.0 and its powerful set of Web tools for optimizing and previewing images, batch-processing images with droplets in the Actions palette, and creating GIF animations. Photoshop and ImageReady combined offer a comprehensive environment for designing graphics for the Web....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Adobe Photoshop 6.0- P15

470 LESSON 17 Creating Animated Images for the Web 3 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. 4 Select the move tool ( ). 5 In the Layers palette, click the layer thumbnail for the juice layer to select the layer. 6 In the image, position the move tool over the orange color, and drag to reposition the orange color beneath the curve of the “U.” 7 In the Animation palette, drag to reverse the order of frames 1 and 2.
ADOBE PHOTOSHOP 6.0 471 Classroom in a Book Because you have deﬁned the two frames by repositioning a single layer, you can generate intermediate frames automatically using the Tween command. 8 Choose Tween from the Animation palette menu. Select All Layers and Position; deselect Opacity and Effects; for Tween With, choose Next Frame; and enter 5 in the Frames to Add text box. Click OK. 9 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 1. 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 ﬁle Logo3.gif, and click Save. Then choose File > Close to close the original ﬁle without saving changes. Using clipping groups to create animations Now you’ll create the effect of strawberries shaking inside the logo text. 1 Choose File > Open, and open the ﬁle Logo4.psd from the Lessons/Lesson17 folder. 2 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 3 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. 4 In the Animation palette, click the New Frame button. For the second animation frame, you’ll reposition the Strawberries layer slightly. 5 In the Layers palette, select the Strawberries layer. Then select the move tool ( ). 6 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 7 Click the Play button ( ) to play the animation. The strawberries shake from side to side inside the logo text. 8 Click the Stop button ( ) to stop the animation. 9 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 ﬁle 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 ﬁle without saving changes.
474 LESSON 17 Creating Animated Images for the Web Review questions 1 Describe a simple way to create animation. 2 In what instances can you tween animation frames? When can’t you tween frames? 3 How do you optimize an animation? 4 What does optimizing an animation accomplish? 5 What is frame disposal? Which frame disposal method should you generally use? 6 How do you edit an existing animation frame? 7 What ﬁle formats can you use for animations? Review answers 1 A simple way to create animation is to start with a layered Photoshop ﬁle. 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 interme- diate frames between the selection and the new frame either manually using the New Frame button or automatically using the Tween command. 2 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. 3 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 speciﬁc to animation ﬁles, including removing redundant pixels and cropping frames according to the bounding box. 4 In addition to the optimization tasks applied to standard GIF ﬁles, ImageReady generates an adaptive, perceptual, or selective palette for the ﬁle 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 ﬂickering during playback. The application also optimizes frames so that only areas that change from frame to frame are included, greatly reducing the ﬁle size of the animated GIF.
ADOBE PHOTOSHOP 6.0 475 Classroom in a Book 5 A frame disposal method speciﬁes 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. 6 To edit an existing animation frame, you ﬁrst 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. 7 Files for animations must be saved in GIF format or as a QuickTime movie. You cannot create animations as JPEG or PNG ﬁles.
Lesson 3 Lesson 4 Start and ﬁnished artwork
Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9
Lesson 10 Lesson 12 Start ﬁle Corrected ﬁle
Lesson 14 Lesson 15 Lesson 16
Lesson 16 (cont.)
1-1: Toolbox overview The marquee tools make The move tool moves selec- The lasso tools make free- The magic wand tool selects rectangular, elliptical, single tions, layers, and guides. hand, polygonal (straight- similarly colored areas. row, and single column edged), and magnetic* selections. (snap-to) selections. The crop tool trims images. The slice tool creates slices. The slice selection tool The airbrush tool paints selects slices. soft-edged strokes. The paintbrush tool paints The pencil tool paints hard- The clone stamp tool paints The pattern stamp tool* brush strokes. edged strokes. with a sample of an image. paints with part of an image as a pattern. The history brush tool* The art history brush tool* The eraser tool erases The background eraser paints a copy of the selected paints with stylized strokes pixels and restores parts of tool* erases areas to trans- state or snapshot into the that simulate the look of an image to a previously parency by dragging. current image window. different paint styles, using saved state. a selected state or snapshot. * Photoshop only § ImageReady only
1-1: Toolbox overview (cont.) The magic eraser tool erases The gradient tools create The paint bucket tool* ﬁlls The blur tool blurs hard solid-colored areas to trans- straight-line, radial*, angle*, similarly colored areas with edges in an image. parency with a single click. reﬂected*, and diamond* the foreground color. blends between colors. The sharpen tool sharpens The smudge tool smudges The dodge tool lightens The burn tool darkens areas soft edges in an image. data in an image. areas in an image. in an image. The sponge tool changes the The path selection tools* The type tool creates type on The pen tools* let you draw color saturation of an area. make shape or segment an image. smooth-edged paths. selections showing anchor points, direction lines, and direction points. The custom shape tool* The annotations tool* The eyedropper tool The measure tool* measures makes customized shapes makes notes and voice anno- samples colors in an image. distances, locations, and selected from a custom tations that can be attached angles. shape list. to an image. * Photoshop only § ImageReady only
1-1: Toolbox overview (cont.) The hand tool moves an The zoom tool magniﬁes and The image map tools§ deﬁne The image map select tool§ image within its window. reduces the view of an image. image map areas in an selects image maps. image. The toggle image map The toggle slices visibility The rollover preview tool§ The preview in default visibility tool§ toggles tool§ toggles between previews rollover effects browser tool§ previews between showing and hiding showing and hiding slices directly in ImageReady. animations in a Web image maps. in an image. 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 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 5 start ﬁle 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 12-5: CMYK color model A Magenta Green Red Blue Cyan Yellow B White Black C Blue Red Yellow Cyan Green Magenta A. Natural color gamut B. RGB color gamut C. CMYK color gamut
14-1: Optimized continuous-tone images GIF, 128 colors, GIF, 128 colors, GIF, 32 colors, 88% dither No dither 88% dither GIF, 32 colors, GIF, 64 colors, GIF, 64 colors, No dither 88% dither No dither GIF, Web palette, JPEG, Quality 60 JPEG, Quality 10 auto colors