Create a web 2.0 badge in The Gimp

In this tutorial I will show you how to design a web 2.0 badge in the Gimp. These type of badges have made their place in the web 2.0 design as a great graphic to have on your website for all sorts of options such as subscribing to an RSS feed. Some techniques in this tutorial are based on the Photoshop tutorial written by Photoshop star which can be found here.

The outcome will look like this:

-

Step 1

Firstly, create a new canvas and make it a good size, I will be using the dimensions 300px x 200px. Fill it with a colour of your choice, I am going to use 661818 for this tutorial.

-

Step 2

Create a new layer and use the Select Ellipse tool to draw a circle on the canvas with a width and height of 125px:

-

Step 3

Now fill it with an orange colour, I am opting for f05528:

-

Step 4

Next select the Paths tool and click and drag to select the bottom right of the circle like this:

-

Step 5

Now go to the Edit menu and select Cut and create a new layer. On this new layer select Paste from the Edit menu and fill the selected area with white, then click off the selected area. Now use the Rotate tool and the move tool to rotate the selected area around and position it like it is below:

-

Step 6

Now duplicate the circle layer, select the layer contents (Ctrl and A), cut the content (Ctrl and X) and then paste it back in again (Ctrl + V), this will make it selected. Select the Blend Tool and in the Tool Options change the Gradient option to FG to Transparent and change the forecolour to white (FFFFFF). Now click and drag from the bottom right to the top left to create this:

-

Step 7

Now change the opacity of the layer to 30.0 which will create this:

-

Step 8

Duplicate the folded area layer and select all the contents, cut the contents and then paste it back in to make the area selected. Now select the Blend tool and change the forecolour to black (000000), make sure that the gradient is set as FG to Transparent and click and drag from the right to the left of the selected area so that it looks like this:

-

Step 9

Change the opacity of the layer to 30.0. Select the folded area layer (not the one with the gradient) and select the Filters menu -> Light and Shadow -> Drop Shadow and change the options on the window that appears to this:

-

Step 10

Finally, repeat the last step for the circle layer and add the image/text to the badge using the Open As Layers option on the File menu.

-

Result

-

Download