Basic Bitmap Image Editing

Suppose you have an image file. You think it would look great on a Wiki page, but it's not quite perfect. Perhaps it's too dark, or too big? If only you could clean it up a bit it would look great! Have no fear. This tutorial will show you a few tricks to turn an OK image into a thing of beauty.

Getting started

The first thing to do is open up an image-editing program. There are several possibilities.

• Adobe Photoshop: The best in the business, it has lots of plug ins, is used by professionals, but is very expensive.
• GIMP: Rapidly becoming very popular, and available for both Linux and Windows. For designing web graphics, GIMP is quite comparable to Photoshop, with the added benefit that it is free software.
• Corel PhotoPaint: In price is intermediate between Paint Shop Pro and Photoshop, but much closer to Photoshop in abilities. Very configurable.
• Paint Shop Pro: Used to be shareware but now is sold reasonably cheaply (compared to Photoshop). Runs on Windows machines.
• IrfanView: A free, lightweight, and fast image viewer and converter. Faster than Photoshop and GIMP for quick image optimizations, but lacks advanced editing functionality.
• CodedColor: Provides less image editing functionality then Photoshop but included many useful tools like image viewing, creation of web albums, organization of pictures with keywords and annotations.
• Adobe Photoshop Elements: Comes as part of some scanner and digital camera software. Described as for the serious hobbyist, it is a compendious version of Photoshop.
• Microsoft Paint: Comes with the Windows operating system. If you have a Windows machine you don't even have to bother installing it. However, it is severely limited in what it can do. (It makes a good combination together with IrfanView. Before saving, re-export by C&P.)
• Microsoft Photo Editor: Comes with Windows versions of Microsoft Office. If you have a Windows machine with a full installation of the ubiquitous Microsoft Office product, you don't even have to bother installing it. Though, like Paint, it is severely limited in what it can do, its limitations are different. Therefore, by alternately opening an image in one and then the other of Photo Editor and Paint, one can accomplish most common image editing tasks, at the cost of some tedium since neither program by itself has all the needed features.

For the rest of this tutorial, I will be describing how to use Paint Shop Pro to perform some simple image manipulations. {Only because this is the program with which I am most familiar, perhaps others could add sections on how to do things in GIMP etc.}

Irfanview: Resizing and cropping

How to put image data into appropriate size.

• For the reason of filesize. This is relevant for websites, and image collections (galleries)
• For preview purpose (so called thumbnail). Irfanview allows to put thumbnails from directory content into a single image.
• For detail purpose (only a particiualar detail is interesting, or border areas contain data which is not required).
• For "speedy display" purpose (the more tiny a file, it quicker it shows up/travels on the internet).

• Scaling and Resampling (for filesize purpose)
  It is possible to scale via HTML attribute (img height= width=). This should only be used for variation about 50 percent.
  It occurs that tiny thumbnails are indeed based on 500kbyte files. Scaling should be done in a way the information remains clearly visible.
  Resampling is to amplify data by interpolation. It often works for up to double size for clear sources, but does not increase the amount of information. For this reason it is important to keep a "master" file in lossless format and maximal resolution. Any scaling should be done directly from the master (however often it does not make a big difference).
  Size needs can differ much according to display hardware (the monitor). Hence it is good practice to show a directory (tree-like structure) of thumbnails, which link to images in high resolution. If the image display is static, then choose a filesize, which is possible to display within a few seconds, preferably immediately. Try to keep internet images around 50 kbytes, and test the page display under a slow connection.
• Resizing (to emphasize details)
  In general, first crop out border areas, then adjust colors, then scale the image, and in the last instance probably reduce the color depth.
  This guarantees as little processing loss as possible.

Select the Image menu. Then select "Resize/Resample".

Irfanview: Adjusting parameters (color, brightness etc.)

This has the purpose of "realistic" appearance (by default)

Some images can be color reduced (the color depth), even with a result in increasing "subjective" quality.
Others do not take color reduction well, or the filesize increases above that of JPEG.
Try to modify parameters in this sequence: First the Saturation, then Contrast, then Gamma factor, then R/G/B intensity. Adjusting Brightness easily gives unrealistic results.
It is possible to operate these factors artistically, but most likely a "normal" image should be archived. This means how it would like to appear in daylight at 12pm, or under standard office light. Too bright images can disappear completely on some monitors. Generally different monitors can cause a change of 50 percent, there is never "exact" reproduction. In case of doubt, test the image file on different computers.

Select the Image menu. Then select "Enhance colors".

Irfanview: The saving format

JPEG has become standard. However it is a lossy format, you should always keep a master file in a lossless format.
Reduction of quality to 85, 80, even 70 does not bug most images too much. However some can become quite ugly, and require high quality.
PNG requires more storage space. However, if the color depth is reduced, below 256 and even downwards to 5 unique colors, it sometimes outperforms JPEG! It is worth trying to save in different formats, and to carefully examine the results, compare versions in different JPEG quality next to each other on the screen.

Go to "File/Save as..

• Remove the "point and extension" (if contained in the filename)
• Choose a meaningful filename, probably including number of colors, x-resolution, year, performed effect.
• Differ if it is a personal file, or if others may have to decipher the meaning years later.
• Do not save/distribute files under unchanged names produced by digital cameras (except personal pictures).
• Select the appreciate format, and control the parameters (quality), and options (transparent color etc.).

The image is too big

Sometimes an image is so large it dominates the page. As a general rule, images should not be more than about 300 pixels wide. The image that you see on the right would be over 500 pixels wide if it were simply to be uploaded. There are several things that can be done about a very large image. If it is a scanned image, it can be rescanned at a lower resolution. If however the image is digital it must be either resized or cropped.

Resizing

Select Image then Resize. You then get to choose the size of the image you want. Take care when resizing. The only way to make an image smaller is to throw away some of the pixels. If the image contains text, the pixels that get thrown away are not necessarily the ones that a human being would choose. If the top few pixels of the letter d are lost it becomes an a. Sometimes the only way to render readable, resized, text is to use the magnifying glass to look really close up, then pick up the correct colour with the dropper (the button that looks like a pipette), and finally select a one pixel paint brush to paint the letters in a pixel at a time.(The size of the paint brush can be adjusted from the style bar, which can be found on the view menu).

Cropping

If only part of the image is needed, it can be easily cropped. Use the selection tool to select the area that is wanted (see Fig.1) then copy and paste as a new image.

The image is dark or the color is wrong

If the image looks to bright or too dark it can be adjusted by clicking on color then adjust then selecting brightness/contrast. A box pops up (fig. 2) with a small window that allows you to see the effect that any changes will have. Color can be adjusted similarly by selecting red/green/blue instead of brightness/contrast.

There is a tree growing out of someone's head

Well not literally perhaps, but often there are parts of the image that you would prefer are not there. The trouble is if you simple delete them with the eraser tool, you'll end up with a great big splodge of the background colour. What you would like to do is remove the offending tree but leave the sky alone.

Using the clone tool to erase offending objects

The clone tool (the button with two brushes) copies one area of the picture to another. To use it, you first right click the area you want to copy from, then left click and drag the area you want to copy to. A black cross appears on the picture to show you where you are copying from. On the picture on the right, you can see the tree is being erased by copying a portion of the sky over the tree.