IMAGE SIZING AND RESOLUTION MyGraphicsLab: … formats are an alphabet soup of acronyms. This A-Z glossary will help later, when we list which formats work best for different kinds

IMAGE SIZING AND RESOLUTION

MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication

Copyright © 2013 MyGraphicsLab / Pearson Education

OBJECTIVES

2.1 Demonstrate knowledge of image resolution, image size, and image file format for web, video, and print.

2.6 Understand key terminology of digital images.

Copyright © 2013 MyGraphicsLab/Pearson Education

This presentation covers the following ACA Exam objectives:

IMAGING BASICS: PIXELS AND BITS

Adobe Photoshop produces only raster images, also called bitmap images.

Bitmap images are made up of individual pixels (picture elements) of information placed on a grid, which a computer understands.

Photoshop can import other types of files, such as Portable Document Format (PDF) and path-based vector files, produced by Adobe Illustrator and other drawing programs.

In Photoshop, other types of files are rasterized (translated into pixels) on export.


IMAGING BASICS: RESOLUTION AND OUTPUT

You’ve probably experienced one or both of these situations: Some images look great

onscreen but are broken up and “pixelated” when printed.

Most email and web images open quickly, while some take forever to download and open.

If you suspect a connection, you are right: The connection is called image

resolution, and it’s different for different output types.

Screen resolution doesn’t print well, while print resolution creates huge file sizes.


IMAGING BASICS: IMAGE RESOLUTION

Image resolution is not to be confused with monitor resolution or printer resolution. See Adobe Photoshop CS6 Classroom in a Book, pages 47–48, for a clear explanation of the differences.

Image resolution is the pixel density of an image, measured in pixels per inch (ppi) of image.

Image resolution is closely related to image file size, measured in KB or MB.

The more pixels per inch, the larger the image file size.

Print output needs higher image resolution than screen output.


250 ppi; 29.4 MB file

IMAGING BASICS: SCREEN OUTPUT

Screen output is intended for websites, email, video, or small-screen presentations.

Because the output is another computer screen, the image resolution can be close to the monitor resolution.

Monitor resolution is the number of pixels a monitor can display per inch (ppi). The base is 72 ppi for Macs

and 96 ppi for PCs. Display settings can increase

monitor ppi and make the same image appear smaller.

72 ppi is the standard image resolution for screen output.


IMAGING BASICS: PRINT OUTPUT

Print output is intended for desktop printers or commercial printers.

Printer resolution is measured in ink dots per inch (dpi) on the page—monitors units are pixels per inch (ppi).

Printers require much more image data, and therefore higher image resolutions, than monitors to make clear, crisp images.

Standard image resolutions for print output are: 240 ppi for desktop printers 300 ppi for commercial printers


IMAGING BASICS: RESAMPLING

Resampling is Photoshop’s process of determining which pixels can be deleted, or added, with least effect on the image, in a process called interpolation.

Resampling down to a lower image resolution deletes pixels but usually retains image quality.

Caution: Resampling up to a higher image resolution adds pixels and always results in a lower-quality image.

When choosing images for print especially, make sure the image resolution and document size are close to your output needs.


IMAGING BASICS: DOCUMENT SIZE

There is one more piece to the imaging puzzle. Document size is the

dimensions of the output image; where image resolution is measured in pixels, document size is in inches.

Monitors can only display at the monitor resolution, regardless of the image resolution.

For screen output, actual pixels (100% view) will be close to the document size on the monitor.

For high-resolution print output, actual pixels (100% view) will appear much larger on the monitor than the document size.


IMAGING BASICS: PHOTOSHOP’S IMAGE SIZE DIALOG BOX

Use the Image Size dialog box to alter the dimensions or resolution of a file.

When the Resample Image option is not selected: The Document Size fields are

linked (note the chain icon). If you change one Document

Size value, such as resolution, the other two values change automatically.

The Pixel Dimensions values stay the same; no pixels are added to or deleted from the file.


IMAGING BASICS: RESAMPLING IN PHOTOSHOP

When the Resample Image option is selected in the Image Size dialog box, the Pixel Dimensions fields and the Document Size fields are linked: Increasing a value in any field

will add pixels to the file. Decreasing a value in any field

will eliminate pixels from the file.


IMAGING BASICS: RESAMPLING WHILE CROPPING

You can change the resolution while cropping an image: 1. Click the Crop tool. 2. In the Options bar, click on the

second pop-up menu, and choose Size & Resolution.

3. Experiment with different sources, image dimensions, and resolutions, and click OK.

4. Adjust the crop handles to define the crop boundaries.

5. Press Return/Enter to crop. Note: This tool uses resampling, so any increase in resolution will degrade the image.


IMAGE BASICS: VECTOR GRAPHICS

Unlike bitmap images, vector images are not made up of pixels. Instead, they are made up of points, curves, and paths defined by mathematical objects called vectors.

Also unlike bitmap images, objects that make up a vector image can be scaled up or down with no loss in image quality. For this reason, they are often used for type and logos.

See Adobe Photoshop CS6 Classroom in a Book, page 208, for a good explanation of the differences.

Photoshop CS6 has a basic set of vector tools, including the Pen tool and custom shapes. You can also import a vector drawing as a Smart Object, which remains editable in the program that created it.

Copyright © 2013 MyGraphicsLab / Pearson Education

IMAGE BASICS: FILE FORMAT GLOSSARY (1 OF 5)

File formats are an alphabet soup of acronyms. This A-Z glossary will help later, when we list which formats work best for different kinds of output. BMP: a format with no compression,

which preserves image data but creates large file sizes

Cineon: used in the Kodak Cineon Digital Film System, which transfers images originated on film to the Cineon format and back to film with no loss of image quality

DCS (Desktop Color Separations): a version of the standard EPS format that lets you save color separations of CMYK images


Insert 02-01-slide14-18_AALAVGI0.jpg


DICOM: the most common standard for receiving medical scans

DNG: the Adobe Digital Negative format, meant to be an industry-wide standard format for raw image data

EPS: a standard format used to transfer PostScript artwork between applications; unless it is imported as a Smart Object, Photoshop rasterizes vector graphics on opening

GIF: a “lossless” compression format with a limited color palette more suited to illustrations; supports animation and background transparency




JPEG: a common standard for compressing photographic files; image data is lost each time you edit and save in JPEG format (“lossy” compression format)

Large Document Format (PSB): preserves layers and most plug-in features for files up to Photoshop’s limit of 300,000 pixels in width or height

OpenEXR: a film format with high color fidelity and a dynamic range suitable for use in motion picture production




PDF: created by Adobe, the Portable Document Format allows readers to view accurate electronic versions of documents, even if they don’t have the creation application

Photoshop Raw: a file format for transferring raw-data images between applications and computer platforms; not to be confused with Camera Raw

PNG: a newer “lossless” compression format; supports millions of colors, multiple bit depths (8, 24, 32), 24- and 32-bit alpha channels, and gradated transparency but with larger file sizes than JPEG; not all browsers support PNG format




PSD: native Photoshop format, which we recommend for most image editing tasks

Targa: designed for systems using the Truevision video board; commonly supported by MS-DOS color applications

TIFF: a standard format for exchanging files across applications, computers, and scanners; creates large files with the option of “lossless” compression; can be resaved without quality loss


COMMON FILE FORMATS: PHOTOGRAPHS

The following file formats are best for photographic images: PSD TIFF JPEG DNG See Adobe Photoshop CS6

Classroom in a Book, page 140, for an explanation of PSD, TIFF, JPEG, and DNG formats.

PDF The following photographic formats are for specialized uses: Photoshop Raw DICOM: for medical scans Large Document Format (PSB): for

billboards and banners and 3D texture files


COMMON FILE FORMATS: WORD AND POWERPOINT

Many older versions of Microsoft Word and PowerPoint are limited to images in the following formats: PNG: With PNG-24 format,

transparencies can appear as a black background.

BMP The latest versions of Word and

PowerPoint can also import images in the following formats: JPEG Photoshop (PSD)


COMMON FILE FORMATS: WEB IMAGES

JPEG: best for photographic images and complex illustrations

GIF: best for images with large blocks of solid color, for web animations, and for background transparency

PNG: a kind of hybrid; creates higher-quality images than GIF, but larger file sizes than JPEG


COMMON FILE FORMATS: COMMERCIAL PRINTING

Most commercial printers accept documents in the following formats: DCS (Desktop Color

Separations) EPS (Encapsulated PostScript) PDF (Portable Document

Format): most common PSD (Photoshop Document) TIFF


COMMON FILE FORMATS: VIDEO

OpenEXR: a film format with high color fidelity and a dynamic range suitable for use in motion picture production

Cineon: used in the Kodak Cineon Digital Film System, which transfers images originated on film to the Cineon format and back to film with no loss of image quality

Targa: designed for systems using the Truevision video board and commonly supported by MS-DOS color applications


WEB IMAGES: OPTIMIZING OUTPUT

Optimizing images for the web balances two competing criteria: Small file size (and thus fast

downloading) Sharp, clear image quality

Photoshop’s web-optimization tools, in the Save for Web dialog box, do most of the work for you, but you still need to assess which settings are best for each image.

See the video Saving Images for the Web for a good introduction to Save for Web.

See Adobe Photoshop CS6 Classroom in a Book, pages 349–351, for an exercise using Save for Web.


WEB IMAGES: OPTIMIZE AN IMAGE IN GIF FORMAT

1. With a file open, choose File > Save for Web.

2. In the dialog box, click the 2-Up tab.

3. Choose a GIF preset from the Preset menu, or choose GIF from the second menu and custom settings from the other menus.

4. Select Convert to sRGB to convert the colors to the standard profile for web browsers.

5. Click Save, keep the default name, choose a location, and then click Save again.


WEB IMAGES: OPTIMIZE AN IMAGE IN JPEG FORMAT

1. With a file open, choose File > Save for Web.

2. In the dialog box, click the 2-Up tab.

3. Choose a JPEG preset from the Preset menu, or choose JPEG from the second menu and custom settings from the other menus.

4. Optional: Select Optimized to produce a smaller file size.

5. Select Convert to sRGB to convert the color to the standard profile for web browsers.

6. Click Save, keep the default name, choose a location, and then click Save again.


OPTIMIZING IMAGES FOR PRINT: COLOR

Unlike monitors, which use mixtures of red, green, and blue (RGB) lights to produce an image onscreen, printers use mixtures of inks—cyan, magenta, yellow, and black (CMYK)—to produce an image on paper.

A continuous-tone printed image is made up of rows of tiny dots of CMYK inks.

Desktop printers convert RGB images to CMYK as they print.

Commercial offset printers require you to convert RGB images to CMYK mode.


OPTIMIZING IMAGES FOR PRINT: DESKTOP PRINTERS

Most desktop printers use inkjet or laser technology to apply the ink dots.

Printer resolution for desktop printers is measured in ink dots per inch (dpi) on the page.

The higher the printer’s dpi, the better the quality of the printed image.

See the video Printing Images for how to scale your image, add descriptions, change the color handling, and print multiple copies to a desktop printer.


OPTIMIZING IMAGES FOR PRINT: COMMERCIAL PRINTERS

Offset printing presses use four halftone screens to apply dots to paper, one for each ink color.

The fineness of the dots is determined by the screen’s line screen frequency, measured in lines per inch (lpi) of ink dots.

The higher the lpi, the finer the ink dots, and the higher the quality of the printed image.

With digital technology, halftone screens are now simulated by computer software, but the science behind it is the same.


OPTIMIZING IMAGES FOR PRINT: COLOR MANAGEMENT

The RGB color space of monitors is best for editing images, but printers require CMYK, which has fewer colors.

Every device — every monitor, printer, scanner — interprets color differently.

To avoid unwanted “color shifts,” basic color management is needed.


OPTIMIZING IMAGES: VIDEO

Video has some unique technical requirements, which differ depending on the final viewing device (TV, HDTV, website, film screen, etc.)

Photoshop’s Film & Video preset (for a new file) is a good place to start.

To create a video file, you render it (File > Export > Render Video); rendering computes all the video edits you made in Photoshop.

See Adobe Photoshop CS6 Classroom in a Book, pages 271–274, for an exercise in creating a video from several mobile clips.


IMAGE SIZING AND RESOLUTION MyGraphicsLab: … formats are an alphabet soup of acronyms. This A-Z glossary will help later, when we list which formats work best for different kinds

Documents