This is the Fifth part of a series of web design tutorials on Adobe Fireworks. Using a fictional company I’m documenting my design workflow from start to finish. You can follow along by starting at the beginning of the series or by downloading the most recent Fireworks PNG file here (right-click, save-as). If you’re just starting out, you can download the 30-day full feature Adobe Fireworks demo here (note: A relatively painless account setup is required to download the free demo).

Let’s start by firing up PNG that we left off in last time. We just added some vector details and worked with the raster cup we imported and masked. What we need now is a more interesting background. We’ll download from the same source we got our coffee mug from, SCX.hu. The photo of a coffee shop we’re looking for is located here. Once you’ve downloaded the full size file, import it into Fireworks by going to File > Import.

Once you click the canvas to place the file, you’ll note that the photo is rather large. Zoom out using CTRL – far enough to get a better view (50% worked for me).

First thing we’ll do to jazz up the photo is feathering the edges. Make sure the photo is selected by clicking it with the black pointer. Now select the oval marquee tool from panel on the left in the “bitmap” section. Draw an oval over top of the chairs in the photo, keeping your oval well inside of the edge of the photo.

This image illustrates the approximate size and shape we’re aiming for. Feel free to experiment with different sizes and shapes in the future.

With your marquee drawn, go to Select > Feather. Enter 100 for the radius, and click OK. You’ll notice the marquee shrink on you a bit. Now go to Select > Inverse, which will flip the pixels that are selected to the outside of the marquee. To complete the feather, press Delete on your keyboard. You should now have an oval shaped portion of the photo that fades to transparency all the way around.

If everything works out you should end up with something like this:

To work this image into the design, we’re going to use a few different tricks. First, let’s resize the image while constraining the proportions. Select the feathered photo with the black pointer and then hold down Alt and Shift. Now click and hold one of the blue corner points and drag it out to enlarge the photo. I got mine to about 1200 pixels wide. With the photo still selected hold down Ctrl + Shift and press the down arrow. This should move the feathered photo to the lowest position in the layer stacking order (behind the rest of the objects).

Select the top tan colored vector rectangle that resides behind our logo and coffee mug. Set its transparency to 80. Now selected the background photo again and use the up arrow to move it up into position. Get the top of the table that’s in the center of the photo in line with the “COFFEE” in our logo. Now select the top most green bar beneath the logo. Press Q on your keyboard to activate the scale tool. Using the center transform handle cut the height of the shape to half what it is currently. Now use the arrow keys on the keyboard to position the vector evenly between the bottom of the logo and the top of the second green bar.

You should end up with everything positioned like so:

The text and content that will eventually be displayed below our masthead could now run into issues with the high contrast photo in the background. Lets remedy that by adding some color to the inner body. Start by selecting the lower green bar. Copy the bar with Ctrl C, and paste it in place with Ctrl V. As the new copy should be selected for you already, press down on your keyboard to move it off top and just below the original. Now press Q to activate the scale tool, and use the center handle to enlarge the height of our new vector to about three times the height of the tan masthead shape. So far so good! With the new shape still selected, change the fill property from solid to Gradient > Linear. Now click the gradient color chip directly to the right of the paint bucket icon in the property inspector. Click the lower left paint chip in the popup, and then click the green color of the bar or logo on the stage above. Click the right hand lower box and change the second gradient color to white. Click anywhere on the canvas to close the gradient properties. The gradient vector shape should still be selected, so make one last adjustment to it. Change the transparency of the shape to 90, which should show a dimmed out version of our background image through the green foreground color.

If it turned out right you should have something like this:

You can download my completed PNG file here (1.5MB Fireworks CS3 PNG) and compare and contrast your version if you like. I think adding another column to the body will be in store for this project next time, stay tuned!

Special thanks to Brendon for pointing out my typo in the last post, sorry about that … and thanks to KiwiBrian for the encouragement

Tags: Bellabean, Feathering, Fireworks

This entry was posted on Tuesday, April 8th, 2008 at 6:50 pm and is filed under Adobe Fireworks Tutorials, Bellabean Coffee, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.