View Full Version : Struggling with glossy buttons/nav bar.

12-22-2010, 09:11 AM
Hi all,

I am trying - so far in vein - to make a glossy navbar image. At my disposal, I have adobe ImnageReady, adobe photoshop, photo elements and photoImpact.

As you might recall, the arty part of ym brain is very small but I can't seem to find a tutorial that I can follow.

Not sure if I should be creating a background weith a gradient and then adding a rectangle in another layer.

If anyone can give me some steps to follow I'll try to make progress.

By glossy, I mean that it would have a dark bottom half then a shaded/gradiented top half (as if catching the light), with a distinct edge running horizontally along/across the middle.


12-22-2010, 10:05 AM
The penny seems to have dropped since I posted.

here are my steps.

1. create a new image background and set the background to your colour of choice.
2. create new transparent layer
3. select an area to be the height of your button and fill it with your colour of choice for the button.
4. create another layer and select an area (likely the top half of the button) and use 'fill' to assign a colour - #ffffff; (white)
5. still on this layer with the white selected area, right click on that selection and select 'blend properties' to see a new dialog.
6. set the opacity to about 12% so that this top half is slightly lighter than the bottom half.

Looks like that is pretty much it - that is the button done. You may need to set the first background layer's bg color to be darker than your button bottom colour - personal choice - so that your buttons blend with your page design better rather than the buttons looking out of place or unfinished.

This is not a definitive tutorial but I hope it helps someone else who, like me, wasn't at the front of the queue when the artistic brains were being distributed. :)


12-25-2010, 10:13 PM
Very informative and specific step for making glossy buttons effect. Thank you very much. I just made some wonderful buttons.

12-28-2010, 03:12 AM

01-12-2011, 12:26 PM
useful links FJBrian. Thanks

using the first of those links I am pondering something. I want to use images like that one in the example but without the text. I want the text to be dynamic so - my li 'buttons' will need a background and the href will use the example button. the difficulty I am foggy about is how to ensure that the rounded corners will come from the background, where each button may be of different length.

Is there much time involved in making the li background have a rounded end on both ends or is it better use of time to use an image replacement technique, where the text of my button is replaced with an image, determined by the text for the link?