Fireworks Web Design Tutorial

Written by Rachna

Learn how to design a web site with Macromedia Fireworks

Welcome to our tutorial on Fireworks. In this tutorial you'll learn how to design and visualize the sample web site found on the right using Fireworks. (Click on the image to see a larger view)

As professional web designers we find Macromedia Fireworks is the best tool to use for designing and visualizing a web site. In just a moment you will see just how easy it is to design a web site in Fireworks! Remember that Fireworks is a tool that just helps you design and visualize your web site. Later you will need to convert your site to html and optimize the web site using Macromedia Dreamweaver.

1. The first step is to define your canvas size and color. Open Fireworks and click on File>New. Fireworks will launch the new document window. Here you can give the width as 780 pixels, height as 600 pixels and the canvas color #003399 or any color you like (in this site we have used a blue and orange color combination).
   
   
2. You will now have a blank blue canvas. Lets give the site some basic structure now. Click on the rounded square found on the toolbar in the left - you'll need to click on the little arrow found at the bottom of the square tool to get the other options. With the rounded square selected make a big rectangle across the screen as seen in the sample site shown on top. Let the right side of the rectangle go out of the canvas. You can adjust the rounded corner by adjusting the roundness in the object panel (If the object panel is not already open, click on Window> Object to open the panel). We've used 20 for the roundness. Select the rectangle and make the stroke color #FF9900 and the fill color white (take a look at the picture on the left to see where you can find the stroke and fill colors. This will be the basic structure of the site. Rounded edges make a site look more appealing rather than stark edges. This is a simple and effective way of defining the structure of a site. The content for the site will come inside this box.
   
   
3. You can now fill in some content. Click on the A tool found in the standard toolbar. On clicking on the canvas you'll get a text pop-up window where you can specify the font type, size and color. Type in your content and click on OK. You can click on any of the corners of the text to adjust the size of the text.
   With the same text Editor type in the title of your web site. Give your title a bold font and keep the size relatively high. The title needs to really stand out. You could also type in your slogan or a brief description about your site in a smaller font below the title - this will tell your site visitors what your site is all about!
   
   

4. Photographs and images make a web site visually appealing and more interesting so try to add a few pictures to your web site. As the same time your web site should not be graphic intensive as it will slow down the load time. In the sample web site shown on top we have used on two images which has added to the visual appeal. Fireworks has a great property called Paste Inside which helps in making interesting graphics.
   Make a circle with the circle tool found in the standard toolbar.
   Tip - Hold down the shift key while drawing the circle to get a perfect circle.
   Think of a picture you would like to use in your site. Import this image by clicking on File>Import, navigate to the folder which has the image and select the picture. Click within the canvas for the picture to be imported.
   Once the picture is imported place it over the circle you have just drawn. Next, choose the picture and click on Edit>Cut. Then, choose the circle and click on Edit>Paste Inside. The picture should now be pasted inside the circle as seen in the sample site.
   You can now add an effect to this picture to give it a more professional look. Click on Window>Effect to add an effect to the picture. You can try out some of the effects shown below:
   

   We've used the first effect for the sample site. Choose the picture and in the Effect panel choose Shadow and Glow>Drop Shadow. In the pop-up window make the distance 6, color #999999, and angle 3. You can also optimize pictures by clicking on Extras>Adjust Color. Here you can adjust the brightness, contrast, hues, saturation and more. Once you have completed the picture with the effect place it on the top left corner of the site over the rectangle's top curve. You can also make another image like that and keep it with the content, to add to the visual appeal of the site. Try out more cool effects with Photo Optics and Masking.

   
   
5. Now coming to the most important part of a site - the navigation. For the navigation of this site we will be using simple buttons. Again we will use the rounded square tool to make the buttons. This time we'll keep the roundness as 60. The fill color will be orange (#FF9900) and the Stroke is None. We will give the buttons an embossed look so keeping the button selected, go to your Effect panel click on Bevel and Emboss>Inset Emboss. Once you've got your button the way you like it, copy and paste it one below the other. Once you have all the buttons one below the other you can align the distance between them by selecting all the buttons and clicking on Modify>Align>Distribute Heights. This will space the buttons equally. Click on the A tool and write the name of the links on each of the buttons.

Congratulations! You've done it. In 5 simple steps you've learnt how to design a simple web site in Fireworks 4.0. Learn how to design a website for all screen resolutions.

You could add all kind of cool elements to the site, like rollovers, swap images and drop-down menus. Learn how to do this in fireworks with our tutorials. Also, take a look at our ready-made Fireworks and Dreamwever templates. A great way to learn Fireworks and Dreamweaver!

---