In this exercise you will be creating the graphics for the index page of a Website for children about reptiles.

Transcription

1 LESSON 2: CREATING AND MANIPULATING IMAGES OBJECTIVES By the end of this lesson, you will be able to: create and import graphics use the text tool attach text to a path create shapes create curved and straight line segments create paths with the brush tool use the align tools apply fills and gradients choose the Web 216 palette CONTEXT In this lesson you will learn your way around the basic tools for creating and modifying images in Fireworks. Fireworks employs many tools that you will find familiar if you have worked previously with any graphics creation or image editing software. EXERCISES In this exercise you will be creating the graphics for the index page of a Website for children about reptiles. IMPORTING AND FRAMING IMAGES Create a New Page 1. Create a new file by choosing File > New. 2. Type 600 into the Width field and 400 in the Height field. 3. Leave the Resolution at 72 ppi and the Canvas white. Be sure that the ruler is displayed by choosing View > Ruler. 4. Save your document to the Lesson 1 folder as reptile.png by choosing File > Save As, typing reptile in the filename field, and browsing to find the folder. Using Guides for Positioning For this page we want to leave space at the top for the title and on the side for a design element you will be adding later in the lesson. To mark this space off visually, we will use g u i d e s. Guides help to precisely align and place objects. 1 1

2 1. Click inside the horizontal page ruler and drag down to generate a guide (Figure 2-1). Position the guide approximately 75 pixels from the top of the document. 2. To double-check and adjust the guide s position precisely, double-click the guide and type 75 in the Position field of the Move Guide panel (Figure 2-2). Click OK. 3. Click and drag from the vertical page ruler and position the guide approximately 550 pixels from the left side of the document. 4. To double-check and adjust the guide s position precisely, double-click the guide and type 550 in the Position field of the Move Guide panel. Click OK. Figure 2-1 With View > Snap to Guides checked, dragging an object to within three pixels of a guide snaps the object to the guide. In addition to turning on snapping and showing guides, choose View > Edit Guides to color, lock, or delete all guides. Guides help to precisely align and place objects. Figure 2-2 Create a Layer and Import Images Fireworks can import these formats: PNG, GIF, JPEG, BMP, TIFF, xres LRG, ASCII, RTF, Adobe Photoshop 3, 4 & 5, Adobe Illustrator 7, Macromedia FreeHand 7, 8 and CorelDRAW The graphic for the Reptile Web page will have three images of reptiles which we will import into a layer created for them. 1. Choose Window > Layers to activate the Layers and Frames panel. If it s already open click on the Layers Tab to bring it forward. Layers divide a Fireworks document into discrete planes, as though the graphic components were drawn on separate tracing paper overlays. Each object in a graphic resides on a layer (Figures 1-9 and 1-10). 1 2

3 2. Choose New Layer from the Layers Options pop-up menu (Figure 2-3). When the New Layer dialog box opens type Images in the new layer name field. Click OK. 3. Choose File > Import from the menu bar at the top. 4. When the Import dialog box opens, select lizard.jpg, which you will find inside the Lesson 2 folder, and click Open. 5. The cursor has now changed to resemble the top left corner of a square. Position the cursor in the document window where you want the upper-left corner of the object to appear and drag it to the right about 150 pixels. This will establish the size you want the image to be. (You will be able to gauge 150 pixels by the darkened area on the horizontal ruler as you drag the cursor across the window.) Note: Simply clicking the mouse button places the object at its default size. 6. Again choose File > Import from the menu bar. 7. Select snake.jpg, also in the Lesson 2 folder, and click Open. 8. Position the import cursor where you want the upper-left corner of the object to appear and drag to the right 150 pixels. 9. Choose File > Import Select tortoise.jpg in the Lesson 2 folder and click Open Again position the import cursor where you want the upper-left corner of the object to appear and drag to the right 150 pixels Use the Pointer tool to arrange the images in an orderly fashion (Figure 2-4). Figure 2-3 You can create all layers before you draw or add them as needed. Figure 2-4 Use the Pointer tool to arrange the images in an orderly fashion. 1 3

4 Choose the Web 216 Color Palette 1. The Web 216 Color Palette is used if you want to be sure you will always have Web-safe color. Choose Window > Swatches to display the Swatches panel, which contains the current color palette. Clicking a swatch automatically assigns that color to the active color well. 2. Choose Web 216 from the Swatches pop-up menu (Figure 2-5). 3. Click on the expand button to see all the available colors in this palette (Figure 2-6). Figure 2-5 The Web 216 palette contains the 216 colors common to both Windows and Macintosh computers. This palette is often called a browser-safe palette, because it produces fairly consistent results on different platforms and with different browsers. Figure 2-6 You can use the scroll bars above and below the color palette to see more choices, or click on the expand button to see them all at once. Line well Choose a Line Fill Color 1. On the main toolbox to the left of your document window, click on the square next to the brush icon to activate the Line well. 2. Click a light green color swatch on the palette to change the color in the well. We ll use this color to outline shapes in the next exercise. Creating Shapes You create shapes in Fireworks using the Pen tool and the Brush tool. In this part of the exercise, we will use the Pen tool to create three irregular shapes to frame the images of the reptiles. First let s create a new layer for the framing shapes. 1. Choose Window > Layers from the menu bar to open the Layers and Frames palette. (If the palette is already open click the Layers tab to bring it to the front.) 2. Choose New Layer from the Layers pop-up menu. 3. Type Shapes in the layer name field. Click OK. Fill well Figure 2-7 Fireworks two color wells are where you keep the current color choices selected from the color palette. 1 4

5 Now let s create the shapes. 1. Click on the Pen tool in the main toolbox (Figure 2-8). The Pen tool creates straight- or curved-line segments by placing points on a line. Clicking with the Pen tool produces an end point. Clicking and dragging with the Pen tool produces a curve point. 2. Click once near the lizard image to establish an end point. 3. Click and drag to create a curve point. Repeat this procedure twice more at different points around the image, than click again on your starting point to close the shape. The lizard image should now be enclosed (Figure 2-9). Figure 2-8 Pen tool Figure 2-9 The pen tool creates end points and curve points on a line, both of which can be edited. The Pen tool creates paths that can be altered by subselecting and modifying one or more points. 4. When you have finished drawing the closed shape, you will notice that the shape is selected. Do not deselect the shape as we are now going to change the path attributes in the Brush panel. Notice how the outline changes as we do. 5. Choose Window > Brush to open the Brushes and Fills panel (Figure 2-10). If it s already open click the Brush tab to bring it to the front. 6. Choose B a s i c in the B r u s h category pop-up menu. 7. Choose Soft Line in the Brush name pop-up menu. Do not change the Brush softness slider. 8. Type 3 in the Brush tip size field. Do not change the texture. Figure 2-10 Change the path attributes in the Brushes panel. Filling a Shape with a Gradient Now that we have a shape to work with, let s apply a fill to it. The F i l l p a n e l controls the attributes of an object s interior area. A newly created closed path drawn with the Pen tool or basic shape tools assumes the current fill displayed in the Fill panel. 1. If the shape outline is not already selected, use the Pointer tool to select it. Just click anywhere on the path. 2. First let s choose a color for the Fill color well. Click on the square next to the paintbucket icon at the bottom of the tool box (Figure 2-7). 3. Expand the Color Swatch panel by clicking the E x p a n d b u t t o n (Figure 2-6), and select a dark green from the Color Swatch panel. 1 5

6 4. Now click the Fill tab in the Brushes and Fills panel. 5. Click the Fill category pop-up menu and choose W a v e s from the Gradient list (Figure 2-11). Fireworks will build a gradient using the light green line color and the dark green fill color, which will appear superimposed over the image of the lizard. Figure 2-11 Click the Fill category popup menu and choose Waves from the Gradient list. Editing the Gradient Sometimes you may want to fine-tune your gradient by changing the color ramp (the colors that your gradient is created from). Here s one way to do that. 1. Select the object. 2. Choose Edit Gradient from the O p t i o n s pop-up menu on the Fills palette (Figure 2-12 and 2-13). 3. In the Edit Gradient dialog box there are two little boxes between two larger ones. The larger ones show the current gradient. The smaller ones show the line and fill colors used to make the gradient. Drag the smaller boxes back and forth and note the effect on the gradient in the larger box (Figure 2-13). 4. You can add intermediate colors by pulling them out of the top gradient. To do so, click on the gradient to select a color, then select in the space between the two little boxes. Another little box will appear with the new color. Now drag that box to the left and right and observe the effect in the gradient in the larger box. 5. Hit the apply button if you want to see the results. 6. Hit OK if you want to keep the changes. Figure 2-12 Figure 2-13 Options Use the edit gradient to change the color ramp. 1 6

7 You can also change the shape of your gradient. 1. Select the object. 2. Click the Paint Bucket tool. You will see a line with a circle at one end and a square at the other, representing the starting and ending points for the gradient (Figure 2-14). 3. Drag the circle to change the starting point of the gradient. 4. Drag the square control to change the radius of the gradient. 5. When you are happy with the results deselect the paint tool by clicking on another tool. Start point End point Figure 2-14 You can change the color ramp by clicking on the Paint Bucket tool, and dragging the starting and end points for the gradient. Building More Frames Your shape is on top of your picture because it is on a layer above the layer in which you placed the reptile images. Don t worry about this; you will fix it in a few steps. Right now, you need to make two other shapes to frame the other two images. Using the pen tool, click once to establish an end point. Remember you can literally create your path around the tortoise image without affecting it because it is on a different layer. 1. Click and drag to establish other points to create your shape. This time you may want to use more than four points. Remember to close your shape. 2. Repeat the above steps for a shape to frame your snake image. 3. You do not have to worry about establishing the Brush style or Fill style because Fireworks remembers what you applied to the last shape and applies it to the remaining shapes until you change it. Reshaping Paths If you draw a shape that you don t like, remember that you can fine-tune it by manipulating the corner points. 1. Choose the Subselection tool and click on the path you want to change. 2. Using the same tool, move the point handles to change the shape of the curve (Figure 2-15). 3. If you have a corner point that does not have a handle and you would like to add one, use the Subselection tool while holding down the Alt key (PC) or Option key (Mac) and click and drag in the direction that you would like to add a handle (Figure 2-16). If you draw a shape that you don t like you can fine-tune it by manipulating the corner points. Rotate corner point Figure 2-15 Alt key (PC) or Option key (Mac) plus the Subselection too. Figure

8 4. If you want a sharper point, hold down the Alt key (PC) or Option key (Mac) while using the Subselection tool. Only one of the two handles will be activated. 5. Fine-tuning shapes can be a long and painstaking process. Sometimes with complex shapes, it helps to increase the magnification. If you have too many points on one curve, it makes it difficult to achieve a smooth look. In this case, it is often advisable to remove some of the points on the path. You can do this by clicking on them with the Subselection tool and pressing the Delete key. 6. To add more points use the Pen tool. Re-ordering Layers Now that you have your shapes created to frame your reptile images, you need to move the images on top of them. Rearranging layers is simple. 1. Click on the Layers tab in the Layers and Frames panel. 2. Click and drag the Shape layer name below the Image layer name. Release the mouse button. 3. Choose File > Save. You should see a dark line between the Image layer and the Foreground layer as you drag the Shape layer when it is in the correct place. When you release the mouse button, the document should redraw so that the reptile images are now on top of the shapes you ve drawn. You can still move the shapes and the images to fine-tune their placement and shape. WORKING WITH TEXT Fireworks is the first application that offers the precise text control of an illustration tool in an imageediting application. You can create text; adjust the kerning, leading, direction; apply effects; and the text remains fully editable. Add and Format Text 1. Click on the Layers tab in the Layers and Frames panel. 2. Choose New Layer from the Options pop-up menu. Type Text in the layer name field. Click OK. 3. Choose the Text tool and click once in the area you left above the horizontal guide. This will open the Text Editor. 4. Choose Arial or Helvetica font, Bold, 70 point, and 150% horizontal scale. Leave the rest of the font settings at the default (Figure 2-17). Figure 2-17 With Fireworks you can create text; adjust the kerning, leading, and direction; apply effects; and the text remains fully editable. 1 8

9 5. Type the word REPTILES in all capital letters. Click OK. 6. Using the subselection tool, center the text within the area delineated by the guides. 7. Text color is determined by the fill color. Because you haven t changed your fill color from the deep green of your shapes, your text should be deep green. If your text is not deep green, select it with the Pointer tool and click once on the deep green swatch on the Swatches panel. If you need to edit your text, double-click it with the Pointer tool and the Text Editor opens again. 8. Deselect before moving on to the next step. Adding the Final Touch with Designer Brush Strokes To add that final design element that appeals to the whimsical nature of our audience of young children, you are going to use the Brush tool. The Brush tool is the primary freeform drawing tool in Fireworks. It is used to create paths with a wide range of possible characteristics, from thin, pencil-like paths to wide swaths resembling spray paint or splattered oil. The variety of brush textures adds to the range of creative possibilities. 1. Choose the Brush tool. 2. Click the Brush tab in the Brushes and Fills panel. 3 From the Brush category, choose R a n d o m and from the Brush name category, choose S q u a r e s (Figure 2-18). 4. Your line color dictates what color your brush will paint with. If you have not changed it, your line color should still be the bright green of your shapes lines. 5. Leave the Brush softness at the default and make sure that the Brush tip size is set at Click with your Brush tool at the top of your document in the space that you have reserved on the right side of your document, and drag down to the bottom. Your brushstroke should be fairly straight and extend from top to bottom. The result is a multi-colored paint spatter that extends down the side of the screen. 7. If you want to fine-tune your line, you can use the Subselection tool to modify or delete points on the line. 8. Choose File > Save. The Brush tool can create paths with a wide range of possible characteristics from thin, pencil-like paths to wide swaths resembling spray paint or splattered oil. Figure 2-18 Extensive brush editing features offer full control of every brush nuance, including ink amount, tip size and shape, edge effect, and aspect. Also, sensitivity settings control how a pressure-sensitive pen affects brush strokes. 1 9

10 You have finished your first Fireworks graphic. To get a better view of the image you may want to hide the guides. To do this, choose View > Guides (Figure 2-19). When you want to use them again, simply choose View > Guides again to display them. The image manipulation and vector drawing capabilities of Fireworks are extensive. You will want to experiment with various tools and techniques so that you can best use the tool to create high impact designs. Figure 2-19 To get a better view of the finished image you may want to hide the guides. MORE EXERCISES TO SHARPEN YOUR SKILLS Redesign the Reptiles Web graphic. Use the same three pictures, but change the way they are presented. Be sure to include some stylized text on your page and use shapes, fills, and brush strokes to design a page that is fun and lively. Remember that your audience is children. Use the Pen tool and Brush tool to create shapes far more complex than the ones created in class. Experiment with gradient fills and patterns for some interesting effects. 2 0