Fireworks Web Design Tutorial
Learn how to design a web site with Macromedia Fireworks
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.
- 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).
- 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.
- 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
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!
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
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.
- 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,
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!
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.