1 Module 4: Tools and Techniques 1 Module 4: Tools and Techniques Instructor: Doughlas Remy

1Module 4: Tools and Techniques

1

Module 4:Tools and Techniques

Instructor: Doughlas Remy


Topics Covered in This Module

• Section 1• Analog-to-digital conversion• Bit groupings• Bit depth• Color and alpha channels• File formats• Quiz

• Section 2• Image pixels• Screen pixels (grid cells)• Understanding zooming• Anti-aliasing• Why “treeware” is here to stay.• Quiz

• Section 3• Monitor screen sizes and aspect ratios• Display resolution• Screen resolution and pixel size• Using the Image Size dialog box in

PhotoShop• Resampling: Interpolation methods• Printer resolution (DPI), screen frequency

(LPI), and monitor resolution (PPI).• Quiz

• Section 4:• Bitmaps and vector images• Type fonts• Trapping• Quiz

Answer Sheet for Printing


• Analog-to-digital conversion

• Bit groupings

• Bit depth

• Color and alpha channels

• File formats

Section 1


An analog signal is an effect of electromagnetic (EM) radiation.

The Analog Signal


Conversion of Analog to Digital

When amplitude reaches a certain threshold, the “off” signal is switched to its “on” state.


Conversion of the Digital Signal to Binary Code

The “off” state of the signal is assigned a value of 0 (zero) in the binary system that computers use. The “on” state has a value of 1.


There are 28 (256) ways in which the ones and zeros can be arranged in a byte of data. Therefore, a byte can represent 256 values. These values could be used to represent, e.g., shades of grey.

Values Possible in Groupings of Bits

1 1 1 1 0 0 0 1

1 bit

1 byte


Other groupings of bits are:24 (224 = 16,777,216 values)32 (232 = 4,294,967,296 values)64 (264 = 18,446,744,070,709,551,616 values)

Values in Groupings of Bits

1 1 1 1 0 0 0 1 0 1 1 0 0 0 1 0

This is a grouping of 16 bits, which can represent 65,536 values (216).

Next, to understand the concept of bit depth—the number of color values that a pixel (picture element) can represent—we must first understand color channels.


All four channels of this RGB image are visible. (The top one

is the “composite” channel.)

Color Channels (in Photoshop)


Here, only the green and the blue are visible.



Here, only the red and the green channels are visible.



This screen capture shows the CMYK channels (composite

channel at top).


Notice what happens when we remove the black.


Here, only the cyan and magenta are visible.



In most cases, CIELab, RGB, grayscale, and CMYK images contain 8 bits of data per color channel.

Color model # of channels (except

Composites)

Bits per channel

Bit Depth Possible Values

CIELab 3 8 24 16.8 million

RGB 3 8 24 16.8 million

Grayscale 1 8 8 256

CMYK 4 8 32 4 billion

# Color Channels x Bits/channel = Bit Depth

Remember that 8 bits can produce 256 values, or 28.

16,800,000 is 2563.


In addition to a color mode’s default channels, you can also create:

• Alpha channels. For storing selections as 8-bit grayscale images to use as masks. (Masks let you manipulate, isolate, and protect specific parts of an image.)

• Spot color channels. You can create spot color channels to specify additional plates for printing with spot color inks.

An image can have up to 24 channels, including all color and alpha channels.

Creating Extra Channels


Color channels (including spot channels) are preserved when you save the image.

Alpha channels are preserved only when you save the image in one of the following formats:

• Photoshop• PDF• PICT• TIFF• Raw (from your digital camera)

(not JPEGs, PNGs, or GIFs)

Saving Color Channels


Photographic images(rich color or gradations of hue)

Logos, line art(limited color)

Properties Continuous tones, 24-bit color or 8-bit grey, no text, few lines and edges

Solid colors, up to 256 colors, with text or lines and sharp edges

Best quality for archived master

TIF or PNG (no JPG artifacts) PNG, GIF, or TIF (no JPG artifacts)

Smallest file size JPG with a higher quality factor can be decent, but JPG is of questionable quality for archiving master copies.

TIF (with LZW compression), GIF, or PNG

Maximum compatibility (PC, Mac, UNIX)

TIF, JPG (the simplest programs may not read TIF LZW.)

TIF (without LZW compression) or GIF

Worst Choice 256-color GIF: Limited color; larger file than 24-bit JPG.

JPG. Compression adds artifacts, smears text and lines and edges.

Best Image File FormatsExerciseIdentify the following:

1. The worst choice for a photographic image.

2. The best choices for logos and line art.

3. The best cross-platform compatibility for a photograph.

4. The smallest file size for a photograph.

LZW is a highly efficient compression method.


PhotoShop normally works with images at 8 bits per channel (bpc), but it can also work with 16-bpc and 32-bpc images. The higher bit depths provide finer distinctions in color but result in much larger file sizes. In addition, some Photoshop tools* are not available for the higher bpc images.

Note: 8 bpc is all you need for output to print. If you are working with a 16-bpc or 32-bpc image, click Image, click Mode, and then click to select 8 Bits/Channel.

Bit Depth and File Size: Working with High Dynamic Range (HDR) images

*E.g., the Art History Brush tool, the Extract and the Pattern Maker features, and some filters.


1. The digital values of one and zero are assigned to a signal based on its varying…

a. speedb. amplitudec. frequencyd. wavelength

2. A grouping of 8 bits gives you____ values.

a. 8b. 16c. 64d. 256

3. The term “_____” refers to the number of bits used to display or to print a pixel.

a. aspect ratiob. binary weightc. byte sized. bit depth

Section 1 Quiz

7. Which of the following file formats will save an alpha channel in Photoshop?

a. JPEGb. Photoshopc. TIFFd. GIF

8. The best file format(s) for an archived master is/are…

a. GIFb. JPEGc. TIF d. PNGe. PDF

9. A ___ is the worst choice for line art or logos.

a. GIFb. JPGc. TIFd. PNG

10. The optimal setting for output to print is

___ bits per channel.a. 8b. 16c. 32

4. Which of the following color models has the most color channels in Photoshop?

a. CIELabb. RGBc. Grayscaled. CMYK

5. If a color model has three color channels and uses 8 bits per channel, then its bit depth is…

a. 32b. 16c. 24d. 256

6. In Photoshop, channels may also be used for storing…

a. the document historyb. pathsc. masksd. spot colors

Instructions: More than one answer may be correct. Use the highlighter to mark your options. (Right-click anywhere, click Pointer Options, and then click Highlighter. When you finish, restore the arrow pointer.)


• Image pixels

• Screen pixels (grid cells)

• Understanding zooming

• Anti-aliasing

• Why “treeware” is here to stay

Section 2


The digitalized photographic image is a grid of picture elements, or pixels. These pixels are defined in the binary code of your computer and only become translated into visible points of light when you turn on your monitor and open your image file.

In other words, pixels themselves cannot be described in terms of size until they are represented on your monitor’s screen. Before that, they are only code.

(By using an image editing application such as Photoshop, you can “zoom in” to edit individual pixels if desired.)

What is a pixel, really??


What is a pixel, really??To get a bit more technical,…

You can think of a pixel as the smallest complete sample of an image, either before or after output to print or screen.

When How the pixel is expressed Example

Before output Electromagnetic waveforms(e.g., phone lines to computer, computer to CRT)

Digital values 0010100111001001

After output Dots (or groups of dots*) on a printed page

(*A 600 dpi inkjet printer might print a 200 ppi image.)

Cells, parts of cells, or groups of cells* in the screen grid of a computer monitor

(CRT [cathode ray tube] or LCD [liquid crystal

display])(Note: These cells are sometimes called “screen

pixels.”)Triads of CRT cells


Monitor technology

CRT LCD

Color quality Best OK

View from any angle Yes No

Power consumption More Less

Screen flicker More Less

Weight Heavy Light

Footprint Large Small


The inside of the screen is coated with red, green, and blue phosphors that glow

when struck by the electron beams.

Screen Pixels (Grid Cells)

Three cathodes (heated filaments) produce a stream of electrons

(negative)

The anode, with a positive charge, attracts the

electrons from the cathode.

How a CRT Monitor* Works (1)

Copyright Doughlas Remy 2007

The inside of the tube is coated with a conductive material.

The red line repre- sents the grid through which the beams pass before they strike the

phosphors.

Shown here are three electron beams, color-coded to indicate the color of the phosphor dot they are aimed at.*These diagrams illustrate the kind of CRT that uses a

“shadow-mask” grid. Another type uses an “aperture grill,” which we’ll describe shortly.



How a CRT Monitor Works (2)

cathodes anode

electron beams(color coded)

The electron beams move back and forth across the back of the CRT screen, from the top rows to the bottom ones. This movement is called scanning.

Beam scanning moves across

each successive row from top to

bottom.

• CRT monitors: Progressive scanning• CRT TV screens: Interlaced scanning

(two simultaneous scans of alternate rows: better for analog video). For more information, click here.

Refresh rate: The number of times in a second that the display hardware draws the data that it is being given. (Usually around 60-100, expressed as 60-100 Hz) Larger monitors require the higher ranges. For more information, click here.

Screen flicker: • Caused by a low refresh rate. (low relative to the monitor size)• May cause discomfort, headaches.



Note LCD monitors operate differently than CRTs:• No scanning• No refresh rate per se.

LCDs use “shutters” to control illumination from a backlight that is always on. These shutters allow the amount of RGB light to vary. (For example, a juxtaposition of 100% red, 100% green, and 100% blue produces white.)

However, the shutters change their configuration at a rate of around 60Hz. This is called the “frame rate.” In addition, the backlight does pulse on and off, typically at ~200Hz. So the LCD also produces a kind of flicker, but not for the same reasons as the CRT does.




The metal grid through which the RGB beams pass on their way to the phosphor coating is called a shadow mask.

The shadow mask consists of very small holes arranged in triangular formations (triads). The RGB beams pass through these holes to strike the phosphors. The triad allows the round holes to be packed in more tightly than they would be in a vertical/horizonal grid.




Aperture Grills (an alternative CRT technology)

The letter “e” as shown on an aperture grille CRT (magnified).

From Wikipedia.

Aperture grilles were developed for TV monitors in the late 1960s by Sony under the Trinitron brand name. They were once thought to be superior to shadow-masks, but then shadow-mask technology was improved to deliver equal or better quality. Now, LCDs are challenging both technologies and are rapidly replacing CRTs altogether.

Aperture grilles consist of fine vertical wires that separate the different colored phosphors into strips. The electron beams fired from the three guns at the back of the monitor strike phosphors of the appropriate color.

Aperture grille CRTs are flatter and can achieve higher resolutions than shadow-mask ones, but they also use two horizontal stabilizing wires which are visible and annoying to some users.



Note In LCD monitors, RGB liquid crystals are not arranged in triangles. They are arranged in a vertical/horizontal grid.

Because the liquid crystals are so small, the RGB values appear to merge, creating millions of colors per RGB triad.

Wikipedia’s logo as seen on an LCD monitor.




Dot pitch is a measurement of the space between the triads.

Image sharpness increases with density of these dots. When shopping for a monitor, look for the dot pitch specs.






The coating on the inside of the screen consists of one phosphor dot for each hole in the shadow mask. Precise positioning of the mask allows each electron beam to strike the phosphor dot of the correct color.

Because the triads are so small (72 per linear inch), each triad is perceived as a single colored screen pixel.

Phosphor dot1 triad = 1 screen pixel





Notice that the arrangement of “pixels” (RGB triads) is hexagonal. (The six larger triangles, plus the one in the center, fit into a hexagon.)

This is just one of several ways of representing pixels. Photoshop uses these hexagonal groupings to represent the pixels as squares. (Because of the fineness of the grid, the eye may be tricked into seeing straight lines.)

This is not a screen pixel. It is an image pixel that is displayed by using roughly 250 screen pixels.


Image Pixels vs. Screen Pixels

The pixels that form a digitized image (e.g., a JPG displayed on a Web page) may or may not be in a one-to-one correspondence with screen pixels.

Each RGB triad = one “screen” pixel

Ratio of screen pixels to image

pixels

Image resolution One screen pixel displays___image

pixel(s).

1:1 72 ppi 1

1:2 144 ppi 2

2:1 36 ppi 1/2

A "screen pixel" (or grid cell) can display a single image pixel at any ratio, e.g., 1:1, 1:2, or 2:1.


Setting the ppi Ratio for your Image

If your image is to be used only for Web output, set your image resolution (in PhotoShop) to match that of your monitor (usually 72 ppi). This will keep file size to a minimum. (I.e., The monitor can’t use the extra pixels; it will just “average” them.)

If your output is to print, 300 ppi is a good choice, but always check with the printers beforehand.

Ratio Resolution One screen pixel displays___image

pixel(s).

1:1 72 ppi 1

1:2 144 ppi 2

2:1 36 ppi 1/2

Best for Web output

Image does not suffer, but file size is needlessly large.

Image loses precision, clarity.

For Web output:


Zooming in Microsoft Office Applications

Image A (a JPEG) is 72 ppi

and is shown here at a screen-to-

image ratio of 1:1.(It is 1” square)

To simulate the effect of zooming, image B has been scaled up to 4” x 4” in PowerPoint.

Note the following:

• Image A uses 5184 screen pixels; Image B uses 82,944 screen pixels. (Size ratio = 1:16)

• You can get the same effect by using the PowerPoint Zoom tool.

• Image B does not show the individual pixels of the original JPEG. PowerPoint has “smoothed” them through mathematical algorithms—sampling, averaging, etc.

A B

What happens when you “zoom into” a bitmap image in a typical MS Office application?

Scaled image, simulating zoom effect.


Screen capture of zoomed image in

PhotoShop

Zooming in PhotoShop

Image A (72 ppi, shown here at a screen-to-image

ratio of 1:1.)(It is 1” square)

A C

What happens when you “zoom into” a bitmap image in an image-editing application such as PhotoShop?

Image C was not made by scaling image A in Powerpoint. It is a screen capture of image A at 400%* magnification in Photoshop.

Notice the individual pixels. (Photoshop allows you to edit single pixels, whereas Powerpoint does not.)

This image, like image B, uses 82,944 screen pixels. But the image that is represented is a screen capture showing only 5,184 pixels.

B

Compare the “smoothed”

enlargement.*The magnification ratio applies to width or height, not area.


Anti-Aliasing

“In digital signal processing, anti-aliasing is the technique of minimizing the distortion artifacts known as aliasing when representing a high-resolution signal at a lower resolution. Anti-aliasing is used in digital photography, computer graphics, digital audio, and many other domains.”

In the image domain, aliasing artifacts can appear as wavy lines or bands, or moiré patterns,

or popping, strobing, or as unwanted sparkling.

Anti-aliasing (definition from Wikipedia)*

* http://en.wikipedia.org/wiki/Antialias(Visit the site for some clear examples of anti-aliasing and for descriptions of several anti-aliasing techniques.)

By squeezing grid A at the top, we force it into an area of fewer pixels. Notice that the aliasing increases as you approach the top in version B.

B

A

http://en.wikipedia.org/wiki/Antialias


40

Monitors / Displays

Before anti-aliasing.

After anti-aliasing

Note Images A and B are 4.5” wide at 96 ppi. Next to and below each

one are screen captures from Photoshop, showing magnifications.

Notice the reduced moiré effect in the anti-aliased version. Higher

image resolution would reduce that effect even more.

This is the anti-aliased image at 96 ppi and only 2 inches wide! Notice the

increased moiré.

C

In this example, anti-aliasing works by introducing grey scale pixels to replace or to supplement the B/W ones. Various mathematical algorithms are used to achieve this, and most rely on methods of sampling.

A B


41

Even the best monitors are limited when it comes to showing fine detail.

Unless you are getting continuous sets of proofs along the way (which is unlikely), you will have to largely imagine what your printed output will look like. This may not be too difficult in some cases, but if your document contains very data-intense, high-resolution images such as topographic or DNA maps, you will not be able to view the detail without zooming, which is incompatible with integrated viewing.

Why “dead-tree” media* are not dead yet

*treeware 3-D Scatterplot reproduced in “Beautiful Evidence,” by Edward Tufte, Graphics Press LLC, 2006, page 57. This JPG is from a 600 dpi scan.

For example, there is simply no hope of showing this entire scatterplot effectively on a monitor screen. A high-resolution digital photo or scan might capture the detail, but the monitor cannot show it without increasing the scale to the point that the entire image is no longer viewable on the screen.


42

One reason why monitor output is unlikely ever to entirely replace printed output is that print can produce resolutions greater than 1,200 dpi*, as opposed to a monitor’s 96 ppi (new monitors only). This means that we can pack about 12 times more charts like the ones below onto a sheet of paper than onto a monitor screen of equal area.


B

A

C

These charts may seem extremely detailed, but notice how C begins to break up.

Printed output has the capability to represent such line graphs as sparklines, embedded within a stream of text in a 10 point font.

C

*Most office printers output at 600 dpi.


A3 size paper (11” x 17”) can display the data-equivalent of about 15 large computer screens or 300 PowerPoint slides. [This data] is adjacent in space rather than stacked in time. By showing vast amounts of data within the eyespan, spatial adjacency assists comparison, search, pattern-finding, exploration, replication, and review.


From “Beautiful Evidence,” by Edward Tufte, Graphics Press LLC, 2006, page 63.

But—to put in a kind word for pixel media—paper does not allow focus to the extent that pixel media do, at

least not without expenditure of an important natural resource. For example, you can use an entire

Powerpoint slide to focus on a very limited and discrete chunk of information, whereas an entire printed page

devoted to that same chunk might require the axing of a tree somewhere if your print volume is high.


44

• Photographic images that you include in your document and send out for printing should be much higher than your monitor screen resolution (e.g., 300 ppi vs. 96 ppi) unless you are trying to achieve certain rough effects. Find out about the printing process and the DPI resolutions that it is capable of producing.

• Don’t be too concerned about moiré patterns that show up on screen renderings of images containing grids, stripes, etc. These effects are unlikely to show up in the printed output, but check the proofs anyway.

• When dealing with customers, be aware that they may not be making the mental adjustments that you’re making when viewing a highly detailed image on the monitor screen. Show customers a printed proofif possible.

Some Conclusions


Section 2 QuizMark your answer on a separate sheet of paper. More than one option may be correct.

1. A pixel is a ____ element and has ____.

a. hardware … a fixed size b. hardware … no fixed size c. software … a fixed size d. software … no fixed size

2. An image pixel may be expressed

as... a. digital values (e.g.,

01001111) b. waveforms. c. dots on a printed page. d. cells in the screen grid of a

monitor. e. (all of the above)

3. What are the advantages of LCD

monitors over CRTs? a. Superior color quality b. Lower power consumption c. Smaller footprint d. May be viewed from any

angle

4. The inside of the CRT screen is coated with...

a. cathodes b. anodes c. phosphors d. a conductive material

5. CRT monitors use ____ scanning.

a. interlaced b. progressive c. alternate d. intermediate

6. The CRT’s shadow mask is a grid

of small holes arranged in... a. squares b. triangles c. circles d. pentagons

7. Image sharpness in a CRT

depends on... a. anode size b. scanning rate c. dot pitch d. image pixel size

8. Which of the following image resolutions might be best for normal print output?

a. 300 ppi b. 96 ppi c. 72 ppi d. 1200 ppi

9. Which of the following applications

will allow you to view and edit individual image pixels?

a. PowerPoint b. PhotoShop c. MS Word

10. Displaying a high-resolution image

at a lower resolution may produce an effect known as ...

a. aliasing b. anti-aliasing c. sampling d. interpolation

11. Which of the following media can

display the most detail per unit of area?

a. an LCD monitor b. a CRT monitor c. a printed page


• Monitor screen sizes and aspect ratios

• Display resolution

• Screen resolution and pixel size

• Using the Image Size dialog box in PhotoShop

• Resampling: Interpolation Methods

• Printer resolution (DPI), screen frequency (LPI), and monitor resolution (PPI).

Section 3


The aspect ratio of most CRT (cathode ray tube) monitors is 4:3.The monitor’s screen

size is the diagonal measurement (the hypotenuse of the triangle).

Popular CRT screen sizes:15171921

5

4

3

15”

12”

9”

Math refresher:The hypotenuse is equal to the sum of the squares of the two sides, e.g.,(52 = 32 + 42)

Monitor Screen Sizes and Aspect Ratios


Another common aspect ratio is 16:9.

This aspect ratio is used in cinematic film. It was not adopted for TV screens when they were first developed, but it has now become common in LCD monitors and plasma TV displays.

9

16

18.35

LCD flat-panel monitor Plasma TV display

Monitor Screen Sizes and Aspect Ratios


50

Digital Publishing

This diagram shows you the variety of available monitor sizes and aspect ratios. Four aspect ratios are indicated by the diagonal lines.


The monitor’s display resolution is the number of pixels that it can display per unit of length on the monitor. So monitor resolution is usually measured in pixels per inch (ppi).

Most new monitors can display up to 96 ppi. At 96 ppi, a 15” (9”x12”) monitor displays 10,368 pixels. (96 x 9 x 12 = 10,368)

Display Resolution


The monitor’s grid (aperture grill, shadow mask, or liquid crystal array) maps to the highest resolution offered by the monitor.

For example, a display with a physical grid of 1280 rows by 1024 columns can obviously support a maximum resolution of 1280 x 1024 pixels. It usually also supports lower resolutions such as 1024 x 768, 800 x 600, and 640 x 480.

Display Resolution


Your display may offer you several

screen resolutions.

To view these settings in Windows Vista, go to Control Panel, click the Personalization icon, and then click Display Settings.

You may test these settings on your monitor. Please be sure to restore the settings afterwards.

Screen Resolution and Pixel Size

Let’s discuss this.


When you lower the screen resolution setting in Control Panel, your images fill more of the screen. Each image consists of a set number of pixels, so when the image fills more of the screen, the pixels are larger.

Lower screen resolution=

larger pixels=

larger image

(higher) (lower)

Screen Resolution and Pixel Size

15” monitor

832 x 624 640 x 480Screen resolution:


15” monitor

high res setting

20” monitor

high res setting low res setting

Screen Resolution


This is the Image Size dialog box in Photoshop.

Notice the major sections, the units of measurement, and the check boxes at the bottom.

Using the Image Size Dialog Box in Photoshop


• Pixel dimensions: the number of pixels in an image (e.g., 60 x 90 = 5400)

• Image dimensions: the size of the image as it is meant to appear in print or online. (Measured in inches, centimeters, etc.)

• Image resolution: the ratio of pixels per unit of measurement. E.g., 72 ppi.

60 pixels wide x 90 pixels high

0.83 x 1.25 in.

72 ppi

Zoom200%

250 pixels wide x 375 pixels high

0.83 x 1.25 in.

300 ppiImage resolution

Image dimensions

Zoom200%

Pixel dimensions

Using the Image Size Dialog in Photoshop


Based on information in the blue section (“Results”), which option is best for the following scenarios?

1. Increase the image size without increasing the file size.2. Decrease the image size without lowering the image quality.3. Increase the image quality.4. Copy a photo from the Internet and make it suitable for a billboard.

Using the Image Size Dialog in Photoshop


Resampling refers to changing the pixel dimensions (and therefore display size) of an image. When you downsample (or decrease the number of pixels), information is deleted from the image. When you resample up (or increase the number of pixels), new pixels are added based on color values of existing pixels. You specify an interpolation method to determine how pixels are added or deleted.

Resampled up Original Sampled down

Notice that there is no difference between the first two images. This is because resampling “up” only adds pixels and some smoothing, but it does not add any additional detail. The only way to get more detail is to start with a higher res photo.

Resampling


Why are interpolations necessary?

Let’s say you want to increase the resolution of this image (…which, by the way, will not improve the image quality but only add more pixels to play with).

This might be simple if you chose to increase the resolution by a factor of 9…

… because each original pixel would be surrounded by 8 pixels of exactly the same color.



However, let’s say you want to increase the resolution by a factor of 6.

Your software cannot just place 5 more blue pixels pixels around the original one,…

… because the other pixels in the grid would have to be some color—maybe that of an adjoining pixel?—and the image would no longer look the same.



Software engineers found ways of providing additional pixels without noticeably altering the image. These are mathematical models called “interpolations,” and—for our purposes—you can think of them as a kind of “averaging.”

In Photoshop, these three methods are called…• Bilinear• Bicubic (default setting)• Nearest neighbor

Exactly how this would look would depend on the colors of the pixels surrounding the original grey pixel.


Resampled up Original Resampled down

Bicubic (resampling up) (smoother tonal gradations, slow processing, large file size)

Bilinear (medium)

Nearest neighbor (resampling down) (jagged, hard edges, fast processing, small file size)

With any image file open in Photoshop, find the Image Size dialog. The resampling

drop-down menu is at the bottom. The three options are…

Resampling – Interpolation Methods


• DPI – Dots/inch -- Printer resolution

• LPI – Lines/inch – Screen frequency, aka “line ruling” -- lines of cells per inch in a halftone screen

• PPI -- Pixels/inch – (1) a measure of monitor resolution, and (2) a “working measure” in imaging editing programs such as PhotoShop.

Printer Resolution, Screen Frequency, and Monitor Resolution


• Printer resolution: the number of ink dots per inch (dpi) produced by a laser printer. 600 dpi is fine for most purposes.

DPI (Dots per Inch)

Inkjet printers produce a spray of ink, not actual dots. However, most ink jet printers are said to have an approximate resolution of 300 to 600 dpi. Best results are produced by printing images that have been output at 150 ppi. Inkjet printer (Dell)


• LPI (Screen frequency): the number of printer dots or halftone cells per inch used to print grayscale images or color separations in non-digital printing processes only. Also known as screen ruling or line screen, screen frequency is measured in lines per inch (lpi)—or lines of cells per inch in a halftone screen.

Note When you send a digital image file to a printer for offset printing, or for printing by any non-digital process (non-digital processes require the making of printing plates) find out from the printer what resolution is best for the image.

LPI (Lines per Inch)

65 lpi: coarse screen typically used to print newsletters and grocery coupons.85 lpi: average screen typically used to print newspapers.133 lpi: high-quality screen typically used to print four-color magazines.177 lpi: very fine screen used for annual reports and images in art books.


• Measured in kilobytes (K), megabytes (MB) or gigabytes (GB)

• Larger file sizes are slower to edit and print, and require more disk space to store.

• Doubling the resolution more than doubles the file size.

• How to reduce file size:• Compression• Keep color bit depth at 8 bits rather than 16.• Reduce the number of layers and channels in the image.

A Word About File Size


Section 3 QuizMark your answer on a separate sheet of paper. More than one option may be correct.

1. Most CRT monitors have an aspect ratio of ...

a. 4:3 b. 8:5 c. 16:9 d. 5:4

2. What is the display resolution

of most new monitors? a. 10,368 pixels b. 96 ppi c. 1280 x 1024

3. When you increase your

screen resolution in Control Panel, an image’s pixels appear...

a. larger b. smaller c. clearer d. fuzzier

4. The amount of detail in an image is determined by...

a. image pixel size b. screen dot pitch c. screen resolution d. the number of image

pixels

5. How can you improve the quality of an image file in PhotoShop?

a. Increase its resolution. b. Resample it. c. Increase its file size. d. None of the above

6. “LPI,” or “screen frequency,”

refers to the number of ___ per inch, used in ___ printing processes only.

a. pixels ... digital b. pixels ... non-digital c. halftone cells ... digital d. halftone cells ... non-

digital

7. Which of the following is NOT a way of reducing file size?

a. Set color bit depth from 8 to 16.

b. Use compression. c. Lower the resolution. d. Use fewer channels.

8. Which of the following printers

does NOT use dots to produce images?

a. Laser b. Dot-matrix c. Inkjet


• Bitmaps and vector images

• Type fonts

• Trapping

Section 4


Two categories of computer graphics:

Bitmap Images and Vector Graphics

• Bitmap images• Vector Graphics


A bitmap is an array of pixels. It is less frequently called a “raster image.”

• Black and white bitmaps require only one data bit for each pixel on a monitor screen.

• Gray-scale bitmaps require 8 bits per pixel, producing 256 shades of gray.

• Full-color bitmaps need as many as 24 bits per pixel, producing 16.8 million different colors. (Other bit depths are 8 and 16.)

Paint and photo imaging programs like Photoshop use bitmaps.

Bitmaps


• Also called “raster images”• Grids of colored pixels• Most common electronic medium for mass printing of continuous-tone images,

such as photographs or digital paintings• Resolution-dependent• Some loss of quality occurs when you manipulate them too much.

Bitmaps


Vectors are mathematically-described objects consisting of paths. They are used in “object-oriented” drawing programs like Illustrator.

Vectors store data as a list of drawing instructions. A vector consists of a starting point, a direction, and a length.

Examples of vectors:• A line drawn with a pencil or a pen.• An outline type font.

Starting pointDirection

Length

Vectors


• Lines defined by mathematical vectors• Resolution-independent• Best choice for images that may be repeatedly scaled by remote

users (e.g., logos)• Images do not lose quality when you change them.• Ideal for technical drawings

Vectors


Two kinds:

• bitmapped (screen fonts)

• outline (printer fonts)

Caution:Avoid the terms “screen font” and “printer font” if possible. Since the introduction of Adobe Type Manager, screen fonts can be used for printers, and outline fonts can be used for screen display.

Type Fonts


Bitmapped fonts…

• store each point on the grid as a pixel spot.

• do not resize well.

• require lots of storage.

• need to be installed in all sizes intended for use, unless Adobe Type Manager (ATM) is used.

• can be used in printers, but produce ragged, uneven results.

Outline fonts…

• are primarily for output to a printer or imagesetter.

• are composed of bezier curves (vectors) that can be linked together with seamless joints.

• contain size and shape information of each character.

• allow clear, precise printing of type faces at any size, angle, resolution, or shade of gray.

• With ATM, can be used for screen display.

Type Fonts


TrueType is an outline font technology developed jointly by Microsoft and Apple. Because TrueType support is built into all Windows and Macintosh operating systems, anyone using these operating systems can create documents using TrueType fonts.

Since its introduction in 1991, TrueType has quickly become the dominant font technology for everyday use, and is even displacing PostScript in many publishing environments.

True Type


PostScript is an object-oriented language, meaning that it treats images, including fonts, as collections of geometrical objects rather than as bit maps. PostScript fonts are called outline fonts because the outline of each character is defined. They are also called scalable fonts because their size can be changed with PostScript commands. Given a single typeface definition, a PostScript printer can thus produce a multitude of fonts. In contrast, many non-PostScript printers represent fonts with bit maps. To print a bit-mapped typeface with different sizes, these printers require a complete set of bit maps for each size.

The principal advantage of object-oriented (vector) graphics over bit-mapped graphics is that object-oriented images take advantage of high-resolution output devices whereas bit-mapped images do not. A PostScript drawing looks much better when printed on a 600-dpi printer than on a 300-dpi printer. A bit-mapped image looks the same on both printers.

Type Fonts: Adobe Postscript


The image to the right simulates a printed image. Describe what you see.

Trapping


Now compare these two images (also simulations of printed images). Do you see any difference between them?

Trapping


The top one is actually a crescent and a disk.

The bottom one consists of two overlapping disks.

Trapping


Trapping

These two images represent two ways of printing adjacent, filled shapes when spot colors are used.

The first is called “knockout,” and the second is called “overprint.”

knockout*

overprint

*The yellow “knocks out” to leave a white space for the green disk.


Trapping

Knockout has an important advantage over overprint.

knockout

overprint


Trapping

However, there is a potential problem with the knockout method.

knockout

Because the two colors are printed using spot colors, the paper receives the impressions from two different stations on the press.

There may be registration issues.


Solution:

Trapping digital files is the process of compensating for mis-registration on the printing press by printing small areas of overlapping color where objects meet.

Trapping


How to trapTo compensate for minor misalignments on the printing press, you can slightly overlap your touching colors. Then, if one color shifts slightly, you won’t get a white space between colors.

You can overlap the colors by either of these two methods:

Spreading

Choking

In both choking and spreading, lighter colors expand into darker colors.

Trapping: Choking and Spreading


If you decide to do the trapping yourself, there are three ways you can go:

Illustration Software In vector-based drawing programs such as Adobe Illustrator you can create simple manual traps by applying outlines (overprinting strokes) to objects or use plug-ins that apply the appropriate trap.

Page Layout Software High-end tools such as QuarkXPress, Adobe PageMaker, and Adobe InDesign have built-in trapping. Each program may have multiple ways in which trapping is applied.

Dedicated Trapping Software Usually used by service bureaus and printers, these programs are designed to do nothing but trapping. TrapWise and Trapper are two such programs.

Manual vs. Automatic Trapping


The best alternative to trapping is to keep colors apart when possible. Then, if there is a misregistration, it won’t be noticed.

Alternative 1: Keep colors apart. Alternative 2: Use black borders.

Trapping Alternatives


Section 4 Quiz1. Vectors consist of …

a. pixels b. bits c. paths d. channels

2. Which of the following applications

would be best for designing a company logo or a technical drawing?

a. Illustrator b. Photoshop c. Flash d. InDesign

3. Vector drawings …

a. are resolution-independent b. may be repeatedly scaled c. do not lose quality when

edited d. consist of grids of colored

pixels

4. Outline fonts … a. are composed of vectors b. can be used for screen

display c. do not resize well d. are not for output to printers

5. The software that allows outline fonts to be used for screen display and bitmapped fonts to be used for output to printers is called …

a. Type Wizard b. Adobe Type Manager c. Abracadabra d. Adobe Illustrator e. Adobe Fontissimo

6. “DPI” is a measure of _____

resolution. a. screen b. monitor c. printer d. printing press

7. “LPI” describes the resolution of …

a. the monitor screen b. desktop printer output c. halftone images d. continuous tone photos

8. Trapping compensates for…

a. dot gain b. color mismatching c. misregistration d. faulty cropping

9. Trapping may be necessary whenever...

a. process colors are used. b. different spot colors are

adjacent to each other. c. the page is not correctly

cropped. d. color schemes are highly

contrastive.

10. As an alternative to trapping, you can...

a. avoid process colors. b. avoid spot colors. c. keep the colors apart. d. use black borders around

colors.

11. Which of the following techniques can you use to avoid trapping issues?

a. choking b. spreading c. overprint d. knockout


End of Module 4

91Module 4: Tools and TechniquesAnswer forms for quizzes, modules 1, 3, and 4

Module ___, Section ___1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e 9. a b c d e 10. a b c d e11. a b c d e12. a b c d e13. a b c d e 14. a b c d e







92Module 4: Tools and TechniquesAnswer form for Module 2 Quiz

1. a b c d e 2. a b c d e 3. a b c d e 4. a b c d e 5. a b c d e 6. a b c d e 7. a b c d e 8. a b c d e 9. a b c d e 10. a b c d e11. a b c d e12. a b c d e13. a b c d e 14. a b c d e



43. a b c d e 44. a b c d e 45. a b c d e 46. a b c d e

Documents

1 Module 4: Tools and Techniques 1 Module 4: Tools and Techniques Instructor: Doughlas Remy