Lots of Web 2.0 websites like to use labels (or badges) like this to deliver status of current website/service, either the version or whether they are still in beta. Creating these labels are quite easy, especially with the use of Photoshop. Tutorial after jump.
Create a new canvas, 400 width 200 height. Select Custom Shape Tool, under Shape’s dropdown, select Seal and draw the shape in the middle of the page.
Name the layer Star Label, launch Blending Options and insert these following style:
Drop Shadow
Inner Shadow
Bevel and Emboss
Gradient Overlay
Color Stop 1: #0076b3, Location: 0%
Color Stop 2: #b3d5ff, Location: 100%
Create a new layer, select Horizontal Type Tool and insert any text. I’ll use the text Beta! here. Launch Blending Options, insert the following styles:
Drop Shadow
Gradient Overlay
Color Stop 1: #b2b9bc, Location: 0%
Color Stop 2: #ffffff, Location: 100%
Hold Ctrl, click layer thumbnail for layer Star Label to select its outline. Create new layer on the very top, name it Glossy.
With outlines still selected, Select Polygonal Lasso Tool, hold Alt, and draw off half a circle as illustrated in the image below.
Paint the remaining half with white, decrease the opacity until 15%, and here’s your final result.
Related Contents |
Sponsors |
|
|
|
|
Posted by hongkiat in Photoshop Tutorials , at 07.28.07 |
|
Comments
David July 28th, 2007
Excellent tutorial. easy to follow and very detailed. Keep up the good work.
ReplyWing Loon July 29th, 2007
Awesome guide…definitely will try it out but I don’t have Photoshop in my notebook, :(
ReplySteve July 29th, 2007
I’ve never been good doing graphics. . .i do hate it.
______________
Replyhttp://www.HowToGetFreeWiiPoints.com
GTAIV Secrets July 29th, 2007
Not bad.
ReplyCarbono July 29th, 2007
Nice. I’ll follow it.
Reply_____________
http://dcarbono.blogspot.com
Mohamed August 12th, 2007
Nice Tutorial Thanks Mate.
ReplyNick September 11th, 2007
Nice. Just 1 thing. Pick your base color first.
ReplyPavel Bastov September 13th, 2007
This is the best web 2.0 seal tutorial I was able to find.
ReplyLukas November 9th, 2007
Great Tutorial! Thank You
ReplyBraduly January 26th, 2008
PSD source would be nice
Replypaul February 2nd, 2008
I don’t have the seal custom shape!! where I can find it, pleaseee!
Replypaul February 2nd, 2008
ejemmm…. answer to pablorave at gmail, thnx!
Replyhongkiat February 2nd, 2008
Paul: I’ve uploaded an image showing where the seal shape is. Click here.
ReplyRahul March 11th, 2008
Nice tutorial!
very simple to follow. Thanks for sharing!
- Rahul
Replyweb design March 16th, 2008
Very good and with detailed explanations and images.
Many thanks
ReplyDimi
seegatez April 30th, 2008
Simple tecnique but great result.. thanks
Replytemplate June 7th, 2008
really nice job, thank you so much
ReplyStan Barker July 7th, 2008
Thanks for this – I didn’t even know there was a ’seal’ option in Custom Shapes before today!!!
Cheers,
ReplyStan x
http://www.arenaflowers.com
çiçekçi September 14th, 2008
paylaşım için çok teşekkürler / very very thankss
Replyusb October 3rd, 2008
Great tutorial thanks. Here is drop shadow generator: http://www.dropshadowz.net
ReplyZobéir December 30th, 2008
I have CS4 and I can’t found that shape on my Photoshop,
ReplyI just have 30 shape on my Photoshop!
where can I download this?
Please help :P
julius January 9th, 2009
My Photoshop doesn’t contain this shape.
Replyjoe February 13th, 2009
With CS4 you have to do a slight work around. I used the polygon shape, with the polygon options set to star, 10% indent, and 30 sides. This give approximately the same shape, feel free to tweak.
Replyqinglou March 8th, 2009
so good haha,,,i live ps
ReplyPrincessX88 May 6th, 2009
There was a guy who made a web 2.0 logo generator online as a joke but people used the heck out of it lol
ReplyBeth - Iflorist.co.uk May 20th, 2009
The article is really very helpful with detailed information.
ReplyEric July 8th, 2009
In cs4 you have to click on the shape icon and select all and you should find it.
How are you able to change to color of the gradient?
ReplyFree Microsoft Points September 15th, 2009
Great tutorial, created a logo with this.
ReplyMac Tyler November 9th, 2009
Or you could just download these! http://mactyler.deviantart.com/art/Glossy-Apple-Badges-142862055
Replyela December 17th, 2009
very helpful information
ReplyThank you
x
Ela
Trackbacks