Macromedia Fireworks MX Tutorial	3.4/5.0 (5 votes total) Rate: Select 1 - Terrible 2 - Poor 3 - Average 4 - Good 5 - Outstanding
Neil Parnham June 14, 2007

Macromedia Fireworks now known as Adobe Fireworks is one of the best known and used graphic applications for web authoring for both beginners and professionals alike, its ease of use yet powerful system can create stunning sites from scratch.

In this tutorial we will show you how to use this fantastic program in a easy step by step visual based presentation to help ease the stresses of learning.

Above is part of the window that you will be presented with when you load up fireworks, because we are starting a new document you would click ‘Fireworks File’ found under ‘Create New’ this will create a new document, if you had previously made a document and saved it you could click one of the recent items to open it or click on the open icon to open an item not listed on the list shown.

Once have selected new file you will be shown this window above, please input the size you wish to have the work area for example on this its 900 * 500, and click ok, now you are presented with your work area where you can start designing your website or graphics.

At first when you load up the screen you will not be at full zoom, you can find out your zoom level by looking right at the top of the screen at it will says something like 66% , so now you probably have noticed all the button tools on the left hand side of the screen. Now we need to zoom in, to do this select the tool that looks like the image below then move your mouse pointer onto the work area, then right click you will have a menu appear, now select zoom in and do this until the top bar say 100%.

Now that you have the correct zoom level now we can begin to learn about graphics.

Click on the following image on the left hand toolbar Now that this is selected move your mouse pointer over to the work area then click and drag the square to your desired size, you will now have a square in the default colour, you can change the colour by selecting the pointer that has a white centre at the top of the toolbar then selected the square you just made, now that you have done this you will see a menu appear at the bottom of the screen, on the left of the menu there will be an icon that looks like a paint bucket and a colour box next to it, click on the colour box then select the desired colour, to get even more colours while on the colour menu click on the sys colour picker as shown below.

If you remember back to when you selected the box from the toolbar, you may of seen an arrow next to the box, now select the box again but hold down your mouse button for a second and a drop down menu will appear, click on any shape you desire and stretch it out on the work area as you did with the box and repeat the colour steps until you feel comfortable with doing this.

Gradients |

As you have seen you have created shapes with a plain colour, but this will not always do, you may need to have a gradient colour on your images. To do this, follow these steps, firstly

1 Select the shape to have the gradient for example the square box

2 Next look at the bottom toolbar that has just appear and you will notice that it says ‘Solid’ next to the colour box, click on this then go up to gradient, then a sub menu will come up offering you what type of gradient you would like to use, for this example click ‘Linear’ which is at the top.

3 Now this is done your shape will have a gradient but it may not be in the direction or colours that you wanted so that is what we will focus on now, for the colours you will see that there is no longer the word Solid in the box instead it is Linear, which means Linear gradient, next to this is the colour box and also that has changed incorporating more than one colour into the shape, click on the colour box

4 Now you have selected it the menu above will appear, as you can see you have two colours blue and purple to change these simply click on the little box with the colour that you wish to change and select the colour you wish to have. You can add more colours in between if you wish this is done simply by clicking anywhere under the gradient bar and you will get another box to add colour too as shown below.

You can also use the preset colours just by clicking under the word present on the drop down menu then selecting the colour scheme you wish to have.

Now you have the colours you want you may want to change the direction of the gradient, to do this select the pointer tool at the top of the toolbar, this time use the one that is completely black, now you have done this select the shape, you will now see a line go through the shape, one end with a circle on it and the other with a square as shown below.

The side with the circle is where the gradient begins so if you wanted it to begin in the middle you would click – hold down and drag it to the centre of the shape, or if you wanted it to start at the top you would drag the circle to the top, then when you have decided where you wish for it to start you will need to use the square tool, this is to set the direction of the gradient up down side to side or diagonal , and it also defines the length of the gradient, to do this click on the square and hold down and then move it around to get used to the feel of it, it moves all over the place, now for example if you wanted the gradient to go down instead of across you would of firstly moved the circle to the top and then dragged the square so it was facing straight down, here are some example below.

Down Gradient Diagonal Gradient Middle Centred Gradient

When you are finished with the gradient simply select the pointer at the top of the toolbar filled with white and then select on any blank area on the workspace, remember to practise with the different colours and gradient types.

As well as gradients you can add other effects to your shape firstly patterns, this can be found on the menu where you select the gradient, but instead of going on gradient go on pattern and then choose the pattern you wish to use, if you want to use your own keep scrolling down to the bottom until you reach other then select it and browse for the pattern you wish to use. (Remember to select the shape first)

As well as the gradient and patterns there is another option you can use, this is the textures menu, when you select the item you will seen a option that says texture select this and choose a texture.

By default the textures opacity is at 50%, this basically means how visible it is over your shape, to make it higher or lower click the arrow next to the opacity amount and hold it down and then drag it up or down to the desired opacity, here are few examples.

(Practise with all the textures and opacities until you completely understand them)

*note* if you select the image you can reduce the whole shapes opacity by sliding the shapes opacity meter up or down, this is found on the far right hand side of the menu after the shape has been selected as shown below.

If you have a square shape you can make this more rounded very simply, to do this select the shape then on the menu that appears below click and hold the rectangle roundness meter until it is at the roundness you want.

Borders

You can also add borders around your images to make it stand out more if you wish, there are many border types and I will explain how to use them.

When you have your image selected look down at the menu and find the border colour box, by default it will have a white background with a red line through it, select this then choose a colour, you can now see that you have a border around your shape like the one below.

You may also notice that next to in the number 1 has appeared, this is to indicate the size of the border, to make it bigger drag the menu slider up and down until you have the desired border width.

As well as the width you can also change the style of the border, select the border style selector as shown above and select which style you wish to have, simple as that.

Font Styles

Text in your document is highly important you need to tell someone about what it is your service or website is about, you can download fonts from sites such as http://www.1001freefonts.com/ once downloaded put these fonts into the following C:/Windows/Fonts/ , ensure you press F5 in the directory to refresh the newly installed fonts and reopen Fireworks Mx.

To input text on the document click the icon that looks like the one below and then click on the document where you want it to be.

Now that you have selected the position on your page you will see a line flashing, now type in the text that you wish to appear. Once this is done select the pointer with the white bit in the centre, and then select the text by clicking it once, now you will get the menu at the bottom of the page, below you will see what these do.

There are many other options on the menu but these are the only ones we will look at for now as the others are more advanced.

The maximum size font on the slide menu is 96, so what do you do if you want it bigger, well simply all you need to do is where it says the size, type in a size that is bigger for example 200 or whatever you want.

You can also use the Scale tool which is found on the main toolbar to the left near the top,

Click this tool

Firstly select the text with your pointer, then select the tool icon above from the toolbar, after this is done you will notice a border around your text with squares on it, move your cursor over one of these squares then you will notice your cursor changes, now this has happened click – hold and drag the text to your desired size, this is the easier method to get the correct size text that you want.

Practise with the different fonts styles until you feel comfortable with them and can easily use them without many errors.

Drop Shadows

Drop shadows can be used for text / images and pictures on the page.

To apply a drop shadow, select the item that you wish to use in this case a circle shape,

Then click on the plus icon next to the word effects, then you have a pop up menu appear, now go to the sub category shadow and glow and then finally click drop shadow, you will then be presented with this menu, there are several options, try playing around with them until you get the effect you want.

Corner Shape Tweaks

When you have a shape that you have made such as a rectangle, you can make the corner stand out a bit more, make a rectangle that is curved, this has previously been shown how to do, once this is done select the shape, then you will notice little square dots around the corners of the image, select one of them then you will get a warning message, click on the don’t show again tick box then click ok. Now start to move the corners around until you have the shape you want, when you drag the corners, you probably will also notice small lines pointing out from the boxes, these are to add curves to the corners, try playing around with them until you get the effect you want. Now that you have learnt all of this information it is time to put it into practise, as you can see below there is a very simple advert, it incorporates all the information that has been taught so you should be able to create it, if you get stuck look at the steps again.

Written by http://www.diyconservatories-and-windows.co.uk/ of http://www.digital-view-web.co.uk/