1 / 25

By Xai Lao

Photoshop: How to Image Size a Photo for Web – Beginner’s Guide ICT 710 | Learning Technologies | November 2011 by Xai Lao . By Xai Lao. What is DPI or PPI.

alec
Download Presentation

By Xai Lao

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Photoshop: How to Image Size a Photo for Web – Beginner’s GuideICT 710 | Learning Technologies | November 2011by Xai Lao By Xai Lao

  2. What is DPI or PPI When working with digital photos, whether you download an image from the web or from a camera, every photo will have a specific DPI (Dots Per Inch) or PPI (Pixels Per Inch). Scanners, digital cameras and screens are all measured in PPI while printers are measured in DPI and both terms are used interchangeably by the pros and amateurs. Just so you know the difference. The rest of the tutorial will be referring to dip, however. We won’t go into the mathematic details of mega pixels and how resolutions are determined from mega pixels for the sake of keeping this tutorial simple for beginners.

  3. What is DPI or PPI (cont.) In short, DPI can represent the resolution of an image. The general idea is, the higher the starting DPI, the more likely you can tweak the DPI down to the appropriate setting. It’s best to convert from a higher dpi to a lower dpi than vice versa to prevent pixelating photos (photos with squary effects). Pixelated Photo (wrong) No Pixelation (correct) VS

  4. What is DPI or PPI (cont.) Depending on their resolution (dpi) it can affect a photo’s quality when sending it to print. So setting a high dpi is recommended when printing photos or large prints. Other times, setting a lower dpi is more suitable when it comes to the web. Common settings for print are between 100 dpi and 300 dpi depending on the printer. 300 dpi 200 dpi 100 dpi 72 dpi

  5. Why Bother About Image Size • Different situations calls for different dpi • Photos for Print (100-300 dpi depending on printers used) • Photos for Web (maximum of 72 dpi) anything higher will look the same as 72 • Many benefits to image size • Save hard drive space on a computer • Faster upload time for the web • Faster download time from the web • Get better results when printing a high resolution photo • Can speed up work process by working under lower image size setting

  6. Image Sizing Photos for Web (note: regardless if working on a PC or MAC, the procedures are similar) • Step 1 • Open Adobe Photoshop • File > Open > locate an image

  7. Image Sizing Photos for Web (note: regardless if working on a PC or MAC, the procedures are similar) • Step 2 • Your photo should now be visible, now enter image size menu • Image > image size

  8. Image Sizing Photos for Web (note: regardless if working on a PC or MAC, the procedures are similar) • Step 3 • Image size window pops up • Check - Constrain Proportions and Resample Image • Change the “Resolution” setting to 72 • Click “OK” button Set to 72 Checked

  9. Image Sizing Photos for Web (note: regardless if working on a PC or MAC, the procedures are similar) • Step 4 • Image will now be incorrect web format • Save your image • File > Save for web Save image

  10. Image Sizing Photos for Web (note: regardless if working on a PC or MAC, the procedures are similar) • Step 5 • Save for Web windowwill pop up • Choose “JPEG” • Click save and give it afile name • Your photo is now formattedfor web usage

  11. Quiz Time! Take your time and try to answer the questions correctly. 4 questions all multiple choice

  12. Question 1 What dip number should you save your photos when preparing it for the web? • 100 dpi • 300 dpi • 72 dpi

  13. Question 1 Incorrect Review “Why Bother About Image Size” slide to find the correct answer Click Here for next question

  14. Question 1 Correct Although it isn’t required for all images to be in 72 dpi for web, most screens can only display up to 72 dpi. So it would be meaningless to have a website full of 300 dpi mages used for background pictures. Click Here for next question

  15. Question 2 What does dpi stand for? • Dots per income • Dice per inch • Dots per inch

  16. Question 2 Incorrect Review “What is DPI or PPI” slide to find the correct answer Click Here for next question

  17. Question 2 Correct Dots per inch is also the resolution of an image. Click Here for next question

  18. Question 3 Every digital photo has a dpi or ppi number? • True • False

  19. Question 3 Incorrect Review “What is DPI or PPI” slide to find the correct answer Click Here for next question

  20. Question 3 Correct As long as photos are still digital files, they will always carry a dpi or ppi number. Click Here for next question

  21. Question 4 The “image size” option is under what menu in Photoshop? • File • Edit • Image • Layer

  22. Question 4 Incorrect Review “Image Sizing Photos for Web: Step 2” slide to find the correct answer End of Quiz Click Here to proceed

  23. Question 4 Correct The option can be found under the “Image” tab in photoshop End of Quiz Click Here to proceed

  24. Quiz Complete - Congratulations! Review Working with images for print requires a higher dpi setting than images that are for web Images for print are in the 100-300 dpi where web images are commonly just 72 dpi It is best to work off a higher dpi image and down convert it to a lower dpi than vice versa Photoshop is an easy tool to use when it comes to customizing and adjusting image sizes. You have just finished a quick beginner’s tutorial on how to prepare a image for the web. The next time you plan to use a image for the web, you’ll know the correct dpi setting to save each image under.

  25. Additional Links For more information you can visit these links • Cambridge In Colour website • http://www.cambridgeincolour.com/tutorials/image-resize-for-web.htm • Scanning Photos for Web • http://www.nicholsonprints.com/Articles/dpi.htm End of Presentation

More Related