Buttons Photoshop tutorials are probably one of the hottest categories in any Photoshop tutorials site and since Web 2.0 is such hot topics now, lets go about doing a simple button suitable for any Web 2.0 application of websites. Tutorial after jump.
Create a blank canvas at about 500px (width) x 400px (height) to start off the button design. Create a new layer call ‘bg01‘. Select the Rounded Rectangular Tool, hold SHIFT and draw a round sided square in the center. Any color is fine at the current stage.
Call up the Blending Options of ‘bg01‘ and adjust the following styles:
Drop Shadow
- Opacity: 40%
- Distance: 0px
- Spread: 0%
- Size: 6px
Gradiant Overlay
- Color stop: 0%, #d00031
- Color stop: 100%, #ff2b5d
Hold CTRL, left click on ‘bg01‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will shrink the selected area by 2 pixel.
Create a new layer call ‘bg02‘ and filled the highlighted (after shrink) area with any color. I use #000000 black here. Double click on ‘bg02′ to launch up the Blending Option and tweak the following style.
Gradiant Overlay
- Color stop: 0%, #c6002f
- Color stop: 100%, #c6002f
Create another new layer for text, call it ‘txt‘. Insert your button’s text. I’ll use an alphabet to represent. The font styles I’m using here are as follow:
- Rounded Arial Bold
- 150pt
Same, after deciding your text, double click on ‘txt’ to launch the Blending Options and tweak the following styles.
Drop Shadow
- Opacity: 25%
- Distance: 0px
- Spread: 0px
- Size: 5px
Inner Shadow
- Opacity: 10%
- Distance: 0px
- Choke: 0
- Size: 10px
Bevel Emboss
- Depth: 1px
- Direction: Down
- Size: 0px
- Softten: 0px
- Highlight Mode Opacity: 32%
- Shadow Mode Opacity: 32%
Gradiant Overlay
- Color Stop:0% #d2d2d2
- Color Stop:100% #f0efef
Button is almost done. Let’s give it a little glow over the top part. Hold CTRL, left click ‘bg02‘ Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with Eclipse Marquee Tool selected, drag is across to minus out bottom half of the highlighted area. Refer to image above.
With the top portion highlighted and Eclipse Marquee Tool still selected, right click and choose Feather; enter 15px for the radius.
Create a new layer, call it ‘glow‘ and fill the highlighted part with white [#ffffff]. This should add glow effect to the top part of your button. Final product should look something like the image below.
Something extra..
Tweak the Blending Options of ‘bg01‘ and ‘bg02‘ will give you more interesting buttons. Here’s another Photoshop tutorial on button I’ve done previously - Create Glossy button for Web 2.0
|
Posted by hongkiat in Photoshop Tutorial, at 04.03.07 |
 |
Comments
Photoshop 0404 « phohp
April 5th, 2007 at 2:11 am
[...] Web 2.0 Button [...]
comment
April 5th, 2007 at 2:17 pm
where is the trackback address?
I use this.
http://www.dudu2.com
THANK U.
comment
April 5th, 2007 at 2:28 pm
dudu: i really appreciate a link back to this page if you are to copy-paste my original content on your site. Thanks.
comment
April 5th, 2007 at 3:10 pm
Very nice!!
Thanks for the awesome guide.
comment
April 5th, 2007 at 5:35 pm
HI,SIR,I come from CHINA.My Englis is poor.I hope you can understand what I write.MAY I translate your photoshop tutorials into CHINESE? I do write your blog address in every article.
WAITING FOR YOUR ANSWER.
THANKS A LOT.
comment
April 7th, 2007 at 12:13 am
Thanks for the very useful tutorial.
comment
Spawners on Blogging, Money Making, Gaming, Apple, Graphics and Feeds
April 8th, 2007 at 9:09 pm
[...] Photoshop: Create Web 2.0 Button [...]
comment
April 16th, 2007 at 6:29 am
Thank you for nice tut. I have the following i’d like to point out so you can either explain or rectify (or ignore - ha!):
1. For ‘bg2′ layer you specify a gradient overlay with the following: * Color stop: 0%, #c6002f * Color stop: 100%, #c6002f
Both the color stops are the same. This doesn’t give the “gradiated” look needed here. Is this intentional? If so, why not just do a color overlay of the color? Or specify the color before filling the contracted square?
2. The text specifies a ‘Bevel and emboss’ of Depth: 1 px
The depth option in PS is given as a percentage and not as pixels. Should this be 10%?
Hopefully you can clear that up for us. Many thanks!
comment
April 21st, 2007 at 12:07 pm
I’m creating an internal training ui and this may be just what i need for the css rollover buttons in the nav pane. Wish I got paid more for it else i’d throw a bone your way. Thanks!
comment
links for 2007-05-26 | nicharalambous.com
May 26th, 2007 at 10:20 pm
[...] Photoshop: Create Web 2.0 Button (tags: photoshop feathering buttons web2.0) [...]
comment
Create Web 2.0 Button online
June 12th, 2007 at 2:25 pm
[...] Photoshop: Create Web 2.0 Button [...]
comment
June 17th, 2007 at 2:55 pm
thank you!!!
comment
Create Web 2.0 Button in Photoshop » Cool Web Tools
June 21st, 2007 at 3:47 am
[...] a blog entry from Hongkiat.com that gave step by step instructions on creating a web 2.0 button. Check it out! spread the joy:These icons link to social bookmarking sites where readers can share and discover [...]
comment
June 21st, 2007 at 3:47 am
Very cool and useful.
comment
July 28th, 2007 at 2:45 pm
well this is not the first tutorial that i am following from your blog and let me tell you like rest of the tuts this is also amazing but again faced a few problems. in the end got the result and i am happy
comment
August 10th, 2007 at 2:03 am
Worked great for me - thank you!
comment
August 13th, 2007 at 2:43 am
It’s cool. I like it.
comment
August 17th, 2007 at 6:54 pm
That’s a great tutorial, it helped me much. Thanks a lot :)
comment
Make you own web 2.0 « Familyresource4u’s Weblog
September 20th, 2007 at 10:00 pm
[...] Use Gradients and curves in your new buttons. Look at nearly all the new Web 2.0 sites out there and you will notice that most of them use a lot of gradients, with drop shadows, and curves. This style is critical if you are going to look like a new Web 2.0 site! Web 2.0 Resource: Create Web.0 Buttons in PhotoShop [...]
comment
Free casino on line games.
November 9th, 2007 at 8:25 am
Play free casino games online….
Vagas casino games for ps2. Spin palace casino over online casino games. Play casino games. Play casino games online. Iwon games casino. Casino games. Free casino games….
comment
December 2nd, 2007 at 3:25 pm
Great post. using the button on my site 611rent.com . Thanks
comment
Photoshop - 14 Button Tutorials | Newbie Game Programmers
January 1st, 2008 at 12:39 am
[...] Web 2.0 Button by Hongkiat.com [...]
comment
Generate Web Button Online with Freewebstuff
January 10th, 2008 at 10:37 pm
[...] previously written a tutorial on how you can create Web 2.0 button with Photoshop, but for those who wants it quick and dirty; there are web services that allows you to do it free [...]
comment
D3scene "guarantee" button.
January 19th, 2008 at 8:33 am
[...] of a Web 2.0 style button… The following are some examples to give you an idea of Web 2.0: Photoshop: Create Web 2.0 Button IRIS Design Archive Web 2.0 style buttons [...]
comment
Look What I Found » links for 2008-02-08
February 8th, 2008 at 12:21 pm
[...] Photoshop: Create Web 2.0 Button Good photoshop tutorial on how to make web 2.0 buttons (tags: web20 photoshop buttons tutorial howto) [...]
comment
love is nothing but destiny » how to create web2 buttons
February 11th, 2008 at 2:38 am
[...] CTRL, left click on ‘bg01‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will [...]
comment
February 28th, 2008 at 5:31 am
Cheers, this is really helpful.
comment
March 17th, 2008 at 10:06 pm
simply superb!
comment
March 23rd, 2008 at 1:26 am
hi there, excellent tutorial. These buttons differ slightly from the normal web 2.0 buttons i see around the net, but i like them!
comment
March 31st, 2008 at 11:11 pm
this is quite helpful, thankx mate.
comment
April 21st, 2008 at 2:18 pm
Great tutorial! Thank’s
comment
April 28th, 2008 at 3:26 am
Its really a nice tutorial for explaining very in clean manner.
comment
April 28th, 2008 at 1:13 pm
very nice! I want to translate to Chinese language in my blog,can i ? thank you ^^
comment
May 10th, 2008 at 3:37 pm
pls give me idea for my website ( http://www.ajaxkaynak.com )
comment
Leave a reply