Standards Compliant Web Design in South Africa | websitewriters.co.za » Web 2.0 style graphics

Web 2.0 style graphics - badges/violators

Posted by Raoul Snyman on March 24, 2008 on 6:24 pm | In Design |

The next tutorial in the Web 2.0 style graphics series deals with badges or violators. Don’t ask me why they’re called “violators” but anyways…

Get out your trusty copy of the GIMP (I’m using version 2.4, but all the functions I use are in 2.2 as well), and let’s get started!

First create a new image. For this tutorial I’m creating one that’s 300×300 pixels.

Then we open the Gfig tool. In my version of the GIMP it’s under Filters > Render > Gfig.

Now click on the Browse button under the Stroke heading, and select Circle 01, the smallest stroke.

Now that you’ve selected the right stroke, you need to do a couple of things to set your shape up. Select the Star shape from the buttons at the top. Once that’s selected, set the number of points to 12. Now click and drag from the middle of the drawing surface until the shape is the size you’d like.

Now we need to shorten those points to make the “star” shape into something more like those violators we see on “beta” sites. Click on the “Move single point” button at the top of the dialog.

Click on the middle dot, and drag it outwards until your shape is to your liking.

Once your shape is satisfactory, click the Close button, and return to your image.

Our next step is to smooth the edges out. Select the Fuzzy Select Tool from the tool palette.

Now click inside the shape and it should select the interior.

Next create a new layer by clicking on the New Layer button at the bottom of the Layers Browser. This layer should be transparent and the same size as your image.

Now delete the Gfig layer, as we don’t need that anymore. But be careful, don’t lose that selection! In the Layers Browser, select the new transparent layer.

Now we need to smooth our edges. In the Selection menu of the image window, select “To Path” to convert the selection to a path.

Now convert your path back to a selection again. Selection > From Path.

Now we’re going to make the nice colourful insides of our shape. Select the Blend tool and choose 2 colours, not too far from each other. One colour should ideally be a lighter version of the other. Make the lighter colour the Foreground colour. Set the blend shape in the blend options to “Radial”.

Now click and drag your mouse from a little way into the shape at the top, down to the bottom, a little way in from the shape.

Now you should have your nice gradient.

At last we can deselect our shape!

Our last step is to add a drop shadow. In my version of the GIMP, it’s under Filters > Light and Shadows > Drop Shadow. Set your offsets to 2 pixels and the blur radius to 4, in order to make a small, concise shadow.

And there we have it! Our smart, Web 2.0 compliant violator.