GlassyEye.com logoGlassyEye.com
home info links ask
A personal collection and
observations on Art Glass

How to... Edit Photos (Pt.1)

Most cameras come supplied with Image Editing Software but they are often basic utilities that don't offer the facility to create photos suitable for Web publishing.

Sometimes the photo might be too dark, too light, blurred, under-saturated, or... well, you get the idea. But isn't this cheating, you may ask? No – all you're attempting to do is return the photo back to how it looks under normal conditions. If you try to over-egg the correction then that's cheating...

Irfanview: If you don't already have suitable software then go to www.IrfanView.com and download a free copy for an excellent (and free!) image editing utility. The tutorials following are based on using this software.

cropping : rotate : resize/sharpen : sharpening : saving : about JPEG images
>> go to part 2 — image processing

First Steps

One of the most important factors to creating a faster and leaner web site is the size of image.

If you have several large photographs to include on your Web page, the simple answer is — don’t! Instead, consider placing ‘thumbnails’ (tiny images created by reducing the original photo) on the page, with external links to the larger images.

Even so, the large image the thumbnails link to should not be higher than 640x480.

Follow these short Irfanview tutorials to enable quick and easy editing of the photo to the size you require. Oh, and while we're at it, this will help you to brighten, sharpen, saturate and save the photo too (see part 2)!

If you cannot understand any point, please mail me.

The first action is to run the IrfanView program and then load up the image.

  • Press 'O' to open the File Selector.
  • Locate the image file you wish to edit.
  • Click on the file and press 'Open'.

 

A 'thumbnail' created with IrfanView

IrfanView

Entirely free software offering all the features required to create this thumbnail: cropped, resized with alterations to gamma and colour, before saving.

Cropping

To make best use of the object, removing all the excess space is often advisable.

To do this first create a frame (often called a 'marquee') around the portion you wish to retain:

  • Click and hold down the left mouse button on any corner of the frame you wish to make.
  • While holding the left mouse button down, drag the mouse to create the desired frame around the object.
  • Press 'Ctrl-Y' to crop the image.

Hint

If the frame you create is incorrect, simply release the button and click the left button again while the cursor is outside the current marquee.

Rotating

Sometimes, the image will look far better when created as a 'Portrait' – tall, narrow items like vases are obvious examples.

These are taken with the camera turned through 90 degrees, but when you view the photo it's on it's side:

  • Either press 'L' or 'R' to turn the image left or right respectively.

Alternatively you can turn the image through any angle. To do this press 'Ctrl-U' to open up a dialogue box.

  • Enter a figure into the 'Angle:' field. A negative figure will turn the image anti-clockwise.
  • Press 'OK' button.

Hint

When creating thumbnails you don't necessarily have to consider using the whole of the target image. Often a small portion has far more visual impact...


Davidson Cloud Glass

Resize: get out the thumbscrews...

Sounding like terms used in medieval torture, thumbnails, crunchers and splicers are all tools that can make a massive difference to your site.

But if your budget is limited, IrfanView will create a small thumbnail:

  1. Press 'Ctrl-R' to call up the dialogue.
  2. Ensure the 'Set new size:' button is selected.
  3. Enter '150' into either the 'Width' or 'Height' field — whichever is the largest dimension.
  4. Ensure the 'Preserve aspect ratio' box is ticked.
  5. Enter '72' into the 'DPI:' field.
  6. Click the 'Resample' (better quality) button.
  7. Choose the slowest (Lanczos filter) method from the 'Resample filter:' field.
  8. Press the 'OK' button to start the process.

On each occasion, save the new file using a different file name;
e.g. newfile.jpg and newfile-t.jpg

Hint

Example: if the image to resize is 1024x768, you need to resize the largest dimension down to 150 pixels, so in this case adjust the 'Width' (1024).

150 pixels is just a recommendation, but it is not advisable to go above 180 pixels as the largest dimension. However, your personal need might require a larger thumbnail, in which case I'd suggest limiting the number of images per page.

For the larger images, you needn't go above 640 pixels as the widest dimension and 400 (as used by eBay) is often acceptable.

Note the diagram (left) was saved as a 'GIF' (pronounced "jiff") and this format is best for block colour images, like cartoons or diagrams.

Sharpening

Sharpening is often necessary following a Resize operation.

A softening of the edges occurs that can make the image look indistinct and sharpening can make a small, but very noticeable difference to the quality of the image:

  • Press Ctrl-E and click 'Sharpen'.
  • Enter a value of about 10, although a little experimentation might be necessary.
  • Press 'OK'.

A very subtle change, but the image should now look much cleaner and crisper.

Hint

When sharpening, don't overdo the effect or straight lines might start to look a little jagged.

Saving

You can now save the image if you're pleased with the result, or go to page 2 for some image processing tutorials.

To save the image:

  • Press 'S'
  • Locate the directory where you wish to save the image. Normally the 'My Images' folder is used, which is within the 'My Documents' folder.
  • Enter the name for your file into the 'File name:' field. Do not use spaces!
  • In the dialogue on the right, make sure the 'Save as progressive JPG'
  • Move the 'Save quality:' slider so that the figure reads between '70' and '75'.
  • Click the 'Save' button.

Hint

Using spaces in a file name is strongly advised against. Instead use the 'underscore' (_) or 'negative' (-) symbols to separate words.

Always use a totally new file name for each saved image. You might always want to re-edit the original (large) image!

About JPEG Images

It must be noted that JPEG (pronounced "jay-peg") images use a compression method where a certain amount of the picture data is lost (called "lossy"). This method is important as it permits very small image file sizes.

Providing you don't overdo the compression, a visitor to the web site should never notice the difference. However, repeatedly saving and editing the same photo compounds the data loss making it degrade rapidly. It is therefore very important to always retain the original photo and never overwrite it.

More Advanced

Save the original large image as a TIFF file. This does not use a 'lossy' method and can be saved repeatedly without degrading the image.

However, these 'TIFF' images are not suitable for web use and JPEG is always the best choice for web photos.

top

www.glassyeye.com : info : links : askcopyright © 2009 GlassyEye.com — text or photos may not be reproduced without permission — all rights reserved