Photoshop basics

Using Photoshop to prepare images for web pages

Photoshop is an extremely powerful image editing software package. We will only have time to cover the basic features. To prepare a labeled image for a web page:

1. Open image file in Photoshop application (drag file over Photoshop icon).
If the image is not in the correct orientation, use"Rotate Canvas" from Image menu. You can also correct Brightness
& Contrast and Color Balance by selecting "Adjust" from Image menu.

2. Crop to remove extraneous material. Use the Rectangular Marquee Tool to select region that you want to keep. Select
"Crop" from Image menu to remove material outside of the box.

3. Adjust Image Size. The computer monitor can only display images at 72 dpi resolution. Select "Image Size" from the
Image menu. Set resolution to 72 pixels/inch. Adjust Width to desired size so tha the viewer will easily be able to see
details. The Height should be locked and thus automatically adjusted to prevent distortion (make sure that the
Constrain Proportions box is checked). If you a planning to construct a composite, remember to keep the size of your
images consistent!

4. Insert text by choosing "T" from tool bar. Select text color, font and size. Type your text where you want it to end up,
but if necessary, you can select the move tool and place it where you want it. The text is not directly placed onto the
picture; instead it is placed onto another layer on top. Choose "Show Layers" from Window menu to open the
Layers window. This allows you to choose which layer is active.

5. Insert arrows by choosing the line option from the shape tool (below T) from tool bar. The geometry tool ( down
arrowhead after shape choices) allows you to choose arrowhead at beginning and/or end of line. The shapes will also
be placed on a new layer. If you create several shapes ( e.g. arrows) at the same time, they will be added to the same
layer and you will not be able to move them separately. If necessary, you can use "Undo" or "Step Backward" from
Edit menu to remove a shape. To place shapes into distinct layers, choose "New Layer" from tool bar at the top of the
Layers window before creating a shape. Photoshop 7 has fixed this problem.

6. The fact that each element is in a distinct layer makes the Photoshop file easy to edit, so you may wish to save your
image in Photoshop format so that you can return to it if necessary. To insert the picture into a web page, you must
convert it to a Jpeg file (which will combine the layers and 'flatten' the image). Choose "Save for Web" from the File
menu. This will give you a preview window that will allow you to choose the quality (and size) of the file. Both the
size of the file and an estimate of the time it will take to load with a modem are shown at the lower left. Choose the
highest quality that allows reasonable loading speed ('High' is generally good) and click OK. Give the file a name that
is informative enough to be identified. Do not use spaces, slashes or hyphens in the name (underscores are OK).

Last Modified: 18 January 2004
[ Course | Cebra-Thomas | Syllabus ]



		Using Photoshop to prepare images for web pages
		Photoshop is an extremely powerful image editing software package. We will only have time to cover the basic features. To prepare a labeled image for a web page: 1. Open image file in Photoshop application (drag file over Photoshop icon). If the image is not in the correct orientation, use"Rotate Canvas" from Image menu. You can also correct Brightness & Contrast and Color Balance by selecting "Adjust" from Image menu. 2. Crop to remove extraneous material. Use the Rectangular Marquee Tool to select region that you want to keep. Select "Crop" from Image menu to remove material outside of the box. 3. Adjust Image Size. The computer monitor can only display images at 72 dpi resolution. Select "Image Size" from the Image menu. Set resolution to 72 pixels/inch. Adjust Width to desired size so tha the viewer will easily be able to see details. The Height should be locked and thus automatically adjusted to prevent distortion (make sure that the Constrain Proportions box is checked). If you a planning to construct a composite, remember to keep the size of your images consistent! 4. Insert text by choosing "T" from tool bar. Select text color, font and size. Type your text where you want it to end up, but if necessary, you can select the move tool and place it where you want it. The text is not directly placed onto the picture; instead it is placed onto another layer on top. Choose "Show Layers" from Window menu to open the Layers window. This allows you to choose which layer is active. 5. Insert arrows by choosing the line option from the shape tool (below T) from tool bar. The geometry tool ( down arrowhead after shape choices) allows you to choose arrowhead at beginning and/or end of line. The shapes will also be placed on a new layer. If you create several shapes ( e.g. arrows) at the same time, they will be added to the same layer and you will not be able to move them separately. If necessary, you can use "Undo" or "Step Backward" from Edit menu to remove a shape. To place shapes into distinct layers, choose "New Layer" from tool bar at the top of the Layers window before creating a shape. Photoshop 7 has fixed this problem. 6. The fact that each element is in a distinct layer makes the Photoshop file easy to edit, so you may wish to save your image in Photoshop format so that you can return to it if necessary. To insert the picture into a web page, you must convert it to a Jpeg file (which will combine the layers and 'flatten' the image). Choose "Save for Web" from the File menu. This will give you a preview window that will allow you to choose the quality (and size) of the file. Both the size of the file and an estimate of the time it will take to load with a modem are shown at the lower left. Choose the highest quality that allows reasonable loading speed ('High' is generally good) and click OK. Give the file a name that is informative enough to be identified. Do not use spaces, slashes or hyphens in the name (underscores are OK). Last Modified: 18 January 2004 [ Course \| Cebra-Thomas \| Syllabus ]