PHOTOSHOP-TO-THE-WEB
using PHOTOSHOP ELEMENTS 2.0

(or How do I optimize a picture for display on a web site)
April 17, 2005

1. Load the picture you wish to process.

2. Launch Photoshop Elements (The Sunflower icon).

3. Open the picture in Photoshop Elements : FILE / OPEN [Navigate in the window that opens, to the picture file you put on the Desktop, or wherever you have it on the computer]

4. Rotate the Image, if necessary ( IMAGE / ROTATE)

5. Crop as desired: Use the Crop tool ( ) in the Tool Palate to the Left of your open picture. Click-Drag the new selection from the upper Left corner of what you are selecting to the lower right. When you are satisfied, press Return < cr > NOTE: The image will automatically display at a % of the actual size so that it will fit on the screen. That % is displayed in the lower left corner of the image window. After cropping, you may wish to increase the display size by using the Magnify Tool ( ) in the Tool Palate.

6. Correct the size of the image
: IMAGE / RESIZE / IMAGE SIZE. If the RESOLUTION is greater than 72, Reset it to 72.
Now, with "Constrain Proportions" checked, in DOCUMENT SIZE, set this to the largest size of the picture you will use in either the vertical or horizontal field in this window. (2 inches is usually fine for a picture on a web page. -- Ignore the Pixel dimensions and resolution here) [St. Paul's pages are generally 600 x460 pixels in size].

7. Correct the Color Balance of the Image: ENHANCE / ADJUST COLOR / HUE SATURATION. If the picture appears to be color correct, you can trust that it is, but INCREASE THE SATURATION SLIDER just slightly (about +15) since the .jpeg compression you will do later tends to wash out the color saturation a bit.

If the color does not appear correct, try moving the HUE slider gently until it appears correct. If only one color appears way off, open the EDIT field of this window and choose the color you want to work with. You can change the Hue of a single color, or LIGHTEN the display of that color to make the correction. Click OK

8. Correct the Brightness/Contrast of the Image:ENHANCE / ADJUST BRIGHTNESS CONTRAST / BRIGHTNESS-CONTRAST . You will usually improve any picture on the web by slightly increasing the brightness and the contrast sliders. This is a judgement call. Don't overdo it, as you can wash out the picture detail. Click OK.

9. Increase the Image Sharpness: FILTER / SHARPEN / UNSHARP MASK. Move ONLY the top slider (AMOUNT) right and left to the degree of sharpness you wish, before artifacts appear. (Radius should remain set at c.1.4 and threshold at c.12. Be sure "Preview" is checked so that the corrections you make will appear in a small insert of the image itself as you do it. You can move that small sample around on your image by dragging it) The sharper the image, the better it will display on a web page-- to a degree. Don't go so far as to make it look artificial. Click OK.

10. Convert to JPEG and Compress: FILE / SAVE FOR WEB
--------a.Select the IMAGE SIZE tab & make the picture approximately the size you want it to appear on the web page. If you are not sure, err on the larger, as you can reduce the size it displays, but cannot increase it without pixilation occurring. [Be sure "Constrain Proportions" is checked, and set either vertical or horizontal size in pixels. 200 is good if you are not sure] Click APPLY

--------b. In the other fields in this box, select "Unnamed," "JPEG," and "LOW." Leave "Progressive" & "ICC Profile" UNCHECKED. "Blur" at "0" and "Matt," blank (None).

--------c. Now, in the lower left of the window, you will see displayed the number of seconds it will take the image to load with a 28.8 kb/s modem. I like to keep this below 10, preferably 3-4 seconds. If it is too long a time, adjust the slider that appears below the "Quality" box which opens when you click the arrow to the right of the number in that box (This is a fine adjustment of the field to it's Left which you set previously to 'LOW").

You will notice that every time you move the quality setting, the image will redraw and display both what it will look like at this compression setting and a new loading time.

-------d. When you are satisfied, Click OK.

9. Save and export:
a. In the window that opens, Designate the location within the Diocesan site files on your computer.

Give the file a name (leave the "/ADMINISTRATION/WEBTEAM/.jpg" file extension as a part of the name) & Be sure NOT TO INCLUDE ANY SPACES, FANCY CHARACTERS OR APOSTROPHE'S.)
Click SAVE, It is now on your local copy of the web site, ready to be uploaded to the server when you open Dreamweaver, or ready for you to take elsewhere and use.

- Jon Davidson