Preparing a Photograph for the Internet

Preparing a Photograph for the Internet

VERY BASIC PHOTOSHOP

Color Space
You should always work in RGB color space.
To make sure Image>Mode and pick RGB. You can also work in grayscale.

Basics of Navigation
To zoom in on an area of an image: Command-Spacebar
To zoom in out an area of an image: Command-Option-Spacebar
Hand tool or navigation palette (see p127) for moving around the image. Later you can use the move tool for moving a particular layer.

Cropping and Rotating
CROPPING TOOL
Often you will need to slightly crop an image after scanning. With many scanners you can also use this tool with the scanner itself. Select the tool. Begin in one corner of the image and drag the tool to the opposite corner. To change the size of the cropping click on any of the corner boxes and drag to desired size.

To rotate or flip an image: Image>Rotate Canvas

Retouching
RUBBER STAMP TOOL
Use for selecting one area of a photo to place over another, particularly to cover dust and scratches. For example you could select an area of blue sky to use to cover a dust spot. First select the tool, move the cursor to an area you want to copy from and press the Option(alt) key. Then move the cursor to the area that you want to fix. Use lots of clicks, don't try to paint with this tool. See page 158-159.

To Undo
1. To undo the last move: Command Z or Edit>Undo
2. Via rubber stamp tool: in the options menu set From Saved. Note this will only work if you've saved a copy of the image and are on the same layer. Moral: save often!!
3. Via eraser tool: If you just use this tool normally it will revert to background color. Again, check the From Saved in the options menu.
4. File>Revert This will revert everything to your last saved copy of an image. This is generally a last resort as you will loose all work since last saved image. For more info. See pp. 46-48

To Save
File>Save or Command S The first time you save and image you must use File>Save

To Adjust Contrast
Image>Adjust>Levels or Command L
You will see a dialogue box with a histogram. Adjust the end points of the Input level sliders to set the black and white point and the middle slider to control contrast. This is a complicated tool. Remember that PC monitors are more contrastly, i.e. have a higher gamma, 2.2, that Mac monitors at 1.8.

To Adjust Color Balance
Image>Adjust>Color Balance or Command B
You will see a dialogue box with three sliders. It's best to only play with two of them at a time. Note that you can adjust the shadows, midtones and highlights separately. Remember that color balance varies with each monitor.

SAVE YOUR FILES BEFORE CONTINUING!!!

1. Adjust the size of your image
Edit>Image Size
Make sure that your image measurement is in pixels. If you want to see a ruler on your Photoshop screen, try command R.
Make sure the image resolution is 72. Decide on the size of the image you want, in pixels, and use Image>Image Size to adjust the image. Remember that the standard screen resolution is 640x480. When viewing images over the internet, much of the vertical dimension and a small amount of horizontal space is taken up with the browser navigation tools. I would suggest horizontal dimensions of 580 maximum and vertical dimensions of 325-430. More than 325-350 will not be seen on older small Mac screens.

The following chart shows the default browser size (how large the browser opens) for common screen resolutions.

MAC	PC
640 x 480
470 x 300	580 x 300
800 x 600
470 x 430	580 x 430
1024 x 768
470 x 600	580 x 600

3. Sharpen Image: Filter>Sharpen>Unsharp Mask. You can skip this step if you are a beginner. I prefer to sharpen at this stage, after I have proper image size, if I know that my image will be shown on the web. Note that a sharper image won’t compress as well, i.e. will result in a larger file. Personally for most work I think a reasonable amount of sharpness is important. I generally set the amount to around 50%,the radius around 1 to 1.5 and threshold around 2. If you can handle a more blurred look, follow the advice in the book. SAVE YOUR IMAGE AGAIN AT THIS POINT!!!!

4. To compress your images you will save them as jpegs: File>Save As. Note that you then need to scroll down the format menu and click on JPEG. For the file name, choose something no more than 8 characters (only necessary if you're using an NT server), avoid spaces, any characters other than letters and numbers, and end with .jpg. After you click OK, you will get a pop-up menu that will ask you how much you wish to compress the images. I generally start with 2 and go up if I need to. I suggest clicking on either baseline or baseline optimized. Progressive will interlace your image as it is uploading and result in a larger file size.

**!!**4a. Before you save your images, check the preferences. Under File>Preferences>Saving Files make sure that the never button is checked for whether or not to save previews. Ideally you would choose ask when saving, but honestly I've never gotten my computer to ask. You may also want to check append file extension so that .Jpg is added automatically. Windows users will find that their computers may add the extension even if this box isn’t checked because of the way their operating system is set up.

5. If you are using an old version of Photoshop, once you''ve saved your image you need to close it, reopen it and see how it looks. JPEG is a lossy compression, which means that your image will loose information. If you feel that the image has lost necessary detail, try to save it again with less JPEG compression. The first time you do this it's a good idea to save the same image with several different compression and look at the results side by side (the new version of Photoshop shows you on the screen!). Before you decide which image you want to use, check the file size. On a Mac, with an old version of Photoshop, the only way to do this is to go to the finder, highlight the image name (by clicking on it) and then go File>Get Info or Command I. This will give you the correct file size. Note that the size that is written next to the image name is incorrect and generally too big. As modems get faster and other high speed internet connections become more common, larger file sizes become more practical. Nonetheless the smaller your file size, the faster the image will load. Two years ago the standard advice was that your entire page should not be more than 30-60K. I still try to keep even the most complicated pages to under 100K and individual images generally below 50K.

** If you've named your files on a PC check the names before uploading on a Mac. Bruce warns me that some times tildes are added to the names in the conversion and these will cause your files not to be properly read by UNIX servers.

Preparing GIFs

GIF is a file format that is generally used for drawings, or small photos, usually no more than 100x100 pixels, that are used for navigation purposes. Gif is non-lossy compression so your image theoretically won't loose information. In actuality, you always have to reduce the color palette so the image gets degraded in that way.

1. Image>Mode>Indexed Color

2. Pick adaptive color in the pop-up menu and try out your image with the fewest possible colors. Remember that your image is small, so that some degradation is alright. At 3 bit color, your color palate will be limited to eight colors, at 4 bit sixteen colors etc. If you don't like the colors selected, if you feel that the selection degrades or ignores the wrong colors, you can place a rectangular selection over part of the image with the marquee tool and try again. Generally I turn dithering off as it just adds file size.

3. Save your image as a compuserve GIF. Check the file size by clicking on the name of the file and in the finder using File>Get Info, or Command I. Be sure that your file name ends with .gif!!!

4. To make a transparent gif, where the background color will show through you need to export the file. In Photoshop choose File>Export>GIF89. You then will see a diagram that shows all of the colors in your indexed color palette. Using the eyedropper tool click on the color(s) that you want to be transparent. Also decide whether you want to image to interlace ( unnecessary for most small GIFs) and check the appropriate box. When you save your file the .gif will automatically be added. Note that when composing the original image for the gif, place it on the safe color background that it will eventually be on in your web page. That is, if you're designing text to be placed on a green background, use that same green in Photoshop as background for your text for the GIF as opposed to simply placing it on the default white background. This way you will avoid a halo around your text.

BACK

BINACOM HOME