Become a Virtual Tourist Member Today!  Sign Up for Free | Sign In

Travel Tips

Search:
Home » phil_uk_net » Creating better photos for the web

"Creating better photos for the web" by phil_uk_net


Click Picture to enlarge.
 email me
 add as friend


phil_uk_net   
Enjoying life in Thailand ...


Real Name: Phil
Lives In: Brentwood, UK
Member Since: Mar 10, 2002
VT Rank: 274

 > View Larger Map
London, UK  176  174
Hat Yai, TH  104  135
Singapore, SG  99  121
Singapore  40  73
» more...
 

phil_uk_net's Albums
Title [Click to view]Travel YearPictures
A Photography Primer- 8
Creating better photos for the web- 8
Rats of the world unite!- 3
When Virtuality meets Reality- 

Page Views: 1,585            

Creating better photos for the web

by phil_uk_net - last update: Nov 30, 2003

General underwater scene

1. Introduction

I know, from seeing their handiwork, that there are several Photoshop experts here on VT who are masters at creating great images. This is not aimed at them. It is intended for beginners and new digital camera users who want to put their photos on-line. The tips below are very basic but should be enough to give effective results.

There are plenty of software packages around for manipulating digital images. I have chosen Photoshop due to its popularity and availability. The full blown version used by professional graphic artists costs hundreds of dollars but reduced function versions such as Photoshop Elements or Photoshop LE (Light Edition) are not that expensive. In fact, these cheaper versions are included with many digital camera and scanner packages. Different functions are available with the different versions but I believe that all versions have the functionality described below.

Picture details. This picture was taken in Thailand using a Sony DSC-P1 digital camera and a Sony MPK-P1 underwater housing. Shutter speed 1/578s, aperture F2.8. The built-in flash fired. No external filter was used. Original dimensions 1280 x 960 pixels. Original file size 564 KB.
The image here has been reduced in size using Adobe Photoshop to 560 x 420 pixels. The file size is now 45 KB.
Image partially cropped

2. Cropping and Resizing

Creating photos for the Internet is all about compromise. We have cameras that can create images of several Megabytes with fantastic detail but to put them online the images need to be relatively small. There are several reasons for this. Large image files take a long time to download, especially if the user is connected via a modem and telephone line. They take up a lot of space on the server which costs money. It is not good practice to have large images that cannot be seen in their entirety on a computer display without using scroll bars. The maximum image width allowed on VT is 560 pixels.

The easiest thing to do is to resize the entire image so that everything is still there but it is just smaller. This can be done by using the following commands:

Image > Resize > Image

A dialog box will appear where you can change the maximum width to a smaller one. I use the VT maximum of 560 pixels which gives a height of 420 pixels, keeping the image ratio the same.

It could be though that you don't want to reduce the whole image but just want to use a part of it. In that case you need to 'crop' the image.

With the image displayed, select the Rectangular Marquee Tool. Where it says Style, select Fixed Size from the drop down list and enter 560 px in the Width box and 420 px in the Height box. Click on the image and a rectangular box of these dimensions will appear. Click and hold down the right mouse button (Windows only) to move the box to the desired position. When you have selected the area you wish to crop use:

Image > Crop

If the section of the image you require will not fit into the box try reducing the overall size of the image slightly first and then try again. You may need to do this a few times using trial and error before you get the desired result.

Picture details. I have cropped a section of the above image to concentrate on a few fish rather than the whole scene. The image size is 560 x 420 pixels and the file size is 48.4 KB.
Colours corrected

3. Correcting Colours

Even the reduced function versions of Photoshop are incredibly powerful and flexible when it comes to adjusting colour, brightness and contrast. If you have a good eye for such things I would suggest playing around with the different settings to get an acceptable end result. I'm not particularly good at this and usually end up making things worse. However, I have enjoyed some success using the built in Auto Levels adjustment.

Enhance > Auto Levels

If the original image is good then this adjustment will have very little effect. It seems to work well for underwater shots where the water absorbs different colours in the spectrum more than others and gives everything a blue hue while removing reds.

Picture details. I have used the Auto Levels function of Photoshop to correct the colours. No change has been made to the image dimensions but the file size has increased 63.5 KB.
Image sharpened slightly

4. Sharpening the Image

So far we have taken a large, detailed image and compromised the quality by making it smaller in terms of both dimensions and file size for use on-line. You may be happy with the results already but I have found that by sharpening the image after all this, as a final stage, it injects some life back into it. There are various ways of doing this in Photoshop but I have found that the Unsharp Mask gives good results. The term Unsharp Mask is, I think, somewhat confusing as it sharpens rather than unsharpens. Select:

Filter > Sharpen > Unsharp Mask

In the dialog box you can experiment with different Amount, Radius and Threshold settings but I have found the following to give acceptable results:

Amount - 20%
Radius - 50.0 pixels
Threshold - 0 levels

Picture details. Using the Unsharp Mask, the file size has increased to 69.5 KB but I thin it adds life to the photo.
Basic image

5. Tiger Example

Here is another example. This time the quality of the original picture is quite good anyway so the changes are a lot more subtle.

Picture details. The original dimensions of the image were 1280 x 960 pixels and here I have reduced the image to 560 x 420 pixels. The file size is now 69.2 KB. Shutter speed 1/643s, aperture F5.6.
Head cropped

6. Reducing and cropping

I reduced the entire image to 1000 x 750 and then cropped the tiger's head using a crop size of 560 x 420.

Picture details. The file size of the cropped image is 58.5 KB.
Colours corrected

7. Auto Levels

Using the Auto Levels command, the colours have become more vivid.

Picture details. The picture was quite good in the first place so Auto Levels hasn't changed very much. The file size has increased slightly to 58.6 KB.
Image sharpened slightly

8. Unsharp Mask

The Unsharp Mask has brought back some definition to the image.

Picture details. The penalty for this is an increase in the file size, it is now 59.8 KB.

9. Saving images.

Images on-line are generally saved in .gif, .jpg or .png format. png is not that widely used and gif is more suited to images that have large blocks of colour. The most popular format for colour photos therefore is jpg. This is a compression algorithm and by its nature reduces the quality of an image. When saving jpg images though it is possible to select an Image Quality Option. The higher the number, the higher the quality will be but also the bigger the file size will be. In my version of Photoshop, 0 is the lowest quality and 12 the highest. For every day uploads I use 5 which seems to be a good compromise of quality and small image size.

phil_uk_net's Albums
Title [Click to view]Travel YearPictures
A Photography Primer- 8
Creating better photos for the web- 8
Rats of the world unite!- 3
When Virtuality meets Reality- 

Comments for phil_uk_net about World
lindsey1511 Sat Oct 24, 2009 15:21 UTC
 May I ask where can I read more about The Brahma Jati Rat horoscope? I would like to read more about Rabbit and Pig. Kindly share with me if you have the article. My email is lindsey@dearmagic.com. Thank u very much, Lindsey from Malaysia
marvelous_girl Sat Aug 29, 2009 15:01 UTC
 hi! its Mahreen from Pakistan. i really like your homepage alot and your travel pages r simply best.
Agraichen Tue Jan 20, 2009 04:48 UTC
 for a moment I thought you were a neighbor in Brentwood, CA. home of a number of moviestars. "The Plan" sounds wonderful. I have some thoughts that wish I could do the same.
cor55 Fri Jan 2, 2009 13:41 UTC
 How's life in Brentwood. originally from Billericay, now live in Sydney, Australia. Nice plant.
See More Comments

Hotels Around the World

About VirtualTourist10 Great Things to Do On VirtualTouristContact UsPress CenterHelpUser AgreementPrivacy Statement
Virtual Tourist® ©1994-2009 VirtualTourist.com, Inc. All Rights Reserved.