TutsArena
The best web design tutorial resource for designers on the web!
Classy Glassy Navigation Buttons in Photoshop
This Photoshop tutorial will show you the step by step process used to create these glassy navigation buttons. These buttons can be used for things other than navigation as well, such as other miscellaneous buttons. Be sure to download the free PSD file at the end!
This tutorial isn’t long but the outcome is absolutely gorgeous. It’s super easy to design glassy looking navigation buttons in this Photoshop tutorial. If you don’t like long tutorials, no sweat… we kept it simple! Don’t forget to download the free PSD at the end of the post so you can see exactly how we did it!
Final Product:
Step One: Creating the button
Create a new Photoshop document, whatever size you’d like to use as it really doesn’t matter. We used a document sized 750×320 px just for the sake of this tutorial. Fill it with your choice of a color.
The first step is to create our button’s basic shape. Select the Rounded Rectangle Tool (U) and create a selection with a similar size to the one below (115×50 px).
To make our shape an actual layer you need to click the Paths box and right click “Work Path” then select “Make Selection”. This will make a new selection based on the shape of your path and you’ll see the marching ants. Make sure to create a new layer for this shape (Layer > New > Layer)!
Now that we have our new button shape layer ready to go, set your foreground color to #008D83 and your background color to #1F3434. Select your Gradient Tool (G) and drag from the top of the new button layer to the bottom (holding [shift] while doing this will ensure it’s a straight line).
If done correctly you should have something like:
Let’s start making it look fancy. Reset your color palette (hit [D] the swap the colors) to foreground: #FFFFFF, background: #000000. Create a new layer (Layer > New > Layer) and with your gradient tool still selected, [ctrl + click] on the button layer we previously made (this will make a selection based on it. Now, drag your gradient from the center of the button to either side. Set this layer’s Blending Mode to Soft Light and it’s Opacity to 50%.
Now we’re going to make it slightly glossy. Create a new layer and [ctrl + click] our main button layer to make it a selection. Fill the new selected layer with #FFFFFF then cut it in half and fill the bottom half with #000000. Set this layer’s Opacity to 5%.
Let’s add one little detail. Create a new Layer then select your Gradient Tool (G) again, however, this time, select a Liner Gradient and select the “Foreground to Transparent” gradient. Make sure your foreground color is set to #000000. Drag the gradient from the right side of the selection to the left and you should have a fading gradient. Set this layer’s Opacity to 20%.
Now we’re going to add text to the button and after that we’ll go back and style everything.
Looks pretty good, huh? Now we’re going to style the whole thing and it will be complete.
Step Two: Styling
Let’s really make this button pop. We’re going to show you how to style everything now.
For the main button layer (the one that’s colored) use these styles:
And finally for the text, we just applied a drop shadow:
Step Three: Duplicating and changing colors
This step is really easy, simply group all of the layers we created and duplicate the group to create a new button.
Now you’re wondering how to change the colors for each button? It’s super easy, remember how we initially colored the button way back in Step One? Simply use a different colored gradient on the button layer and everything else stays the same. It’s a really quick change.
Check out these other tutorials we’ve written:
- Design a Dark, Contrasted Layout in Photoshop
- Design a Clean and Colorful Portfolio in Photoshop
- Design a Dark, Contemporary Minifolio in Photoshop
- Customize Your Twitter Background
- Awesome 3D Box Effect in Photoshop
(glassynav.psd)
About the author
TutsArena is dedicated to providing the best, free web design tutorials.
13 Comments
Wow very nice buttons, think i’m going to use them soon
Thanks for the tutorial!
I like how they look, but the font isn’t very good – better typography use should be done here, and some text in the buttons isn’t centered… good idea, but you should be accurate with tutorials instead of having the result image slapped together…
Thanks for your comments.
@Saquel: The type isn’t centered nor is it supposed to be. In fact, it’s left aligned to be next to the dark bar you see there. Thanks for your feedback though, it’s appreciated!
[...] 5. Classy Glassy Navigation Buttons in Photoshop [...]
[...] 作品地址含有photoshop全程的制作步骤,从中看出这是一个不难的过程.但效果绝对华丽. 添加到Google书签添加到QQ书签添加到百度搜藏添加到有道书签添加到雅虎书签添加到新浪 vivi添加到收客网添加到diglogDigg this!添加到美味书签Share this on RedditShare this on TechnoratiStumble upon something good? Share it on StumbleUponBuzz up!Post this on DiigoShare this on MixxAdd this to Mister WongShare this on FacebookTweet This!Post this to MySpace [...]
Very nice! Thanks for sharing…
Hey Clay, glad you liked it buddy–thanks for your comment!
Nice buttons. But about the Font, I think it suits the buttons good, besides if you follow the tutorial you can think of a better font yourself right?
Anyway a question here though; at one point you want to make the button look glossy and you learn a technique. This involves making a new layer and fill it half white half black and change the opacity level. I do not really follow your lead there. Supposed to cut it in half but ‘how’ exactly?
Hey Alan!
Sweet tutorial, I really like the buttons.
I do have one question though.
I’m really found of the background you used and I would really like to use it, so I’m wondering if you could scale it up a bit, perhaps 1600×1200?
I tried to, but since I’m not that good, it ended up very badly.
Best regards,
Martin
THANKS BRO.
Excellent tutorial, thanks to the author!
I like this buttons!!
tnks 4 the tut!!
[...] 15. Classy Glassy Navigation Buttons in Photoshop [...]
Add your comment - (need a gravatar?)