Bargain Star Tutorial
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
L. Robinson
Nov 13, 19:10
Very neat. Fireworks seems to have quite a few more handy shapes to work with than Photoshop. Hmmm….
Good tutorial. Thanks.
david
Nov 13, 19:40
this is cool. side note thought. Photoshop has this exact shape as one of its custom shape tools ( seal )
but its always good to know how to make one from scratch.
Ryan Merket
Nov 13, 23:52
Great tutorial… delicioused..
Shane
Nov 14, 04:14
Nice tutorial. Thanks for your work.
Garri
Nov 14, 04:33
Thanks for this. I couldn’t figure out to do this in FW (or PS), so resorted to using a dingbat instead. This is much better, cheers!
Thomas
Nov 14, 10:43
Nice, i see that there are many wyas do this star.
I found another tutorial, http://www.bartelme.at/journal/266/
anon
Nov 14, 14:51
like the site, like the posts so no disrespect intended, but why must this be perpetuated?
Thame
Nov 14, 15:21
Glad I could help…
Thomas:
I actually linked to Bartelme Design’s article in my original post.
anon:
I’m not exactly sure what you mean. I only posted the article because I had alot of trouble with it and thought I could help people out.
Sorry if it bothered you or if I haven’t answered your question. Feel free to leave another comment to elaborate on what you meant in the first one or contact me
TzMedia
Nov 15, 08:58
Cool… I was looking for a lost photoshop plug-in to do this by Extensis called PhotoGraphics… now I won’t need it!
anon
Nov 16, 14:58
Thame:
The tutorial itself is great. But I notice an astounding lack in originality on the web lately. The same elements are continually recycled; the glassy floor, the starburst, the cut off header.
They all looked great on sites the first few times around, but I think originality is very important.