View Full Version : Build custom nav bar & rollover buttons in Photoshop

06-10-2006, 04:23 PM
Naturally, when I designed my home page, I had to make it complicated. ** grin** . What I wanted to do involved having each button in my nav bar slightly different. I wanted the left edge to be flush, as usual, but the right edge will follow a curved shape.

Somebody suggested using an image map, which is an excellent idea. However, I wanted to have a mouse over/rollover change.
Like I said, must – be – difficult.

This is how I built them in Adobe Photoshop. (These directions assume you already know your way around Photoshop.)

You will start by creating your background image with your nav bar shaped just the way you want it. (If you created this with layers, you should make a copy that’s flattened. If you did use layers, before you flatten is a good time to make and save a selection of each button, with no background included. You’ll use these to make the color changes for the mouse over buttons.) Here’s mine:


I. To make original navigation button:

A. Make a rectangular selection around each button, leaving some of the background (this makes it easier to line them up on the page.)
B. Make this a new layer with Control-J.
C. Make no other layers but this one visible.
D. Control-click (in layers palette) to select only this.
E. Go to Image >Crop
F. Go to File>Save a copy> save as jpg or gif or whatever, name it “navbar_1” or 2, etc. (It doesn’t matter where you save it, as long as you can find it later.)
G. Go back in the Photoshop history to Step A. You should have the selection.
H. Here’s one of mine:


II. To make the mouse over button:

A. Make sure your button is selected and go to Layer>Duplicate layer. Name this layer “navbar 1 mouse over” or the like.
B. Load the selection for the button alone (no background, this should have been made earlier, or use whatever tools you need to select only the areas you want to change the color of.)
C. Use Image>Adjust>Color Balance to change the colors. (+61, -82, -80 is for the nice purple I used. Write down the numbers you end up with so you can easily duplicate them in each button.)
D. Make sure no layers are visible except for your duplicate and the color change selection.
E. Layers>Merge Visible
F. Control-click (in layers palette) to select just that area, then Image>Crop.
G. Now “Save a copy” as jpg or gif or whatever, save as “navbar_1_mouseover” or the like.
H. Here’s one of mine:


III. To add these buttons to you BlueVoda page:

A. You should have already added your background image to the page.
B. Click on the “rollover” tool, find your navbar file, and click Open.
C. Right click on your navbar image, select “Properties” and browse to your mouse over image.
D. Click on the Link tab, and add your URL information.
E. If necessary, resize and reposition the button to fit seamlessly into your background.
F. Repeat for each button.
G. Chose “Preview” and have fun seeing your button change color. (Well, that’s what **I** do!!)

I hope somebody finds this helpful. And hope it's clear. If I've missed something, or you need clarification, feel free to ask.


06-10-2006, 04:56 PM
It's a nice tip and very useful. I suggest that you shouldn't put the text in the buttons. If you simply save the button images in the BV buttons library, in their final size, you will be able to use not a rollover but an independent nab bar for each button, so in the future you will be able to edit the text without having to edit the button image again.

06-10-2006, 05:08 PM
You are SOOOOO right! I goofed, flattened my background & saved it to put into BV. Then FORGOT to go back in the history to unflatten before saving (what I thought was an unflattened version) -- derrrrrrrrrrrrrrr.

Imagine my dismay when I opened it to tweak some more, augh!

So, yeah, if I ever want to change that text, I'll have a bit of work to do.

Sandy <====trying to convince myself that I'll never want to change any of that text . . .

06-10-2006, 09:17 PM
But if you only create the buttons, save them in the BV button library and use the method of the independent nav bar for every button, the text can be added directly in BV and changed whenever you want.....

06-11-2006, 12:13 AM
You are absolutely right. It definitely would be the best way to do it.

One advantage to using the rollover tool is that you can resize the images. That could be a useful option.


06-11-2006, 04:40 PM
Excellent tip!

06-11-2006, 04:59 PM
Nice one Sandy! http://www.vodahost.com/vodatalk/images/icons/icon14.gif

06-11-2006, 05:01 PM
Gosh i would never have been able to figure that out
Very Good Tip Indeed!!!

06-11-2006, 10:16 PM
So glad I could be of help!


08-03-2006, 07:04 PM
Thats awesome! But I have no photoshop skills whatsever. It just doesn't click with me. Oh well. I have a pretty cool navbar as well. ( http://www.electronics4dummies.com ) If you want instructions, just holler. :)

09-29-2006, 12:51 AM
This button information is a great idea of which I intend to take advantage if I can get it to work out, but I have some other issues to address first such as how to publish my pages when it won't recognize my user name and password. Even after getting my password emailed to me. apparently it isn't the right one. I will however try to post this question to the proper, I hope department.
But a great big thank you for your ideas about creating your own button designs. I have done all this sort of thing in "Scala," an old Amiga program that was beautiful for tutorials. It had most of the features I find in BlueVoda, but links work a bit differently and of course it goes about things differently.


01-10-2007, 11:24 PM
Hi there all I am new and incompetent!
I need help....I am trying Nav bar buttons I have made to the Nav bar library?
How do I access and save items to the library?
If you could help me I would be greatly apreciative!