erraticwisdom

Ever since I added the “New” star in the header of my reboot, I’ve been getting a couple requests a day from people asking how I made it. This tutorial is for Macromedia Fireworks, but you might be able to recreate it in Photoshop.

Update: Bartelme Design has a gorgeous, two-part tutorial on how to make these “badges” in Photoshop.

Create a New File

Create a new file in Fireworks, for this tutorial I’m using a 200×200 pixel canvas, but you could easily make a larger or smaller one.

Create a Star

Create a basic star by selecting it from the vector shapes menu. Then, click and drag the cursor across the canvas to create a basic, 5-point star.

Change the Color

Change the color of your star to white (if it isn’t already) by clicking first on the star to activate it and then selecting the white color by clicking on the paint bucket in the “Properties” bar at the bottom.

Next, add a drop shadow so that we can see the star a little better. You can add a shadow by clicking the ”+” button in the Filters also found in the bottom “Properties” box and going to “Shadows and Glow” > “Drop Shadow”. Fiddle around with the settings a little, but if you aren’t familiar with them you can use the numbers in the picture above.

Making a “Bargain” Star

Now, to turn your basic star into a bargain star, grab a hold of the yellow “points” dot and drag it around the star until you have about 20-25 points.

Right now it may look a little frightening (and sharp), but we’ll fix it up in just a few more steps.

Changing the Radius

Now, grab a hold of the “radius” point (also yellow) and push it upwards towards the tips of the points. You should try to make the star look a little less menacing while maintaining the actual star shape.

Final Touches

Now that you have the basic structure down, you can mess around with some other filters. Try adding an inner shadow (from the same menu where you found the drop shadow) with the settings in the picture above. You can also play around with the colors and borders until you find a combination that matches your layout.

Download

Here’s a final example:

You can download the source PNG here