GIMP Tutorial: How to make a Web 2.0 logo or button – part 1

Written by Marc Roberge | 06 May 2010

This is part 1 of a 3 part tutorial showing how to create a Web 2.0 button or logo using GIMP - the free open source photo editing and image creation software.

This particular example will be used to brand dodisdodat member Raizzt’s new tech forum called www.techsthing.com.

In this first part, we will concentrate on creating the initial “metal” styled shield.  We will use a variety of selection and fill tools to create this:

We start by launching the GIMP.  Don’t know what the GIMP is?  GIMP (Gnu Image Manipulation Program) is a free Open Source photo editing and image creation software.  GIMP is often touted as an alternative to the very expensive Adobe Photoshop.  To find out more, read: What is the GIMP?

1.  Let’s start by launching GIMP.  From the menu, select “File>New”.

2.  We’ll create a 1024x768 pixel canvas to work on (1).  Our final product will be much smaller than this, however, we start with a resolution of 300 (or higher) for x and y (2) because, while our intention is to create a logo for web, chances are it will also likely be used for print.  Increasing the resolution will help us minimize aliasing (jagged edges on slopes).  We also want to set the background transparent so that our finished product can be used in various projects by being applied over any background (3).  Finally, click “OK” (4).

3.  From the Toolbox, select the Ellipse Selection Tool.

4.  Still from the Toolbox, in the properties section below, make sure the “Antialiasing” and “Fixed” options are checked and that “Aspect Ratio” and “1:1” are set as we will be creating a perfect circle.