How to create rollover buttons in Fireworks CS4 and export to dreamweaver cs4

A Fireworks CS4 tutorial to create rollover button images that we can export to dreamweaver to use for our side navigation bar. Those of you who are following this fireworks tutorial using fireworks CS3, will still be able to follow along!

It will serve you well to first plan what buttons you are going to need, what you are going to name them and how are you going to save them. What I mean by saving your images is that you will be creating rollover buttons which can have up to 4 states! There is an Up state, Over state, Down state and an Over while down state. And these all need saving in a logical way because you will find it so much easier to find the buttons you need when inserting them in Dreamweaver or your website. Let’s look at the states:

Up State:
how the button looks when you first load a page

Over State:
how the button looks when a person rollovers over the button with their mouse

/> Down State:
how the button looks after a user has clicked on it

Over while down State:
How the button looks when someone rolls over the button with their mouse

Now that we know about the possible states we can create for our Fireworks Rollover Buttons. How do we save our rollover buttons efficiently? A good suggestion would be to work a system that you will use for all future rollover states that you create. So for instance, If you have created a button called home, And you have created four states for it, you can save and export them like this:

home_up

home_over

home_down

home_overdown

Ok so first things first, let’s open up a new canvas. Go to:

File>New – or – shift + Ctrl N

Now, I’m going to make the canvas width 165px or pixels. And that’s the same width as the rollover buttons we’ll be creating in this fireworks tutorial. I find that 165 pixels is about the right width for my rollover buttons. I’m also going to specify the height of the canvas, which is also the height of my rollover buttons and ill make that 31px or pixels. Later, we’ll be exporting the confines of the canvas as a Jpeg image and each rollover image we create in Fireworks, will be the same dimensions.

Your resolution in Fireworks should be set to 72 pixels so make sure that it is. The background can be whatever colour you wish as the whole area within your Fireworks canvas will be covered anyway.

Now click> OK.

So, our Fireworks canvas is set. All we have to do now is style the canvas area and make our rollover buttons. The first thing I’m going to do is go to the vector toolset which is located on the left of your Fireworks screen.

There is an icon there which by default is set in the shape of a rectangle. This is called the rectangle tool. If you cannot see a rectangle then if you press ‘U’ on your keyboard the shape will change and select the rectangle tool that way. NB when you click and hold down on the rectangle tool icon it will bring up other shapes to choose from.

We’re going to be using the rectangle tool on this occasion. We’re going to draw a rectangle around the canvas. It doesn’t matter which size you make the rectangle but the important thing is that it covers the whole canvas which in my case is 165px X 31px.

If you look in the properties inspector you notice that you can change many aspects of the vector rectangle. For instance you can change the fill colour and you can specify a border or stroke and colours for them too. You can change the width, height, edge, texture and even the roundness of the vector you have drawn. There are many other options and the team at Adobe have made Fireworks very user friendly when it comes to proto-typing web graphics which is great for all budding web designers.

Were now going to add a gradient to the vector rectangle and well do that from the properties inspector.

The rectangle should be set as a solid so if you click where it says solid you can choose gradient from the list of options. Then select the linear gradient option. You will see that a gradient has been applied to the rectangle. Now select the pointer black pointer tool which looks like an arrow. With the pointer tool selected you can now grab hold of the arm of the gradient by left clicking and holding your mouse button down. Now you can drag the arm of the gradient to adjust it to exactly how you want it to be.

I’m going to adjust the arm of the gradient so the button looks almost like its 3 Dimensional.

In the properties inspector you can also change the colour of the gradient. In my case the gradient goes from black to white and can you specify what colours you want your gradient to have. You can do that by clicking on the gradient window located next to the paint bucket icon in the properties inspector. You can slide the swatch panels left and right to fine tune your gradient. If you click inside the middle of a swatch panel (they look like little houses with pointed roofs.) you can bring up the colour selector tool and change the colours to best match your website. You can also choose some preset colours gradients from the drop down menu which come with Fireworks.

Once your happy with your button its time to add some text. Lets go back to the vector toolset and select the Text icon which looks like a capital T.

Now place your cursor inside of the canvas area where your fireworks rollover button will be, and type the word ‘home’ or whatever you want to call your first rollover button image. Once again you can adjust the text down in the properties inspector.

When we’re happy with our Up State we can now proceed and duplicate the button 3 more times to create our rollover button effects. I tend not to bother with an over while down state as it’s an effect which the end user, your audience will hardly notice. So if you want to you can duplicate the sate only 2 more times. The great thing about duplicating our rollover buttons is that we will get 3 copies of our original rollover button and we can make subtle or extreme changes to these other rollover states which go towards animating our buttons on our website.

So lets go over to our states panel located on the right side of the Fireworks screen. If you cannot see the states panel you can go to Window>States from the menu bar or press Shift + F2 and that will bring up the states panel for you.

Right click on State 1 which you should see inside the states panel now select Duplicate State from the menu.

We will duplicate the state ‘after the current state. If you are making a full navigation bar with 4 states then you need to duplicate the state 3 times, if you are making rollover buttons just with and up state and over state then you want to duplicate the state 1 more time obviously. Now that you have duplicated your first fireworks rollover button image you can now make changes to the other buttons. You can apply filters and colour effects, or simply change the text colour. This is all done from the properties inspector.

So now click on state 2 from the states panel and you will see the same image as your up state rollover button. Make a change to that copy of the state by say changing the text colour and then click on state 3 and adjust that one too. It’s important to make sure that you don’t move the text unless of course you intend to do that as part of the styling of the rollover buttons.

Once you are happy with how your buttons look, you can export the buttons as jpegs or whatever image format you prefer. If your button doesn’t have complex blending or lots of detail you can export the buttons at a lower quality. My default on Fireworks is set to Jpeg 80 but a lot of the time I reduce the quality of the buttons to around Jpeg 50. This can save your audience a lot of page load time. After all you don’t want a laggy site do you?

The optimize panel should be just above your states and layers panels. If you cannot see the optimize panel, you can go to window>Optimize or by pressing F6. When you reduce the quality it will also tell you how long in Kb it will take to load. The smaller the quality of your rollover buttons faster the load time on your site. Don’t get too caught up in load times. Were only talking milliseconds here but every little helps so compromise and don’t upload PNG files unless its absolutely necessary because the files are much larger than that of a Gif or Jpeg file.

I really hope you have enjoyed this Fireworks tutorial on how to create rollover buttons.

James Brand

Article Directory: http://www.articledashboard.com

check out my website for great dreamweaver tutorials and fireworks tutorials James Brand is a freelance webdesigner and has created www.dreamweavertutorial.co.uk to help promising web masters to get their first website off the ground using Adobe Dreamweaver.

Adobe Education Store