I’m loving what I’m seeing of your site so far and greatly appreciate the tutorials that you’re making available.  I’ll be picking up your book when it becomes available, but in the meantime might you be able to recommend a reference that deals with using Fireworks for design?  Are there any books that you consider indispensable?  Thanks, and I look forward to future postings!-Chris

Thank you for the kind words Chris! As for your question regarding Fireworks literature, sadly I can’t recommend anything. The bulk of books that have been released for Fireworks over the years typically illustrate how to use the tools individually, as opposed to  demonstrating how to use them in a workflow. If anyone has any recommendations for Chris please leave them in the comments!

I have noticed the following on some blogs:

“This is a preview of Fire Up Your Butt: Part 3. Read the full post (421 words, 5 images, estimated 1:41 mins reading time)”
Please tell me what WordPress  plugin you use for this and where can i download it.

-Boris

The plugin I use that you’re describing is called “Evermore”. You can download it here.

I have a couple of questions:

1. Will your tutorial work with FireWorks MX?

2. Will your series cover how to open WordPress Blog in my site so I am able to see my navigation buttons? Just like your site?

-Lynn

I’ll admit that I haven’t used Fireworks MX in quite a long time, but for the most part in this series we’re keeping things pretty simple. In the event my exact instructions don’t match the version of Fireworks you’re using, it could be that that particular feature or option was moved in later versions of the software. Look around the user interface to find a solution, or if you get stuck just leave a comment or contact me through my form on this site!

As for WordPress theming, this question comes up quite often. As such, I’ll be writing a tutorial on the basics of WordPress customization later on. Thanks Lynn!

If anyone else has questions just shoot me a note with the contact button above, or if it’s specific to a tutorial just leave it in the comments. Thanks everyone!

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.

Say for example you had a blue box on a white canvas. If the file was a raster file, it would be made up of a series of blue pixels on a white background. A vector file would be made up of four points, four lines that connect the points, and a fill that makes our box blue.

Adobe Photoshop, a raster based photo editing program, wasn’t quite right for what was basically a new visual industry – but that’s what designers flocked to as the web grew in popularity. Since Photoshop works by adding or manipulating images on a pixel by pixel basis, what if a client wanted a particular box larger, or the dimensions of a button different? In Photoshop this would mean changing any number of layers and flat bitmap images.Enter Macromedia Fireworks. Using our example above with Fireworks, we can enlarge our box and change our buttons by simply manipulating the raw shapes, characteristics, fills, and effects that make up each shape in the design. But it gets better! Unlike other vector editing programs like Illustrator, Fireworks also lets you edit raster based images right in the same environment. This allows you to import a photo, manipulate it in a similar fashion to Photoshop, and then treat it like any other object in Fireworks. Once you’re ready you can slice, optimize, and export your images for the web. In addition Fireworks creates and exports animations, batch process images, creates drop down menus that seamlessly snap into Dreamweaver, and tons of other things useful for a web designer.

I’m quite sure I can convince any web professional that Fireworks is an invaluable tool, and if you continue reading I’ll attempt to do just that for you, dear reader.

For a more in depth read on Fireworks, I highly recommend the following read from Stéphane Bergeron at the Adobe Developer Center.

Then continue on to my first tutorial, Setting the Stage: A New Fireworks Document.

I’m using this blog as a way of warming up to writing a book on the use of the program, so please bear with me if my tutorials seems less than well formulated at first. My goal for the book, and in the short term this blog, is to show new users my web design and development process for a new project from beginning to end. From the initial concept development in Fireworks and Photoshop to the complete html/css framework in Dreamweaver. From there who knows, but I already have tons of ideas!