UNITS OF MEASUREMENT

2.01 Understand Digital Raster Graphics

What Unit of Measurement to Use
Quiz Question: List as many units of measurement that
you can think of as a class.
Did you have more than one from the list below?
• Inches • Points
• Pixels • Picas

We generally pick what we are comfortable with, but

in Graphic Design it should be based on need.
Inches
 The standard unit of measurement for the United
States and U.S. standard sized papers.
 What is 8.5” x 11” called? 11” x 14”? 11” x 17”?
 Letter, Legal, and Tabloid
 Letter size is standard for most printers, resumes,
and other common documents.
 Works well when defining document sizes for print.
 What most of us are comfortable with.
Pixels
 The most common unit of measurement for computer
screen display.
 Generally represented by one dot that is
illuminated on a computer screen.
 Many pixels make up an image or images.
 A precise measurement system for web-design.
 Lacks flexibility as screen sizes change.
Points
 The standard unit of measurement for typefaces.
 1 point represents 1/72 of an inch.
 Therefore text formatted with a font size of 72 pt is
about one inch.
 However, variations occur due to font designs.
 Standard size for print paragraphs = 12 pt (Generally)
Picas
 Quiz time: What is 11 inches divided by 3?
 Quiz time, part two: What is 72 divided by 3?

 One pica equals 1/6 of an inch. Six picas per inch.

 Often used in print design, since it is easily divisible.
 Picas work well when applying the Rule of Thirds.
Em Space
 An em space refers to the size of the capital letter
“M” for the current font.
 Allows for flexible layouts because size can change
as the font is displayed on different devices.
Percentage
 Defining sub elements of a web page as a
percentage to the width of the entire web page,
allowing for responsive layouts as screen sizes
change.
 Allows for flexible layouts because size can change
as the display size of the screen changes.
IMAGE RESOLUTION
AND
COLOR MODE
 Begin with the End
 When talking about image
resolution and color mode to choose
when designing, you have to think
about what the desired output will
be.
 Web? Or Print?
What is resolution?
 Resolution is a measure of the amount of detail that
is stored in a digital image.
 Higher resolution means higher quality.
 But is high resolution always a good thing.

 Lower resolution means lower quality.

 But is lower resolution always a bad thing.
Image Resolution
 Resolution is measured in PPI, or pixels per inch
(the number of pixels contained in one inch).
 The higher the PPI, the better the quality.
 The higher the PPI, the larger the file size.

 Image editing software can be used to change

the resolution of an image.
 Image Output Methods
 Images can be viewed in two ways
 On a screen or monitor or by printing it on paper
 Monitors
 Monitors are low resolution devices, most display 72 ppi.
 Additional image resolution will increase file size, without affecting display
quality.
 Printers
 The resolution at which printers can print is measured in Dots Per Inch (DPI).
 Printers are high resolution devices and require high resolution images in
order to print images clearly without pixelation or blurriness.
Match The Image Quality To The
Delivery Method

 Images that will be displayed on a monitor do not need a high

resolution.
 Using a low resolution means smaller file sizes.
 Images with small file sizes load quicker.
 Images that will be printed need a higher resolution.
 Images with 300 PPI are better for printing on more sophisticated
printers and will produce higher-quality photographs.
What About Color Mode?
 Color Modes: a mathematical model that describes the way
colors can be represented as numbers or percentages,
typically with three or four values.
 There are many types of color modes, but generally you will
work with two when editing raster images.
 RGB Color
 CMYK Color
RGB Color
 RGB: assigns an intensity value to each pixel
ranging from 0 to 255 for each of the red, green,
and blue components in an image.
 If all RGB values are 0, you get black.
 If all RGB values are 255, you get white.
 On-screen display is represented by RGB, therefore
RGB color is best used for images that will be
displayed on a monitor or webpage.
CMYK Color

 CMYK: assigns a percentage value for each of the

process inks. Cyan, magenta, yellow, and black.
 If all percentages are set to 0, the result is white. If
all percentages are set to 100, the result is black.
 An image should be converted to CMYK before
exporting for images that will be
sent to print.
Quiz Time
 An image is being designed that will be display on
the new company website. What color mode and
what resolution should the image have?
 RGB color and 72 ppi.
 A poster is being created that will have 500 copies
printed to promote the upcoming concert. What
color mode and resolution?
 CMYK color and 300 ppi.