Wednesday, July 05, 2006

How to Create Rollover Buttons.

Creating rollover buttons is very simple but highly effective and the finished product can look stunning if you select the right colour combinations.

Create a new folder on your hard drive and call it buttons then create another folder inside the buttons folder and call it gifs.

Open up your art package and create a new document of 150 pixels by 40 pixels.

Choose a dark fill colour and fill the image. If you are using software that can work with layers then ensure your text goes onto a new layer. Some packages do it automatically others you have to do it manually. If you can’t use layers then don’t worry this will still work.

Select your text tool, choose a light colour and type in the name of your web page starting with HOME (you don’t have to use capitals). Save the button in your art packages native format i.e. acd, psd, cpt, psp, in the buttons folder and then also as a gif in the gifs folder.

The reason to save the buttons in two formats is to save you work. Once you have created one and saved it in the art packages native format you don’t need to create anymore. You can use the same button and change the colours and the text then save it with a different name i.e.button 2, button 3 etc….

Now you need to make the second button to create the rollover effect. All you need to do to achieve this is swap the two original colours around. So the background becomes the text colour and vice versa. Save the new button in native format as button 2 in the button folder and as a gif in the gifs folder.

Now that you have created the two buttons for the rollover effect all you need to change is the text on each button to correspond to the web page it links to and save as gifs.

Save the gif buttons with the names of the web pages they will link to Home Button 1, Home Button 2 etc…

Hey presto instant rollover buttons.

Read the complete article at: http://tinyurl.com/n2pup

Visit the Web Site: http://tinyurl.com/na2lh

© Tim Guy Intrepreuner IT

0 Comments:

Post a Comment

<< Home