Web
Article

Pushing Pixels on a Shoestring: Bring out the GIMP

By Tim Ruffles

Adobe’s Photoshop is the de facto image editing software for most web designers. But if you’re just starting out and lack the funds to spend on it, it’s good to know there are alternatives considerably lighter on the wallet. One prime example is GIMP (the Gnu Image Manipulation Program), which is a free and open-source, pixel-based image editor. Although it’s missing some of Photoshop’s nicer time-saving features and advanced options, and its interface can be a little quirky, it can be a great option for quickly sketching out designs. The price is certainly unbeatable.

To introduce you to some of GIMP’s features, I’ll walk you through the creation of a space-themed desktop background image. By the time we’re done you’ll have a good understanding of:

  • selection management

  • layer management

  • layer masks

  • gradients

  • brushes

  • layer blending modes

  • filters

Here’s what the final image will look like:

Figure 1. The final background image

The final background image


This might look like it would take a lot of work, but you’ll be surprised at how easy it is to accomplish with a little knowledge of GIMP’s filters and layer features.

If you’ve yet to install GIMP on your system, you can download it from http://www.gimp.org/downloads/. For this tutorial I’ll be using version 2.6.7 of GIMP, which is the most recent version at the time of writing. If you’re using an older version some of the features we’ll be playing with might be different or missing.

One of the first aspects you’ll notice when you start GIMP is that the various “docks” (such as Layers, Toolbox, and so forth) are split over multiple windows. This can be disorientating at first, but you’ll grow used to it. Should you accidentally close one of the windows, you can go to Windows>Recently Closed Docks to reopen it.

We’ll be creating our space image in three steps. First, we’ll make a field of stars for the background. Then we’ll add some colorful nebulae; and finally we’ll add a big planet to sit in the center, with a starburst effect poking out from behind it.

note: Note for Mac users

GIMP on Mac runs inside the X windowing environment. This means that, contrary to your usual practice, you’ll be using Ctrl rather than Command for keyboard shortcuts—just like everyone else.

Stars

The first element we want is a field of stars on a black background. We’ll begin by opening a new document (Ctrl+N or File>New). Make it large enough to cover your desktop. I’m making my image 1024 by 768 pixels, but feel free to make yours larger, as you can always scale it down later.

To fill the background layer with black, first select the Bucket Fill tool from the Toolbox window (or press Shift+B). Then click the top (foreground) color swatch (just below all the tool icons), and choose pure black. Click anywhere on your new image and it will fill with black.

To create the stars we’ll use the Hurl filter. Select Filters>Noise>Hurl from the menu. In the dialog box, lower the Randomization to 1%, and click New Seed to generate a new random star field. Click OK, and the black background should now be dotted with stars.

Figure 2. Creating the star field

Creating the star field


There are a few problems though. First, the stars created are too colorful, so we’ll remove the colors using Colors>Desaturate. We also want a star field that’s a little less dense, so we’ll thin it out by opening the levels dialog—Colors>Levels—and dragging the black arrow on the left of the upper bar towards the right side. You’ll see most of the stars disappear.

Nebulae

Next we want to add some nebulae. Create a new layer (Shift+Ctrl+N), call it “Nebulae,” and set the background color to transparent (this will be remembered for future layers). Select Filter>Render>Clouds>Solid Noise from the menu. In the dialog, check the Turbulent box. Play around with different X-Size, Y-Size, and Detail settings to create the type of nebulae you want, and click OK. (If you apply a filter that you decide you don’t want, you can always undo it with Ctrl+Z.)

Figure 3. Adding the nebulae

Adding the nebulae


The Solid Noise filter has covered the whole image with clouds, which is undesirable for our purposes. To filter out the lighter areas, use the Levels dialog again, this time dragging the left hand arrow on the top bar about a quarter of the way to the right.

We now have some nice clouds, but you might notice that the stars have disappeared. This is because the new Nebulae layer has completely covered the background layer. We need to make some parts of the new layer transparent, and we can do this with a Layer Mask. In the Layers dialog (if it’s hidden you can bring it forward with Ctrl+L), right-click on the layer you’ve created for the nebulae and select Add Layer Mask. Select Grayscale copy of layer and click Add.

Figure 4. Adding a layer mask

Adding a layer mask


We’ve created a layer mask, making the selected layer semi-transparent. Layer masks are actually very simple: they’re just black-and-white maps that indicate which parts of the associated layer are visible. White areas are transparent, black areas opaque, and gray areas increasingly translucent as they approach white. Right now you’re unable to see the mask; in order to show it you need to right-click the layer and check Show Layer Mask (and Edit Layer Mask if it’s unchecked). Now you can work with the layer mask just as you would a normal layer—adding gradients, drawing with brushes, and adjusting with levels or curves.

It will be unnecessary to do any of this for our image, however. Uncheck Show Layer Mask, and have a look: since we made our layer mask by copying the original Nebulae layer, the only parts of it that are transparent are areas where there are nebulae. So the stars are perfectly visible in the other parts of the image.

Plain white nebulae are a bit dull though—we need to add some color. Create a new layer and call it “Color.” Then select the Paintbrush Tool (P), choose the largest “Fuzzy” brush—Circle Fuzzy (19)—and drag the Scale slider to 10.0 (giving you a brush size of 190 pixels). Open the Brush Dynamics submenu in the Toolbox and make sure only the bottom-right (Random Color) check is active. This will produce a random variation between the foreground and background colors as you paint. Choose two complementary colors (for example, red and blue) for the foreground and background, by clicking on the two color swatches in the Toolbox and selecting the colors you want.

Now begin dabbing color over the nebulae. Nevermind if the splodges completely cover them, we’ll fix that in a moment. You can choose more color pairs if you want each nebula to be a different color.

Figure 5. Adding color to the nebulae

Adding color to the nebulae


When you’re done, simply change the layer’s mode to Color in the Layers dialog and you’ll see the splodges disappear, with only their color remaining. As is, the Color layer will color any layer that’s beneath it. To make it so that the color only applies to the nebulae, we’ll merge the layers: make sure the Color layer is immediately above the Nebulae layer in the Layers dialog (you can reorder the layers by dragging them), then right-click on the color layer and select Merge Down. This will merge the layers into one, combining their contents.

Now our nebulae are colorful, but they still look a little flat. To make them more detailed and three-dimensional, we can make some parts of them brighter than others. To do this, duplicate the newly merged layer (right-click on the layer and select Duplicate) and apply the Softglow filter (Filters>Artistic>Softglow) with the default settings to the new layer. Then, using the Eraser (shift+e) tool with a large fuzzy brush, remove areas of the glow layer. This can be tricky; remember that you can always undo your actions with Ctrl+Z if you want to try again.

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.