• Lesson Index:
• Overview
• Layout
• Getting Started
• Setting Colors
• Draw Layout
• Enhance Photo
• Import Image
• Gradients & Masks
• Components
• Making the Header
• Smudge Tool
• Write Title
• Navigation Bar
• Footer
• Finishing
• Slicing
• Export
• Export Options

Drawing Our Layout

In the last lesson, we had our rectangle tool selected with pen color of black and fill color of #DFEDEE. Next, make sure that Snap to Guides is checkmarked...

And draw out our rectangle as shown.

We are going to have a bluish webpage with a black border. But we can not see the black border quite clearly since it was set to be only 1px thick and is being covered up by the guides.

Do Ctrl-; (that is pressing the semi-colon key while the Ctrl key is depressed) and the guides will disappear. This is equivalent to the menu command View -> Guides -> Show Guides.

Still can't see our border clearly. Because now, Fireworks is putting handles on our shape since it is the currently selected shape.

De-select our shape by clicking on an empty spot in the canvas.

Our handles have disappeared and our Rectangle shape in our Layers panel is no longer selected. But it looks like we are missing the right and bottom border? Actually no, we do have all four border, but since you are viewing at 50% scale, the monitor screen does not have enough pixels to show you all the details. Set you view back to 100% scale, scroll around, and you will see your borders. Okay, now you see why I made such a big deal about 100% scale (or Ctrl-1).

Zoom Tool

Another way to look in closer is to use the zoom tool. I like to use Ctrl-Space and drag to zoom in. If the Alt key is depressed while using the zoom tool or using Ctrl-Space, it performs a zoom-out instead of zoom-in.

Here I have zoomed in to about 43 times its normal size (4338%). See that the ruler measurement always mark off the correct pixel dimension. Although on the screen, the line looks as if it is 43 pixels wide; according to the ruler, it is really only one pixel wide.

Hand Tool

Another useful tool is the hand tool invoked via the space bar or from the toolbox as shown. Try it. It enables you to move your canvas around.

Changing Canvas Color

We want a dark gray background to constrast nicely with our light page. So change the canvas background color by the above instructions and we get

Saving the File

The asterisk next to the filename in the file tab indicates that our file has been modified and requires saving. Good time to save the file and also a good time for a break.

Here is the file we have so far:

creativeworks.png

Just right-click on the link and select Save As to download my file.

In the next lesson, you will learn how to use Fireworks to enhance a photo.