Untitled Document

Vantage21st

PhotoShop Work Flow for Preparation of JPEG Images
Compatible with Adobe™ Photoshop versions 6.x, 7.x CS and CS2

The steps in this guide are generic to the JPEG web image preparation process. You may use these steps when using other graphics programs like The Gimp, Corel Paintshop Pro or Adobe Fireworks. The menu items will be in different locations however the generic process will be the same.

Open your original image .
Never work on or make any changes to your original image. This is your master image. ALWAYS make a copy of your master image and experiment on the copy. If the copy is no longer useful delete it and make another fresh “working” copy.
File > Save As > and save a working copy. Append the word “working” to the file name. For example: if your original image file name was rose.jpg name the copy rose_working.jpg. Use all lower case and no symbols the underscore is OK.
If the image is a JPG the JPEG Options dialogue box will open. Under Image Options: move the quality slider all the way to the right for maximum quality. Under Baseline Options select the Standard radio button.

If the image is a TIFF you will see a different dialogue box. In the TIFF Options dialogue box look for the Byte Order section. If you are working on a Mac select Macintosh. If you are working on a Windows computer choose IBM PC. All other settings may be left as they are.
Check Image > Mode
If CMYK has a check next to it, click on RGB to change the mode from CMYK to RGB.
File > Save (save your work)
Crop if necessary – select the crop tool on the vertical tools palette. Draw out the crop area and crop the image.
Color correct tool #1 : Image > Adjustments > Levels and adjust if necessary.
Color correction tool #2 : Image > Adjustments > Hue/Saturation and adjust the saturation slider with the Edit: field set to “Master.” Adjust the saturation of individual colors if necessary. Experiment, you can’t hurt anything.
Check Image > Image Size The Image Size dialogue box will open

Towards the bottom of the dialogue box look for the two check box items Constrain Proportions and Resample Image. If either box is unchecked place a check in the box. Verify that “Bicubic” is selected in the drop down menu to the right of Resample Image. In newer versions of PhotoShop including CS and CS2 there is a third check box named Scale Styles. Check this box.
Resolution: web images are normally prepared to a screen resolution of 72 ppi. If you are using Photoshop and the image you are preparing is a high resolution image that has a ppi (pixels per inch) resolution of 150, 240, 00 ppi or higher there is no need to reduce the resolution to 72 ppi. Why? At the end of this work flow you will use the Photoshop File > Save For Web tool that will open your high resolution image and automatically reduce it on the fly to 72 ppi. This is a temporary process and your original high resolution image will not be reduced to 72 ppi. If you are using Photoshop you can skip steps 11 & 12 and go directly to step 13.
Next check the Resolution setting. If the image is already at a web friendly 72 ppi there is no need to reduce the resolution. You can proceed to step 10. If the image is at a higher resolution like 240 or 300 ppi use one of the resolution reduction procedures described below.

I. Quick resolution reduction procedure with slight sacrifice in image quality
If the image has a higher resolution like 150, 240 or 300 ppi change the number in the Resolution field to 72 ppi. This reduces the image from the high resolution ppi setting to the low resolution setting of 72 ppi in ONE step.

II. Slow resolution reduction procedure - preserves quality
Use this three step method when preparing high quality images for web pages. Reduce the resolution in three steps. Assume that the original image is 300 ppi and that the target web resolution is 72 ppi.

Step 1: change resolution to 225 ppi
Step 2: change resolution to 150 ppi
Step 3: change resolution to 72 ppi
Next bring the display size up to 100% by using the slider on the Navigator floating palette or the keyboard Control key plus the + key on Windows. This will be the actual screen size of the image that your visitors will see on your website.
Image > Image Size
If the image needs to be made smaller at the top of the dialogue box under “Pixel dimensions” locate the Width and Height fields and reduce either the Width or Height value in pixels The other dimension will automatically reduce itself proportionately.
Check the image carefully . Is it as bright as it was before you reduced the resolution? Does it need a little “pop”? If so open Image > Adjustments > Levels again (item 6 above) and boost the highlights a bit. This is fine tuning before the final sharpening step followed by publication on the web.
Open Filter > Sharpen > Unsharp Mask
Set the Amount to 1%
Set the Radius to .5 (that’s a “point” five or ½)
Set the Threshold to 3
Next gradually move the Amount slider to the right and watch the sharpening increase in both the preview window and in the image itself.
File > Save for Web to save your file as a web ready JPG image.

The Save For Web dialogue box will open click on the Optimized tab at the top.
On the right select JPG from the drop down menu.
For further details please refer to the Vantage21st PhotoShop guide How to use the Photoshop "Save For Web" tool .

End Notes: Most tools used in this workflow are available in popular photo imaging programs like Fireworks, Image Ready, PhotoShop Elements, PaintShop Pro and Corel PhotoDraw.

Good Free Imaging Software: The Gimp or “ GNU Image Manipulation Program” is a free photo imaging program. It is available for Windows, UNIX and MacOSX here http://www.gimp.org/.

Revised March 2007