Graphics Design for Beginners - Cropping Images
To put an image on the web you need to consider the dimensions, file size,
and download speed of the image. Digital camera pictures can be many megabytes
in file size and require lengthy download times. Many times this is the result
of displaying extra space around the subject that you don't need.
In this article I'll show you how to crop an image to retain only the area
you want and how to scale an image so that it fits neatly into your webpage's
layout without the user having to download an oversized image that needs to be
resized by their browser.
For this example, I'll use the GIMP image editing program. GIMP stands for
"GNU Image Manipulation Program", GNU standing for GNU General Public License.
GIMP is an image editing program on the level of Photoshop but without the
$800.00 price tag, in fact it's totally free. GIMP was originally created for
Linux, but is now available for Windows.
Download GIMP for Windows from:
Similar to most open-source software, you can't just install GIMP by executing
a single setup program, you need to download three files and install them separately.
- GIMP for Windows (7.8 MB)
- GTK+ 2 Runtime Environment (3.7 MB)
- GIMP Help (22 MB)
Extract the three zip files into a new folder under Program Files
(for example named "GIMP"), then double-click each setup file, starting with the
GTK (GIMP Tool Kit), then GIMP, and then Help. This is the order in which the
components look for each other as you install and use them.
Lets say we wanted to crop the image shown above to remove space around the
hang glider. In the Gimp toolbox, click on the Crop or Resize tool
(scalpel icon). Place the mouse pointer in the image window near the upper-right
corner of the area you want to crop, press and hold the left mouse button, the
Crop & Resize dialog box appears. While holding down the left mouse
button, drag the mouse pointer to the lower-right corner of the area you want to
crop. Then release the mouse button.