Considering all the applications included in the Creative Suite, why do you need one more? The reason is mostly because after CS2 (and the removal of ImageReady), the Creative Suite provided no easy way to create interesting Web graphics. Sure, you can save images for online use in Photoshop and Illustrator using the Save for Web & Devices feature, but what about rollovers, easy image maps, and interactive wireframes? (A wireframe is essentially a mock-up or rough draft created to demonstrate or test a Web site before it is in its final form. In Web design, wireframes are basic visual guides used to suggest the layout and placement of fundamental design elements.)

In Fireworks, you can work intuitively by taking advantage of its logical interface, which provides panels and features that relate to the Web and that offer you the easiest way to optimize (make Web-ready) graphics.

So what's the big deal about Fireworks being built specifically for Web graphics? Well, first of all, you're working strictly with pixels — no messy dpi (dots per inch) or lpi (lines per inch), which are typical printing terms.

Figure 1-1 shows the dialog box that appears when you choose File

Figure 1-1. Pixel dimensions play an important role in Fireworks.

After launching Fireworks CS5, you notice right away that its workspace is similar to the workspaces in the other CS5 applications. Adobe has done a good job of organizing each application so that the learning curve is quick and integration is easy.

You shouldn't be surprised to find a toolbox to the left of the workspace and panels to the right. The tools even look much like the tools you may already be familiar with from working in other CS5 applications.

Using the tools

The Tools panel is sorted into six categories: Select, Bitmap, Vector, Web, Colors, and View. Table 1-1 lists the tools by category and the keys you can easily press to access them.

Table 1-1. Fireworks Tools

Icon	Tool Name	What You Can Do with It	Keyboard Shortcut
Selection	Pointer	Select paths and objects	V or 0
	Subselection	Adjust paths, much as you do with the Direct Select tool in Illustrator and Photoshop	A or 1
	Scale	Scale objects or selections	Q
	Crop	Crop images	C
Bitmap	Marquee	Make rectangular selections	M
	Lasso	Make freeform selections	L
	Magic Wand	Select similar colors	W
	Brush	Paint on image	B (toggle with Pencil)
	Pencil	Draw bitmap paths	B (toggle with Brush)
	Eraser	Erase bitmap data	E
	Blur	Blur image	R
	Rubber Stamp	Clone image data	S
Vector	Line	Create vector lines	N
	Pen	Create Bézier paths	P
	Rectangle	Create vector shapes	U
	Type	Create text	T
	Freeform	Create freeform paths	O
	Knife	Cut paths	Y
Web	Rectangle Hotspot	Create image map hotspots	J
	Slice	Create slices for tables or CSS	K
	Hide Slices and Hotspots	Hide slices and image map hotspots	2
	Show Slices and Hotspots	Display slices and image map hotspots	2
Color	Eyedropper	Sample color	I
	Paint Bucket	Fill color	G
View	Hand	Pan the artboard
	Zoom	Zoom in and out of artboard	X

As you select each tool, notice that the Properties panel displays additional options. (If your Properties panel isn't visible, choose Window

Understanding the views

The tabs at the top of an image give you the opportunity to view it in four ways:

• Original displays your image as it appears before being optimized for the Web.

• Preview displays the image as it will appear when it's saved for the Web, based on your current settings. (You can find out more about those settings in Chapter 5 of this minibook.)

• 2-Up offers the opportunity to see an image in two windows, with different settings applied in each one. Most users tend to compare the original and optimized images in this view (see Figure 1-2).

  

  Figure 1-2. Compare the original (left) and optimized (right) images in 2-Up view.

• 4-Up is for people who are never quite sure which is the best way to optimize an image. You don't necessarily need to compare different formats when you use this view; you can experiment with different options for one format, such as pushing the limit with the amount of colors you want to keep in a GIF file, as shown in Figure 1-3.

Figure 1-3. In 4-Up view, you can experiment with ways to optimize an image.

You can work in Fireworks using the same selection tools for both vector and bitmap images.

Making a selection in a bitmap image

If you're familiar with Photoshop selection techniques, you'll have no problem using the same tools in Fireworks. Here's the lowdown on making selections with the Marquee and Lasso tools:

• 
• 

Tip

You can use both the Marquee and Lasso tools interchangeably when making a selection.

Figure 1-4. Drag a selection to move it.

Switch to the Subselection tool and notice that if you have an existing selection, the pointer changes to a double arrow, indicating that you will clone (copy) the selection when you click and drag it.

Making a selection in a vector image

By using the same tools you use to select bitmap images, you can adjust vector paths. Use the Pointer tool to move an entire vector shape, as shown in Figure 1-5.

Use the Subselection tool to move the individual points on the path.

Figure 1-5. The Pointer tool lets you move a vector shape.