JRN 440Adv. Online JournalismResizing and resampling

Monday, 2/6/12

Class Objectives

Lecture Resizing and Resampling

Homework P1 due Wednesday, 2/15, at 2:05 p.m.

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

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

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

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

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

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?

Features in Image Size Dialog Box (<Image <Image Size)

Resizing and Resampling checkbox

Checked = resampling Unchecked = resizing

This little box is VERY powerful!

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

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

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

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”

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!

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

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

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)

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.

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

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

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

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.

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.