Making a logo with Gimp

In this tutorial you will learn how to make a logo in Gimp and then resize it for use on your website. You will make a logo that features the name of your site.


1. Launch Gimp and go to File>New ..


In the Create a New Image dialogue box that opens choose a size that is at least 4 times larger than your final logo will be. For example, for a logo that will end up as 200px x 100px use ..

Click "OK" and a new blank image will open.


You need to create your logo at a bigger size because you will need the highest quality original as you create and edit it. You will save it at this size in Gimp format first, and export it at a smaller size and in JPeg, GIF or PNG format for your website later.


2. In the Layers palette on the right side of the screen you will see a single white layer entitled "Background". We don't want this so right-click on it and select "Add layer mask" ..

In the dialogue box that opens select "Black (full transparency)" and click "Add" ..

We now have a transparent image with no pixels in it ..


3. Now we will make a text layer. Select the Text button (Big A) in the toolbar and the Text Tool options will open below it ..

Click the Font button and select a font ..

Now change it's size to 200 pixels and choose a colour from the colour picker ..

Click "OK" and move your cursor/pointer to the top left edge of your image and start typing ..

To reposition the text drag the box at the top left corner ..

Click on any other Tool to finish. You will now have a new text layer ..


4. Repeat what you have just done to make another text layer with a line of text that is positioned below the first. Click with your text tool below the first line of text. Try to make your text fit the image by changing it's size if necessary. You will need to select the text by clicking and dragging over it first ..

Here's we we created ..


5. Select your first text layer in the Layer palette ..

Now select the Drop shadow filter ..


.. and add these settings before clicking "OK" ..

You will now have a drop shadow on your first text layer ..


6. Add a different filter to the second text layer ..

7. Now it's time to save your image in Gimp file format so you can open and edit it later. Choose File>Save as ..

.. then give it a web friendly name such as "tracys-trays-logo.xcf". "xcf" is the Gimp file format.


8. Now it's time to reduce the image's size before we export it in a web friendly format. Go to Image>Scale image..

.. and enter these settings before clicking "Scale" ..

9. Now save your finished logo in a web friendly format. Because we have a transparent background and drop shadow we need to use the PNG file format. Go to File>Export as ..

Type a web friendly name for your file (lower-case, no spaces) ..

You may need to select the correct file type if Gimp has not selected .png for you ..

Now select the folder you want to save your file to and click "Export" ..

If your do not need a transparent background you can save your file as a .jpg. When you do so you will be asked to select a "Quality" setting. Choose "80".


10. Well done, you're finished. Now add an image tag (img) to html doc(s) to see your logo appear.

NOTE: Do NOT re-save your image in Gimp format when you quit Gimp. It will be at the smaller size!