To create a tutorial in Fireworks CS4 rollover button images that we can export to Dreamweaver to be used for sidebar navigation. Those of you have CS3, fireworks after this tutorial using fireworks will still be able to follow!
It will serve you well to plan before you go to what buttons you want and what the name as you are going to save them. What I mean is that the images in the creation of rollover buttons, which can have up to fourStates! This is an up-state, the state, down state and an Over While Down state. And they have to save everything in a logical way, because it turns out that there is a lot easier, the buttons you need to find when you paste in Dreamweaver or your website. Let's look at the conditions:
State: The appearance of the button when you load a page
Beyond the state: what the button looks like when a person rolls over the button with the mouse
Down state: what the button looks like after a user has clickedon them
In addition been lowered: how the button looks like when someone is on the button with the mouse
Now that we know about the possible states that we create for our Fireworks rollover buttons. How can we save our rollover buttons efficient? A good suggestion would be a system that for all future states rollover, you create works. For example, if you created a button called home and you have created for them to have four states, you can save and export asthis:
home_up
home_over
home_down
home_overdown
Ok, so first things first, we open a new canvas. Jump to:
File> New - or - Shift + Ctrl + N
Well, I'm going to do about 165px wide canvas, or pixels. And this is the same width of the rollover buttons in this tutorial we will create fireworks. I find that 165 pixels is about the right width for my rollover buttons. They are also present at the height of the canvas that the amount of myRollover Buttons and ill do that 31px or pixels. Later we are exporting the borders of the screen as a JPEG image and each image we create rollovers in Fireworks, you have the same dimensions.
The Fireworks resolution should be set to 72 pixels, so make sure it is. The background can be any color you want to cover the whole area as in your Fireworks screen anyway.
Then click> OK.
Thus, our fireworks are set to screen. All you have to do is, now the styleCanvas on us and create rollover buttons. The first thing I do is go on the vector tool set, which is located on the left side of the screen Fireworks.
It is a symbol indicates the default value is set in the shape of a rectangle. This is known as the Rectangle tool. If you can not see, a rectangle, if you 'U' on your keyboard, press the form will change, and select the Rectangle tool in this way. NOTE: If you click and hold the rectangle tool icon, it comes to other forms ofchoose.
We are using the Rectangle tool on this occasion. We draw a rectangle around the canvas. No matter what you do dimensions of the rectangle, but the important thing is that the entire fund, which in my case 165px X 31px covers.
If you notice in the Property inspector you'll see that changes many aspects of the rectangle vector. For example, you can fill out and you can specify a limit or a stroke and colors for themtoo. You can change the width, height, margin, texture and even the curves of the vector you drew. There are many other options and the team at Adobe Fireworks is very easy to use when it comes to prototyping, web graphics, ideal for all budding web designer is.
Add one now would lead to the rectangle carrier and to know that the property inspector.
The rectangle should be set as fixed so if you know where it says solid, you can choose, clickGradient from the list of options. Then select the linear gradient. You will see that a gradient was applied to the rectangle. Now select the black pointer tool that looks like an arrow. Have selected with the Pointer tool, can now take the slope of the arm with the left mouse button and hold the mouse button. Now you can arm the gradient to make it exactly how you want to fit.
I will adapt to the arm of the gradient, so that the keyit seems that its 3 dimensions.
In the Property inspector, you can also change the color of the gradient. In my case, the gradient goes from black to white and you can specify which colors you want for the gradient. You can do this by clicking on the window next to the gradient of the paint bucket in the Property inspector to do. You can slide the panel Swatch left and right to develop the gradient. If you're in the middle of the Swatches panel (they look justHouses with peaked roofs.) You can sort the selection tool color and change colors to match the most of your website. You can also use some preset gradient color from the drop-down menu that come with Fireworks.
Once your satisfied that the button once to add text. Let's go back to the toolset carrier and select the text icon that looks like a capital T.
Now position the cursor inside the fabric, where your rollover fireworks button will give you and the word"Home" or whatever you call your first image of the rollover button. Once again, you can view the text in the Property inspector.
If we are happy with the state, we can now go ahead and duplicate the key 3 times to create our rollover button effects. I tend to have not one, during the state of Down, as they have an activity that is the end, the audience will barely notice the effort. So, if you prefer, you can duplicate the still only 2 times. The great thing about duplicationour 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.
for more great tutorials, Dreamweaver tutorials or fireworks tutorials come check us out!
