How to make web 2.0 badges WITHOUT your pirated copy of Photoshop

By • Aug 15th, 2008 • Category: Advice

Materials needed

Without going into great detail, a while back I found the need to come up with a flashy web 2.0 style button for my employer’s website. I am not a graphic designer, and the designer we do have isn’t very up to speed with the times, so I set out to learn how to make one on my own. The only catch, I don’t have a copy of Photoshop.

There are several free web 2.0 badge generators out there, I know because I tried them. However, not one was able to create a badge the size I needed. I also found several tutorials on how to make them in Photoshop, but again, I don’t have Photoshop.

The solution was to make one using Photoshop’s free, open source alternative, Gimp.

The Tutorial

1) Start Gimp

Once you have Gimp downloaded and installed the plugins listed above, start it up so we can get going.

2) Create a new image, 420px x 420px filled with Transparency

Creating a new image

Creating a new image

3) Create a new shape by choosing Script-Fu -> Shape Paths -> Star

Create a star

Create a star

4) Place the star in the center of the image using 210 as the X and Y coordinates

5) Set your desired inner and outer radii. These numbers should be fairly close if you don’t want your badge to look stupid.

6) Choose the number of points you want your star to have, and set a rotation if one is desired.

7) Check “Stroke Path” and “Fill Path” and make these black so we won’t end up with a transparent image.

Your new star should look like this

Your new star should look like this

8) If you don’t already have the Layers dialog on your screen, toggle it by selecting Dialogs -> Layers, or by pressing Ctrl+L

9) Now we want to select our badge so we can fill it with a nice gradient. Do this by right clicking the layer and choosing Alpha to Selection. Then choose the Blend (gradient) Tool by pressing L.

10) Select the gradient you want for your badge. I choose Blue Flat #2 for mine.

Selecting a gradient in Gimp

Selecting a gradient in Gimp

11) Fill the badge by clicking near the bottom and dragging up.

Filled with a blue gradient

Filled with a blue gradient

12) To give our badge a glossy look, we first need go back to the Layers dialog and create a new transparent layer. Make sure your badge is still selected. Use Alpha to Selection again if it isn’t.

13) We now want to use the Ellipse Select Tool (E) to select an edge of our badge. Change the select mode to “Intersect with the current selection” (Shift + Ctrl when dragging).

Selecting a corner

Selecting a corner

14) Use the Bucket Fill Tool to fill the selection with white.

Badge filled with white corner

Badge filled with white corner

15) Now, give the badge a glossy look by changing the Opacity of the white layer to about 30. This is done using the Layers dialog.

Badge with glossy corner

Badge with glossy corner

16) We want go give a bit of a glow to our badge as well, so create another new transparent layer.

17) Using the Free Hand Select Tool (F) with Feathered edges of about 50, draw a small crescent over the badge.

Selecting a crescent

Selecting a crescent

18) Fill this layer with white and change the Opacity to around 30. Now that I think of it, let’s also change the Opacity of the corner to 10. These values will vary depending on the color you chose for your badge.

Badge with slight glow

Badge with slight glow

19) Now we want to give our badge a drop shadow. To do this, first select the background layer and choose Alpha to Selection. Then go to Filters -> Light and Shadow -> Drop Shadow.

20) I didn’t want my shadow to be too big, so I set the X offset to 2 and Y offset to 1. I also changed the blur radius to 4 and Opacity to 60.

Adding a drop shadow

Adding a drop shadow

Your badge should now look something like this.

Blue Badge

Blue Badge

If you want, you can merge the layers and be done, otherwise continue reading for more cool effects.

Still with me? Ok.

21) Next let’s add a cool warning effect to the badge. Select the background layer using Alpha to Selection and create another new layer.

22) Choose the Fill Bucket Tool again, but this time change the Fill Type to pattern fill. The pattern we want is called Warning! Fill the new layer using this pattern.

Messed up badge

Messed up badge

23) Now that we destroyed our perfectly good badge, fix it by changing the layer’s Opacity to 2.0.

New blue badge

New blue badge

We now have a cool warning effect.

24) Now let’s change the color of the badge to black. We can easily do this by selecting the background layer and applying a different gradient. I chose Web 2.0 Black 3D for this one.

Black Web 2.0 badge

Black Web 2.0 badge

We can finish our badge giving it some text.

25) Choose the Text Tool (T) and begin typing.

My badge will say “That Smith” using Arial Rounded, size 24.

26) To give the text a cool effect, select it by right clicking the text layer and choose Alpha to Selection.

27) With the selection in place, create a new layer just below it.

28) Now choose Select -> Grow, and add 2 pixels to your selection.

Growing the selection

Growing the selection

29) Fill this layer with white (make sure you change the Fill Type back to FG color fill), and change the Opacity to 20. This gives our text a highlighted look.

That Smith badge

That Smith badge

We are now done making our Web 2.0 badge and are ready to show it off.

Download the tutorial files: Blue Web 2.0 Badge, Blue Web 2.0 Badge w/ Warning, That Smith Badge.

As an added bonus, you are also welcome to download the badge I made for work and a 5-point star.

Discounted Inventory

Discounted Inventory

5-point Star

5-point star w/ extra flavors

Tagged as: , ,


Email this author | All posts by

8 Responses »

  1. awesome! thanks so much!

  2. I like! The only note of constructive criticism: With the stripes, I would put that layer into darken mode so that the hint of yellow doesn’t show up. But then again, I wouldn’t have noticed if I wasn’t looking for it. But again, GREAT JOB!

  3. Hey thats a cool tutorial!!! But I really love the awesome title *lol*
    Btw, GREAT idea to use this nasty yellow-black pattern to make the stripes effect – I didnt saw that one before! Keep it up,man!!!

  4. Thanks for the tutorial — very helpful for the newbie GIMP user!!

  5. Excellent! Thanks so much!

  6. Great tutorial. Just the kind of thing I was looking for.
    I think it looks even better when you rotate the text at a 5 to 10 degree angle.
    Just an idea.
    Thanks!

  7. How did you know my Photoshop is pirated? This article is a gem. It should be in the GIMP manual. It’s exactly what I needed to do. Best Regards, Jim.

  8. Thanks heaps, I was tearing my hair out and you saved my sanity.

Trackbacks

Leave a Reply