Lecture 4 Digital Graphics Terminology

1
Lecture 4Digital Graphics Terminology

• ART100 - Spring 2004
• Introduction to Computer Graphic Art
• Stephen Lloyd

2
Objectives

• What are 2D Graphics?
• Why These Applications?
• Vector Graphics
• Raster Graphics
• Digital File Formats
• Digital Graphics Terminology Handout
• References

3
What are 2D Graphics?

• 2D graphics are two-dimensional designs created
  in some form of medium
• Drawing
• Painting
• Photographs
• Digital
• 2D is like painting, where you may be able to
  make something appear to be realistic or 3D
• 3D is like sculpting. 360 degree view

4
Why these Applications?

• Adobe Illustrator and Adobe Photoshop
• Industry standard software for creating and
  editing digital graphics for print or web.

5
Vector Graphics

• Drawing programs create vector graphics, made of
  lines and curves defined by mathematical objects
  called vectors.
• Vectors describe graphics according to their
  geometric characteristics.

6
Vector Graphics

• A vector graphic is resolution-independent
• Can be scaled to any size and printed on any
  output device at any resolution without losing
  its detail or clarity.
• Vector graphics are the best choice for type
  (especially small type) and bold graphics that
  must retain crisp lines when scaled to various
  sizes
• Example logos 

7
Vector Graphics

• Summary
• Based on mathematical equations
• Small file sizes
• Great for logos and type
• Can only be created with software
• When vector graphics are enlarged the number of
  the pixels are increased

8
Raster Graphics - Definition

• The word raster refers to graphics data
  represented by color values at points (pixels),
  which taken together describe the display on an
  output device, such as a monitor. 

Pixelation
9
Raster Graphics - Definition

• Raster images can easily be detected by zooming
  in close on an object. The more you zoom in on a
  raster image, the more visible the pixels.
• Pixels are dots of color arranged on a regular
  grid in a pattern representing the form to be
  displayed. 
• Examples of raster images would be scanned
  photographs or photos taken with a digital camera.

10
Raster File Formats

• Summary
• Cannot enlarge loose quality
• can make smaller
• Scanned images
• Placement of pixels or bits (bitmapped image)
• Exported to raster file formats
• When raster graphics are enlarged, the size of
  the pixels are increased, not the number of
  pixels.

11
Scaling
12
Conversion

• Vector to Raster

• Raster to Vector
• Data loss

13
Digital File Formats

• File Format
• This refers to how the data is stored.
• Each different type of file has a different file
  format.
• The file format specifies first whether the file
  is a binary or ASCII file, and second, how the
  information is organized .
• Common File Formats (or file extensions)
• One or several letters at the end of a filename.
  Filename extensions usually follow a period (dot)
  and indicate the type of information stored in
  the file.
• Examples
• .txt (Text)
• Stores textual information from applications such
  as WordPad or Notepad
• .bmp (Bitmap)
• Stores graphic images from applications like MS
  Paint

14
Digital File Formats

• Native File Formats
• These are file extensions native to specific
  programs.
• These files can only be opened in the program it
  was created in.
• If you ever intend to modify an image you are
  working with, you MUST save it in it's Native
  Format....or else you will lose all detailed
  information. 
• .ai (Adobe Illustrator)
• The Adobe Illustrator file format, is vector data
  representing lines, polygons or curves by
  numerically specifying key points. 
• .psd (Adobe Photoshop)
• The Photoshop Data format is also raster
  information.  It also contains layer information,
  type layers, filter information and more. 

15
Digital File Formats

• Common Vector File Formats
• One common way of sharing vector artwork between
  different platforms is to save the artwork as an
  EPS file. Virtually all page layout,
  word-processing, and graphic applications accept
  imported or placed EPS files.
• .eps (Encapsulated PostScript)
• The EPS file format is used to transfer
  PostScript language artwork between applications
  and is supported by most illustration and
  page-layout programs. Typically, EPS files
  represent single illustrations or tables that are
  placed onto a host page, but an EPS file can also
  represent a complete page. Because EPS files are
  based on the PostScript language, they can
  contain both vector and bitmap graphics. 

16
Digital File Formats

• Common Raster File Formats
• Although there are many different file formats
  the following four are the most common used file
  formats, because of their popularity.
• .bmp (Bitmap)
• This is the standard Windows bitmap image format
  on DOS and Windows-compatible computers. When
  saving an image in this format, you can specify
  either Microsoft Windows or OS/2 format, but
  your choice is limited to 24-bit depth for the
  image.
• .pic (Macintosh PICT format )
• The PICT format is widely used among Macintosh
  graphics and page-layout applications as an
  intermediary file format for transferring files
  between applications. The PICT format is
  especially effective at compressing images that
  contain large areas of solid color.

17
Digital File Formats

• Common Raster File Formats (cont)
• .gif (Graphics Interchange Format )
• GIF images are the most widely used graphic
  format on the web. GIF images display up to 256
  colors.
• .jpg or .jpeg (Joint Photographic Experts Group)
• File format for full-color and black-and-white
  graphic images. JPEG images allow for more colors
  than GIF images and are usually smaller in size.

18
Digital File Formats

• As you work with various digital applications,
  you should familiarize yourself with the
  different graphic file formats.
• It is important to know what file format is best
  for the output you need
• For example, the file format used to print an
  image would be different than the file format
  used to place an image on the internet.

19
Digital Graphics Terminology Handout

• After reviewing this lecture, download the
  Digital Graphics Terminology Handout
• Digital_Graphics_Terminology_Handout.doc
• This handout has definitions for some of the more
  common terms you might come across in the world
  of digital graphics.
• You are responsible for all of the information
  provided in this handout!

20
References

• Portions of this lecture were taken from
• www.webopedia.com
• Adobe Illustrator Online Help
• Adobe Photoshop Online Help