View Full Version : Shiny navigation buttons with photoshop

09-21-2005, 03:20 PM

Photoshop 7-CS

In this tutorial you will be learning how to create buttons in Photoshop. These buttons can be used for your web sites. Aswell you can use them for forum boards and signatures, and pretty much in any piece of artwork.

Step 1

Open a new document that is 200x50px, 72 DPI, and White Background. Set your foreground color to: #013468 , grab the Rounded Rectangle Tool, set the radius to around 5px, and pull out a button shape for your shiny button.


Now go to the layer effects and set the border to 1px and lower the opacity of it so it doesnt stand out to much. Mine was 1px black with opacity of 21%. Now, set a White, Inner Glow, the blending mode to Linear Dodge, and the opacity to 21%. Then add a gradient overaly with default settings but the opacity lowered to 34%. It should now look simaler to this: (change the background color aswell)


Well, you could really call that a button for those of you who havent done this before, but wait up. We aren't quite done yet.

Step 2

Zoom in 1600% at the left corner of your button. On a new layer pull out a 1px width black line. Then duplicate it, change its color to white, and nudge it 1px to the right. Then duplicate your white line, and nudge it 2px to the left. Now, set the layer mode of all three lines to overlay, and set the opacity to 42%.


Looking pretty good. Now, create a new layer and zoom in 100% again. Now, grab the pencil tool set it to 2px, and make an arrow like you see below.


Now, soom out, set the blending mode to Overlay, then duplicate the layer and set the mode to color burn.


Step 3

Now, add text and an outerglow effect on the text, or whatever text you like.


Like that. Now there is a bonified button that you can deffinatly use in your web sites. But there is something missing. And I will show you what it is.

Step 4

Create a new layer, and make a rectangle selection and fill it with white. Then make a circle selection and delete part of the white layer like this:


Then, ctrl+click your base button layer and click the Add A Layer Mask button in the Layers Pallette. Now, lower the opacity of the white glare layer and bask in the beauty of your button.


Well, that reflection added quite some nice style. But we still arent quite done.

Step 5

We want to create a small glow now. On a new layer, underneath your text and glare layer. Pull out a circle selection and fill it with white. Then add some gaussian blur, (not alot!) around 1.5px. Then set the layer blending to Overlay. After that ctrl+click the base layer for your button and add a layer mask on your new layer that you just created.


And now you are finally complete!

by pixelfull

Lord Alex
10-05-2005, 07:28 PM
I use photoshoip, thanks likes I

10-05-2005, 08:19 PM
well i not use photoshop but this will inspire me to use this

10-06-2005, 03:59 AM
Thanks for the tutorial.

10-07-2005, 05:54 AM
Hey Nice tutorial you got there..........

10-07-2005, 06:36 AM
Nice tutorial keep up the good work.

10-07-2005, 01:02 PM
Nice 'cept I dun us buttons. I use navigation menus... :P

10-07-2005, 06:15 PM
Thanks for the tutorial. Is very usefuly.

05-22-2013, 10:00 AM
You share such a nice information about photoshop tutorials. Photoshop is one of the best tools for logo and website designing. Using photoshop cs7 you can give any special effects to the images or logo which attracts most of the people. You can use special effects buttons on your website which looks awesome.