Datasheet

ManualsBrandsWiley ManualsSoftware978-0-470-33186-6

Chapter 1: Introducing

Fireworks CS4

In This Chapter

✓ Understanding when you should use Fireworks

✓ Discovering the workspace

✓ Finding out about the tools

✓ Looking into the views

✓ Using the basic selection tools

dobe Fireworks is an incredible application with specific solutions to

meet online designers’ needs. With Fireworks, you have the freedom

to create test Web sites, experiment with advanced scripting features, and

come up with compelling graphics that look good and work well on Web

pages.

In this chapter, you encounter the software and its workspace. You also dis-

cover how to use selection tools so that you can start to manipulate graphics

in Fireworks right away.

Why Use Fireworks?

With 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 interest-

ing 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 a

low-fidelity mock-up, page-schematic rough draft. In Web design, wireframes

are basic visual guides used to suggest the layout and placement of funda-

mental design elements.)

With Fireworks, you can work intuitively by taking advantage of the logi-

cal interface. This interface provides panels and features that relate to the

Web and that offer you the easiest way to optimize (make Web-ready) your

graphics.

76_331866-bk08ch01.indd 79576_331866-bk08ch01.indd 795 10/25/08 12:44:47 AM10/25/08 12:44:47 AM

COPYRIGHTED MATERIAL

Summary of content (8 pages)

PAGE 1
Chapter 1: Introducing Fireworks CS4 AL In This Chapter ✓ Understanding when you should use Fireworks ✓ Finding out about the tools ✓ Looking into the views MA ✓ Using the basic selection tools TE RI ✓ Discovering the workspace A TE D dobe Fireworks is an incredible application with specific solutions to meet online designers’ needs.
PAGE 2
796 Jumping Right into the Interface Jumping Right into the Interface So what’s the big deal about Fireworks being built specifically for Web graphics? Well, first of all, you are 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➪Open to open a vector graphic from Illustrator. The dialog box offers conversion choices but emphasizes pixel dimensions.
PAGE 3
Jumping Right into the Interface 797 Using the tools The Tools panel is broken into six categories: Select, Bitmap, Vector, Web, Colors, and View. Table 1-1 lists the tools by category and the keys you can press to access them easily. Table 1-1 Icon Fireworks Tools Tool Purpose Keyboard Shortcut Pointer Selects paths and objects V+0 Subselection Adjusts paths, much like the Direct Select tool in Illustrator and Photoshop.
PAGE 4
798 Jumping Right into the Interface Table 1-1 (continued) Icon Tool Purpose Keyboard Shortcut Blur Blurs image R Rubber Stamp Clones image data S Line Creates vector lines N Pen Creates Bezier paths P Rectangle Creates vector shapes U Type Creates text T Freeform Creates freeform paths O Knife Cuts paths Y Rectangle Hotspot Creates image map hotspots J Slice Creates slices for tables or CSS K Hide Slices and Hotspots Hides slices and image map hotspots 2 Show Slices a
PAGE 5
Jumping Right into the Interface Icon 799 Tool Purpose Keyboard Shortcut Eyedropper Samples color I Paint Bucket Fills color G Hand Pans the artboard Zoom Zooms in and out of artboard Color tools View tools x As you select each tool, notice that the Properties panel displays additional options. (If your Properties panel isn’t visible, choose Window➪Properties.
PAGE 6
800 Jumping Right into the Interface Figure 1-2: Compare original (left) and optimized image (right) in 2-Up view. Figure 1-3: In 4-Up view, you can experiment with ways to optimize an image. Investigating the panels Not unlike the other CS4 applications, Fireworks lets you detach panels from the docking area on the right side of the workspace. Because this procedure is so similar to the methods you use to dock and undock panels in other CS4 applications, we won’t bore you with the details here.
PAGE 7
Jumping Right into the Interface 801 Working with basic selection tools You can work in Fireworks using the same selection tools for both vector and bitmap images. Making a selection with the Marquee and Lasso tools If you are familiar with Photoshop selection techniques, you will have no problem using the same tools in Fireworks. To make a selection with the Marquee tool, simply select the tool from the Tools panel, and then click and drag to surround the area that you want to select.
PAGE 8
02 Jumping Right into the Interface Making a selection in a vector image With 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. Figure 1-5: The Pointer tool lets you move a vector shape. Use the Subselection tool to move the individual points on the path.