This tutorial will help you use Adobe Photoshop to edit original photos for Web use. Please remember to save a copy of your original image before making the modifications described below.
Some images are set to Indexed color, which cannot be displayed on the web. Select Image > Mode > RGB Color (or Grayscale for non-color images).
If you only want to use a certain part of the image, you will need to crop the desired area. Click on the Crop icon from the tool bar (shown at right), then drag a rectangle around the area that you want to crop (this is done by holding down the left mouse button). You can adjust this crop box by pulling the edges of the crop area until you are happy with the resulting image. Then double-click inside the selection to crop the document or hit escape to avoid cropping the document.
Images saved on the Web should not have a resolution greater than 72 DPI (DPI = Dots per Inch), and should be no wider than 500 pixels to fit in the WWU template. Select Image > Image Size.
After clicking on OK, you should notice your image shrink in size.
If an image seems too light or dark, or if the colors seem unnatural, you may need to adjust the contrast and lightness settings. Select Image > Adjustments > Brightness / Contrast... and
If an image seems too blurry, you may be able to fix its appearance by sharpening it. Click on your image, and then click on Filter > Sharpen >Unsharp Mask... Select Preview so you can see how your selections affect the image. Set Threshold to 0, Radius to 1.0 and Amount to 30%. Then adjust these settings until you are satisfied. Please note that sharpening too much can make your image look worse that it would by being a little blurry; use your own judgment on how much sharpening an image needs. Always sharpen as the last step in making image adjustments.
Once you are satisfied with all the changes made to your image, you will need to save it as a Web-compatible format. Click on File > Save for Web . Notice that the image is shown twice for comparison - the image on the right is the one you are saving for the web and is being affected by the settings you select.
For JPEG (photos):
For GIF (drawings or photos with transparency):
The matte is the background colour you want to use behind your image. If you've enabled Transparency, then the foreground image will be faded at the edges to blend in with the matte colour. If you choose the Matte setting of None, the GIF will have a "hard transparency" with no fading; this is great if you want to be able to use the image on any colour background.
However if you've disabled Transparency, the transparent areas of your image will be filled in with the matte colour.