March 22
Exploring the Basics in Fireworks 3

by Don Lie
Producer

Designing graphics for the Web used to be such a tiring chore. I remember the days of struggling through Adobe Photoshop 3.0 on my Macintosh Performa 631 with its 8 MB (that's right, 8 MB!) of RAM. Now that I think about it, it was pretty amazing what that little ol' Mac could do!

Effects are nondestructive in Fireworks 3, including filters designed for Photoshop. They can be selected, deselected and edited at will by simply checking, unchecking or double clicking them in the Effects palette.

Now we have a whole slew of high-powered tools geared toward Web production (but certainly not lacking in print-quality features) to help us get the job done, including the one we're going to talk about today. Here's a quick, introductory tutorial to show you around some of the features of Fireworks 3 from Macromedia.

A couple of notes: You'll be familiar most of the tools and palettes from Photoshop and other graphics applications. One thing you might not be familiar with is object selection. Each element on your canvas is contained within a rectangular box (like slices in ImageReady) and can be manipulated by grabbing anchor points (like a picture box in a page layout program). You might prefer the the feel of Photoshop's layers a little more, but the approach used in Fireworks 3 has several advantages, particularly when it comes to multipurposing your graphics. By insulating each element on the canvas, Fireworks can essentially "protect" these elements from "destructive" effects. For example, in Photoshop, if you apply several filters to a layer, you can't just go back and unapply them or edit the values of the effects. You can use the History palette, but that's cheating, and you lose it when you transport your file. With Fireworks, I can apply virtually any Photoshop filter and go back in and edit the effect at will. That's pretty handy. It's something like the nondestructive Layer Effects in Photoshop, but you have a lot more of them in Fireworks.

So let's take a quick look at some of the more basic functions of Fireworks 3. What I will show you is a logo I created using Fireworks 3.

Step 1. Using a canvas size of 400 x 400 pixels, I first selected the ellipse tool from the toolbar on the left and drew a circle in the center of the canvas. Then I selected my newly created object and went over to the Effects palette. I selected the Inner Bevel and Drop Shadow effects. I set my Inner Bevel to Flat (effect name), Width 6, Contrast 75 percent, Softness 2, Angle 135 degrees with button preset set to Raised. I set my Drop Shadow effect to Distance 5, Opacity 80 percent, Softness 4, Angle 315 degrees. To create the black ring, select the Stroke tab (from same palette). Chose Basic (stroke category), then Soft Rounded (stroke name) and 6 (tip size).

Step 2. First I put a black "X" in the middle of the circle. Then I selected the "X" and chose Inner Bevel and Drop Shadow again. I set my Inner Bevel to Flat (effect name), Width 5, Contrast 75 percent, Softness 3, Angle 135 degrees with button preset set to Raised. I set my Drop Shadow effect to Distance 5, Opacity 65 percent, Softness 4, Angle 315 degrees. I selected the Object tab (from same palette) and chose the Stroke button to draw a stroke along the outside path. Then chose the Stroke tab with the settings Basic (stroke category), then Pixel Soft (stroke name) and 2 (tip size). I selected the Fill tab (from same palette) and set the fill category to Solid with the fill color set to Red.

Step 3. Now the finishing touches on my little logo. I just wanted to place some text on the circle and "X." The instructions to create this text effect are similar to the first two steps. (Text and graphics are all treated the same in Fireworks, and text retains its editability even when applying filters that would force you to render a type layer in Photoshop.) So here we go.... I selected the Inner Bevel and Drop Shadow effects. I set my Inner Bevel to Flat, Width 9, Contrast 75 percent, Softness 3, Angle 135 degrees with button preset set to Raised. I set my Drop Shadow effect to Distance 5, Opacity 80 percent, Softness 4, Angle 315 degrees. I chose the Stroke tab with the settings Basic, then Pixel Soft (stroke name) and 2 (tip size). This will give the text a nice, beveled and raised-up effect off of the layers below.

After creating your image, you can save it in the Fireworks native PNG format for later editing and export your current project for the Web (without having to flatten layers and manually delete channels).

Post a message in the Creative Mac World Wide User Group!

For more tutorials, click on the images below.

Are YOU a Mac expert? Do you have some time saving, image building, knock your socks off tricks up your sleeve. Share them with the rest of the Mac community and be forever bathed in glory. But make it a quickie, you have 58 seconds, give or take a few minutes. Send an amyl to producer@creativemac.com Read Previous 58-Second Tutorials