HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [350]
♦ Windows Paint: This simple image editor is available in all versions of Microsoft Windows. Although easy to use and already available to Windows users, Paint is relatively limited. It only supports a few image formats and doesn’t have full support for transparent images or layers.
♦ Paint.net: A group of computer science students decided to create an improvement to Microsoft Paint that evolved into a very robust image-editing program. It is free (although, technically, not open source) and has all the features you might need for editing Web images. However, the primary version is available only for Windows.
♦ Gimp: A popular alternative to Photoshop, Gimp has all the features you might need for Web image editing. It is completely free, open source, and available for all major operating systems. For these reasons, I use Gimp throughout this chapter (and indeed throughout the book — nearly every graphic was created using Gimp).
People are passionate about their graphics programs. If you love Photoshop, you might find the Gimp interface strange and unfamiliar. I think learning how Gimp works is worth the time, but if you prefer, you can download GimpShop, a version of Gimp modified to use the same menus and keyboard shortcuts as Photoshop.
Note that in this list I’m only considering full-blown graphical editors. I describe image manipulation programs, such as IrfanView and XnView (which are simpler and have fewer features), in Book II, Chapter 4.
Introducing Gimp
If you haven’t already installed Gimp, get a recent copy from this book’s CD-ROM or www.gimp.org. Install the program and take a look at it. The Gimp interface’s multiple windows are shown Figure 4-1.
Figure 4-1: Gimp uses a multiple window model.
I have the Change Foreground Color dialog open in Figure 4-1, and I simply double-clicked on the foreground color in the main toolbox to open this dialog. Gimp tends to open a lot of dialogs, which might bother some people. Also, I want to illustrate how powerful the color chooser is. Like most features in Gimp, it has a lot of options.
The Toolbox is Gimp’s main control panel. It manages all the tools you use to create images. Gimp also creates an image window, which contains the menu elements, but no image (by default). You can load an image into the image window or create a new image.
Gimp sure seems cluttered . . .
Gimp doesn’t reside in a single window like most programs. Instead, it uses a number of windows. Some find this jarring, but once you get used to it, this can be a useful feature. You can make any window as large or as small as you wish and combine windows to get less screen clutter. I configure Gimp in a way that combines the most common windows into the Toolbox, so I have one window showing the Toolbox and most of the dialogs and a separate window showing each picture I’m working on.
If you click the Configure Tab button (a small arrow at the top right of the tabs section), you can add new tabs to the main Toolbox window. I normally add my favorite tools (Navigation, Layers, Tool Options, and Brushes) to the Toolbox so the features are readily available and appear here instead of in separate windows.
Creating an image
You choose the File⇒New menu command to create a new image. After you specify the size of your image, a new, blank image appears, as shown in Figure 4-2.
Figure 4-2:
It’s easy to create a new, blank image.
Working with existing images
It’s very common in Web development to work with images that already exist. For example, I’ve built a couple of sites for office supply companies. It’s nice to sprinkle the site with colorful images of staplers, Post-it notes, and the like. The question is, how do you get these graphics? If you’re a skilled photographer or artist, you can create them yourself, but this takes more time and talent than I typically have. You could reuse images you find on the Web, but this is not respectful of