homecontact


News

Rolover Images

In this tutorial i am going to use fireworks. Fireworks is probably the best program for creating rolover buttons because of two reasons. One the paths are still editable and the other is that it is saved in PNG which is a web safe file format meaning a small size and compatable with browsers.

Step 1 is to open fireworks and create a new image with dimension 190 by 22.

 

 

You can set the canvas colour by clickin the small palete icon at the bottom. I have chosen a simple blue but you can pick a colour to match your site.

 

 

Insert some text and place it onto the canvas.

 

 

You should now set up some folders to place your images. This is because you will have to set up one as a normal state and one as a rolover image. So simply just creare a folder normal and over.

 

 

You should save one image as a normal image and create a second image that will be the rolover. You should change the rolover image. I have changed the background colour slightly and the text colour to yellow. A good extra effect is to nudge the text down and to the right, this gives the effect that when someone rolesover it is being pushed down.

 


 

 

You now have to create the rolover in dreamweaver from the images you created in fireworks.

 



Back to Top