Web developers != web designers.
We all know this, right? I have no artistic claims whatsoever. But what happens in a lot of jobs is that there's a great deal of overlap. You get images from designers which are *nearly* right, or which require a bit of a trim or something.
There are a few good reasons for using GIMP, including that if you get used to its interface you will be able to perform at least the basic chopping and cropping of images that you get sent on pretty much any machine. That's because it's cross-platform and free - so if you find yourself sitting on someone else's chair and need to do some image manipulation, you can. No hassle finding install disks, not worries about licensing issues. Just go to http://gimp.org and click to install.
I want to make this tutorial focus on the practical benefits of knowing how to get the things you actually need done, done.
Step away from the lens flare and put down the drop shadow.
As a web developer, you probably only need to do a few common tasks with images: Cropping, resizing, fading bits out, compressing, changing file formats, taking screenshots. That sort of thing. If you feel the need to go near an effect or filter, you're out of your jurisdiction.
OK, if you are familiar with Photoshop, GIMP uses a lot of the same concepts, but has a different interface. I used to be a PS user myself, and remember finding GIMP very confusing at first.
- Right-click an area and you will have a copy of the window menu available. For example if you select a rectangle and right-click it, you can choose image->crop-to-selection from the flyout. This saves a lot of pointless mouse movement!
- Virtually everything that can be reduced to a keyboard shortcut is. For example, the rectangular selection tool (arguably the most commonly used tool) can be activated simply by pressing "R".
- Holding down CTRL and scrolling with the mouse wheel is an intuitive way to operate the zoom
- Most selections or rectangular areas can be resized at any time simply by dragging the sides or corners. This is one of the most useful, practical and time-saving features.
- If you think you've used a tool but nothing has happened, it's probably waiting for your confirmation. This isn't obvious at first. For example, when using the crop tool, it will not crop immediately but will wait for you to press ENTER. This allows you to modify your selection first.
- Everything has its own little window. Now, some people hate this with a passion. But it means you can have all your tools on a second monitor. It also means that the windows aren't modal. If I open the colour picker in GIMP, I can leave it out the way and refer back to it whenever I need. In Photoshop, if I try to do that, the computer will beep pleasantly at me if I try to click any other tool to tell me that no, it may be the 21st century, but you still can't do that.
Supported file formats.
GIMP reads and writes most graphics formats with one important exception: PSDs.
Oh, it can write PSDs fine, but sometimes when reading them there are problems: layers might be missing, colours might be wrong, that sort of thing. It's unreliable, is what I'm saying.
GIMP's native format is XCF, which isn't really read by anything else and is unsuitable for sending to other people who don't have GIMP. The standbys for exchanging graphics with other systems are usually PNGs these days, which don't support layers.
You might be surprised what GIMP can save, though. It can even save in ASCII
- You can drag an image to GIMP's main interface to open it. If you drag onto an existing image, it will appear as a new layer
- GIMP keeps a list of recently used files in its file menu, consistent with many applications. Each of the files has a thumbnail next to it to make identification a little quicker.
- Right-click, open-with-GIMP works as you might expect, and on multiple files will open each in its own window. This is what I usually do. GIMP's startup time is a lot quicker than Photoshop so it's common to close the app completely and reopen it for the next file without having to choose between going for a cup of tea or leaving the app running in the background all day.
There are two easy ways to crop.
- Use the crop tool (shift-C). Remember, you can adjust the area to crop from any of the sides or corners. When you are satisfied, just hit ENTER.
- Use the rectangular selection tool ® to select a rectangle then choose image->crop-to-selection. Remember, you can do this from the context-menu as well.
Image->Scale-Image and Image->Canvas-Size. These tools are totally straightforward except to note that when resizing the canvas you have complete flexibility in positioning rather than simply anchoring the new canvas to the old.
Slicing things up for the web.
Have you ever had to make a table-based layout? Even these days? I have. It's part of the horror that is writing HTML email templates. GIMP offers you two ways to do the slice-and-dice that is otherwise the only reason you probably have a copy of Fireworks. The first thing you have to do is to drag some guides in from the margins until you have a crisscrossing pattern of lines showing where you want the image cut up.
- Filters->Web->Slice will let you save the images as an HTML table. It will do everything for you, including saving the images in your chosen format.
- Image->Transform->Guillotine will chop up the image in memory without saving it and open a different window for each slice.
Pasting new layers.
You might get tripped up when you first try to past images into your picture. Something pasted appears in your layers as a "floating selection" and what you can do with that is unfamiliar here-be-dragons territory. Simplest solution is to click the "new layer" button and it will be pasted into a new layer in the same way Photoshoppers expect.
Saving for the web.
If you've ever saved a PNG or JPG and wondered why it was so huge in comparison to those saved by Photoshop, well, it's not. It's about the same as those saved by Photoshop. It is however, much bigger than those saved by Photoshop's excellent Save-for-web feature, which GIMP lacks. Well, it might lack it as a built-in feature, but there's a good clone of the Adobe feature available as a plugin from here.
When I've tested it, it consistently produces better (as in smaller file size for the same perceived quality) than Adobe's offering.
And while you're on that site, check out the huge list of other plugins available.
Programmers like shortcuts. If you can do it with the keyboard, you can do it quicker.
I have no idea what key Apple Macs use in place of CTRL, I suggest trying each one in turn until you find out. That's pretty much what you have to do in every other Mac app, anyway, and they name the keys differently depending on which manual you read. Suck it and see.
These two will be familiar to anyone who's used a web browser:
CTRL-W : close (W)indow
CTRL-Q : (Q)uit application
Every tool will tell you its shortcut if you hover over it:
R : ®ectangular Selection
Shift-C : ©rop
Miscellaneous useful shortcuts:
CTRL-I : (I)nvert selection
1 : Set zoom factor to (1):1 (same as "actual pixels" from Photoshop)
There are of course a lot more things that GIMP can do, from scripting, recording actions, holding multiple views of the same image, using named clipboards, a gallery of filter effects... but they're not useful to most developers and are for a different tutorial. Maybe one with pictures