The GIMP

Preparing graphics and photos is probably one of the most common tasks you will need to deal with, so the GIMP is an appropriate place to start our adventure into the creative side of Linux. The application itself is one of the oldest flagships of creativity, without which our screens would be drab places indeed. Despite the awful acronym, it has become the primary graphical manipulation tool on the Linux desktop and in many cases it is just the tool for the job. Once you realise that everything you see on your screen can be manipulated using The GIMP, its omnipotence in the visual realms becomes very relevant.

So, let's fire up The GIMP from Graphics > GIMP Image Editor and get to work.

Preparing Graphics

If you have never used The GIMP before you'll need to go through the User Installation dialog. It is normally fine to click Continue on each of the panels, when it is done The GIMP should boot up nicely and you will be presented with the two vertical toolbars and the Tip of the Day panel, get rid of the Tip of the Day for now, you can always read that later. At the top of the main column, which will probably be on your left, are three menus: File, Xtns and Help. Select File > New ... and you should be looking at a dialog called Create a New Image. From the drop down box marked 'Template' We're going to choose Web banner common 468x60. One day I'm going to find a use for the US standard Toilet paper setting I'm sure. Click OK and you will be presented with a nice blank banner ready for your smart new logo.



Back on the main column, you will see an icon panel beneath the main menu, this is your Toolbox, click on any of these and the various associated options will be shown in the bottom half of the column. We're interested in the Text tool right now, which appropriately looks like a T, and sensibly, this is also the keyboard shortcut. If you place the cursor over your new banner it will turn to an I-beam indicating that it is ready to insert text. If you click on your blank canvas, somewhere to the left I'd recommend unless you're writing in Hebrew, the GIMP text editor should appear. Type in some words. Great, now something should show up on your new canvas.


Going back to the Tool options on the bottom half of the main column, we can now adjust the text properties, find a nice font, resize and colour it to taste. You will notice an interesting option at the bottom of the list - Create path from text - click on it now. If you look over at the second column the Layers,Channels,Paths dialog should be prominently displayed. You will see that the GIMP has created a new layer for your text leaving the background blank. This is good. This dialog has four tabs which allow you to access the Layers (what you are looking at now), Channels, Paths and Undo history. Let's look at the Path you've just created by clicking on the Paths tab. You should see the path listed in the dialog box. By clicking on the blank space furthest to the left it is possible to view the path. Bear in mind that the path, similar to making a selection, won't affect the image itself unless you do something with it. The simplest thing to do is to use it to create an outline for the text. If you right-click on the entry in the dialog box it will bring up a context menu from which we want to select Stroke Path ... Give it a line width of 1 pixel (1px) and apply. This should create a black border round your text. If you are not happy with your results you can always Undo (Ctrl+Z or the first item in the Edit menu) and reapply. Try experimenting with different foreground colours and line widths until you are happy.

Before you go much further save your work. Get into a habit of doing this every time you sit back from the computer and think 'What next?'. You will thank yourself for saving often. Save it as a .xcf - the native GIMP format while you are working on it, we can export it later.

You may want to experiment with the move tool (the arrow-headed cross icon or M key) to position the text where you want it, you can also use the arrow keys on your keyboard for this. Next we're going to need a cute anthropomorphic penguin character (of course). I've got one, but it's part of another picture. No problem, we can open up the image in the GIMP and cut around the image using the intelligent scissor tool, the scissors with a wiggly line icon that is labelled Select shapes from image. You will notice that all these tools have keyboard shortcuts too, this one is I. Once we have the shape outlined by clicking on various points around it, clicking in the middle of the shape selects it. From here we can Edit > Copy and Paste as New from the menu and save that as a separate image for now. You may want to use the Eraser tool to clean it up a bit. I generally prefer a small hard-edged circle 3 pixels wide and enable the Hard edge option for cleaning up work.


Let's leave that open and go back to our logo. This is where we have to start remembering which window we have in focus, which layer we are working on and what we have selected because changes only affect the selection on the active layer. If we right-click on the layers dialog again this time we can select New Layer ... it should be the same same size as the image by default and we want the Layer Fill type to be Transparency. Now our changes will only affect the New Layer. Now we can go back to our penguin picture and Copy it. It may be a good idea to resize it before we do that, bearing in mind that this banner is only 60 pixels high. Image > Scale Image ... will bring up a suitable dialog. If you leave the x and y coordinates locked, then changing one will automatically adjust the other. Then Select > All and Edit > Copy. Bring the banner back into focus and make sure the New Layer is still selected. Edit > Paste and then use the Move tool to position it where you want. You can then either right-click in the layers dialog and Anchor Layer or click in the image when you get the anchor cursor. Don't forget to Save.


For a final touch we want to brighten up the background, for which we're going to use a pattern fill. Select the paint bucket (Shift+B) from the toolbox and choose Pattern fill from the options underneath. Select a suitable pattern, I chose 'Pool Bottom' for this, now go back to the layers dialog and select the background. This step is very important, we don't want to wipe out what we've already done. Then you can click almost anywhere on the canvas and flood it with the chosen pattern.

I'm not happy with the contrast so with the background layer still selected I go to Layer > Colours > Hue-Saturation ... and play around with the values. I give it Hue +30 and Lightness -70 Leaving the saturation alone. Much better.



We now have a basic logo, which will serve us for now. We can export it using the File > Save as ... dialog and selecting a file type of something like PNG image. This will render it into a format usable by other applications. You will be prompted for various options, the defaults are probably going to be fine for most purposes.

links:

http://docs.gimp.org/
http://gimp-savvy.com/BOOK/