the web warrior guide to web design technologies

Chapter 9

Fireworks: Part I

The Web Warrior Guide to Web Design Technologies

Objectives

In this chapter you will:

• Create and edit bitmap and vector graphics using Fireworks

• Use the Fireworks tools, Optimize panel, Layers panel, and other panels to edit images

• Color and manipulate objects using the Property inspector

• Change fill, stroke, and effect attributes of objects and text

• Export and optimize a file for the Web

Fireworks Editing Tools

• Fireworks MX is a graphics application specifically designed for developing and optimizing Web graphics

• Fireworks MX generates HTML and JavaScript code that you can integrate into Dreamweaver Web pages

• Fireworks MX lets you edit bitmap and vector graphics simultaneously

Fireworks Workspace

Creating a New Document

Saving and Exporting Files

Selection Tools

• A drop arrow in the Tools panel indicates more tools are available. Hold the mouse key down to see and select them.

• To select images or portions of image for editing

– Pointer Tool (with Select Behind Tool)

– Subselection Tool

– Scale Tool (with Skew and Distort)

– Cropping Tool (with Export Area Tool)

Selected Shapes

Reshaping a Polygon with Bezier Points

• Click the handle and drag it with your mouse

Scaling and Rotating a Selection

• Scale: Drag the handle with your mouse.

• Rotate: Place your mouse outside the object. When you see the curved arrow, click and drag to turn theobject.

Cropping a Photograph

• Drag the tool over the area you wish to keep. Then double click.

Bitmap Tools

• Used for editing bitmap image, like photographs:

– Marquee Tool (with oval marquee)

– Lasso Tool (with Polygon Lasso)

– Magic Wand Tool

– Brush Tool

– Pencil Tool

– Eraser Tool

– Blur Tool (with Sharpen, Dodge, Burn, and Smudge)

– Rubber Stamp Tool, Eyedropper Tool, and Paint Bucket Tool

Using the Polygon Lasso Tool

• Click the PolygonLasso tool, then click around the image you want to select

Modifying a Marquee

• From the Select Menu, options for changing a marquee are available. Some options:

– Select Inverse

– Expand Marquee

– Contract Marquee

– Border Marquee

– Smooth Marquee

Creating a Feathered Edge

• Click the Oval MarqueeTool.

• Set the Edge in the Property inspector to Feather, 20 pixels.

• Draw the marquee overthe image.

• Cut and paste to a new canvas. (Canvas will automatically size to yourimage.)

Using the Rubber Stamp Tool• Click the Rubber Stamp

Tool.

• Set the size in the Property inspector.

• Click over the image to be copied. A blue circle appears.

• Click where you would like the copied image to be located (stamped).

Vector Tools

• Used to draw Vector images on your canvas:

– Line Tool

– Pen Tool (with Vector Path, Redraw Path)

– Rectangle Shape Tool (with Rounded Rectangle, Ellipse, and Polygon)

– Text Tool

– Freeform Tool (with Reshape Area, Path Scrubber Additive and Subtractive)

– Slice Tool

Using the Shape Tool

Using the Text Tool

• Click the TextTool

• Adjust attributes in the Propertyinspector

• Add text effectsin the Propertyinspector

Other Tools

• Web Tools - For Hotspots and Slices - See Chapter 10)

• Color Tools - For changing color attributes for Strokes and Fills

View Tools

• To see your image in different views:

– Standard Screen mode

– Full Screen with Menus mode

– Full Screen mode

– Hand tool

– Zoom tool

The Layers Panel

• Layers are transparent canvases, stacked on top of one another.

• Several layers can make one image.

• You can edit the layers separately.

• The layers are preserved in your .png file.

• Once you export a file as a .gif or .jpg, you cannot edit the layers again. You need to edit the .png file.

Using Layers

Summary

• Fireworks creates .png format files that you can export into other, more commonly supported Web formats such as .gif and .jpg.

• The Fireworks Tools panel allows you to create shapes and lines using a variety of colors, fills, and strokes.

• Selection tools include the Pointer, Subselection, and Scale and Crop tools, which you can use to select, reshape, and resize images.

Summary

• You can apply a wide variety of strokes and fills to paths and objects by using the Stroke and Fill options in the Property inspector for an object.

• Text tools are used to enter text on the canvas.You can alter text features, including font, size, color, and style.You can also adjust alignment, kerning, and anti-aliasing. You can also apply effects to text and other objects. Effects such as drop shadows and embossing can create appealing headlines and titles on a Web page.

Summary

• Paths, or lines, can be manipulated by using the Property inspector. A wide variety of strokes create different pen styles, pen tip widths, and textures.

• Solid,Web Dithered, and Pattern fills can be used to fill shapes and selected areas. Gradient fills can also add to the wide variety of effects you can apply to fill an area.

• The Optimize panel can be used with the preview of your graphic to experiment with different optimization properties.

Summary

• Layers are transparent, stacked canvases in one document. Using layers allows you to create a complex graphic with independent, editable elements on the different layers. The final graphic used on the Web must be flattened and exported as a .gif or .jpg file.