Free template user guide

STEP 4

Editing buttons

Every button is made of two images. The first image is the image you can always see, the second one is the image you see when you go across the button with your mouse. So, by editing one button you have to edit two images.

First find the names of the empty buttons in empty buttons and logo folder (in this example the name of folder is template 12, because the template name is web template 12). 

In this example you will have 3 empty buttons,  one for starting a menu, the other for in the middle from which you can make more buttons and the third for the end. Hover buttons you will make alone. In some other templates you will have only two buttons (exp. button and button hover). That means that you can make the whole menu from first button (in this example that will be three buttons), and the second button (button hover) you use for making the hover buttons (the buttons which shows up when you cross over the button with a mouse). 

When you find it open the first button using Jasc Paint Shop Pro ( right click on a file> open with> Jasc Paint Shop Pro ).

Increase Color  to 16 millions ( Image>Increase Color Depth>16 million Colors )

Zoom the image about 5 times using the scroll button on the mouse for easiest editing (click on the image with left button on the mouse and then zoom with the scroll button). 

Enable the grid (View>Grid). 

To enter your text in an empty button use Text Tool ( A ). Click on A  to  select the text tool. Now that the text tool is selected click on the empty button in the general area of where you would like your text to be. This will bring up a menu that will allow you to edit border, colors, size, font face and other options. We suggest creating it as a selection with anti-alias checked. When you have done all that, click apply and locate the text in the center of the button using your mouse.

Now save the button in the template folder (File>Save Copy as), for example "home". Use save as type "gif".

This is the end of the editing the first image.

For second image first open the image that you have just saved (so you could compare) and the first empty button that you have edit.

Increase Color to 16 millions and zoom  both images for about 5 times.

In the empty image enter the same text using Text Tool ( A ).

In this image you can change the color of the text and his position (in our first image the text is white but in the second image the text is yellow an a little bit more left and up than in the first image. That gives the effect when you go across the button, the text changes the position and color in to yellow).

Now save this image in the template folder (File>Save Copy as), for example "homehover". Use save as type "gif".

Other buttons you can edit the same way.