Vector images use mathematically defined points and paths to represent shapes and lines, allowing them to be scaled to any size without loss of quality. Raster images represent shapes and colors using a grid of pixels, so increasing size causes pixels to become visible. Common vector formats are AI, EPS, and SVG, while common raster formats are JPEG, PNG, and GIF. Vector programs like Illustrator are best for solid colors and text, while raster programs like Photoshop are needed for photos with complex effects. Raster images can be traced in vector programs to convert them.

1. Vector (Shapes)
vs.
Raster (Pixels)
Objectives:
1. Identify the difference between vector and raster file
formats
2. Explain the applications of the two image formats

2. Raster (Bitmap)
 Bitmap was the original term used for identifying an
image with an array of bits . Theses images are
uncompressed pieces of information.
 Bits: are pieces of stored information
 8 bits = 1 byte
 1000 bytes = 1 kilobyte
 1000 kilobytes = 1 megabyte
 1000 megabytes = 1 gigabyte
 1000 gigabytes = 1 terabyte
 1000 terabytes = 1 petabyte

3. Pixels
 Pixels: individual squares on a grid that makes up an
image. Each square is made up of a color.
 Resolution: identifies the number of pixels. Often
described using dots per inch (dpi) or pixels per inch (ppi)
 Web Resolution: 72 dpi
 Print Resolution: 200-300 dpi

4. Raster artwork
(also known as bitmaps):
 are composed of lots of small dots. This lends itself to photographic or artistic effects because color
gradations can be made very smooth in a bitmap format. However, bitmap images lose their clarity
when they are increased in size because the dots get bigger. Take an image that's 10 pixels wide by
10 pixels high, stretch it to 100 x 100 pixels and it looks like it's made of big squares.
 Adobe Photoshop, the industry standard for digital photo editing, allows users to open and edit both
•Joint Photographers Expert Group (.JPEG, .JPG)
•Portable Network Graphics (.PNG)
•Graphic Interchange Format (.GIF)
Common FileFormats:

5. Raster Editing Programs
 Microsoft Paint (licensed)
 Adobe Photoshop (licensed)
 Gimp (open source)
 Paint.Net (open source)

6. Vector artwork
(sometimes called line art)
this kind of artwork is made up of lines and filled areas only, which are mathematically drawn
and calculated (hence the term vector) by the software you use. They can be stretched in size
without losing any clarity or sharpness. Because of their mathematical origins, vector images
are readily scalable without distortion.
For vector image editing, use either Adobe Illustrator or Inkscape. Either program will also allow
users to import raster images into their vector files.
•Illustrator (.AI)*
•Encapuslated PostScript (.EPS)*
•PostScript (.PS)*
•Scalable Vector Graphic (.SVG)
FileFormats:
* Both Illustrator AI and EPS formats allow users to place raster images within a vector file.
The raster image is not converted to vector format; rather it is simply embedded in the vector
file, and is rendered in raster format.
Don’t forget PDF

7. Vector/Raster
When and Why?
 If you are working with mainly solid color objects,
manipulated text or many small objects, the clear
answer is that a VECTOR program will save you time.
 If you are working with complicated drop shadows, or
other 3D effects, texture or photographs, RASTER is
the correct choice.
http://www.webreference.com/graphics/column31/4.html
For photo work,
only a raster
program makes
sense.
Vector programs
make short work of
manipulated text
and any solid color
work.

8. Creating Vectors - TRACE
When you have learned to work well with a vector program, and are
comfortable drawing and editing anchor points in paths, you can import
the raster image and place it on its own layer.
1. Reduce the opacity of the layer to fade the image back (if available),
or draw a semitransparent white rectangle over the image.
2. Lock the layer containing the image to be traced.
3. Trace the objects on a new layer.
Tracing partially completed. The blue
outline shows one area that has been
traced – this area is now a vector object.
Note: Incorporate the raster image into the vector image if you are not going to
need to resize the image.

9. Properties of a Vector
 Path/Stroke: outline of a shape
 Fill: inner part or color of a shape; a shape can have no fill
 Anchor Point: strokes are created through a series of connected and
unconnected anchor points
 Bezier curve: curve created by a curved anchor point

10. Vector Programs
 Adobe Illustrator (licensed)
 Adobe Fireworks (licensed)
 Inkscape (open source)

11. Examples