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

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

After resizing the image for Web use, there are many other adjustments you can make to smarten it up – here are just a few.

At any time you can undo any change by pressing 'Ctrl-Z'.

<< back to part 1 : colour : saving : web use

Brighten, Contrast & Gamma

These three operations are all associated.

Gamma essentially is a single operation that adjusts both Brightness and Contrast simultaneously to retain the same balance.

Brightness is obvious, but Contrast is the ratio between the light and dark areas of the photo. Adjust the contrast down to a negative figure and the image looks pale and washed-out. A positive figure makes the photo look much bolder.

  • Press 'Shift-G' to call up the dialogue.
  • Adjust any of these three sliders to achieve the best result.
  • Take care not to overdo the effect.

What are we achieving?

The resultant image should represent the object very closely under decent lighting conditions. Try and avoid 'enhancing' the image by making it too colourful or bright!

Gamma is...

... the non-linear relationship between pixel value and displayed intensity — so there!

— it's actually intended to compensate for the subtle differences between computer monitors.

Colour Balance & Saturation

Colour

Should only be necessary if the colour looks incorrect, but allows individual control over the Red, Green and Blue (RGB) colour values.

If the photo is taken under an fluorescent light for example, and has a bluish tinge, this example will correct it:

Either:

  • Press 'Shift-G' to call up the dialogue.
  • Either move the 'R:' and 'G:' sliders to the right (increase), or...
  • ... move the 'B:' slider to the left (decrease).

In either case, it might be necessary to alter the Brightness, Contrast and/or Saturation afterwards as you are altering the overall colour value:

Saturation

Can be used if the general colour of the whole photo is either too strong or too weak.

  • Press 'Shift-G' to call up the dialogue.
  • Move the slider to the left to decrease the saturation, or...
  • ... move the slider to the right to increase the saturation.

This increases or decreases the colour values. Once you have the image looking right, press the 'OK' button to apply the corrections to the image.

 

Saving

Save using a value of around 70-75% compression, but always use a different filename as you may want to re-edit the original photo at a later stage.

With regard to the latter point, it is a common misconception to use a low compression (higher quality) figure for thumbnails, which can be well and truly scrunched without people really noticing.

To save the image:

  • Press 'S' on the keyboard.
  • 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.

Hints

For web use, do not use spaces or uppercase letters in the file name. Instead use lowercase with the 'underscore' (_) or 'negative' (-) symbol to separate words.

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

Images for Web use

One really bad habit of less experienced web designers is to reduce the image size by altering the width and height attributes within the <img> element. Wrong, wrong, wrong!

You wait ages for the image to load, then feel cheated when all you get is a tiny 'thumbnail'.

Simple text links can be created by changing the hyperlink as follows:

<a href=“big-photo.jpg” target=“_blank”>
Text Link to my Big Photo</a>

If the hyperlink surrounds the thumbnail's <img> element, this makes the thumbnail 'clickable'. Here's a simplified form:

<a href=“big-photo.jpg” target=“_blank”>
<img src="small-photo.jpg">
</a>

The attribute target=“_blank” is optional but using this allows a new web page to open, containing just the photo. Your web software will have this facility.

Images for use on a forum

You may wish to place an image on a forum. The code in this case is quite simple:

[img]http://www.my-server.com/big-photo.jpg[/img]

Or using the same trick as above for a clickable thumbnail:

[url=http://www.my-server.com/big-photo.jpg]
[img]http://www.my-server.com/small-photo.jpg[/img]
[/url]

Why thumbnails?

The thumbnail method for web or forum use allows anyone visiting your site to see the image thumbnail quickly, while avoiding unnecessary delays waiting for the full-size images to load. Simply clicking on the thumbnail allows the visitor to see the full-size photograph in a new browser window, if they wish.

top

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