Menu Bar Images
The menu bar images consist of two images. These images make up the button, or tab of the menu bar and are known as slider images.
What is a slider image? Well, a slider image is an image that will normally only show the top half of the image. Then, when a visitor moves the mouse over the image it slides upward showing the bottom half. This slide happens so fast that it looks like the image instantly changed. This is because the files we use are extremely small and once the whole image is downloaded, there is no additional download time needed for the change.
Ok, so let's look at these slider images. Open up Paint Shop Pro. Then open up both files called "tab-left.gif" and "tab-right.gif".
 |
Notice that one image is the left side of each of the tabs. |
 |
And one image is the right side of each of the tabs. The right image is larger because it also "slides left and right to make the tab adjustable to the menu item. |
 |
Notice that the top of each image is the portion that is shown on a normal basis. |
 |
And the bottom is the portion that is shown when a mouse is over the button or tab. |
It is imperative that the sizes and dimensions of these images do not change. There are other ways to change the size of the tabs. Do not change the size of the images.
 |
Let's say that the tabs need to be light blue with a dark blue border and a picture of eggs should appear when a mouse goes over. The first thing to do is increase the amount of colors in the images. Go to the top of the screen and choose "image". |
 |
Scroll down to "Increase Color Depth" and over to "RGB - 16 bits/channel". |
 |
Select the "Paint Brush" tool from the left side toolbar. |
 |
Choose the color to paint with. Fun Tip: To keep the shading and just colorize the button, change the blend mode of your paint brush to colorize and increase the size of the brush. |
 |
Change the upper and lower portions of the images to the way you want them. |
 |
Add the image of eggs to the bottom portion of the "tab-right.gif". |
 |
Now to make the top edges of the image to appear to be rounded, the corners need to be turned transparent. Choose color that is not at all used anywhere else in the tab as the background. |
 |
Paint each upper and lower corner of each image this color with the right mouse button. This will paint with the background color instead of the foreground color. |
|
When the corners of both images have been painted, select the "tab-left.gif" and go to the top menu and select "Image". |
 |
Scroll down to "Palette" and over to "Set Palette Transparency". The computer may ask if it is ok to lower the resolution of the image. Say ok. |
 |
When the new box opens up choose the "Set the transparency value to the current background color:" and then click on the "Ok" button. |
 |
Save the image. The computer will ask if you want to decrease the color count, say yes. |
|
Set the transparency for the "tab-right.gif" and save that file as well. |
Upload the new tab-left.gif and tab-right.gif to the images folder located in the includes folder on the web server.
