GIMP Tutorial: How to Edit Screenshots

The GIMP is a free image manipulation program that runs on most operating systems, including GNU/Linux, Windows, Mac, and BSD. It is similar to Adobe Photoshop in many ways.

In an earlier tutorial, I described how to take screenshots in Linux. This tutorial describes how to edit those screenshots for posting on the web with GIMP.

Open your screenshot in the GIMP as shown below:

Cropping an image with the GIMP

Press the letter Ctrl-c to switch to the crop tool. Click-and-drag the mouse over the section of the screenshot that you want to keep as shown below. Then click on the "Crop" button.

Reducing the file size of a screenshot with the GIMP

Scale the Image

Find the scale image dialog on the menu: Image —> Scale Image. Then enter your desired dimensions for the image and click "Scale".

Reducing the Number of Colors

You can greatly reduce the file size by converting the image from RGB to Indexed, and reducing the number of colors to about 16 or 32 (or higher if you want your screenshots to look nicer). You can find that option on the menu: Image —> Mode —> Indexed.

In the image below I'm setting it to 16 colors, and turning off the dithering. The final image is not top-quality, but it's ok for screenshots when you need to keep the file size down.

Enhancing the Image

Update: I found a great tip on gimps.de that recommends enhancing resized images with the Unsharp Mask filter after scaling them: Filters —> Enhance —> Unsharp Mask. The Unsharp Mask will help reverse some of the blurring created by resizing the image. If making large scale changes to an image, scale it in steps to preserve quality.

How to Add a Border to an Image in GIMP

There are at least a couple of ways to add a border to an image in GIMP. I'll describe two ways below — one method is easier but it modifies the image size slightly; the second method keeps the original image size, but has more steps.

The sample image for this tutorial is a screenshot from uncyclopedia.org. The starting dimensions of the image are 490x260 pixels.

Here is the original image without a border:

The Script-Fu Filter Method

The filter to add a border is in Filter > Decor > Add Border:

You will then have options to set the width of the border. In this case I'm adding a 2px black border around the image:

This method adds to the dimensions of the image. Adding a 2px border around the original 490x260px screenshot expands the image dimensions to 494x264px:

Once you have used a filter, you can repeat it on other images by pressing Ctrl-f. That makes this the fastest way to add a lot of borders with GIMP. The only drawback with this method is that it changes the image dimensions.

The Shrink-selection & Layer Method

This 2nd method has more steps, but it keeps the original image dimensions.

First press Ctrl-a to select the entire image. Then go to the menu item Select > Shrink and shrink the selection by 1 or 2 pixels depending on how thick you want the border.

Then press Ctrl-i to invert the selection. Press Ctrl-l (lowercase L) to bring the layers window into focus. Create a new layer with the default settings:

The border will be added to this new layer.

Press Shift-b to choose the paint bucket tool. Choose the color you want to use for your border. Then zoom into the image and click inside the selected border area on your image. In th following image I'm zoomed in 800% so that I can fill the 2px wide selected area around the image:

Here is the final result. It is the screenshot with a 2px black border around it, but the border is painted over the image so that the image still has it's original dimensions, 490x260px:

How to Take a Screenshot in Linux (Ubuntu)

This page originally had 7 ways to take a screenshot in Linux. It keeps growing and now there are more than 7. If you know of other useful ways to take a screenshot in Linux, leave a comment below...

There are several ways to take a screenshot Linux in general. I'm going to use Ubuntu as an example, but most of these will work on any Linux distro. If you aren't using GNOME, then the GNOME-specific items won't work.

I'll start with the common ways to take screenshots in Linux, and then show you a nice shell script for taking custom screenshots in GNOME with just one click of the mouse. The shell script will also work in other windows managers like KDE, but you will have to figure out how to make the custom application launcher for it.

How to Take a Screenshot in Ubuntu (GNOME)

One way to take a screenshot in Ubuntu is to go to the main menu: Applications —> Accessories —> Take Screenshot.

How to Take a Screenshot in Linux With the PrintScreen Button

You can also take a screenshot of the entire screen by pushing the "Print Screen" (PrtSc) button on your keyboard. To get a screenshot of only the active window, use Alt-PrtSc. This is easier than using the GNOME "Take Screenshot" tool. You can also control this GNOME screenshot tool from the terminal as described in a newer Linux screenshot tutorial.

To get more control over your screenshots, check out the other options below.

How to Take a Screenshot in Linux With the Terminal (ImageMagick)

My favorite way of taking screenshots is with ImageMagick in the terminal. If you need a delay before taking the screenshot (for example, to get a screenshot of a menu that would disappear if you took a screenshot with GNOME) ImageMagick is the best way.

First, make sure you have ImageMagic installed: type import -version in the terminal. If ImageMagick is installed, you will see the ImageMagick version number. I don't think Ubuntu comes with ImageMagick. To install ImageMagick in Ubuntu (or any Debian-based distro), just type sudo apt-get install imagemagick.

To take a screenshot in the terminal with ImageMagick, type the following line into a terminal and then click-and-drag the mouse over a section of the screen:

import MyScreenshot.png

GNOME will beep once when the screenshot begins, and once again when the screenshot is complete. Then type eog MyScreenshot.png in the terminal to view your screenshot. "eog" is the command to start Eye of GNOME.

To capture the entire screen after a delay (so you can open some menus or whatever), type sleep 10; import -window root MyScreenshot2.png. The first part of that line, sleep 10; will give you a 10 second delay before the screenshot begins. The next part, import -window root, tells ImageMagick to import the "root" window — that is, the entire screen. The last part MyScreenshot2.png is the name of your screenshot.

Another example of taking a screenshot in Linux with the terminal

The following command will wait for 15 seconds, take a screenshot, and then open the screenshot in the GIMP for editing:

sleep 15; import -window root MyScreenshot3.png; gimp MyScreenshot3.png;

You can also manipulate the screenshot with ImageMagick as you take it. For example, the following line will take a screenshot and resize the image to a width of 500 pixels:

import -window root -resize 500 AnotherScreenshot.png

For more information on how to take screenshots in the terminal with ImageMagick, type man imagemagick in the terminal. You can also type import -help to get a list of options for the import command.

How to Take a Screenshot in Linux With the Terminal (scrot)

Another way to take a screenshot from the terminal is with scrot. I learned about this at UbuntuForums.org.

To install scrot (on Ubuntu) type:

sudo aptitude install scrot

To take a screenshot in Linux from the terminal with scrot type:

scrot MyScreenshot.png

To get a screenshot and immediately open it in the GIMP, type:

scrot -q 85 -d 5 screenshot.png && gimp screenshot.png &

The -q option sets the quality. The -d sets the delay. The && means that if the first command is true, then execute the second. The final & means to run the commands in the background so that you can still use that terminal for other commands.

For more information about using scrot, read the man pages by typing the following in the terminal:

man scrot

How to Take a Screenshot in Linux With the Terminal (gnome-panel-screenshot)

As described in my newer Linux screenshot tutorial, you can also take a screenshot from the Linux terminal in GNOME with the following command:

gnome-panel-screenshot

You can also add a delay:

gnome-panel-screenshot --delay 5

How to Take a Screenshot With the GIMP

To take a screenshot with the GIMP, find the following menu option: File —> Acquire —> Screen Shot. You will then be offered some options for the screenshot such as length of delay and whether you want to take a screenshot of the entire screen, or just a window.

How to Take a Screenshot of a Web Page With Firefox

I use two different Firefox extensions to take screenshots of web pages, depending on what kind of screenshot I need.

Snapper Firefox Screenshot Extension

If I just need to take a screenshot of a section of a web page, I use a Firefox extension called Snapper.

UPDATE: There is no longer a Snapper extension for Firefox and the Screengrab Extension mentioned below contains all of it's functionality.

ScreenGrab Firefox Extension

A great Firefox extension for taking screenshots is called ScreenGrab. ScreenGrab will take screenshots of entire web pages — even the parts that run off the screen.

To take a screenshot of a web page in Firefox with ScreenGrab, just right click on a web page and choose: ScreenGrab! —> Save document as image. Give the extension a few seconds to startup and take the screenshot. When ScreenGrab is done it will open a save dialog box where you can choose a filename for your screenshot.

How to Take a Screenshot in GNOME With One Click

[This can be modified to work in KDE or any other windows manager also.]

[UPDATE: I learned of another one-click Linux screenshot method that might work better for you than this shell script. Read through the shell script and try it out if you would like because the shell script is more customizable. But also see the new screenshot tutorial.]

The shell script for taking one-click screenshots is below. Copy and paste it into your favorite text editor and save it somewhere in your home directory as screenshot-import.sh. Then run the following command on it in the terminal to make it executable: chmod +x screenshot-import.sh.

Then right-click on your GNOME Panel — that is the panel that runs across the top of your screen in GNOME (e.g., Ubuntu). Choose Add to Panel as shown in the image below:

Then click on the button that says Custom Application Launcher. You will then see the following window:

Fill out the information as shown. Choose an icon (see below for a custom icon). Click on "Browse" and navigate to the place where you saved the shell script below. Do not check the box that says "Run in terminal".

After you have set up the custom application launcher for the screenshot-import.sh script you will be able to quickly take a screenshot of part of the screen by clicking on the new launcher in the GNOME panel, and then clicking-and-dragging the mouse over a section of the screen. The shell script will save the screenshot to the desktop.

Here is an optional custom icon for this application launcher. Just download the eye.xpm file to your desktop and then copy it to your pixmaps directory like this:

sudo cp eye.xpm /usr/share/pixmaps/

Then right click on your new application launcher in the GNOME panel, click on Properties, and then choose this icon.

(As with any code snippet that you find on the Web, use at your own risk.)

Note that it will save the screenshots to ~/Desktop/. Read through the script and try to understand what it is doing before you use it.

#!/bin/bash
#
# http://tips.webdesign10.com
#
# Use this script at your own risk
# 
# Takes a screenshot with ImageMagick.
# Link to this file from the GNOME panel
# Do NOT check the box "run in terminal"
# Remember to chmod +x this file
# Screenshot will save to ~/Desktop/

# The name of your file
screenshot='screenshot';

# Creates an unusual filename based on nanoseconds so that
# you don't accidentally overwrite another screenshot.
# The `backticks` tell the script to run another command (date).
# Type 'man date' in the terminal for more info
nano=`date '+%d%b%y-%N'`;

# Adds the file extension
extension='.png';

# Generate a filename for this screenshot
file="$HOME/Desktop/$screenshot-$nano$extension";

# Use ImageMagick to take the screenshot
# Saves to ~/Desktop
import $file;

How to Edit Screenshots With the GIMP

Another article describes how to edit your screenshots with the GIMP.

Inkscape: a free vector graphics program

Inkscape is a great free vector graphics program for Windows, Linux and Mac OS X.

Vector graphics are images that are defined by mathmatical equations instead of by pixels. That means that you can change the size of the graphics without losing any image quality.

SVG or scalable vector graphics is an XML markup language for making vector graphics. Inkscape creates all of the XML for you, so you can just draw on a screen (something like using the Adobe Illustrator program).

Here is a final SVG graphic that was converted into a PNG image:

An excerpt of the SVG XML text is below (in this case it was generated with Adobe Illustrator).

Here is a screenshot of Inkscape in action from the Inkscape showcase.

I highly recommend downloading Inkscape.

Inkscape Tutorials

Inkscape includes some great tutorials. You can find them in the Help menu. They are also available online.

Also see the official documentation, and the Inkscape tools. Linux Planet also has some Inkscape tutorials.