Photoshop: Preparing Images for web use
By Damien Andrews
While Photoshop is capable of an endless list of amazing tasks, there are only a few which must be mastered in order to create magnificent photographs for use on the web. These same tasks also provide a solid foundation for more sophisticated photo work, including the preparation of photographs for color printing and photo retouching.
Syntax: The following conventions will be used throughout this document.
^ = Control • ALT = Alt • SHFT = Shift • TAB = Tab
Upper case indicates a command – starting from the ribbon; with a > between subsequent commands.
NB: The keystroke commands I provide should work in PS Elements, but some may not. I provided them because "friends don't let friends use the mouse."
Step 1 – Setting the PPI
- ^+ALT+I or IMAGE>IMAGE SIZE
- Highlight (make sure they have checkmarks/are turned on) the boxes next to: Scale Styles • Constrain Proportions • Resample Image. Following Resample Image, make sure Bicubic is the selected method for resampling. NB: These settings will hold between uses of the Image Size dialog box.
- Locate the word Resolution and then type 72 into the box to the right of it and TAB. Now, look up at the top and make sure the image has not become too small for your use. If the image has become too small for your use: Hold down the ALT key and the word Cancel will turn to the word Reset: click it to reset the dialog box. Now, click OFF Resample Image. Now change the resolution to 72 using the beginning of #3.
- Click OK
Step 2 – Cropping and Sizing
- C – or click on the cropping tool in the toolbox to activate it.
- In the upper left area somewhere you will be allowed to type in your cropped sizes: Width and/or Height. If your slider photos must be, for example, 900x400 – then type those numbers into the boxes (width is ALWAYS first in PS and in American printing). If your working photo is for the blog, and you are allowed a maximum of either 600 high OR 600 wide: type the appropriate size into the appropriate box. NB: Both boxes do NOT need to be checked.
- Make and adjust your crop.
Step 3 – Use the Right Size
- You should always try to do your photo editing at 100% so that you actually see what your final product will look like on screen. This should be ^1. If not, use VIEW>ACTUAL>PIXELS.
- The PS graphics engine is superior to the engine engaged by any browser – so bear in mind that photos will always appear better in PS than in any browser.
- To compensate for browser degradation, some photo preparations are slightly exaggerated. Over time, your eye will come to know how much is enough versus how much is too much – when using commands like Saturation and Unsharp mask.
Step 4 – Adjust Levels
- Please know that many people who have used PS for years do not understand the Levels dialog box thoroughly – but one doesn't have to in order to use it effectively for basic work.
- ^L or IMAGE>ADJUSTMENTS>LEVELS.
- ONLY use the Input Levels sliders – never adjust the Output Levels sliders.
- The sliders represent black (Left slider=0) to white (Right slider=255) and all the shades of grey (Middle slider=1.00) in between.
- Use the two outside sliders to lighten and/or darken the photo – it will often require both.
- Use the Middle slider to enhance or reduce contrast.
- I there is no Black above one or both of the sliders when you open the photo, move the slider(s) until it/they just meet the black.
- If you make a mistake and wish to start over: Hold down the ALT key and the word Cancel will turn to the word Reset: click it to reset the dialog box.
- When satisfied with the image's appearance: click OK
Step 5 – Color Enhancements
- ^+U or IMAGE>ADJUSTMENTS>Hue/Saturation
- Rarely will you adjust Hue.
- Do NOT USE the LIGHTNESS slider in this dialog box!
- Slide the Hue to the right for more intense color and to the left for less intense color. FYI: a change of + or -15 is considered a good bit.
- I'd suggest learning how to use the various options in the dropdown menu of this dialog box – to control individual colors. It's a great way to keep colors vibrant, but eliminate the adverse effects of tungsten or fluorescent lighting.
Step 6 – Sharpening
- FILTER>SHARPEN>UNSHARP MASK
- Set as follows: Radius=1.0 • Threshold=3
- Now you can adjust the Amount to get the look you think is correct. To appear best in browsers, the photo should appear ever-so-slightly too sharp in PS.
- Start with an Amount of 50%. Place your cursor into the small box that says 50 – now you can use your arrow keys to move up or down a single digit at a time OR add the SHFT key and move up or down 10 digits at a time.
- When you like what you see – click OK.
Step 7 – Saving for the Web
- ^+ALT+SHFT+S or FILE>SAVE FOR WEB AND DEVICES.
- Set to save as JPEG (recommended) at either MEDIUM or HIGH – there's really very little difference between the two, save for the file size.
- Make sure OPTIMIZED is checked.
- If PS Elements allows for it: turn on (check) Convert to sRGB.
- Select the directory, name the file logically and save it.
- NEVER resize in this dialog box!
- The SAVE FOR WEB AND DEVICES dialog box is worth a bit of looking over, when you have time.
Step 8 – You're Finished [almost]
- It's time to close your original photo, the one you have now changed significantly.
- Unless you saved your file while working on it (not recommended) you want to close WITHOUT saving.
- ^+F4 or ^+W or FILE>CLOSE • when PS asks if you want to save – tell it NO. This keeps your original photo intact for future uses in different sizes, but with ALL the camera data and pixels it originally had.
- ^+K or EDIT>PREFERENCES
- RULERS & UNITS: set RULERS to pixels and Type to Points.
- If you have two hard drives: go to PERFORMANCE and set the SCRATCH DISK to the second hard drive: D – this will improve performance and file handling capability.
- In GENERAL set Image Interpolation to Bicubic.