We are continuing our understanding of Web creation software and moving onto
Macromedia's Fireworks with this Masterclass tutorial.
Part 1: Creating a background
Once it is open and running you will notice that Fireworks looks very much like
other Macromedia packages and if you are used to graphics packages you will notice
that it all looks very familiar, to open a new document:
From the 'File' menu select 'New'
A dialogue box will appear, make the document size 400 pixels high and 250 wide
The reason for this size is that you do not want a file size that is too large, as
when people visit your Website it will take too long to download. We were creating a
background to begin with.
Click on the 'Rectangle draw tool'
The menu allows you to select other shapes
Select the colour from the colour palette at the bottom of the toolbar
When the curser goes over the file it will turn to a crosshair
Hold the right mouse button down and draw your block
Release the mouse button and it will appear
When working in Fireworks it is advisable to work in layers, this way you can
delete off changes to one layer with out having to make wholesale changes to
your document.
To open the 'Layers' dialogue box go to the 'Windows' menu
Select 'Layers' from the drop down menu
Name the layer for your background
Click 'OK'
It is a good idea to name every layer you create, as this will save later confusion.
With a background created we wanted to add some text to the logo.
Select the 'Text Tool'
This will bring up the 'Text Editor' dialogue box
In the dialogue box select the font, its size and style
Type in the text
Click 'OK'
Drag the letter onto your background
Toppers' tip: Open Toolbars from Windows bar
Part 2: Using Effects
When you are working on graphics like this you need to think ahead, as anything
you do later may effect what you have already created. Our logo had a large C and
then the word cycles, to add further text:
Do not add text near where you have already added text
Click on the 'Text Tool'
In the 'Text Editor' tool edit the text properties
Click 'OK'
One of the advantages of using this program is that it has many effects, which can be
added to text.
Click on one of the words or letters you have added
Select the 'Effects' dialogue box from the 'Windows' menu
Select an effect, we chose 'Emboss'
You can change the pixel rate of the emboss to increase its depth
There are many effects that can be changed such as where the light comes from
Toppers' tip: Place new text away from existing text
Part 3: Making it a button
We now want to turn our graphic into a button to be placed onto a Website, for this
we will need to use a multiple effect.
Click on the graphic
From the 'Effects' dialogue box select 'Multiple'
Select the effect, we chose 'Outer Bevel'
Ensure the lighting comes in from the same direction as on the text
Click 'OK'
To add a drop shadow to the button click on 'Drop Shadow' in the effects dialogue box
Follow the same process
With the graphic looking like a brilliant Web button we need to reduce its size so
that it doesn't take up too much memory.
Go to the 'Document' menu select 'Image Size'
We made ours 150 pixels wide
If you leave the 'Keep Constraint Properties' on it will automatically change the height
We now want to export our work so that we can introduce it to a Web page.
From the 'File' menu select 'Export'
Save it as a Gif
