by xai lao
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/1.jpg)
BY XAI LAO
Photoshop: How to Image Size a Photo for Web – Beginner’s Guide
ICT 710 | Learning Technologies | November 2011by Xai Lao
![Page 2: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/2.jpg)
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.
![Page 3: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/3.jpg)
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).
VS
Pixelated Photo (wrong) No Pixelation (correct)
![Page 4: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/4.jpg)
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
![Page 5: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/5.jpg)
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 72Many 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
![Page 6: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/6.jpg)
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
![Page 7: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/7.jpg)
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
![Page 8: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/8.jpg)
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
Checked
Set to 72
![Page 9: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/9.jpg)
Image Sizing Photos for Web
(note: regardless if working on a PC or MAC, the procedures are similar)
Step 4 Image will now be in
correct web format Save your image File > Save for web
Save image
![Page 10: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/10.jpg)
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 a
file name Your photo is now formatted
for web usage
![Page 11: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/11.jpg)
Quiz Time!
Take your time and try to answer the questions correctly.
4 questions all multiple choice
![Page 12: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/12.jpg)
Question 1
What dip number should you save your photos when preparing it for the web?
1. 100 dpi2. 300 dpi3. 72 dpi
![Page 13: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/13.jpg)
Question 1
Incorrect
Review “Why Bother About Image Size” slideto find the correct answer
Click Here for next question
![Page 14: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/14.jpg)
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
![Page 15: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/15.jpg)
Question 2
What does dpi stand for?
1. Dots per income2. Dice per inch3. Dots per inch
![Page 16: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/16.jpg)
Question 2
Incorrect
Review “What is DPI or PPI” slideto find the correct answer
Click Here for next question
![Page 17: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/17.jpg)
Question 2
Correct
Dots per inch is also the resolution of an image.
Click Here for next question
![Page 18: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/18.jpg)
Question 3
Every digital photo has a dpi or ppi number?
1. True2. False
![Page 19: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/19.jpg)
Question 3
Incorrect
Review “What is DPI or PPI” slideto find the correct answer
Click Here for next question
![Page 20: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/20.jpg)
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
![Page 21: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/21.jpg)
Question 4
The “image size” option is under what menu in Photoshop?
1. File2. Edit3. Image4. Layer
![Page 22: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/22.jpg)
Question 4
Incorrect
Review “Image Sizing Photos for Web: Step 2” slideto find the correct answer
End of QuizClick Here to proceed
![Page 23: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/23.jpg)
Question 4
Correct
The option can be found under the “Image” tab in photoshop
End of QuizClick Here to proceed
![Page 24: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/24.jpg)
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.
![Page 25: By Xai Lao](https://reader035.vdocuments.site/reader035/viewer/2022062501/56816735550346895ddbe247/html5/thumbnails/25.jpg)
Additional Links
For more information you can visit these links
Cambridge In Colour website http://www.cambridgeincolour.com/tutorials/image-res
ize-for-web.htm
Scanning Photos for Web http://www.nicholsonprints.com/Articles/dpi.htm
End of Presentation