Internet Marketing Requires Knowledge Of The Internet…. Resulting In Desktop-Wealth!

Internet Marketing Resources for Offline and Online Marketing

How to Fireworks Tutorial: Create Rollover Buttons in Fireworks cs4 and export to dreamweaver

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

Dreamweaver CS4

/> 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:





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:

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

Adobe Education Store

Start Weaving Dreams with a Dreamweaver Web Template

They say and they say it right that the moment you stop dreaming, you stop growing and the moment you stop growing, you stop living. Dreamweaver, the most powerful web designing software till date was created to enable the novices of the web designing stream of the computer field to weave their dreams in form of their own websites.

Creating a website from scratch has always been a cumbersome job for every person. Ever thought of pre-decorated plates that only need to be served after placing your favorite cuisines, if not there are Dreamweaver templates for you. Download them, edit them and use them as simple as get set and go.

Dreamweaver web templates provide users who are new to the internet web site development world, with an amazing way to learn how to create web pages and web sites. More experienced users can use templates as a starting block for new web sites. The Dreamweaver web templates can be edited in Dreamweaver to create the “You” effect in each and every page of yours. You can change the pictures, texts and even include scripts in the Dreamweaver web templates.

When you use a Dreamweaver template, you can impart professional look to your website without getting into too much details for the web

Dreamweaver CS4

designing aspect. There are Dreamweaver web templates available for literally each strata of business and entertainment. Industrial, corporate, Entertainment, sports, news and journals are a few names in the existing wide range of available Dreamweaver templates.

The Dreamweaver templates are easy to customize with Dreamweaver and Fireworks CS3 (new), Studio 8, MX 2004, 4.0, MX and 4.0. They are Compatible with all browsers. Dreamweaver templates have easy navigation built with your customers in mind, Drop down menus lend a professional air, Rollover buttons so your links stand out and Professional color combinations that put visitors at ease. The Dreamweaver templates are created to be generic, and to fit any industry, but with a little creativity you can customize them to fit your specific company’s industry.

So don’t stop dreaming is the moral of the story. Trust in Dreamweaver templates and your dreams will wear the reality robes in the guise of excellent websites. Choose Dreamweaver templates for the editable wonder world and your gateway to the world of fame in this virtual world of information of real people.

Some people use newly developed software to load templates created by Dreamweaver.

Get free articles in various topic for your website or blog content as much as you want at Article Directory:

Portal Controller is a clever piece of software which will create stunning web templates in a snap. It can also take any template you feed it and it will give you a manipulated one back. To find out more about this fantastic new Web Template Software, take a look at

Adobe Education Store