That Smith

Materials needed

• The Gimp
• Shape Paths plugin
• Web 2.0 Gradients for Gimp

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

3) Create a new shape by choosing Script-Fu -> Shape Paths -> 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.

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.

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

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

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

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.

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.

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.

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.

Your badge should now look something like this.

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.

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

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.

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.

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.

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.