11.204 Planning Communications and Digital Media – Recitation 3 Fall 2004 Recitation 3 – Further Work with Dreamweaver and Photoshop: Refining your Web Site More Photoshop skills Selecting areas of the image - using the selection tools In Recitation 2 we learned there are several tools in Photoshop for selecting an area of the image to process. 1. Choose the rectangular marquee tool and draw a box around a part of the image to select it. 2. To remove a selection you have made (i.e., unselect) go to Select->Deselect. Now hold down the mouse button on the rectangular marquee tool to see some of the other selection tools. 3. Choose the elliptical marquee tool and make a selection. 4. Remove the selection with Select->Deselect. 5. Now hold down the shift key and make a selection with the elliptical tool again. When you let go of the mouse button and the selection is complete notice that the area is a perfect circle as opposed to an ellipse. The shift key enables this option. You can also adjust your selection by choosing Select->Transform Selection. This menu choice will add adjustment handles to the selected area so you can expand or shrink the selected area. More selection tools The Lasso tool gives you more control in selecting areas of an image than the rectangular or elliptical marquee tools. The polygonal lasso tool allows you to choose an area by clicking on surrounding points. By holding down the Alt key the polygonal lasso tool is temporarily changed to the lasso tool. Rectangular marquee tool Lasso tools Magic Wand tool Standard Mode Quick Mask Edit 111.204 Planning Communications and Digital Media – Recitation 3 Fall 2004 The Magic Wand tool can be used to select areas of similar color and brightness values. By checking the contiguous option and changing the tolerance value you can refine your color/brightness selection. The Magnetic Lasso tool (pull down the Lasso tool to see this option) allows you to outline an area for selection based on the contrast between the object you are selecting and the surrounding pixels in the image. Inverting the Selection After selected a portion of an image you can then “invert” the selection, i.e., select what wasn’t outlined, by choosing Select->Inverse. Quick Mask Selected areas in images can be designated as “masks” so they remain unchanged when you alter the unselected parts of an image. You can first make sure the masked area is selected correctly by clicking on the “Edit in Quick Mask” button to modify your selection. Use the brush to add or subtract from the mask. The color white subtracts, the color black adds. Standard Mode Change back to Standard Mode after editing in Quick Mask to make changes to the unmasked part of the image. Save Your Selection as a Channel Save your selection as a channel so you can use it later if you need to. Do this by clicking on the “Save selection as a channel” button at the bottom of the Channels panel on the right of your screen. Alpha channels hold information about the masks you create. Change Background While in Standard Mode try changing the background of your image (with the mask). Use the Gradient tool and try different effects. Outline Sunglasses Outline the sunglasses in the picture provided or use any picture you have to outline an object. Copy and Paste Go to Edit-> Copy, then activate your first image and choose Edit-> Paste. Move Use the Move tool to move the sunglasses in place. Crop 211.204 Planning Communications and Digital Media – Recitation 3 Fall 2004 Crop the modified image where you pasted the sunglasses. Save this image for the web. Image resolution, size, file types, etc. Unlike printed images, images displayed on the web always appear at the viewer’s monitor resolution, which is usually between 72 and 96 ppi. The image size in inches and the resolution in pixels per inch are unimportant, the width and height as measured in pixels determine the size at which the image will appear. If an image’s pixel dimensions exceed 750 pixels wide or 500 pixels tall, the entire image may not fit within a browser window, forcing the viewer to scroll to see parts of the image. As a convention, many people save images intended for the Internet with a resolution between 72 and 96 pixels per inch (and about 800 by 600 pixel dimensions) so if printed from Photoshop or another application, the image will appear approximately the same size that it did on screen. Try to adjust the size and resolution of images to optimize quality, while keeping the file size to a minimum. You can find out what an image will look like and how large a file in a particular format will create by choosing: 1. File->Save for Web and then, 2. Select the 2-up or 4-up tab at the top of the image frame. You will then see the image repeated and you can set each frame to show the image as a different file type, such as, jpeg, gif, png, and wbmp. You will also see the respective file sizes and download times. Try to keep your image files under 30KB apiece so that even people with slow modems can load them quickly. Also, keep in mind png files are the newest file type and not all browsers can read these files. If you are working with jpeg files in Photoshop you should work in RGB mode because this is the “monitor” viewing mode. FYI: Each time you save a file as a jpeg you lose data. Never save a file as a jpeg a second time. If you have converted to jpeg and want to go back and make changes, use the original Photoshop file. Copying image characteristics You can copy the image size, canvas size, resolution or color mode of one image to another image. 1. Have two images open, make one active and go to Image->Size. 2. Then choose Window->Documents and find the name of the file you want to match. 311.204 Planning Communications and Digital Media – Recitation 3 Fall 2004 3. Notice that the dimensions change when you click on the matched file’s name. Creating and using backgrounds Backgrounds can make your website difficult to read if not used correctly, but they can also help you create a certain “look.” Since you can use an image as a tile in HTML, your background files can be quite small. Here’s one way to place a bar along one side of your web page like a border. Create a file in Photoshop that is the width of a page (I use 1400 pixels on my laptop) and about 100 pixels high.