We are going to do some basic photo editing to get you acquainted with Fireworks' Tools.

If you have a digital photo you want to use, go get it. {I'll wait.}
Good, you're back. For those of you who do not have a pic right now, you can click here to download a sample pic to use for this tutorial. {Be patient -- it's not a small file!} Just open the picture, then go to File, Save As or you can just right-click on the pic and choose Save Picture As.

Important Notes on Saving Images

Now Open the picture in Fireworks (File, Open...)

The image shown above was scanned, so it is sideways and has junk on the edges. Also, it was scanned at a fairly high resolution (good for print, bad for web).
So, we are going to (1)rotate the image, (2)cut off the extra, (3)lower the resolution, (4)enhance the color and (5)add some text. Then, we are going to (6)save it as a file that will look good but download fast on the Internet (Optimize). {After that, I fully expect you to jump over to the Dreamweaver tutorial and insert the image in your web page!}

You'll notice on the image above that it is showing at only 33% of its full size. Here's a cool key shortcut to learn that will save you tons of time: to Zoom In, use Ctrl & + (the control key and the plus key) and to Zoom Out, use Ctrl & - (the control key and the minus key).

(1) First, we'll Rotate the pic.
Go to Modify, Canvas, then choose the rotation that you need (for this pic it is 90° CW).

Modify is the place to look when you want to change the canvas (look in Canvas) or an object on the canvas (look in Transform).

(2) Second, we need to cut off the edges of the pic, or Crop. The Crop tool is on the Tools window.
If you need to look back at the Tools, now is a fine time.
{The Crop tool has more than one option, so if there's a little camera icon where the Crop tool icon should be, click and hold until your options come up, then choose the Crop tool.}
To use the Crop tool, you just draw a box around the area that you want to keep. This box is adjustable, so if you don't get it just right the first time, you can resize it to fit better. When you have the Crop box just right, you can either hit the Enter key or you can double-click inside the crop area.

(3) Next step: Lowering the resolution.
Important Notes on Resolution

Here's where you need to look:

Go to Modify, Canvas, Image Size. You'll get this window:

Set the Resolution to 72 Pixels/Inch. Also check the Print Size. Generally, a good size for a pic on the web is 4-8 inches on the longest side. Don't worry about the pic getting skewed -- just be sure that the Constrain Proportions box is checked and the short side will automatically change when you change the long side.
Then you click OK, and you should get something like this:

Ain't she sweet? Now the fun parts: playing with color and text. To the right is the image we are going to have at the end.

IMPORTANT STEP: Save your new file (File, Save As). DO NOT use the original file name (read again why this is important).

(4) Color Enhancement. I use this one often because I'm just not a very good photographer. My lighting is never right and I never seem to get my subject balanced in the pic. Plus, sometimes it's just fun to add some neat color effects to your images!
Important Notes on Image Effects in Fireworks

So here is what I did to create the final image {You may need to refer back to the Tools section}:
• I used the Lasso tool to select just the girl. {You have to freehand draw with the Lasso. To make it easier, Zoom In.} Then I went to Select, Select Inverse (this switches the selected area to everything except the girl). While that area was still selected, I went to Filters, Adjust Color, Hue/Saturation.

I pulled the Saturation down to -100 (all the way to the left) and it turned that area to black and white (leaving the girl in color).
I used the Blur tool to tone down the shine on her cheeks and forehead.
I used the Dodge tool to lighten her eyes and her hair.

(5) And then we add the text. Go to the Tools window and click on the Text tool. Draw a box on your image and type in it. {NOTE: You can choose any font you want (unlike making a web page) because the text will be part of the picture.}
To change the Font and add the fun Effects, look down in the Properties window.

The Properties window shows all of the changes you can make in your text. To add an Effect, just click on the plus sign next to Effects and choose from the list. Use the minus sign to remove the Effect.

Now, Save your file again (you should have already given it a new file name, so you can just save).

In the next step, we are going to get our pic ready for the web!

Blonde Tutorials Home • Fireworks Menu • Getting Started •
Basic Photo Editing • Optimizing Photos for the Web • Creating Web Backgrounds