Cropping and Resizing Web Design Section 5-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives The Student will: The Student will: use the concepts of pixels and resolution to appropriately size images for web pages use the concepts of pixels and resolution to appropriately size images for web pages understand how file size and bandwidth limitations influence the use of web graphics understand how file size and bandwidth limitations influence the use of web graphics

Resizing Images Before you can use your images on your web page, you must first resize them to the exact number of pixels in which they will appear on the page. Before you can use your images on your web page, you must first resize them to the exact number of pixels in which they will appear on the page.

Resizing Images A digital image can look huge when viewed on a computer monitor. The file size can also be very large. A digital image can look huge when viewed on a computer monitor. The file size can also be very large. Resizing the image not only helps it fit on the screen, but also reduces the time it takes to load the web page. Resizing the image not only helps it fit on the screen, but also reduces the time it takes to load the web page. Rule of thumb: Resize an image to fit within a normal browser window so site visitors won’t have to scroll to see the entire photo. Rule of thumb: Resize an image to fit within a normal browser window so site visitors won’t have to scroll to see the entire photo.

Resizing in Photoshop Image Menu > Image Size Image Menu > Image Size

Resizing in Photoshop Image Menu > Image Size When the image size window opens, change the resolution to 72 if necessary. It is important to do this first. Image Menu > Image Size When the image size window opens, change the resolution to 72 if necessary. It is important to do this first. Next, change the pixel width dimension to 450. It is not necessary to change other settings. When constrain proportions remain selected, the image will retain its aspect ratio. Also make sure resample image is ticked. Next, change the pixel width dimension to 450. It is not necessary to change other settings. When constrain proportions remain selected, the image will retain its aspect ratio. Also make sure resample image is ticked. Click on the OK button. Click on the OK button.

Resizing in Photoshop Almost all images need sharpening when reduced in size. Filter > Sharpen > Sharpen Almost all images need sharpening when reduced in size. Filter > Sharpen > Sharpensharpening Save your work: File > Save for the Web. Save your work: File > Save for the Web. It is at this step in the process that you’ll be able to set the compression level of the image and watch the effects in the window. It is at this step in the process that you’ll be able to set the compression level of the image and watch the effects in the window.

Cropping While the resize image function is a useful function, sometimes you will want more control over how the size of the image is reduced. The crop function allows you to cut out a portion of the image or change the image dimensions without distorting the image. While the resize image function is a useful function, sometimes you will want more control over how the size of the image is reduced. The crop function allows you to cut out a portion of the image or change the image dimensions without distorting the image. Cropping doesn't mean 'chopping' out important bits of context or history of an image. Rather, think of cropping as the act of cutting away unnecessary or unwanted portions of an image to help focus the viewers attention and help tell a story. Cropping doesn't mean 'chopping' out important bits of context or history of an image. Rather, think of cropping as the act of cutting away unnecessary or unwanted portions of an image to help focus the viewers attention and help tell a story.

Cropping Crop a picture to get what you want on the webpage! Crop a picture to get what you want on the webpage!

Rest of Today Find 6 images that you want to include in a photo album. Find 6 images that you want to include in a photo album. Now that you know how to crop and resize images and then save them as jpeg files, you are ready to start preparing your images for your web photo album. Now that you know how to crop and resize images and then save them as jpeg files, you are ready to start preparing your images for your web photo album. First, crop and/or resize each of the six images to create viewable images that are 450 pixels wide in size. First, crop and/or resize each of the six images to create viewable images that are 450 pixels wide in size. Next, crop and/or resize each of the six images to create thumbnail images that are 72 pixels wide. Next, crop and/or resize each of the six images to create thumbnail images that are 72 pixels wide. All of these images should be optimized and exported in the jpeg file format. All of these images should be optimized and exported in the jpeg file format. You should have 12 images when you are done. You should have 12 images when you are done. 6 big and 6 thumbnails 6 big and 6 thumbnails