Session Objectives:

By the end of this session, you should be able to:

• use the toolbars effectively
• resize an image
• crop an image
• make a background
• save work in PNG
• export work to jpg or gif.

|| A. Get Acquainted with Fireworks || B. Modify a Picture || C. Save as PNG; Export as JPG ||
|| D. Make a Background || E. Save as PNG; Export as GIF ||

WHY FIREWORKS (And why not Photoshop?)

No question, Photoshop is a great program, and it has been the industry standard for a number of years. But Fireworks easily rivals it in advanced features for producing/editing images for the Web, and easily surpasses it in ease of use and integration with Dreamweaver. It is also significantly less expensive.

If you are an artist and intend to work in the print medium of graphic arts, Photoshop is probably your program. For everyone else, Fireworks is probably the best choice.

It should be noted that Fireworks has many advanced features that we will not touch upon in this "Five Steps in Five Hours" series. For instance, we will not cover linear gradients, color correction, layering, framing, slicing, the magic wand, simple rollovers, disjointed rollovers, scripting and behaviors, the difference between raster and bitmap, or dozens of other features, tricks and issues.

What we will cover in this hour is the very least you need to know concerning:

1. comfort with the interface
2. how to crop and resize a photograph
3. how to make a simple background image
4. how to export your working Fireworks files to the proper format (jpg and gif)

The good news is--learning these basic skills in Fireworks will make it much easier for those of you who wish to pursue more advanced graphic techniques. The enrichment section of this online class addresses many such intermediate/advanced skills.

Figure 3A-1

Figure 3A-2

YOUR WORKSPACE

Fireworks gives you a convenient way to set your workspace according to your screen resolution size. To do this:

• click on (toolbar) Commands --> Panel Layout Sets --> and select the appropriate resolution (Figure 3A-1)
• if you do not know your current screen resolution, click on (Windows Taskbar) Start --> Control Panel --> Display --> Settings

Your workspace should look something like Figure 3A-2

Look familiar? It is very similar to the Dreamweaver MX workspace setup.

Notice the Toolbar located to the left. This is the feature you should spend time exploring. Although it, too, offers tools and features we will not cover this hour, this toolbar is your first best friend in Fireworks.

Notice the Properties Inspector located at the bottom of the screen. Similar to the Properties Inspector in Dreamweaver, the inspector is contextual and changes according to what image is open and/or what tool in the Toolbar is selected.

Notice the Panels Sets located to the right. These panel sets give you access to tools we will not use in this Step Three.

At the beginning, you can safely ignore more than half of these tools.

You will most frequently use the POINTER. It moves and selects whatever is on your canvas.

Click on the SCALE tool, and it will give handles to the object and allow you to resize it.

Click on the MARQEE tool (or marching ants) and you can cut, copy, paste objects on your canvas.

Click (and hold down) on the arrow below the Rectangle Marquee to access the Ellipse Marquee, which will allow you to select circular shapes.

The EYEDROPPER is fun. Experiment with it. Click the tool, your cursor turns into an eyedropper. Move it to any object in your program, and it will "capture" that color and put it in the Color Well.

Click on the RECTANGLE tool to draw a rectangle.

Click (and hold down) on the arrow below the Rectangle to access the Ellipse tool, which will allow you to draw a circular object.

Click on the PAINT BUCKET, and it will fill whatever object is selected on the canvas with whatever color you have in the color well.

This is the least you need to know about the Toolbar.

Figure 3A-4

Figure 3A-5

Figure 3A-6

The Properties Inspector is a terrific feature (or set of features)!!

It is contextual. It changes as you select different kinds of tools, giving you access only to the controls that are appropriate to whatever you have selected.

For those of you who used Fireworks 4, the Properties Inspector replaces the Object, Stroke, Fill, Effect, and Tool Panels.

For instance, when you click on:

• the select arrow, you get controls as illustrated in Figure 3A-4
• the text tool (or a text object), you get features as illustrated in Figure 3A-5
• the rectangle or ellipse drawing tool, you get features as illustrated in Figure 3A-6

In other words, the Properties Inspector is a "just-in-time" super tool that displays only the tools you need only when you need them.

No need to pay any attention to them for a while. (Figure 3A-7)

• Explore them if you wish.
• Ask questions about them in the Advanced Fireworks Discussion Forum if you wish.

But you won't need them for anything we do in the First Five Steps to Building a Digital Portfolio.

Pay attention instead to your two best friends: Toolbar and Properties Inspector. Learn how to use their basic features.