1

USING FIREWORKS

• Cropping an Image• Obtaining Information• Changing Image Size• Rotating an Image• Adjusting the Color of an Image• Drawing Tools• Using the Paint Bucket to Change or Add Color to a Region• Blurring, Smudging, and Sharpening Images• Dodging and Burning Images• Using the Rubber Stamp tool• Adding Text to an Image• Using Filters• Optimizing Images• Saving Images in Fireworks

Using Dreamweaver, Photoshop, and Fireworks:Graphics Production for the Web

http://www.stanford.edu/group/csp/cs38/

2

Cropping an Image

1. Select the Marquee Tool.

2. Using the mouse, click and drag to draw a box around the area to be cropped.

3. Under Edit, select Crop Document. The new dimensions will be displayed in the Properties palette.

3

Obtaining Information

• When a graphic is viewed in Fireworks, the program offers information about the height and width (in pixels) of the graphic.

4

Obtaining More Information

• The Info window (Window > Info) provides detailed color information about each pixel in the graphic. Placing the cursor at a specific spot on a graphic will display the color (in hexadecimal code) for that spot. In the example below, at location 29x33, the color is FE 00 00 (with an opacity of FF, or 100%).

5

Changing Image Size

To change the size of an image:1. Under Modify, choose Canvas, then Image Size.2. Enter the new height/width desired, and press OK to

finalize the change of size.

6

Keep this chart in mind when choosing image size

Monitor Resolution* Maximum Size of Material (Width x Height)WebTV (TV set) 544 x 738640 x 480 600 x 300800 x 600 760 x 4201024 x 768 955 x 600

*Monitor Resolution can be set at:- Windows: Start > Settings > Control Panel > Display > Settings - Mac OS X: System Preferences > Displays > Display - Mac OS 9: Control Panels > Monitors > Resolution

If you already added this graphic to your web page before changing its size, you will need to change the height and width attributes in the source code. In Dreamweaver, this is done by clicking the Reset Image to Original Size icon in the Properties palette.

7

Rotating an Image

1. Using the Marquee Tool, click and drag to select the part of the image to rotate.

2. Under Modify, choose Transform, and then the transformation desired.

8

Adjusting the Color of an Image

• Under Filters, choose Adjust Color, and select the desired adjustment:

Auto Levels, Brightness/Contrast, Curves, Hue/Saturation, Invert, or Levels.

Before Adjust Color > Invert After

9

Drawing Tools

Fireworks has the following tools that you can use to draw: Pencil (bitmap) : Used to draw 1-pixel lines or to edit single pixels Brush (bitmap) : Used to paint brush strokes in a bitmap graphic Pen (vector) : Used to draw by placing points that define a path Vector Path (vector) : Used to paint brush strokes in a vector

graphic (vector equivalent to the brush tool). This tool is obtained by clicking the mouse button on the Pen tool and selecting the Vector Path tool.

Line (vector) : Used to draw lines Rectangle (vector) : Used to draw rectangles, ellipses, polygons,

arrows, beveled rectangles, chamfer rectangles, connector lines, doughnuts, pies, rounded rectangles, smart polygons, spirals, or stars

10

Using the Drawing Tools

• After selecting a tool, in the Properties window, select the color, size, and style of the drawing tool.

• Draw by clicking and dragging the mouse. The example below shows a frame drawn using the Line Tool.

11

Using the Paint Bucket to Change or Add Color to a

Region

1. Select a color in the fill color box.2. Select the Paint Bucket tool.3. Click the object or region you wish to color.

12

Blurring, Smudging, and Sharpening Images

Fireworks has several tools to affect the pixel focus and the colors in images. • The Blur tool lets you emphasize or de-emphasize parts of an image by

selectively blurring the focus of elements. • The Sharpen tool (obtained by clicking the mouse button on the Blur tool

and selecting the Sharpen tool) can be useful for repairing scanning problems or out-of-focus photographs.

• The Smudge tool (obtained by clicking the mouse button on the Blur tool and selecting the Smudge tool) lets you gently blend colors, as when creating a reflection of an image.

To blur, sharpen, or smudge an image:1. Choose the Blur, Sharpen, or Smudge tool. 2. Drag the tool over the pixels to be sharpened, blurred, or smudged.

13

Dodging and Burning ImagesThe Dodge Tool is used to lighten parts of an image.The Burn Tool is used to darken parts of an image.

To use the Dodge or Burn tool:1. Select the tool (both are obtained by clicking the

mouse button on the Blur tool and selecting the Dodge or Burn tool).

2. Set the brush options in the Property inspector: – Size sets the size of the brush tip.– Shape sets a round or square brush tip shape.– Edge sets the softness of the brush tip.– Set the exposure in the Property inspector.

• The exposure ranges from 0% to 100%. For a lessened effect, specify a lower percentage value; for a stronger effect, specify a higher value.

– Set the range in the Property inspector: • Shadows changes mainly the dark portions of the image.• Highlights changes mainly the light portions of the image.• Midtones changes mainly the middle range per channel in the image.

3. Drag over the part of the image you want to lighten or darken.

14

Using the Rubber Stamp toolThe Rubber Stamp tool clones an area of a bitmap image so that you can stamp it elsewhere in the image. Cloning pixels is useful when you want to fix a scratched photograph or remove dust from an image; you can copy a pixel area of a photo and replace the scratch or dust spot with the cloned area.

To clone portions of a bitmap image:1. Choose the Rubber Stamp tool.

2. Click an area to designate it as the source, or the area you want to clone. The sampling pointer becomes a cross-hair pointer.

3. Move to a different part of the image and drag the pointer. You will see two pointers. The first one, the source of the cloning, is in the shape of a cross

hair. Depending upon the brush preferences you’ve selected, the second pointer is a rubber stamp, a cross hair, or a blue circle. As you drag the second pointer, pixels beneath the first pointer are copied and applied to the area beneath the second.

15

Adding Text to an Image

1. Click the Text Tool.2. Click and drag to draw a rectangle around the area in

which you wish the text to appear.3. When the cursor appears in the text area, enter the

text.

16

Using Filters

Filters let you change the look of your images. They can add unique lighting or create distortions. You can also use filters to clean up or retouch your photos. The filters are listed in the Filter menu.

Examples of Filters:– Simulating static on a TV screen using Add Noise

– Correcting images that are blurry by using Sharpen

– Softening an image using Blur

17

Optimizing Images

Fireworks gives graphic artists the option to pick the format which will best display the image. This process is known as optimizing.

1. Click the 2-up or 4-up tab to see how optimizing the image will affect its appearance.

2. Select one of the windows which appears. Then, in the Optimize window (Window > Optimize), change the settings and view how the image would look with the settings changed (optimized).

Original GIF Viewed as a image JPEG image

18

Saving Images in Fireworks

The best choice for saving images in Fireworks is to use the Export Wizard.

1. Under File, choose Export Wizard.

2. Click Continue, select The web, click Continue, and then click Exit.

3. In the Image Preview screen that appears, you are given a chance to see how the image would look under different circumstances (see Optimizing Images). Highlight your choice, then click Export.

4. Save the image to the site folder on your computer.

19