BARGAINSTARTUTORIAL

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

  1. Very neat. Fireworks seems to have quite a few more handy shapes to work with than Photoshop. Hmmm….

    Good tutorial. Thanks.

    L. Robinson

    Nov 13, 08:10 PM #

  2. 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.

    david

    Nov 13, 08:40 PM #

  3. Great tutorial… delicioused..

    Ryan Merket

    Nov 14, 12:52 AM #

  4. Nice tutorial. Thanks for your work.

    Shane

    Nov 14, 05:14 AM #

  5. 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!

    Garri

    Nov 14, 05:33 AM #

  6. Nice, i see that there are many wyas do this star.
    I found another tutorial, http://www.bartelme.at/journal/266/

    Thomas

    Nov 14, 11:43 AM #

  7. like the site, like the posts so no disrespect intended, but why must this be perpetuated?

    anon

    Nov 14, 03:51 PM #

  8. 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

    Thame

    Nov 14, 04:21 PM #

  9. Cool… I was looking for a lost photoshop plug-in to do this by Extensis called PhotoGraphics… now I won’t need it!

    TzMedia

    Nov 15, 09:58 AM #

  10. 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.

    anon

    Nov 16, 03:58 PM #

  11. Great work !!! nice and easy to understand

    Ashish Gupta

    Jul 7, 01:26 AM #

Add a Comment

Phrase modifiers:

_emphasis_
*strong*
__italic__
**bold**
??citation??
-deleted text-
@code@

Block modifiers:

bq. Blockquote
p. Paragraph

Links:

"linktext":http://example.com


Show Articles By:

You can show articles by time or category.

  • 260.

    Prodigious Savants and their Abilities

    Savant syndrome, a condition occurring most often in autistic patients, is a rare disorder where mentally retarded individuals have incredible abilities in isolated fields like memory, mathematics,...

    Read More

  • 260.

    Why Medicine Again?

    Medicine isn’t what it used to be. I’ve talked to alot of physicians, researchers and residents recently and I’m not encouraged by what I’ve heard. What seems to motivate many...

    Read More

  • 260.

    What of the Soul?

    I received a question recently that asked what I thought about the existence of a soul given the relative secularity of most of the content on this site. Soul, Mind, whatever you call it refers...

    Read More

  • 260.

    Turtles All the Way Up

    That pervasive question, “what are we doing here”, or more accurately, “what’s the fucking point” continues to steal away my attention (and sanity). Looking up is one impetus, but more...

    Read More

  • 260.

    Frozen Worlds: a Time Puzzle

    I got a bit giddy when we got to the “Space and Time” portion of my Metaphysics class. Most of my semester was spent deciphering bizarre accounts of matter (where two theories’ definitions...

    Read More

  • 260.

    Ineffable Understanding

    Near-death experiences, hallucinogenic trips, meditation, you’ve probably read about (or felt firsthand) the odd nature of these “out of body” experiences. A philosophically interesting...

    Read More

  • 260.

    The Neurobiology of Freedom

    So, consciousness is accompanied by an experience of freedom, which phenomenologically speaking, does not seem illusory. But, what exactly does that mean about consciousness and our brain? There are...

    Read More

  • 260.

    Natural Kinds in Chemistry

    One of my favorite courses so far was last semester’s “Natural Kinds”. Everything from the unique subject matter to the seminar-like structure made the class a blast, up until the...

    Read More