teddY-risatioN™

This tutorial is adapted from PhotoshopCandy’s A Glossy Starburst Tutorial, so all credits of this tutorial go to its creator. What I did was just to create my own screenshots, alter some of the steps for personal adaptation and that’s all.

In this tutorial you’ll learn how to create a web 2.0 badge by using photoshop. I am aware that there are many other automated badge makers out there, but most of them come with a price or a demo which expires after a certain amount of usage. By grasping the important steps in this DIY badge you’ll be able to create glossy badges yourself isn’t that great?

Step 1 - Create New Canvas

Create a new canvas by punching the keys Ctrl + N, and to make sure that your badge has a high resolution for future uses (maybe you’ll want to print it next time or display it at a very high resolution on your blog or etc.), I recommend you to make the canvas to be at least 500px X 500px. Set Background > White.

Step 2 - Select Starburst Shape

This can be done by selecting the Shape Tool on your toolbar, and then select Custom Shape Tool either by clicking on the icon to display a list of possible shapes or by accessing the toolbar near the top of your photoshop workspace.

To access the Starburst shape, select it. If it doesn’t appear on your preset, click on the small black arrow on the top right corner of the preset menu and select Banners. This will bring up all the shapes under the Banners preset, which of course, includes the Starburst shape, which is named “Seal”:

Step 3 - Create Starburst Shape

You can create the shape by just holding Shift and dragging your cursor across the canvas to preserve the original proportions. Make sure that the shape covers most of the canvas area, and is at the centre of the canvas (this can be done by dragging the shape around, and it’ll snap to the center of the canvas).

After drawing the shape, name the layer Logo, or whatever name you desire. You can select any colour (preferably slightly darker ones) for your shape, and for this time I’ll be using the colour #2c2a70. It’s all up to your personal preferences.

Step 4 - Create Selection Marquee

You can create a selection marquee which assumes the starburst shape by right clicking the thumbnail of the “Logo” layer. After that, we’ll want to create 1 px solid colour border around the resultant badge, so after creating the marquee, go to Select > Modify > Contract. This will bring up a dialogue box prompting you to enter by how many pixels you want to contract your selection. Enter 1px.

Step 5 - Customise Gradient Tool

With the selection marquee still displaying (do not deselect it!), create a new layer by pressing Shift + Ctrl + N, and name it Glow. Access the Gradient Tool on your toolbar, and the customising options of the tool will appear on the top of the workspace. Click on the gradient displayed to make the following adjustments:

The choice of the colour of the gradient depends on what colour the logo shape is taking. It should be a lighter colour of the original logo colour. In this case, since we’re using dark blue as the logo colour, a nice light blue (#0099ff) will be great.

Step 6 - Create Glow

To create a nice glow on your logo, with the selection marquee still active (by right it should be still there), select Radial Gradient and drag the gradient line from the lower right corner of your canvas to the center of the shape. Now you’ll see a lovely glow on your logo by now!

Step 7 - Modify Selection Marquee

And now we’re into creating the glossy / reflective look of your to-be badge. To do so, you’ll have to select the Marquee Tool from your toolbar, and then select Elliptical Marquee Tool. Make sure that your original marquee selection is still active. After that, press Shift + Alt and then drag the marquee cursor such that it overlaps with the top part of your logo. Some practising is definitely required, and I took about 15 minutes figuring out how to drag the marquee cursor to get this. Be patient though!

Step 8 - Customise Gradient Tool, Again

With the new selection active (created in the previous step), create another new layer by pressing Shift + Ctrl + N and name it Gloss. Select the Gradient Tool again. Click on the gradient that appears on the top of your workspace to customise it as shown:

Note that you’re now using white (#ffffff), and make sure that the right hand side of the gradient fades to only 50% opacity instead of the default 0%.

Step 9 - Create Glossy Effect

To create a glossy effect, with the new selection marquee (done in step 7) still active, select Radial Gradient. Drag the gradient cursor from the center of the shape to the top left corner of the canvas. You’ll get something that looks like this:

Step 10 - Change the Opacity

Change the opacity of the Glossy layer to about 25%. Again it depends on your personal preference, so as long as it looks okay to you.

Step 11 - Add Text

Use the Type Tool from the toolbar to draw a textbox, and then type in the words you want. Adjust the font size, line spacing and character spacing if you wish so that your text will fit into the badge - all these can be done by access the Toggle for Character and Paragraph palettes:

After you’ve created the text layer, remember to change the font colour to a slight grey (so that the glossy layer can show through and create a glossy effect on the text as well), and position the text layer such that it is below the Gloss layer and above the Glow layer:

Step 12 - Final Touchup

To make your nifty little badge to appear more realistic, you can opt to create a drop shadow for the Logo layer:

And here is the final product that you’ll have:

Isn’t it lovely? To create your own variations (in terms of the colour of the badge), you do not need to redo the entire process - just modify the base colour of the Logo layer, repeat step 6 with a different gradient settings (use a lighter colour) and you’re done! The Gloss layer basically stays the same for all badges, so you don’t need to modify it anymore. You can download the .psd file of the logo above here:

Hope you like this tutorial if you have any comments, feel free to post them below. Thanks!