Long time no hear, eh? Well I’m sorry for not posting for so long but I was really busy with some other work I had so I will try to pay off once again. Today I have writen a tutorial about how to create a very nice stylish glossy button in Photoshop.
I have decided to go for one color but later when you create this tutorial you can repeat it in any color you like or need. There are a lot of ways to do some things but this is the way I’m doing it. This tutorial is going to show all the details so even noobs should be able to understand it. But if you have a problem, or a suggestion or any kind of question, feel free to contact me on my e-mail admin@coregfx.org .
Let’s cut the talking and get down to business. So once you’re done this is how it’s going to look like:
Nice? Hehe. Let’s begin. Open up a new document size 250×150 and fill the background out with #252a38 .
Now let’s create a shape. Now get any color you want (we are going to change it later anyway) and get your “Rounded Rectangle Tool” (
). On the top of the screen you’ll have some properties and I have made a screenshot on which ones to select:
If you have put those properties you can continue making a shape. Create a new layer and just make a shape on the middle of your screen.
Now we are going to fill it with some gradient. We will need two colors though:
As you can see on the image above the two used colors are #3a4056 and #303548. Now Ctrl+Click on the layer where you made the shape (in your layers panel, CTRL + click on the image next to the layer name and it will be selected). Now the outline of that layer should be marked. Grab your “Gradient Tool” (
) and while holding “Shift” on your keyboard make a gradient from top to bottom of your shape:
Now let’s add a Drop Shadow to that layer. Right click on the layer and select Blending Options. Now apply these ones to the layer:
Now we’re going to add a Stroke but on one different way. Hold Ctrl and click on the shape layer. You should see a selection on your screen. Now go to Select>Modify>Contract , put it to 1px and press OK. Now create a new layer and fill it with any color you want and put the “Fill” to 0%. Now right click on that layer and go to Blending Options and apply these ones:
If you followed the tutorial carefuly you should be having three layers (Background, Shape and Stroke) and your button would look like this:
Now let’s make our button a bit stylish as I said in the title. For this you are going to need Dodge (
) and Burn (
) Tool. For both you are going to use the following properties:
I have used the Soft Brushes which you get in every Photoshop. Now select your Shape layer. I have made an image to show you were to use your Dodge and Burn Tool. Please note that you should press your mouse a few times before you get the amount of brigthness/darkness you wanted.
If everything turned out well, you should be having something like this:
Let’s add some more light to make it look glossy. Ctrl+Click on your shape layer and grab your “Elliptical Marquee Tool” (
). Now while holding Alt cut down a bit of the selection. My example:
Grab your “Gradient Tool” () and press your keyboard the letter “D” and than “G”. Now you should be having white (#ffffff) as your first color. Now at your Gradient Properties select “Foreground to Transparent” like shown on the picture below:
Now use your gradient like this (from bottom to top):
After your done you can deselect the layer (Ctrl+D). Now put the layer to “Overlay” and “Opacity” to 40%. It should look like this:
Looks perfect, doesn’t it? I think it’s the time to add some text and icons. First will go with the text. I have chosen the font “Arial”, Regular, 25 pt, Smooth; and the color of the font is #ffffff. Write something down and add these Blending Options to the text:
This is how my text looks like now (I have moved it a bit to the right because the icon will go left):
I have added another small text underneath this one as a description with a size 11pt:
It’s time to addthe icon. You can chose which ever you want but I have decided to use the ones by Free Icons Download (they are Spyware free don’t worry). Grab the icon you need (I have chosen the home button for the obvious reason) and paste into your design. Now go to Image>Adjustements>Hue/Saturation (Ctr+U) and put the “Saturation” to -100:
After that just put your icon to “Overlay” and your done. Note: If your icon is too bright (too hard to see), you can duplicate it and just change the opacity of the duplicated layer. This should be your final image than:
Well believe it or not we’re all done. As I sad in the begining, you can change to colors to which ones you want and add any icons. Here’s an example of just a few variatations:
If you want you can download the source .psd files.
Thank you for reading this tutorial. Please do not redistribute this tutorial without any written permission by me. If you want it, please contact me on admin@coregfx.org .
This tutorial was sponsored by:
January 11th, 2009 at 8:30 am
oh god its really amazing and great styles i love it so so much really great one mate thank you . you are great i wait for more tuts thanks
January 11th, 2009 at 9:49 am
Added to http://www.psaddict.com
January 22nd, 2009 at 5:07 am
That’s awesome! These look pretty good. I’m new, very new, to photoshop and I’m having trouble getting good with it. This helps out a lot though. I badly need to make a new nav bar for my site. Thanks man!
March 6th, 2009 at 1:19 pm
Great tutorial! Really loved this one! Thx m8!
March 7th, 2009 at 7:27 am
Really nice.
Simple and effective
THanks
March 12th, 2009 at 6:10 pm
cant understand the ctrl+click parts. not a newbie friendly guide
March 13th, 2009 at 12:17 am
Agree with Dens. I am a total noob but I’m having no luck with this one because the selections dont seem to be working for me
March 13th, 2009 at 6:57 pm
Excuse me on that I will edit it and explain:
In your layers panel, CTRL + click on the image next to the layer name and it will be selected.
Hope you understood.
March 20th, 2009 at 11:25 pm
I’m stuck on the stroke, i dont get a third layer
March 22nd, 2009 at 3:01 pm
Great tutorial!
I have always wondered how to make this stroke style on buttons and now I’m able to do it, really good. I hope you will create more tutorials. Bye!
March 24th, 2009 at 11:01 pm
I am also totally stumped on the stroke step. All reference to creating new layers has been left out of this tutorial. I select my image, I go to contract and then what? How do I get a new layer out of this? I tried creating a new layer that is 1 px bigger than the top layer – I put it under the top layer and chose fill 0% and then I applied the stroke settings shown here. I can’t see any effect whatsoever. Please share! Thanks!
March 27th, 2009 at 2:28 pm
Excellent tut! Thanks for this.
March 28th, 2009 at 7:42 pm
I have changed the text a bit in that stroke part so you should be able to understand it.
April 7th, 2009 at 8:27 pm
Thank you so much for this tutorial. It looks really sharp. Just the type of thing for a newbie to graphic design
April 9th, 2009 at 6:52 am
Very good lesson but I could not this “After your done you can deselect the layer (Ctrl+D). Now put the layer to “Overlay” and “Opacity” to 40%. It should look like this”
I think it is better if you can give much explantion
Thanks for your job
Great
April 9th, 2009 at 3:08 pm
After you’ve deselected the layer, in the layer panel (on top of it) you will see some options. You set the first one to “Overlay” and the second where it says “Opacity”, put it to 40%.
April 16th, 2009 at 12:25 pm
Nice tut…
nice button also…
thanks..
May 4th, 2009 at 2:44 am
Pretty cool. Thanks!
June 25th, 2009 at 2:55 am
thank you for the tutorial, it’s really helpfull.
June 28th, 2009 at 9:34 am
Thanks a lot man …. its really cool
))))))))))
June 29th, 2009 at 8:08 am
Love this button design, the subtlety of the design makes it perfect. Nice shiny / glossy effect.
August 19th, 2009 at 6:53 pm
great tutorial! but i have a problem that i couldnt add an icon to the image. may you give me more detail? really important for me..
i’m waitin for the reply. take care buddy..
August 30th, 2009 at 10:36 pm
If you want to add an icon you just have to copy it and paste it in your Photoshop. Can you describe the problem more?
October 10th, 2009 at 10:19 pm
Thank you so much for this tutorial. It looks really sharp.
October 15th, 2009 at 3:28 pm
i am a polite person i swear, but why do you put such an unfortunite face on this page? i know that you do it purposely, but why?
November 20th, 2009 at 11:08 pm
Absolutely excellent!!! Nicest clearest tutorial I’ve seen in a long time
November 24th, 2009 at 12:03 pm
I’ve spent the entire morning, creating glossy buttons, and looking at various tutorials on the web. This is one of the best, invaluable. Thanks so much for posting.
December 3rd, 2009 at 8:41 am
@Anterr
i solved the problem.
thanx for the reply and this great website.
keep them coming.
December 14th, 2009 at 6:40 pm
Thank you. Great post
December 23rd, 2009 at 8:51 am
superbbbbbbbbbbbbbbbbbbbbbbbbb
January 10th, 2010 at 2:42 am
thanx!
From Mexico
January 20th, 2010 at 9:43 pm
Great..!! Very nice button..
February 3rd, 2010 at 5:45 am
Hmm Well I was just searching on Google for some Tarot readings of some Tarot reader
and just came across your blog, generally I just only visit blogs and retrieve my required
information but this time the useful information that you posted in this post compelled me
to reply here and appreciate your good work. I just bookmarked your blog
February 7th, 2010 at 2:10 pm
Nice article and tutorial. Thanks