GRAPH 275 / DES 237 Digital Prepress :: International Academy of Design & Technology

Week 3: Digital Images

NO CLASS ON MONDAY: Martin Luther King Jr. Holiday

Student Showcase

We will take a look at any of your new work which is ready to share.

For the duotone, tritone and spot color projects, we will discuss the following aspects of each:

  • Overall strength of the image
  • Degree to which:
    • the file is built correctly
    • the file is press-ready

Vector Graphics Versus Raster Graphics

Vector graphics, known as object graphics in the text, are drawn mathematically in the computer with points, lines, curves and filled-in areas. These kinds of objects can be enlarged or reduced in size without losing quality, and they tend to be low in file size.

Vector drawing is usually best for logos, illustrations and other simple graphics. The drawings consist of outlines, filled-in areas, or both. The filled-in areas can contain solid colors, gradients, or patterns. In most cases, transparency and other effects can be used with vector graphics.

Raster graphics, known as pixel graphics in the text, are drawn pixel-by-pixel in the computer. This kind of drawing is ideal for photographs, in which neighboring pixels are usually different colors from each other. Most web graphics must be displayed in raster format (such as JPG, GIF, and PNG files.)

Below are two comparisons of the same image drawn pixel-by-pixel (raster) versus mathematically (vector.) The raster images are on the left and the vector on the right. The second set is zommed in to show detail.

raster versus vector

raster versus vector
Raster versus vector graphics, zoomed out and zoomed in.

Vector Graphics

Programs

  • Adobe Illustrator
  • Adobe Flash
  • Adobe Fireworks
  • CorelDRAW
  • Others...

File Formats

  • PDF (Portable Document Format)
  • EPS (Encapsulated PostScript)
  • AI (Adobe Illustrator)
  • WMF (Windows Metafile) and EMF (Enhanced Metafile)
  • SVG (Scalable Vector Graphics)
  • Others...

Raster Graphics

Programs

  • Adobe Photoshop
  • Corel Painter
  • iPhoto
  • Microsoft Paint
  • Others...

File Formats

  • JPG (Joint Photographic Experts Group )
  • PSD (Photoshop Document)
  • GIF (Graphics Interchange File)
  • TIFF (Tagged Image File Format)
  • PNG (Portable Network Graphics)
  • BMP (Bitmap)
  • RAW (different file formats, depending on make of DSLR camera)
  • Others...

Color Modes

Content for this week's lesson is not yet complete.

Resolution

Content for this week's lesson is not yet complete.

Compression

Content for this week's lesson is not yet complete.

Dithering

On edges which are not perfectly straight up or down, raster programs such as Photoshop smooth out the jagged look of whole-pixel colors by using dithering. Dithering is a way of blending one color into another by using a small band of pixels between the two which provide a gentle transition.
dithering

Artifacting

Content for this week's lesson is not yet complete.

Sample of Artifacting

Logo saved as a JPG:
OH logo
OH logo

Same logo saved as a GIF:

logo
OH logo

Finally, saved as a PNG-24:

logo

 

Assignment: Comparative Poster

Create a poster comparing the features and uses of vector versus raster images.

Requirements

  • Do some additional research on the topics to the left. For example, read Chapter 4, sections 4.1-4.9, and do some online research as well.
  • Compare and contrast many of the most relevant facts about each graphics format in your poster.
  • Use Illustrator and name the file comparative.ai.
  • Document size: 11" by 17", portrait or landscape orientation.
  • ¼" bleed (outside the paper edge) and ¼" text-safety (inside paper edge). Create non-printing guides which show these boundaries.
  • Use your own examples, not those presented on the left.
  • Employ multiple images as well as descriptive text.
  • Embed all images.
  • Save a copy in PDF [Press Quality] format so that I can see the correct font(s).

Portal

Upload the following to Week 3 Lesson:

  • comparative.ai
  • comparative.pdf