Intro to Graphics

1. Graphics
“A product of human imagination and are typically created by
hand or with computer-assisted drawing and design tools.”

2. Encoding Computer Graphics
Bitmap/Raster Images
Use pixels to define the structure
of a digital image.
(Costello, ch. 9)
Vector Images
Use mathematically constructed
paths to define a graphic’s visual
structure.

3. Raster Images
Use pixels to define the structure of a digital image.

4. Resolution
The size and quantity of
the pixels the image
contains.
More pixels = better
quality.
(Costello, ch. 9)

5. Pixel Dimensions
The number of pixels along
the x-axis (width) by the
number of pixels along the
y-axis (height).
For example, an 800 ×
600 pixel image contains
800 pixels across the
image from left to right
and 600 pixels across the
image from top to bottom.
(Costello, ch. 9)

6. Pixel Count
The total number of pixels
in a raster matrix.
To determine the pixel
count, multiply the
horizontal and vertical
pixel dimensions.
(Costello, ch. 9)

7. Pixel Density or
Resolution
Measured in pixels per inch
(ppi)—this is pixels per
linear inch (across or
down), not square inch.
Each pixel is a fixed size,
but the dimensions of a
pixel can vary.
The more pixels you have
per inch, the smaller each
pixel will be.
(Costello, ch. 9)

8. Scaling
Decreasing or increasing
the size of your pixels.
When you scale an image
upward (make it larger),
each pixel is enlarged, and
you lose image detail and
sharpness.
Downscaling can actually
improve image clarity.
(Costello, ch. 9)

9. Resampling
Changes the size of a
raster image by increasing
or decreasing the image’s
pixel count.
When you resample to
enlarge an image, you still
lose detail and sharpness.
ALWAYS make a copy of
your original image first.
(Costello, ch. 9)

10. Anti-Aliasing
Aliasing is the visibly
jagged distortions along
the edge of a line.
Anti-aliasing smoothes out
the edges of jagged type
by blending the color
transition points, such as
the pixels along the edges
of a letter.
(Costello, ch. 9)

11. Raster Image Formats
As you work with a file, you should save it in a format that supports layers,
such as a PSD or TIFF, so you can change it in the future.
When you incorporate an image into a multimedia project, it needs to be
flattened and compressed.
● GIF: 256 colors & transparency, and is a lossless compression format. It is
common for logos and other images with lines and solid blocks of color.
● JPEG: 16.8 million colors but does not support transparency. It is used most
often for photographs.
● PNG: 16.8 million colors and transparency, but you can choose to use fewer
colors to save file space (PNG 8, or PNG with eight-bit color). It is common for
a wide range of images, including favicons.
(Costello, ch. 9)

12. Vector Graphics
Define the area of a picture using paths made up of points,
lines, curves and shapes. Each vector path forms the outline
of a geometric region containing color information.

13. Benefits of Vector Graphics
Vector graphics have crisp edges with no aliasing. They
can be resized up or down to any size without negative
consequences.
Because vector encoding uses mathematical equations
to record visual information, the size of a vector data
file stays consistent, regardless of how large or small
you make the graphic.
(Costello, ch. 9)

14. Vector Image Formats
● Scalable Vector Graphics (SVG)
● Encapsulated PostScript (EPS)
● Portable Document Format (PDF)
● Adobe Illustrator Artwork (AI)
(Costello, ch. 9)

15. Display Screen Standards

16. Resolution
Television and computer monitors, tablets, and
smartphones have a fixed number of pixels.
We call its fixed pixel dimensions its native resolution.
When a computer monitor is set to its native resolution,
images displayed on screen are said to be pixel perfect
because the actual number of pixels in the image source
matches the number of pixels used to render it on
screen.
(Costello, ch. 9)

17. Aspect Ratio
The width to the height of
the screen and is depicted
with the expression x: y,
where x equals the number
of units wide and y equals
the number of units high.
The two most common
aspect ratios in use today
are 4:3 and 16:9.
(Costello, ch. 9)