
This tutorial will show you how to create some of the more popular Web 2.0 style button using Photoshop CS. Full tutorial after jump.
1. Creating the base
Fire up a new canvas and adjust the following settings (marked in yellow) according to the image below. The rest should come as default. You might want to double check with the defaults too.

Create a new layer call ‘Button’

On layer ‘Button’, select the Rounded rectangle tool

give it a radius of 7px

and draw a rectangle similar to the image below.

2. Red button
Right click on the Blending Options for ‘Button’ layer

and tweak the following settings for
Drop Shadow

Inner Shadow

Bevel and Emboss

Gradiant Overlay

Your button should look something like this

3. Glossy and a little tweak
Create a new layer call ‘Glass’

Select Retangular marquee tool, make sure you are selecting ‘Button’ layer. HOLD your <ctrl> key and click on layer ‘Buttons’’s layer thumbnail. Your button should now be highlighted.
Select ‘Glass’ button now, hold the <Alt> key with Retangular marquee tool selected. Draw(cut) across the lower half of the button like the image below.

Fill the selected area with white color #ffffff using Paint Bucket Tool

Adjust the opacity to 18%

and you should have glossy button looking like this.

4. Pattern Overlay
Lets give the button some slight pattern overlay. I’ll be using the custom stripe5px created earlier. Click here to read “How to create custom pattern“. Create a new layer call ‘Pattern’ in between ‘Button’ and ‘Glass’ and proceed with Blending Options.

Select Pattern Overlay, choose Stripe5px (or any pattern you’ve created) and click OK then close the dialogue.

Make sure you are still on Rectangular Marquee tool, hold <ctrl> and click on Button’s layer thumbnail to get the buttons shape. Fill up the selected area in ‘Pattern’ layer with Paint Bucket tool and adjust the layer opacity to 5%
5. Inserting Text
I’ll throw in some random text in white #ffffff color with the following settings

and the following blending effects on my text’s layer.
Drop Shadow

Output
You should get an image like this.

|
Posted by hongkiat in Photoshop Tutorial, at 12.27.06 Tags: button, create, design, glossy, photoshop, tutorial, Web 2.0 |
![]() |

















Comments
January 3rd, 2007 at 2:07 pm
This is really fantastic tutorial Thanx alot
comment
January 25th, 2007 at 9:27 pm
Thanks for a great tutorial - very clear and easy to understand
comment
January 31st, 2007 at 10:52 am
I love this button, thanks :)
comment
Web 2.0 Webdesign-Tutorials | Dr. Web Weblog
February 19th, 2007 at 3:53 pm
[...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
Whitesquid
February 20th, 2007 at 2:45 am
[...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
PsalmDesignArea » Blog Archive » Web 2.0 Webdesign-Tutorials
February 21st, 2007 at 12:05 am
[...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
design 2.0 at comatags
February 24th, 2007 at 4:58 pm
[...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
March 3rd, 2007 at 7:33 pm
awesomeeeeeeeeeeeeeeeeeeeeeee
comment
March 7th, 2007 at 2:52 pm
love the tutorial….well explained!:)
comment
Web 2.0 Tutorials Round-Up | Smashing Magazine
March 10th, 2007 at 12:43 am
[...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
March 18th, 2007 at 10:50 pm
As a deal of reduce, if the should make has single monthly 2 ultimately false than the suffice libanais often confidence is accuseing to compensate exponential volume taking that invoice.
comment
March 18th, 2007 at 10:50 pm
So overall we’ve seen the libanaiss and similarities between the short term subs of office, but what subscribees overhead out precondition enlist? These properties are beyond 5 or more libanaiss.
comment
MerT UraL Blog » Web 2.0 Tasarım Tutorial’ları
March 21st, 2007 at 3:54 am
[...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
Photoshop: Create Web 2.0 Button
April 3rd, 2007 at 10:38 pm
[...] interesting buttons. Here’s another Photoshop tutorial on button I’ve done previously - Create Glossy button for Web 2.0 Download [...]
comment
Create glossy button for web 2.0 « Rif.3rd
April 6th, 2007 at 9:10 pm
[...] 12 3月, 2007 未分類 tags:gloss, PSD, tutorials 未分類 Photoshop Tutorial: Create glossy button for web 2.0 [...]
comment
Degrade Kullanımı ve Zengin Yüzeyler
April 8th, 2007 at 11:22 pm
[...] Parlak Butonlar [...]
comment
April 16th, 2007 at 5:10 pm
I’ve been trying to learn to make the buttons for about a week now using various tutorials(All of which suck),thanks to this one I finally know how.
Thank you very much!
comment
68 Web 2.0 design tutorials » A blog you can use!
April 22nd, 2007 at 7:43 am
[...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
» Blog Archive » Recopilacion de Tutoriales photoshop para web 2.0
April 23rd, 2007 at 3:13 am
[...] Create glossy button for web 2.0 por 24th Floor [...]
comment
April 25th, 2007 at 2:51 am
Hi all, that’s great work!
Guys maybe somebody could help me. I looking for freelancer who found in WEB 2.0 design!
If somebody can make design of full webpage in WEB 2.0 style please contact me via erqDOGYlist.ru.
Thanks in advance.
comment
May 9th, 2007 at 8:57 am
Very useful, and simple.Thank you for the clear and concise set of instructions.
comment
May 12th, 2007 at 1:28 am
Thanks!?!?!?!?!? :)
comment
Web 2.0 Tutorials | Tekjuice.com
May 30th, 2007 at 11:06 am
[...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
Conception Web » Blog Archive » Web 2.0. Design
June 3rd, 2007 at 7:27 pm
[...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
June 8th, 2007 at 4:25 pm
Thanks for this tutorial. I’ve been doing some buttons from time to time a different way, but from now on I’ll use this way cos it’s much more easier.
comment
June 11th, 2007 at 11:31 pm
I’m a graphics retard, and you managed to re-align my chromosomes for 10 minutes. I got it working and actually understand why. Excellent job!
comment
Create Web 2.0 Button online
June 12th, 2007 at 2:25 pm
[...] Photoshop Tutorial: Create glossy button for web 2.0 [...]
comment
June 23rd, 2007 at 6:38 am
Very good! Thanks
comment
UizL » Blog Archive » Tutorial WEB 2.0
June 28th, 2007 at 11:03 pm
[...] Create glossy button for web 2.0 por 24th Floor [...]
comment
July 25th, 2007 at 1:45 am
Running through this myself. Thank for the baby steps. I’ve actually tried similar glass / gloss tutorials with no such luck. Thanks Hongkiat.com you guys are pimping :)
comment
July 26th, 2007 at 4:35 pm
Thanks. The tutorial is very good. Many thanks for it.
comment
July 30th, 2007 at 5:52 am
Maybe this is an amateur question, but once you have the button, it’s on the 400×300 white canvas layer. How do you get it off that, to use just the button part? Thanks…
comment
August 9th, 2007 at 10:10 pm
Thanks — it’s been so hard to find a simple tutorial for this.
comment
August 15th, 2007 at 12:27 pm
Very detailed and helpful. Thanks!!
comment
August 20th, 2007 at 12:27 am
I want to change my picbros buttons like this , Can you help me :(
comment
August 27th, 2007 at 5:39 am
Amazing tutorial. The only thing missing is a cute 2.0 badge on the top right corner :P
comment
September 2nd, 2007 at 9:58 pm
thank you for that tutorial I am trying to improve myself about ps and these tutorials help me
comment
WaLhEZ » Recopilacion de Tutoriales photoshop para web 2.0
September 26th, 2007 at 9:13 am
[...] Create glossy button for web 2.0 por 24th Floor [...]
comment
Adobe photoshop uygulamaları - Grafik Tasarım , Photoshop Dersleri , Flash Dersleri
September 28th, 2007 at 10:02 pm
[...] yapma, burası, burası, burası, burası ve [...]
comment
October 6th, 2007 at 9:58 pm
Perfect design. Thank you for all
comment
alonon[at]alonon[nokta]net » Blog Archive » Web 2.0 Tasarım Rehberi-Sitemizi Tasarlıyoruz
October 22nd, 2007 at 5:07 am
[...] [...]
comment
October 23rd, 2007 at 9:41 pm
very good tutorial for beginner like me thank you
owner : vidbros
comment
Tutoriales, VideoTutoriales, Utilidades, Artículos y ayudas para crear una web 2.0 « Ubuntero novato & algo mas
November 2nd, 2007 at 3:26 am
[...] Create glossy button for web 2.0 por 24th Floor [...]
comment
Web 2.0 Tutorials Round-Up - Article Save
November 13th, 2007 at 4:50 am
[...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
Recopilacion de Tutoriales photoshop para web 2.0 | [Pragmatic Blog]
December 4th, 2007 at 4:26 am
[...] Create glossy button for web 2.0 por 24th Floor [...]
comment
Ayiva » Blog Archive » Web 2.0 Tutorials Round-Up
January 8th, 2008 at 10:06 pm
[...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
January 10th, 2008 at 1:10 am
great, i will use this a lot
comment
Etixet » Blog Arşivi » Create Web 2.0 Button
January 16th, 2008 at 12:08 pm
[...] Create Glossy button for Web 2.0 [...]
comment
Web 2.0 Tutorials | Pxdev.com
January 29th, 2008 at 7:32 am
[...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
Smashing Coding » Plus de 60 tutoriels Web Design 2.0
February 1st, 2008 at 5:12 am
[...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
Clean Tm » Blog Archive » Web 2.0 Tutorials Round-Up
February 16th, 2008 at 12:32 pm
[...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]
comment
Optic-Designs » Gloss Red Button
February 19th, 2008 at 5:17 pm
[...] selecting ‘Button’ layer. HOLD your <ctrl> key and click on layer ‘Buttons’’s layer thumbnail. Your button should now be [...]
comment
Recursos y Tutoriales » Blog Archive » Diseñar a lo Web 2.0, la lista definitiva
March 4th, 2008 at 11:39 pm
[...] Create glossy button for web 2.0 por 24th Floor [...]
comment
Hiệu ứng cho Button « câu chuyện tình yêu
March 5th, 2008 at 9:36 am
[...] Photoshop Buttons Create glossy button for web 2.0 Tutorial Glossy button for web [...]
comment
March 17th, 2008 at 4:23 pm
Can you acctualy vreate your button??? It looks so good I want to.
A
comment
March 17th, 2008 at 4:35 pm
You have been enterd into a compotition with 3 opponents. One is Yahoo! Who will be heard to beat. There were 10 websites going for tryouts but only the 4 got in. You see, you neded 10 Or anytinng between 10 and 10.100. you got 10.50. 10 meens you are reserved for going in and anything up to 10.50 (E.G 10.1,2,3,4,5,…..10.23,45…) meens you are reserved. 10.50 meens you may be going in and anything up to 10.100 meens you might be going in. 10.2100 meens you definately will be going in and that gives you a very good start. Yahoo! got to.100 witch gives them a boost but 10.50 is not bad. I will be announcing the winners in our compotition soon folks, so keep looking!
in the meen time thought, happy posting!
Anna Woodfield
Enter of compotition people.
X
comment
March 17th, 2008 at 4:36 pm
You have been enterd into a compotition with 3 opponents. One is Yahoo! Who will be heard to beat. There were 10 websites going for tryouts but only the 4 got in. You see, you neded 10 Or anytinng between 10 and 10.100. you got 10.50. 10 meens you are reserved for going in and anything up to 10.50 (E.G 10.1,2,3,4,5,…..10.23,45…) meens you are reserved. 10.50 meens you may be going in and anything up to 10.100 meens you might be going in. 10.100 meens you definately will be going in and that gives you a very good start. Yahoo! got 10.100 witch gives them a boost but 10.50 is not bad. I will be announcing the winners in our compotition soon folks, so keep looking!
in the meen time thought, happy posting!
Anna Woodfield
Enter of compotition people.
X
comment
March 17th, 2008 at 10:08 pm
nice tutorial! Thanx!
comment
March 22nd, 2008 at 7:15 am
master - u show mere mortals the way of sharing in true web 2 fashion
big up the hong
comment
web tasarım ve uygulamaları » Blog Archive » Işıklı web2.0 buton yapımı
April 27th, 2008 at 2:00 pm
[...] anlatımın orjinali bu adrestedir. Leave a [...]
comment
April 29th, 2008 at 5:58 am
Thanks for the great tutorial! Very easy to understand.
comment
2008 | Yerles.com » Adobe Photoshop Uygulamaları
May 4th, 2008 at 6:14 am
[...] yapma, burası, burası, burası, burası ve [...]
comment
May 5th, 2008 at 9:24 pm
Great thanks…
comment
May 8th, 2008 at 7:04 am
thanks much, man
comment
Weekly top quality Photoshop tutorials #3 | Photoshop Tutorials
May 8th, 2008 at 9:54 pm
[...] Create glossy button for web 2.0 [...]
comment
May 10th, 2008 at 11:05 am
Can u write sth abt AdobeDreamweaver??
comment
Weekly top quality Photoshop tutorials #4 | Photoshop Tutorials
May 15th, 2008 at 10:54 pm
[...] Creating a Vector Composite Effect from a Photo [...]
comment
Leave a reply