Webtopics > A 20 minutes guide to Photoshop
In the last couple of years digital cameras and scanners have become more affordable making image acquisition for our sites easy. Images from a digital camera or a scanned file (sometimes referred to as "raw images") are usually processed before they are put up on the web.
There are three main reasons why we may want to process these "raw images".
1. To reduce the image dimension (or to crop the image)
2. To reduce the image file size.
3. To improve the picture quality or picture definition.
Adobe's Photoshop is the most popular Image processing software around. It is widely used in the print and web industry. The software has a long list of features and even long time users are always discovering new tricks and techniques. However, in this "20-minute get to know Image Processing Guide" we focus on simple techniques that would help us process our "raw images" for the web. We are using Photoshop 7 here but these techniques would work with the older version too.
Opening an Image in Photoshop
From the "File" menu choose "Open".
Photoshop will prompt you for a file. Choose the file that you want to work with. Photoshop will open up this file for you.
Adjusting Contrast
Now let us try to enhance the picture. One of the useful features in Photoshop is the "Auto Contrast". This command improves the appearance of photographs by balancing the brightness and contrast.
Auto contrast feature automatically adjusts the brightness and contrast
You can get to the "Auto Contrast" option by clicking on "Image" from the main menu and then clicking on "Adjustments". If you prefer to adjust the brightness and contrast manually, you can move down to the "Brightness/Contrast." option.
Cropping an Image
Cropping allows you strengthen the composition by clearing away the part
of an image you do not want to focus on. Select the "Crop" tool from
the toolbar. 
Define the area you want to keep by drawing a rectangle. Photoshop will darken the surrounding area. You can increase or decrease the selected area by dragging the guides at the corners. Crop the image by double - clicking within the highlighted area. If you so not like the cropped section you can always "undo" by selecting "Step Backward" from the "Edit" Menu.
Use the crop tool to focus on a part of your image and discard the rest.
Resizing an Image
Image dimensions are measured in pixels. The dimensions of your "raw image" may be large, say 1024 by 800 pixels. This means that image is made up of 1024 horizontal pixels and 800 vertical pixels. This size is too big for a web page. Ideally the width of the image should be around 800 pixels or less. If the image is wider than 800 pixels the viewers may have to scroll the page to the right to see the entire image.
To check the actual dimensions of your image, click on the "Edit" menu and choose "Image Size".
I mage size option is used to adjust the dimensions of your image
A new dialogue box will open up. The Image width and height are shown under the "Pixel Dimension" block.
The image width and height are locked by default. Changing one would automatically adjust the other.
We want this image to be 700 pixels wide. So we will just type over the width field and make it 700 pixels. The height is updated automatically to maintain the proportion.
Sharpening an Image
"Raw images" sometimes have a slight blur on them. Use the "Unsharp Mask" command to sharpen your images. Select "Filter" menu. Select "Sharpen" and under this menu, select "Unsharp Mask."
Use "Unsharp Mask " option to sharpen the image.
While you are on this menu you can try having some fun with other "Filters". Try the options under the "Artistic" section. You can always undo the effect by selecting "Edit" from top menu and then the "Step Backwards" option under it.
Optimizing the Image for the Web
Our final step is to prepare this image for the web (also known as optimization). Even in the days of broadband Internet, a lot of people connect to the web with modems. It will impolite to make these users wait for the download. Ideally an image should be around 45 to 50 KB (Kilobytes) in size.
From the top "File" menu choose "Save for Web". A new screen pops up and shows your picture. There are four tabs on top - Original, Optimized, 2-Up and 4-Up. Click on 2-Up. This option divides the screen into two parts. One part shows the original image, the other shows the optimized image. On the right hand side you will see the "Settings" area. You can change the number in the "Quality" field. If you reduce the quality, the amount of information required for storing the image also becomes less. This reduces the file size. Also make sure that you have selected JPEG as your format. An Image can be saved in many different formats. For a photograph, JPEG is the preferred format.
Click "Save" when you are done with optimization. You will be prompted for a file name. It is a good idea to save the image under a different file name. Always save your "raw images", you may need them on some other project. The saved optimized image can be used in your website.
"Save for Web.." screen. Adjust the quality to reduce the image file size.
Using this picture on your web page
In the last instalment we built HTML pages with Microsoft Word. Move the optimized image to the folder that contains the HTML pages. Open up one of your pages in Word. Place you cursor at the spot you want the picture to appear. From the top menu select "Insert", select "Picture" ("From File"). Now select the picture that you moved in earlier and click on the "Insert" button. The picture appears on your HTML page. Upload both the HTML page and the picture to your server. The next time you browse to your page, you will be able to see the picture.
Other Image Processing Tools
Macromedia makes an image-processing tool called Fireworks. In functionality Fireworks is very similar to Photoshop. Another good tool and comparatively cheaper alternative to Photoshop is Paintshop Pro (http://www.jasc.com/products/psp/).
iPhoto options for touching up the images
If you are using an Apple Macintosh computer (running OSX) you can use the iPhoto tool to organize, manipulate and publish your pictures on the web. iPhoto is available as a free download at www.apple.com/iphoto.