-
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 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!
-
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. |
-
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.
