JRN 440 Adv. Online Journalism Resizing and resampling

1. JRN 440Adv. Online JournalismResizing and resampling Monday, 2/6/12

2. Class Objectives • Lecture • Resizing and Resampling • Homework • P1 due Wednesday, 2/15, at 2:05 p.m.

3. About raster images • Raster images are output device dependent; you should know your target output device before you start your project • Another good thing to know is the dimensions of your file • For print, how big will your raster image be on the page • 5” x 7”, 8 x 10” … • For web, how big will it be on a website • 640 x 480 pixels

4. About raster images • You also want to set your resolution to be compatible to your output device • Resolution= Number of pixels in each unit of measurement • Check your home printer, ask your commercial printer (150 or 300 dpi for color and grayscale images, 600 dpi for black and white images) • Web or digital presentation (72, 96 ppi) • Remember that if you are ultimately going to print something, do not trust what you see on your monitor for resolution • If you do or do not change the resolution, the image will still appear sharp on the monitor

5. Attributes of Raster Images • Resolution • Number of pixels in each unit of measurement (dpi, ppi) • Dimensions • Refer to number of pixels wide and tall (we say width and height) • 640 x 480 is normally for a standard computer screen • Can be any size you specify • Problem is that dimensions of screens are not standardized in new products yet • Think about screen sizes of various cell phones • What is dimension size limited to? • Your patience, amount of storage space you have, limitations /capabilities of capturing and output devices

6. Image Size vs. Canvas Size • Image Size • Process of resampling (adding or deleting pixels) • Canvas Size • Changes the “paper size” around the image • Also adds to overall size (memory) of file

7. Features in Image Size Dialog Box (<Image <Image Size) • Pixel Dimensions • The Image Dimensions (width and height) • Under Document Size • Image Resolution • Number of pixels in each unit of measurement • Under Document Size

8. Features in Image Size Dialog Box (<Image <Image Size) • Image Size • Mb, kb • Why do you care about this? • Is your image going to a website (may be downloaded) • Do you carry multiple images around on a jump drive? • Does your client want you to e-mail them an image?

9. Features in Image Size Dialog Box (<Image <Image Size) • Resizing and Resampling checkbox • Checked = resampling • Unchecked = resizing • This little box is VERY powerful!

10. Resizing • Image Resizing: NOT changing the number of pixels • Changing the size the raster image will print without changing the number of pixels in the image. • Changing the resolution, not the number of pixels • Overall file size (mb) does not change • Think of it as a “tradeoff” between resolution and dimensions

11. Resizing: How to do • In Image Size Dialog Box • Uncheck the Resample box • Notice what gets grayed or blocked out • If you have a large lo-res file, increasing your resolution will decrease your width/height • But overall file size (mb) will remain the same

12. Resizing your Image • UNCHECK the “Resample Image” box • Resizing let’s you make a trade off between resolution and dimensions • So if you have a large and lo-res image, you can also have a small and high-res image

13. Resampling • Image Resampling: Changing the number of pixels in the raster image. • Can change it all, resolution, document width and height/ pixel dimensions • Overall file size (mb) does change • Think of it as “silly putty”

14. Resampling: How to do • In Image Size Dialog Box • Check the Resample box • Everything can now be changed. • But, again, be careful! Your monitor won’t show you what’s happening to your file!

15. Ways to Resample your Image • Resampling: changing the # of pixels in an image • <Image < Image Size • What do you want to change? • Keep Resample Image Box checked • Resolution- increase or decrease • Document Size (think of it as print size) – increase or decrease • Changing either one of these also changes overall file size (kb, mb) of image • Which is confusingly placed on top of Image Size box next to Pixel Dimensions

16. Ways to Resample your Image • Resampling: changing the # of pixels in an image • <Image < Image Size • What else do you want to change? • Keep Resample Image Box checked • Pixel Dimensions • Are used in building images for web pages • The display size of an image on-screen is determined by the pixel dimensions of the image plus the size AND the setting of a monitor • 15 inch monitor displays 800 pixels horizontally by 600 vertically • Changing this will also change the overall file size (kb, mb) of image

17. Calculations and Resampling • With Resample box checked • If you change the resolution, you change the overall file size. BUT, you keep the dimensions the same • If you increase resolution, your file size will increase by the square of the value • Resolution (x) =File size (x2) • If I double my 72 ppi resolution to 144 ppi, the file size will quadruple (2 squared or 2 x 2) • If I triple my 72 ppi resolution to 216, the file size will be 9 times as large (3 squared or 3 x 3)

18. Details when Resampling your Image • <Image < Image Size • What do you want to change? • Keep Resample Image box checked • Constrain Proportions box keeps the image from being distorted • Scale Styles box determines whether or not Layer Styles are scaled along with the layers they modify. • Has no meaning if an image that does not use Layer Styles.

19. Up or Down Sampling • General rule- don’t upsample • Why? Can’t add details that weren’t there in the first place • Silly putty comparison. • Downsampling is better since it throws away data • Three methods (under ‘Resample Image’ box) • Nearest neighbor- fastest but least accurate • Bilinear • Bicubic- Creates best effects but takes the longest

20. 3 Methods of Interpolation • When you resample, Photoshop fills in missing pixel data or replaces groups of pixels using a Mathematical approximation process called Interpolation • Nearest Neighbor • Fastest and least accurate • Copies the value of one pixel next to existing one • Then uses that value to create a new pixel

21. 3 Methods of Interpolation • Bilinear • Medium method in accuracy and speed • Averages 4 neighboring pixels and then adds that average value to the image. • Then uses a less sophisticated algorithm to smooth the transition between the added pixels and existing pixels • Bicubic (3 versions of) • Creates best effects but takes the longest • Averages the color or gray values of the 16 surrounding pixels and adds that average value to the image. • Then uses a calculation intensive algorithm to produce the smoothest tonal gradation around the image • Sharper for downsampling; smoother for upsampling

22. Image Size Dialog Box Generally Speaking • Resampling images by changing the width and height values in the Pixel Dimensions section of the Image Size dialog box is primarily used when optimizing images for the web. • Resampling or resizing images by changing the width, height and/or resolution values in the Document Size section of the Image Size dialog box is used for print.

23. Summary • Image resizing keeps the number of pixels in your image the same and affects only how large your image will print (the Document Size). • Image resampling physically changes the number of pixels in your image (the Pixel Dimensions). • The Resample Image option at the bottom of the Image Size dialog box controls whether you're resizing or resampling an image. • With Resample Image checked, you're resampling the image. With it unchecked, you're simply resizing the image. • It is always best to resample down.