Introducing GIMP—Making Attractive Images for the Web and Beyond

I was broke, destitute, sorely without means— I was a graduate student. Like the multitude of others before me, and the untold numbers afterward, I had to find a way to do the things I needed to do to get through my program and on to big-time Academia.

It was the year 2000, and I had figured out that this World-Wide-Web thingy was going to be important. So I set out to teach myself how to build webpages. Now, there were a lot of them in those days, as now, but this was the age of Geocities and Hot Bot, lots of pastel colors, blinking words, and spinning icons. I recall reading a blog post that referred to this moment in history as “The Rococo Web.” But most websites were text. Lots and lots of text. Oh-my-gosh! An almost infinite, scrolling, labyrinth of text of Borgesian proportions!

I decided I needed to buck the trend and find ways to add compelling images to my sites. But I needed to be able to manipulate those images, make them more suitable for their purpose. A way that wouldn’t cost me tons of cash, so instead of Photoshop or Flash, I opted for GIMP.

reading_wilbur

Now, the unfortunately-named GIMP (which stands for “Gnu Image Manipulation Program”) was and continues to be one of the real successes of open-source software, both in its longevity and community of developers, as well as its feature-rich functionality. Though I have heard people refer to it as a broken version of Photoshop, I beg to differ–I have never run into a scenario where GIMP could not do something that Photoshop is known for. And in my mind, GIMP often has the easier interface to work with, whether you want to do something as simple as cropping an image, or design a highly re-worked, studio-quality poster advertisement with dozens of layers, like the one I made last year for the Hermanns Lecture Series:

Hunter_DEER

Gimp will also not disappear into the “cloud” to become a pay-per use service, like many popular commercial software suites are beginning to do. Nope. GIMP will always live on your computer for you to use whenever you want, without interruption, and even when you are in a situation where subscription services aren’t an affordable option.

For my purposes, though, I like to use that good-ol’ GIMP magic on images for very basic things, such as getting rid of red-eye, inserting captions, or adding drop-shadows to give blog posts and webpages a certain level of depth and visual interest. Creating a drop-shadow is what I will show you how to do today with this completely free and open-source software package.

For instance, Consider this image by Pierre Dalous of two falcons….

Falnau

Now, this looks pretty good already because the photographer is awesome; but let’s add some dimension to this flat image on white background by adding a drop-shadow.

Step 1: Download and install GIMP. There is a version for virtually every operating system, so you should be able to do this part easily. Open the program on your system. You should then be presented with an interface that looks something like this (I’m working on a Mac, but yours should look very similar even on Windows or Linux):

gimp-on_open

From here you can now drag-and-drop an image from your desktop onto GIMP’s central editing pane:

gimp_drag_n_drop1

Once you release the dragged image, you should see it appear in the central editing pane where you can begin to manipulate it.

gimp_drag_n_drop2

(Alternatively, you can go to the “File” drop-down menu to do this by mousing to “File—> Open —>Choose” and then picking the image(s) you want to add from the window.)

Step 2: If the image is large and fills up the view pane, use the Scaling Tool on the bottom left-hand side of the central editing pane to make the image look smaller. This does not actually change the picture in any way, it just makes it look smaller on the canvas:

gimp_scaling_tool

In this case, scaling id down to 50% works great to my eye, but set it wherever you are comfortable and can see the editing pane’s background canvas around the picture.

Step 3: Now things get interesting! Mouse up to the “Layers” drop-down menu at the top of the screen and pick the option for “New Layer.”

gimp_new_layer

You will be presented with a window that looks like this:

gimp_new_layer2

Since the background color of my blog is white, I will choose the color white for my new layer and then increase the size of the layer by 50 pixels. I’m choosing the color white because I eventually want the parts of the new layer that are not shadowed to blend seamlessly with the blog’s normal background color. I’m choosing 50 pixels to increase my dimensions because I like to have room to play with and I know I can crop what I don’t need. It is actually a lot for just a drop-shadow, but you can play with the dimensions as you learn the technique for your projects.

Now, when you click the “OK” button to create the new layer, your picture will disappear behind a curtain of white. Do not worry. GIMP places new layers on top of preexisting ones, you’ll just need to place the picture you want to see on top of the new white layer by dragging and dropping the appropriate icon in the “Layers” Pane to the top of the list of layers that you are working with (There should only be two layers, the original picture you are making the drop-shadow for and the white background layer).

Find your layers pane….
Screen Shot3

Drag the picture you want to be visible to the top of the list of layers….
Screen Shot2

Drop the picture at the top, and you should now be able to see it in the central editing pane.
Screen Shot1

Step 4: Now that you have your layers organized with the one you want visible on top, we will add the drop-shadow. Go to the drop-menus at the top of the screen, choose “Filters—> Light and Shadow—> Drop Shadow”:

gimp_filter1

A Script-Fu window will open. Choose the color you want your shadow to be (black in our case), then select the X and Y offsets. These will determine the angles of your shadow. Then choose a blur radius. I will set my X to 20, Y to 25, and the Blur Radius to 45. I’ll also set my opacity (how transparent the shadow will be) to 70, making it 70% opaque. You can experiment with these settings to see what looks best to you:

Screen Shot 2013-08-27 at 2.24.28 PM

And now for our result:

gimp_shadowed_image

Here you can see how the X and y offsets make the shadow have a 3D effect on the white background layer. Now you can save the image. Save if first as an .xcf file, which is GIMP’s native format to use for further editing on the saved image. Then export the image as a .jpeg, .png, .gif, or whatever other format you would need to add to your blog or webpages. Let’s see what it looks like on mine as a .png image:
Falnau

Nice! Now you can compare the two.

Falnau

Oh, there is so much more that we can do–and we will! But I wanted to show you what can be done with this open-source alternative to Photoshop. Please be aware that I, personally, have no problem with Adobe, Photoshop or any other proprietary software package. However, for those of us who don’t have thousands of dollars to drop on editing software, GIMP (and many other open software products) lower the financial bar for being a content creator or artist. This can be a very serious concern for students, teacher, writers, and other creative types of all stripes who want to be able to compete (or peacefully coexist) with more monied artists and developers.

Go here for more beginners to expert tutorials on using GIMP.

For more information on free and open-source software (the word “free” is more complicated here than in normal usage), go to the site for the Free Software Foundation

wilber_the_gimp