PDA

View Full Version : Shiny navigation buttons with photoshop



GFX^^
09-21-2005, 04:20 PM
Requirements:

Photoshop 7-CS
Introduction

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.

http://www.pixelfull.com/images/tutorials/shinybut_1.gif

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)

http://www.pixelfull.com/images/tutorials/shinybut_2.gif

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%.

http://www.pixelfull.com/images/tutorials/shinybut_3.gif

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.

http://www.pixelfull.com/images/tutorials/shinybut_4.gif

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

http://www.pixelfull.com/images/tutorials/shinybut_5.gif

Step 3

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

http://www.pixelfull.com/images/tutorials/shinybut_6.gif

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:

http://www.pixelfull.com/images/tutorials/shinybut_7.gif

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.

http://www.pixelfull.com/images/tutorials/shinybut_8.gif

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.

http://www.pixelfull.com/images/tutorials/shinybut_9.gif

And now you are finally complete!

by pixelfull

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

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

Unnamed~
10-06-2005, 04:59 AM
Thanks for the tutorial.

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

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

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

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

madelinekim
05-22-2013, 11: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.

d773hf82jhf721hf