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 willbe adding later in the lesson. To mark this space off visually, we will use g u i d e s. Guides help toprecisely align and place objects.

1 1FIREWORKS CURRICULUM

1 . Click inside the horizontal page ruler and drag down to generate a guide (Figure 2-1). Position theguide 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” inthe Position field of the Move Guide panel (Figure 2-2). Click OK.

3 . Click and drag from the vertical page ruler andposition the guide approximately 550 pixelsfrom the left side of the document.

4 . To double-check and adjust the guide’s positionprecisely, double-click the guide and type 550in the Position field of the Move Guide panel.Click OK.

Create a Layer and Import Images

The graphic for the Reptile Web page will have three images of reptiles which we will import into a layercreated for them.

1 . Choose Window > Layers to activate the Layers and Frames panel. If it’s already open click on theLayers Tab to bring it forward.Layers divide a Fireworks document into discrete planes, as though the graphic components weredrawn on separate tracing paper overlays. Each object in a graphic resides on a layer (Figures 1-9and 1-10).

FIREWORKS CURRICULUM1 2

With View > Snap to Guideschecked, dragging an object towithin three pixels of a guidesnaps the object to the guide.In addition to turning onsnapping and showing guides,choose View > Edit Guides tocolor, lock, or delete all guides.

Figure 2-1

Figure 2-2

Guides help to precisely align and place objects.

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

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 youwill find inside the “Lesson 2” folder, and click Open.

5 . The cursor has now changed to resemble the top left corner ofa square. Position the cursor in the document window whereyou want the upper-left corner of the object to appear and dragit to the right about 150 pixels. This will establish the size youwant the image to be. (You will be able to gauge 150 pixels bythe darkened area on the horizontal ruler as you drag thecursor across the window.)

Note: Simply clicking the mouse button places the object at itsdefault size.

6 . Again choose File > Import from the menu bar.

7 . Select snake.jpg, also in the “Lesson 2” folder, andclick Open.

8 . Position the import cursor where you want the upper-leftcorner of the object to appear and drag to the right 150 pixels.

9 . Choose File > Import.

1 0 . Select tortoise.jpg in the “Lesson 2” folder and click Open.

1 1 . Again position the import cursor where you want the upper-left corner of the object to appear anddrag to the right 150 pixels.

1 2 . Use the Pointer tool to arrange the images in an orderly fashion (Figure 2-4).

Figure 2-4Use the Pointer tool to arrange the images in an orderly fashion.

1 3FIREWORKS CURRICULUM

Figure 2-3You can create all layers before you

draw or add them as needed.

Choose the Web 216 Color Palette

1 . The Web 216 Color Palette is used if you want to be sure you will alwayshave Web-safe color.

Choose Window > Swatches to display the Swatches panel, whichcontains the current color palette. Clicking a swatch automatically assignsthat 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).

Choose a Line Fill Color

1 . On the main toolbox to the left of your document window, click on thesquare 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 thewell. 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. Inthis part of the exercise, we will use the Pen tool to create three irregularshapes 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 paletteis 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.

FIREWORKS CURRICULUM1 4

Figure 2-5The Web 216 palette contains the 216 colors common to both

Windows and Macintosh computers. This palette is often calleda browser-safe palette, because it produces fairly consistent

results on different platforms and with different browsers.

Figure 2-6You can use the scroll bars above and belowthe color palette to see more choices, or clickon the expand button to see them all at once.

Figure 2-7Fireworks’ twocolor wells arewhere you keep

the currentcolor choicesselected from

the color palette.

Line well

Fill well

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-linesegments by placing points on a line. Clicking with the Pen tool produces an end point. Clicking anddragging 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 aroundthe image, than click again on your starting point to close the shape. The lizard image should nowbe enclosed (Figure 2-9).

4 . When you have finished drawing the closed shape, you will notice that the shape is selected. Do notdeselect the shape as we are now going to change the path attributes in the Brush panel. Noticehow the outline changes as we do.

5 . Choose Window > Brush to open the Brushes and Fills panel (Figure2-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 theBrush softness slider.

8 . Type “3” in the Brush tip size field. Do not change the texture.

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 lcontrols the attributes of an object’s interior area.

A newly created closed path drawn with the Pen tool or basic shape toolsassumes the current fill displayed in the Fill panel.

1 . If the shape outline is not already selected, use the Pointer tool toselect it. Just click anywhere on the path.

2 . First let’s choose a color for the Fill color well. Click on the squarenext 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 5FIREWORKS CURRICULUM

Figure 2-8Pen tool

The pen tool creates endpoints and curve pointson a line, both of whichcan be edited.

The Pen tool creates paths that can be altered by subselecting and modifying one or more points.

Figure 2-10Change the path attributes

in the Brushes panel.

Figure 2-9

FIREWORKS CURRICULUM

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 linecolor and the dark green fill color, which will appearsuperimposed over the image of the lizard.

Editing the Gradient

Sometimes you may want to fine-tune your gradient bychanging the color ramp (the colors that your gradientis 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 menuon 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 onesshow 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 thegradient to select a color, then select in the space between the two little boxes. Another little boxwill appear with the new color. Now drag that box to the left and right and observe the effect in thegradient 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.

1 6

Figure 2-11Click the Fill

category pop-up menu and

choose Wavesfrom the

Gradient list.

Figure 2-12

Figure 2-13

Use the edit gradient tochange the color ramp.

Options

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 anda square at the other, representing thestarting and ending points for thegradient (Figure 2-14).

3 . Drag the circle to change the startingpoint of the gradient.

4 . Drag the square control to change theradius of the gradient.

5 . When you are happy with the resultsdeselect the paint tool by clicking onanother tool.

Building More Frames

Your shape is on top of your picture because it is on a layer above the layer in which you placed thereptile images. Don’t worry about this; you will fix it in a few steps. Right now, you need to make twoother shapes to frame the other two images.

Using the pen tool, click once to establish an end point. Remember you can literally create your patharound 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 morethan 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 Fireworksremembers what you applied to the last shape and applies it to the remaining shapes until youchange it.

Reshaping Paths

If you draw a shape that you don’t like, remember thatyou can fine-tune it by manipulating the corner points.

1 . Choose the Subselection tool and click on the pathyou want to change.

2 . Using the same tool, move the point handles tochange the shape of the curve (Figure 2-15).

3 . If you have a corner point that does not have ahandle and you would like to add one, use theSubselection tool while holding down the Altkey (PC) or Option key (Mac) and click anddrag in the direction that you would like to adda handle (Figure 2-16).

1 7FIREWORKS CURRICULUM

Figure 2-14You can change the color ramp by clicking on the Paint Buckettool, and dragging the starting and end points for the gradient.

Start point

End point

Rotate corner point

Alt key (PC) orOption key (Mac)

plus theSubselection too.

Figure 2-15

Figure 2-16

If you draw a shape that you don’t like you canfine-tune it by manipulating the corner points.

FIREWORKS CURRICULUM

4 . If you want a sharper point, hold down the Alt key (PC) or Option key (Mac) while using theSubselection 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 helpsto increase the magnification. If you have too many points on one curve, it makes it difficult toachieve 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 ontop 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 Shapelayer when it is in the correct place. When you release the mouse button, the document should redrawso that the reptile images are now on top of the shapes you’ve drawn. You can still move the shapesand 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 image-

editing 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 openthe Text Editor.

4 . Choose Arial or Helvetica font, Bold, 70 point, and 150% horizontal scale. Leave the rest of the fontsettings at the default (Figure 2-17).

1 8

Figure 2-17With Fireworksyou can createtext; adjust thekerning, leading,and direction;apply effects;and the textremains fullyeditable.

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 deepgreen of your shapes, your text should be deep green. If your text is not deep green, select it withthe 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. Itis used to create paths with a wide range of possible characteristics, from thin, pencil-like paths to wideswaths resembling spray paint or splattered oil. The variety of brush textures adds to the range ofcreative 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 mand from the Brush name category, chooseS q u a r e s (Figure 2-18).

4 . Your line color dictates what color yourbrush will paint with. If you have notchanged it, your line color should still be thebright green of your shapes’ lines.

5 . Leave the Brush softness at the default andmake sure that the Brush tip size is set at 5.

6 . Click with your Brush tool at the top of yourdocument in the space that you havereserved on the right side of yourdocument, and drag down to the bottom.Your brushstroke should be fairly straightand extend from top to bottom. The result isa multi-colored paint spatter that extendsdown the side of the screen.

7 . If you want to fine-tune your line, you canuse the Subselection tool to modify ordelete points on the line.

8 . Choose File > Save.

1 9FIREWORKS CURRICULUM

Extensive brush editing features offer full control of everybrush nuance, including ink amount, tip size and shape,edge effect, and aspect. Also, sensitivity settings controlhow a pressure-sensitive pen affects brush strokes.

The Brush toolcan create paths

with a widerange of possiblecharacteristics—

from thin,pencil-like paths

to wide swathsresembling spray

paint orsplattered oil.

Figure 2-18

FIREWORKS CURRICULUM

You have finished your first Fireworks graphic. To get a better view of the image you may want to hidethe guides. To do this, choose View > Guides (Figure 2-19). When you want to use them again, simplychoose View > Guides again to display them.

The image manipulation and vector drawing capabilities of Fireworks are extensive. You will want toexperiment with various tools and techniques so that you can best use the tool to create high impact designs.

Figure 2-19To 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 arepresented. Be sure to include some stylized text on your page and use shapes, fills, and brushstrokes 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 farmore complex than the ones created in class. Experiment with gradient fills and patterns forsome interesting effects.

2 0