The following tutorial is for the high gloss or wet paint effect that has become popular on the web. The effect is not difficult but there are a number of steps involved so this is for a user comfortable with Photoshop. This particular tutorial is for a basic glossy menu and rollover effect. We use this version on liquid layout sites. On fixed width sites you can get a little more creative and add an arc to the gloss effect which gives it very realistic feel.

Create File

Create new file slightly larger than the dimensions of your button or menu bar. I used width: 775 px, height: 60px. I also used a white background, although you can use whatever color color you need to. You can always change the size later.

STEP 2: Create Menu Bar

Create a new layer with a black bar to the dimensions of your bar or button. (Use the rectangle select tool to draw the rectangle then fill the new rectangle with black.)

Add the following effects to this new layer

STEP 3: Glossy Effect

Add gloss by creating a new layer and selecting half of the bar image and fill it with a grey color. I used # 737373.

Add the following effects to this new layer

STEP 4: Glossy Rollover

To add a glossy rollover effect, create a new layer, select your rollover area and fill the new layer with your rollover color. I used # 2a88c5.

Add the following effects to this new layer

Your completed menu bar with rollover effect should look like the image at the top of this tutorial.

NOTE: To change the color, I save the black bar image as a .png and use the hue/saturation with the colorize option selected in the layers tool bar to adjust the color.

Related Posts

admin Send feedback » Posted in SEO, Photoshop Tutorials

Theme Tags

glossy

,

menu bar

,

photoshop tutorial

,

psd tutorial

,

wet paint

Social Bookmarks