Pushing Pixels on a Shoestring: Bring out the GIMPBy 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:
layer blending modes
Here’s what the final image will look like:
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 > 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.
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.
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 > ). 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 Randomization to 1%, and click to generate a new random star field. Click , and the black background should now be dotted with stars.> > from the menu. In the dialog box, lower the
There are a few problems though. First, the stars created are too colorful, so we’ll remove the colors using> . We also want a star field that’s a little less dense, so we’ll thin it out by opening the levels dialog— > —and dragging the black arrow on the left of the upper bar towards the right side. You’ll see most of the stars disappear.
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 > > > 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 . (If you apply a filter that you decide you don’t want, you can always undo it with Ctrl+Z.)
The Levels dialog again, this time dragging the left hand arrow on the top bar about a quarter of the way to the right.filter has covered the whole image with clouds, which is undesirable for our purposes. To filter out the lighter areas, use the
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 . Select Grayscale copy of layer and click .
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(and 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, 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.
When you’re done, simply change the layer’s mode to 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 . This will merge the layers into one, combining their contents.in the
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 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.) and apply the Softglow filter ( > > ) with the default settings to the new layer. Then, using the
SitePoint WordPress Restaurant Theme
SitePoint WordPress Ecommerce Theme
SitePoint WordPress Portfolio Theme
Elm: A Beginners' Guide to Elm and Data
Wrapping Your Head Around Python
Jump Start Git
Level Up Your Web Apps With Go
Jump Start MySQL
Jump Start Git
- 1 CSS Animation, and Creating Art with Code, with Rachel Smith
- 2 The Trolley Problem: Will Our Cars Grow up to Be Heroes?
- 3 There Are More Virtual Reality Headsets Than You Realize!
- 4 3 Ways to Work More Effectively in a Web Development Team
- 5 Versioning Show, Episode 0, with M. David Green and Tim Evko