IAT100 - Lab: Week 1
Photoshop - Cropping and Saving for the Web
Overview
This short lesson will cover the skills needed to take image files produced from a digital camera and quickly edit them for presentation on the web. In order to ensure high quality source material it is advisable to take photos with the camera set to capture large, high resolution images. This is because you can always reduce resolution but you cannot increase resolution. Working with high resolution images allows us finer precision during image adjustments and gives us the flexibility to crop the image while still retaining a file of reasonable resolution.
Bringing Camera Images into Photoshop
In working with images from a digital camera, the first thing you need to do is copy the images from the camera or SD card onto the computer you are working. You don't want to work directly on the camera or the SD card any disk access will be very slow. Once the images are in a folder on your computer, the simplest method to bring an image or multiple images into Photoshop is to select File > Open from the menu bar and highlight or shift click the multiple images then select OK.
Cropping an Image
Once you have an image in Photoshop you may want to crop the image to trim down the canvas size and only show a section of the image. The Crop Tool in Photoshop looks like a pair of printer's blocks on the Toolbar. Select the Crop Tool and click and drag to select a section of your canvas. Once you let go of the mouse you are now in a crop mode that can only be exited by hitting the ESC key or the ENTER key. The ESC key will exit the crop mode without making any changes. The ENTER key will commit your changes and will crop the canvas to the selected section. Note that while in crop mode the area of the canvas outside the selection is dimmed to assist you in viewing the image as it will look when cropped.
Adjusting the Image Size
Working with high resolution images from a digital camera often means that even after cropping an image it will still be larger than our intended size, or larger than the browser window if we will be displaying the image on the web. In order to reduce the size of the image to your intended dimensions, select Image > Image Size... from the menu bar.
This will bring up an Image Size dialog box which will allow us to set the Pixel Dimensions of our image. Note that the Constrain Proportions is checked by default ensuring that Width and Height will be locked so that the image will not be stretched in either dimension. Set the Width or Height to your intended target and hit OK.
Saving for the Web
Photoshop has a special applet to assist in saving images for the web. You access this tool via File > Save for Web & Devices... in the menu bar.
Images saved for the web will typically be in one of four formats: JPEG, PNG, GIF, or WBMP. Details of these file types are beyond the scope of this lesson and will be covered in another tutorial. As we are saving full color photographs in this lesson the most common format used is JPEG. JPEG is a compressed format that is lossy, which means that resolution is lost and artifacts can become visible when the image is overly compressed.
The Save for Web & Devices tool allows us to try different compression qualities to see the effects on both the visual appearance of the image as well as its file size in KB. The preset value JPEG High results in a JPEG that is compressed at a 60% quality. This is usually a reasonable quality to produce an image that has few visible compression artifacts while reducing the file size to ensure a fast loading image. The preset JPEG Medium sets the quality to 30% and usually results in an unacceptable reduction in visual clarity.
You can also manually adjust the quality and look for the appearance of compression tears and shadowing in the image.
Note the changes to the file size in the bottom left of the Save for Web & Devices dialog as you adjust the quality.
Once you have selected an optimized compression ratio that optimizes image quality without producing unacceptable compression artifacts while reducing the file size to a fast loading image, select the Save button and save your image file.