Ok, in this tutorial we are going to get stuck into blocks. You can check out my other hubs or theÂ CAD Training Blog for more tutorials.
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.
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.
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.
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.
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.