In this tutorial, I will teach you how to create the header above.

Step1: Setting up workspace and creating main button.
Create a new image 800x600, Change the background color to white. Press Alt+Crtl+0 to view the actual pixel of your work area. Create a new layer, Layer New Layer... (Shift+Ctrl+N) and name it Button.

Using the Rounded Rectangle Tool create a rectangle using the dimensions below. Change the foreground color to #484848

With that, you should have the effect below.

Now right click on the Button layer, click Blending Options and add the settings below.

Inner Glow

Gradient Overlay

Gradient

Stroke

Gradient

Before clicking ok, click on the New Style Button    to save the style then click ok to add the style when you are finished. With that your should have the effect below.

Step2: Creating the inner image on the button.
Create a new layer, Layer New Layer... (Shift+Ctrl+N) and name it Plate.  Using the Rounded Rectangle Tool create a rectangle using the dimensions below. Change the foreground color to #484848. Place the newly created rectangle over the previous button as shown below. I zoomed into it to get a better view.

Rounded rectangle dimensions

Now right click on the Plate layer, click Blending Options and add the settings below.

Inner Glow

Stroke

Click ok when you have added the setting. With that, you should have the effect below.

Zoomed in image.

Step3: Adding circles to the button.

Create a new layer, Layer New Layer... (Shift+Ctrl+N) and name it circle.  Using the Rounded Rectangle Tool create a rectangle using the dimensions below. Change the foreground color to #484848.

Create a circle by holding the shift key and position it as shown in the image below.

Now right click on the circle layer, click Blending Options and add the settings below.

Inner Glow

Stroke

Click ok, now you should have the effect below.

Duplicate the circle layer by pressing Ctrl+J and position it on the opposite side of the button to get the effect below.

To change the button color to match your site click. Place a Hue/Saturation layer on top of the button layers. By clicking on create new fill or adjustment layer, when you do that a menu will come up.

Click on Hue/Saturation and the window below will popup.

Play around with the Hue and Saturation, will get some nice effects.

Finished:
That is it, hope it came out to what you expected. If you have, any questions or comments feel free to post a message on the forums. You can also contact me via email on the contact form.

This Tutorial was Created by Mark
© 2006 pixeldigest.com. All Rights Reserved.