Tweet
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.
Sandy
Comment