Web 2.0 Violator / Badge using GIMP

Ok, so … I’ve confined myself to using Linux — At least until the replacement for my dead new laptop shows up.

One of my clients needed me to quickly throw together a violator/badge and so I decided to torture myself by using GIMP rather than booting up my backup Windows machine.

Masochistic, I know.

A bit about me

First of all, let me explain that I am an absolute GIMP newbie — This type of thing would take me about 2 minutes to create in Photoshop… Getting this to work correctly in GIMP took me about an hour. Most of that time was spent trying to find the features I’m used to.

I don’t know that I’m doing things in the most efficient way, but thats what the comments section is for. Please do correct me if I’m doing something dumb and I’ll update.

Create a new image

Create a new image. Choose a size thats about 1.5 to 2 times the size of what you’d like your final image to be. Set the fill to Transparency.

Using the Gfig filter to create a star

Aright — Can I just tell you all that finding this option drove me to the brink of insanity. Seriously! How the hell is a shape drawing tool considered a filter? Par for the course I suppose — there are lots of features located in places that make absolutely no sense at all.

NOTE: Before loading up the Gfig filter, I found that creating a new layer with a solid background color is an absolute necessity. If you try and create your star without one, the control points that are needed to modify the star are pretty much invisible. You can remove the fill layer later on by right clicking the layer and selecting delete.

To create this temporary layer, just select the new layer icon from the layers control. Select “White” for the layer fill type.

Once we have our temporary fill in place, we can go ahead and fire up Gfig by selecting Filter -> Render -> Gfig from the images menu.

The next few steps are where you can start getting a little creative — Not every violator should look the same. Depending on the desired size of your image, things like stroke width and number of points are going to be pretty variable and you’ll need to do a little trial an error.

Lets create the star by selecting the star icon from the toolbar. For this example we’ll set the sides option to 30, and adjust the stroke to 3px.

Draw the star by clicking and dragging from the center of the editor area out to any side. What you’ll end up with will look more like a starburst than a badge.

Next, lets select the Move Single-Point tool, then click and drag the inside control point, pulling outward, until you have something that resembles the badge shape you’d like.

Alright, the hard part (finding the damn shape creation function) is done! Click close and you’re newly created badge outline should be ready to decorate.

Color and Decoration

In keeping with the traditional violator style, the next thing we’ll want to do is add a radial gradient fill inside the badge outline.

For those of you that use Photoshop, you’ll find that this part works pretty much the way you’re used to. Select the inside of the badge using the Select Contiguous Regions tool (AKA, the Magic Wand for all you Photoshop types out there).

Choose the Gradient Fill tool, select the colors of your fill (In this example I’m using the preset Yellow Orange) and pick Radial for the shape of your gradient.

Click and drag within the selected area of your badge outline. In my case, I’m going from the top left to the bottom right to match the drop shadow I’ll be applying later. You may want to spend a little time playing around with the part as it really is the most noticeable part of your new image.

What you’ll end up with is pretty close to the final product. All we have to do now is add a few more decorations, soften things up a bit (GIMP seems to leave some jagged edges that aren’t very desirable) and finally add our text.

The Drop Shadow

Using the Magic Wand, select the empty space around the badge and invert your selection (select -> invert).

Now choose Script-Fu (Who the fuck comes up with these names…) -> Shadow -> Drop Shadow. This is another place you’ll need to be a bit creative, depending on the size and application of your badge; you’ll also want to take lighting into consideration. Since our radial gradient gives the impression of light coming from the top left of the image, our drop-shadow should fall to the bottom left.

Lets set our offsets equally, 4px to the left and down, set a blur radius of 7px and reduce the Opacity to around 40. This will give us a little depth and make the badge pop off the page a little.

Now, if you plan to use your image at it’s current size, you’ll want to add a little bit of blur to soften things up a bit. If you plan to reduce the image size, you’ll want to skip this step as downsizing the image should get rid of most of the visible jags.

To add a little blur, choose Filters -> Blur -> Gaussian Blur and reduce the blur to about 0.75 to 1.0 pixels.

Add some text and your ready to go!

Add your text and effects, and in our case, resize the image. There you have it. A web 2.0 style violator (badge) using GIMP. Although not quite as pretty as what I usually create in Photoshop, it is possible to get acceptable results from this Open Source Photoshop alternative. Though, unless I can learn some more tricks to improve the image quality, I’ll stick with Photoshop for my professional work.

If you have any suggestions or know any tricks to increase the quality of what we’ve done here, please post a comment and we’ll give it a try.

Whats next?

Well — If I get a little time and have the patience, I’ll try to put together a little write-up on creating a Web 2.0 style logo, and maybe some nice Glossy buttons. Of course, I may just get frustrated with GIMP and decide to chuck it in the bin. Only time will tell.