Image Types


Vector
 Vector graphics (also called geometric modeling or
object-oriented graphics) is the use of geometrical
primitives such as points, lines, curves, and
polygons, which are all based upon mathematical
equations to represent images in computer graphics.

Bitmap
 Bitmap or raster graphics, is the representation of
images as a collection of pixels, and used as the
sole graphic type for actual photographic images.
 Image Types: Vector

Main title
12

10

8
Column 1
Column 2
6 Column 3

0
Row 1 Row 2 Row 3 Row 4
Image Types: Vector
Image Types: Vector
 Image Types: Bitmap
 Why Bitmap?
 Image Types: Bitmap
 Why Bitmap?
 Image Types: Bitmap
 Pixels
 A pixel (short for picture element, using the
common abbreviation "pix" for "pictures") is a single
point in a graphic image.
Image Types: Bitmap
Image Types
 Image Types: Key Differences
Vector Bitmap

Line-art/Collage 
Photographic/Painting

Object-oriented 
Pixels

No resolution 
H/W/P = Resolution

Editable 
Not editable

Scalable 
Scale down, not up

Small file size 
Larger file sizes

Easy to output (print, 
Output requires
web, Powerpoint) formatting
 Image Types: Programs
Vector Bitmap

Adobe Illustrator 
Adobe Photoshop
 Adobe InDesign  Gimp
 MS Paint  MS Paint
 MS Powerpoint
 MS Publisher
 Coreldraw
What Makes Up an Image?
 Image Attributes
 Size (Bitmap & Vector)
 The size of the file: 100KB, 10MB, etc.
 File Type
 The format the file is in (jpg, gif, etc.)

Scale (Bitmap & Vector)
 The physical dimensions of the image (5” x 7”)

Resolution (Bitmap)
 The number of pixels per inch, cm, etc.
 Color (Bitmap)
 The palette used to define colors, Red/Green/Blue or
Cyan/Magenta/Yellow/Black

Color Depth (Bitmap)
 The number of colors available for display (8bit B/W – 32bit Millions)
 Image Size
 Bitmap images:
 The size of your file (image) will be based on the
number of pixels and color depth.

 Vector images:
 The size of your file (image) will be determined by
the number of objects (points/nodes)

 Generally bitmap images are larger than vector

images
 File Type or Formats
 ai = Adobe Illustrator (Vector)
 eps = Encapsulated PostScript (Vector)
 gif = Compuserv Graphics Interchange Format (Bitmap)
 jpeg (jpg) = Joint Photographic Experts Group (Bitmap)
 pdf = Portable Document Format (Bitmap)
 pict (pic) = PICtor (Bitmap)
 psd = Adobe Photoshop Document (Bitmap)
 ppt = PowerPoint (Vector)
 tiff (tif) = Tagged Image File Format (Bitmap)
 Resolution
 The number of pixels per inch, cm, etc
 “800 x 600” or “1024 x 768”
 “72ppi,” “300ppi,” “600ppi”
 “5” x 7” x 600ppi”
 Resolution
 The number of pixels per inch, cm, etc

5.37” x 3.89” x 600ppi

 Resolution
 The number of pixels per inch, cm, etc

1” or 98 pixels
 Go to Adobe Photoshop
 View Image Size
 Change the resolution

What changed and why?
 Output Resolution
 Print vs. Web
 What is the output resolution?
 Printers: 300, 600, 1200dpi
 Screen…
 Go to Adobe Photoshop
 View Image Size
 Change the resolution and size

What changed and why?
 Change the Image for…
 a three column brochure to be printed off a
color laser printer. The image will be on the
opening panel.
 a family photo to be printed off you home
InkJet printer.
 A full screen during a PowerPoint presentation
 A website
 Color
 CMYK, RGB, Pantone, Websafe
 Cyan Magenta Yellow Black
 Used for color printing
 Red Green Blue
 Used for on screen
 Pantone
 Color libraries used for color matching
 Websafe
 A limited palette of colors that can be displayed through a browser
 Bit depth
 8 bit 256 colors/greyscale
 16 bit thousands of colors
 32 bit millions of colors
 What color mode are you in?
 Go to Photoshop
 Select Image -> Mode
 Change color modes
 What did you notice?
 What color mode are you in?
 Go to Photoshop
 Select Color Palette
 Notice colors, gamut, web safe…
 CMYK vs. RGB
CMYK
 CMYK (short for cyan,
magenta, yellow, and key
(black),[1] and often referred
to as process color or four
color) is a subtractive color
model, used in color printing,
also used to describe the
printing process itself.
RGB:
 The RGB color model is an
additive color model in which
red, green, and blue light are
added together in various
ways to reproduce a broad
array of colors.
 CMYK vs. RGB

CMYK RGB:
 CMYK vs. RGB

CMYK RGB:
 Printing  On Screen
 Inkjet  Web pages
 Color Laser  PowerPoint Presentations
 Commercial Press  Projectors
 PDF  PDF
 Change the Image for…
 a three column brochure to be printed off a
color laser printer. The image will be on the
opening panel. [Size, resolution, Color Mode]
 a family photo to be printed off you home
InkJet printer. [Size, resolution, Color Mode]
 a full screen during a PowerPoint presentation
[Size, resolution, Color Mode]
 a website [Size, resolution, Color Mode]