Resize/Crop Photos for the Web

Transcription

1 Outline Resizing photos for the web... 1 Understanding resolution... 1 Photo size guideline for web pages... 1 Things to keep in mind when resizing/cropping photos... 1 Opening Photos in Photoshop... 2 Reduce size of photo for posting on web change resolution... 2 Save a copy of resized photo for the web... 3 Resizing photos for print or purposes... 4 Cropping... 4 Crop to a specific width/height... 5 Resizing photos for the web Today s digital cameras take pictures in high resolution for nice quality prints. High resolution means more detail is stored so image quality is higher. This means the photo size is larger. If you post a photo on a website without reducing its size, download time on your page will be affected. Photos should always be resized if posting on a webpage or sharing via . Understanding resolution Resolution consists of a number of pixels or dots per inch (ppi/dpi). One pixel is a tiny little square. Photos are made up of many, many pixels, dependent on the camera being used. Digital cameras have a certain number of available megapixels for photo taking. One megapixel equals 1 million individual pixels, so an 8 megapixel camera shoots pictures that contain up to 8 million pixels! Photo size guideline for web pages Images for the web should be reduced to a resolution of 72 dpi to reduce file size and download time. Images posted on a web should never be larger than 800x600 pixels. Things to keep in mind when resizing/cropping photos Always keep your original photo when resizing/cropping. When you resize/crop, you are deleting pixels from your original photo! Save a new version for purposes of posting on the web. Office of Technology, Bloomsburg University Page 1 of 5

2 Photos from digital cameras are stored using JPEG format. JPEG is known as lossy compression format. What this means is that each time you edit and save your picture you will lose detail and clarity. Try to do all editing and resizing in one session then save the photo just once. Again, keep your original! Opening Photos in Photoshop Open Photoshop. You may open photos several different ways example: 1) Right click on photo and choose open with find Photoshop and open with Photoshop. 2) Having Photoshop open, click File Open. Browse to photo and open. Reduce size of photo for posting on web change resolution Open your photo in Photoshop do all necessary photo editing (lightening/darkening/redeye removal) prior to changing the size! Once ready to change size, click on Image across the top menu bar Choose Image Size. 1) Put a checkmark in Constrain Proportions and Resample Image. 2) Change the resolution to 72. That will lower the dimensions listed under the Pixel Dimensions section. 3) If necessary, adjust width/height under Pixel Dimensions area. For posting on the web, never be larger than 800x600 pixels Click OK to return to Photoshop main menu. After applying changes, you will see original file size in parentheses (was 9.66M) and what new file size is (570.1K). Explanation of options: Scale styles Scales any layers along with original image. (Not necessary when doing resizing only.) Constrain Proportions Keep checkmarked in most situations to keep width/height ratio consistent. Example: When you change the width value, the height automatically adjusts, proportionate to photo size. Uncheck to stretch or squish. Resample Image When you reduce resolution, pixels are deleted. When you increase resolution, making a photo larger, resampling adds pixels. Resample Image is set to default of Bicubic that usually works great. You may want to try Bicubic Sharper to see if it sharpens your picture. Office of Technology, Bloomsburg University Page 2 of 5

3 Save a copy of resized photo for the web Click File Save for Web & Devices. Use the 4-Up tab to see four different views (various quality levels/download times). See the one you like best. Click Save. Choose file save location and name the file (don t overwrite your original!) You may click and hold down the left mouse button on photo to move around. Select JPEG here it may be set on GIF. Look at Quality level and download time! 28.8 Kbps (kilobits per second bandwidth) refers to worst case scenario, someone viewing photo with very slow dial up internet. Click on photo you wish to use for saving for the web, and click Save. Use a different name in so you do not overwrite your original work. Office of Technology, Bloomsburg University Page 3 of 5

4 Resizing photos for print or purposes At times you may wish to resize photos to share via . In those instances, you would not change the resolution. See tutorial for resizing photos on the Outlook support page. Cropping Open photo do all necessary photo editing prior to cropping! Use the crop tool to get rid of unwanted areas in a photo. The crop tool is located on the Toolbox as circled in red below. (If the Toolbox is not visible in your Photoshop, click Window on top blue menu bar and choose Tools.) After choosing crop tool, click and drag until you see an outline around the area you wish to crop. After item is selected, you can move the selection handles around to change dimensions. You can also click on the cropped space and move it around if you re not satisfied with the selection. When ready to crop, press Enter. If you change your mind and want to cancel the crop, press the Esc key! Cropping reduces image size and lowers resolution! When back at the main menu, click File Save As. Specify file name (don t overwrite original photo). Office of Technology, Bloomsburg University Page 4 of 5

5 Crop to a specific width/height If you had a specific width/height you wanted for the cropped image, enter the dimensions in the top options area after clicking on the crop tool. Then crop as noted above. It will crop to the dimensions you desire. Office of Technology, Bloomsburg University Page 5 of 5