PI8 Sepia Rollovers

This tutorial shows you how to turn sepia toned navigation buttons into full color rollovers, like the one below.

The selective use of color on navigation buttons can be a spectacular way to call attention to a photo or art gallery site. You can see the full effect here. Be sure to roll your mouse over the four navigation buttons on the left side to see the colors change.

I decided to make a main web page with four navigation buttons for nature, family and pet photos, and a button for original artwork. In keeping with the sepia-toned theme, I applied a sepia duotone to my header and main graphics as well.

I started with a new web page image 750 X 550 pixels. I'm using a plain white background because I think its simplicity will show the rollovers to advantage. Choose Web, Web Properties and choose appropriate options for your web page. I did a PI8 Basic on Web Properties here.

Half the fun of making these buttons is selecting a representative photo for each of them. You will likely have to resize your photos smaller. Make a 100X100 pixel selection of a colorful area within the photo for each button, then crop.

select, then crop

Be sure to work on a duplicate of your photo so you don't lose your original. I made four buttons and expanded the canvas 1 pixel in black to create an outline. Select the Text tool and click in the image to create navigation text for each section of the gallery. I'm using the Vogue font in white, with a small sharp shadow. I put the navigation text in a different place on each button to add some interest. Select each Text object, and Shift+click its corresponding button. Then right click, Merge as Single Object.

color buttons

Copy and paste the buttons into the web page, lining them up on the left side of the page. Select a button, then right click and Select All Objects. Right click, Align, Left. This will line the buttons up so that they form a straight line. Right click, Align, Space Evenly. When the Space Evenly dialog box opens, choose the Vertical alignment, Even (fixed objects on both ends). Now the buttons are spaced an even distance apart. Be careful not to get them too close together, or you may get error messages later on when you save the HTML page.

While all the buttons are still selected, right click and Duplicate. Drag the duplicates with the Pick tool so that they are next to the originals. Hit Enter to deactivate the objects. Click on each duplicate button to make it active, then apply a sepia duotone. If you like the one I've used, you can get it here. (If you need help with importing presets into your EasyPalette, check out this PI8 Basic)

Now you've got a set of color buttons and a set of sepia buttons.

two sets of buttons

With the Pick tool, select the first color button, then Shift+Click its corresponding sepia button, so that both are selected at the same time. Choose Web, Rollover. When the Rollover dialog box opens, click the down arrow under Default and select the sepia button. Under Mouseover, click the down arrow and select the color button. Add a URL for the link, and Alt text and Status bar text.

rollover dialog box

Roll your mouse over the button in the Preview window in the upper right corner, and you'll see how it will look on a web page. If all looks good, hit OK to create the rollover.

Don't be alarmed when the color button disappears and all that you can see is the sepia button. The color Mouseover state button is attached to the sepia button. If you ever needed to edit the button, right click on it and choose Edit Rollover Button. Doing so will open the Rollover dialog box again so you can edit the button.

Click on the second sepia button to select it, then Shift+Click its corresponding color button. Choose Web, Rollover. Select the Default and Mouseover buttons, and assign a URL and Alt text and Status bar text to the rollover button.

create second rollover

Repeat for the remaining buttons.

Add a header graphic if you wish to do so. I used the Text tool with the same font used on the buttons (Vogue) to make a simple header that says "My Photo and Art Gallery." I used a two color gradient on the Text object, selecting light and dark colors from the sepia buttons. I added a main graphic that fit in with the sepia theme.

Finally, I chose Web, HTML Text Object and added a copyright statement to the bottom of the page.

Important: Remember that an HTML Text object is not treated the same way as a regular Text object. Objects made with the Text tool are saved as graphics, while HTML Text objects are saved as formattable HTML text. Be sure to select the right tool or command. There is a big difference!

Let's make sure that the page is going to look good in a browser. Select the Slice tool from the Tool Panel. In the Attributes toolbar, choose Auto Slice. Now choose File, Preview in Browser. Check out those beautiful rollovers, then close out your browser.

web page in browser

If anything needs repositioning, now is the time to do it. Select the Pick tool and move objects, if necessary. Then select the Slice tool again. In the Attributes toolbar, select Erase All Lines, then choose Auto Slice again. Preview the page again to make sure the page looks good, then close out the browser.

When you're satisfied with your web page preview, it's time to save it. Keep in mind that saving a web page is different than saving a graphic. To save a web page, choose File, Save for Web, As HTML. PI8 will save the web page to the folder you specify.

If there isn't already an "images" subfolder, it will create one. All of the images from the web page will be saved to this folder. The images will be named after the web page. So if you name the page start.htm, the images for that page will be named start_1_normal.gif, etc. PI8 places the web page into a table that is held with a clear space.GIF image, which is also saved to the images folder.

When you upload the page to your server, remember that the file structure on your server must mirror the file structure on your computer exactly, or your page will not display properly. If you don't have an images folder, make one and then upload the images into that directory. Don't forget to upload the space.GIF image too, or the layout will fall apart.

Finally, before you close out the web page image in the work space, consider saving the whole thing as a UFO. That way you can use the page over and over again as a web page template.

View my sepia rollover page.

This tutorial uploaded 6/13/03

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage