Let’s get going by downloading the last PNG that we left off with here. In the last installment of this series we added a feathered photo to the background of the design using an image we downloaded at sxc.hu. In this new tutorial we’ll add a sidebar to our design to break up the space. Since we already have the coffee cup image on the right hand side of the layout we’ll add the sidebar there.

Before we really get going, I want to introduce a feature of Fireworks that plays a very important role. If you’re familiar with any other popular graphics program you might already be familiar with the concept of layers. First click “Window” in the top toolbar and make sure you have a check next to “Layers” in the drop down menu. You should have two layers so far in the panel, a “Web Layer” and “Layer 1″. We’ll be talking more about the web layer in the future, so ignore that for now. Layer 1 as you can see contains each element that we’ve added to the canvas so far organized by their stacking level. You should be able to click the layer named “Coffee Cup”. You’ll note that when you do so the coffee cup layer is highlighted and the actual coffee cup image on the canvas is selected. This is pretty handy as you can now move the coffee cup around with your arrow keys or preform other actions on it that you normally would.

You can also click and drag the coffee cup object up and down in the layers panel to change it’s stacking order position. In our Bellabean example I could click and drag the coffee cup down past the first “rectangle” object. This would put our coffee cup behind the faded green bar in our masthead. Try experimenting with the stacking order of the coffee cup object if you’re not familiar with the layer concept. Be sure to fix everything back or reload the PNG before continuing though.

When you’re ready, let’s make a new layer! To make things easier to manage for now, collapse “Layer 1″ by clicking on the down arrow to the left of the layer name. Now click the “New/Duplicate Layer” icon at the bottom of the layers panel. Fireworks will automatically name this “Layer 2″. If you double click the text that spells out Layer 2 you can rename the layer. Lets rename ours “Right Sidebar”. Much like we repositioned objects in layer 1, we can click and drag layers around in the stacking order as well. You’re new layer should already be on top of Layer 1, but it not move it there now. Now just lock layer 1 and we’ll be ready to get to work. To do this, click the white space next to the eye icon (if you have layer 1 selected you’ll see a pencil icon). You should now see a lock icon, and you won’t be able to move or interact with any objects in layer 1. Now let’s make our sidebar!

Select the rectangle shape tool and draw a rectangle on the right hand side of the body of the page. I started mine in the very corner of the solid green rectangle that sites atop the green gradient behind the coffee cup. Since we’re working on Layer 2 which sites above all of those other objects, the new sidebar rectangle will be on top of every other object for now. I made my rectangle 300 pixels wide, and positioned it exactly so as to touch the edge or the green bar and the side of the main body content.

If you downloaded the latest PNG and have been following along, you’re new rectangle might have inherited the same gradient that we used before. Let’s change this to a solid fill by changing the setting from “Linear” in the properties panel to “solid”. Change the color to #3D6312. How did I come up with this color? I used the eye dropper tool to select a random shade of green to the left of our new sidebar, then I clicked the new color chip in the properties panel. From there, I clicked the icon that looks like a color wheel called “Sys Color Picker”. I then moved the right hand slider down to darken the shade of green I picked with the eye dropper. I then clicked “Add to Custom Colors”, and closed the window with “ok” (these steps could be significantly different on a Mac).

This is looking a little goofy at the moment with the coffee cup behind the sidebar. Let’s fix that by unlocking “Layer 1″. We can now click on the coffee cup to select it, and cut it from the canvas with CRTL+X or Edit > Cut. If you now click our new dark green sidebar and paste (Ctrl + V or Edit > Paste), the coffe cup will be pasted on top of the sidebar in the “Right Sidebar” layer in the exact same position that it was before. Since it’s already selected and probably annoying you as much as me, use your left arrow key to move the coffee cup into the center of the column.

You should end up with something like this:

Now let’s add a few finishing touches to the sidebar element before we wrap up. Select the darkgreen sidebar shape, and make a copy of it using Ctrl+C (or Edit > Copy). Now paste the copy on top of itself with Ctrl+V (or Edit > Paste). Since we cant tell that anything happened, let’s change the color of the new rectangle. The new rectangle is already selected, so click the fill color chip in the properties panel at the bottom and select black (#000000). Now press Q on your keyboard to activate the scale tool. Use the bottom-center anchor point to drag the rectangle up. Set it to the same height as the top green bar that runs the length of our page body, which is 40 pixels tall. If you can’t eyeball it just right, use the numeric transform in the lower left of the properties panel to set that bar to 40 pixels tall.

Change the opacity to 30% to finish up. A subtle touch sure, but we’ll keep building up this area in the coming weeks.

Next time we’re going to add a few more details to our sidebar, and then dive into text and typography with Fireworks. For now you can download the completed PNG here. Coming up I’m also going to address some reader mail which I’m sadly backlogged in. Thank you for the continued support and encouragement! As always I appreciate your comments, and be sure to point out any problems that I might have over looked. Thanks again.