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.
Don't miss any post. Subscribe to Hongkiat's RSS feed now.
Related Contents |
Sponsors |
|
|
|
|
Posted by hongkiat in Photoshop Tutorial , 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
Trackbacks