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.
Welcome to Bucaro TecHelp!

Welcome to Bucaro TecHelp!
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

[About BTH]  [User Agreement]  [Privacy Policy]  [Site Map]  [Contact Form]  [Advertise on BTH]  [News Feed]

Google
Web
This Site
Your Ad Here!
Your ad here for one full year, only $20. Send me your ad copy, up to six lines, I'll post it ASAP. After you inspect your ad online, you can pay through PayPal.
Click here for more information.

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:
gimp-win.sourceforge.net.

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.

Image courtesy of www.burningwell.org the repository for public domain images.

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.

Web Design Sections

RSS Feed RSS Feed

Graphics Design
Anti-Aliasing
Free Animated GIF Maker
Paint Shop Pro : Version 4 Was Best
Graphics File Formats for Your Web Page
The Browser Safe Palette
Image Scanning : Confused About DPI?
Hexadecimal Color Notation on the Web
An Insight to Logos
Building an Image with a Logo
CSS Button Designer
Color Harmony in Web Design
RGB Color Schemer
RGB Color Schemer FAQs
Web Color Table
Web Designer's Reference
Get GIMP - Free Replacement for Overpriced Photoshop
Use GIMP to Scale (Resize) an Image
Graphics Design for Beginners - Cropping Images
Graphics Design for Beginners - Blur Filters
Create GIF Animations With Free GIMP Image Editing Program
How to De-haze a Photo with GIMP
Inkscape - Free Vector Graphics Illusttration Package
Inkscape Basics
Basic Inkscape Vector Drawing
Inkscape - How to Add a New Node
Inkscape - How to Join Two Segments at Endnodes
How to Trace an Image Using Photoshop
How to Create a Product Box in Photoshop

[Site User Agreement]  [Advertise on This site]  [Search This Site]  [Contact Form]
Copyright©2001-2007 Bucaro TecHelp P.O.Box 18952 Fountain Hills, AZ 85269