Digital Images

1
Digital Images
2
Computer Graphics fall into two main categories

• Vector Graphics
• Raster (Bitmap) Graphics

3
Vector Graphics

• Object-oriented graphics
• Made-up of vectors
• Resolution independent can be scaled to any
  size without losing any detail
• Used primarily for hard-edged graphics such as
  drawings, logos, charts, illustrations, and type
• Adobe Illustrator, Macromedia Freehand, Corel Draw

4
Bitmap (Raster) Graphics

• Made-up of pixels each pixel (picture element)
  is assigned a specific location and color value
• Resolution Dependant contain a FIXED number of
  pixels (size of image is based on the image
  resolution)
• Can represent subtle gradations of color - used
  primarily for continuous-tone images such as
  photographs
• Adobe Photoshop, Paintshop Pro, Painter

5
Bitmap Categories

• Line-art
• use 1 bit (black/on, white/off) to define each
  pixel
• Grayscale
• Use black, white and shades of gray
• Multitone
• Contains shades of two or more colors
• Example duotone (black plus a spot color)
• Full color

6
(No Transcript)
7
Graphic File Formats

• TIFF(Tagged Image(Information) File Format
• This format is a good way to save scanned images.
  
• It is a platform-independent file format.
• TIFF is strictly used for bitmap data.
• The TIFF format allows for changes in contrast,
  density, and color to be made easily.
• TIFFs support virtually all color spaces and
  support a large number of compression algorithms.
  
• A TIFF file can be any resolution you choose.
• The main drawback to saving a file in TIFF format
  is that, because of the large amount of
  information saved, the file size may be quite
  large.

8
Graphic File Formats

• EPS (Encapsulted PostScript Files)
• EPS files are actually two files in one. EPS
  files contain the PostScript information (the
  printer language that defines desktop publishing)
  that the file needs for printing, and QuickDraw
  information (a preview format such as PICT, TIFF,
  WMF) that the computer uses for display of images
  on screen.
• Since EPS files are written in PostScript, they
  should work with every PostScript device and most
  layout, illustration, and paint programs.

9
Graphic File Formats

• PCX and BMPPCX and BMP files are two common
  bitmap formats for the PC environment. They work
  well for on-screen presentations and work well in
  PC-oriented workflows. They are not good for
  cross platform work and are not very well
  supported in the PostScript printing world. WMF,
  Windows Metafile, is another common Windows file
  format. Because it consists of a series of
  Windows drawing commands, it is an excellent
  format for transferring files from one Windows
  machine to another.
• PICTPICT was a format developed by Apple
  Computer. It could not be separated into CMYK for
  printing so they did not process and print well.
  PICT files were often used for multimedia in a
  Mac-only workflow. (Has been replace by PDF)

10
Graphic File Formats

• Common Web File Formats
• GIFGraphics Interchange Format
• JPEGJoint Photographic Experts Group
• PNGPortable Network Graphic

11
Whats your output device?

• We prepare images based on the output device.
• Images for PRINT
• Should have a higher resolution
• Usually in CMYK color mode
• Images for VIDEO
• Usually have a lower resolution
• Use RGB color mode

12
What is Resolution?

• The number of PIXELS PER INCH (ppi) in an image
• PIXEL
• An abbreviation for picture element.
• The smallest element of a bitmap image
• Monitors and printers use a fine grid of pixels
  to display images
• Each pixel can be turned on or off and assigned a
  color.

13
Resolution

• When we create or scan a digital image we
  determine pixel information (resolution)
• Scanners record the color value and brightness of
  each area of an image when scanned.
• WE decide how much pixel information to capture
  by setting the resolution as we scan.
• The resolution or image dimension determines what
  we can do with the image (print/video)

14
Print Resolution

• Higher resolution images...
• Contain more pixels
• can reproduce more detail subtle color
  transitions when printed
• Have a larger file size

15
Print Resolution

• Printer resolution ( the number of ink dots per
  inch(printed) dpi
• Laser printers can range from 600dpi to 1200dpi
  even higher
• Common resolution settings
• 72DPI monitor or web
• 100DPI 300DPI printer
• 200DPI 600DPI printer
• 300DPI 1200DPI printer

16
Resolutionwhy 72 ppi?

• Web graphics should have a lower resolution
  (typically 72 ppi)
• Image pixels map one-to-one with the display
  resolution of a monitor
• Monitor resolution varies by platform and user
  configuration
• Monitor resolutions
• http//www.thecounter.com/stats/2006/September/res
  .php

17
Resolutionwhy 72 ppi?

• High resolution graphics not needed online.
  They just appear larger on screen and take up
  more file size and bandwidth.

18

• PLEASE DONT LET THIS HAPPEN!!

• Good Ducky!

• Bad Ducky!

• http//www.sois.uwm.edu\EPub\class\calendar\0110Le
  cture1.htm

19
SVG

• Scalable Vector Graphics
• Text-based graphics language (based on XML)
• Developed as a standard for animation
  interactive applications using vector object
  shapes, raster images, and text on the web
• Flash (SWF)
• http//www.w3.org/TR/SVG/intro.html

20
SVG - Benefits

• SVG Content can be dynamic interactive
• Supports animation
• Responds to user input
• Compact / High quality graphics
• Small file size (quick downloads)
• Resolution Media Independent
• Crisp, clean graphics online and in print at any
  size (1600 zoom)
• Supports css, scripting
• Searchable (text stays text)

21
SVG Development Support

• Targeted at resource-limited devices (mobile
  handsets, hand-held devices (PDAs)
• Mobile phone industry
• Developed SVG mobile profile (basis for many
  mobile graphics plateforms)
• Services that focus on GIS (location based
  services and spatial info via mobile pda)
• Rich graphics
• Vector raster support
• Compact files (large amounts of data)

22
Resources

• Adobe Web Tech CurriculumLesson 5.1 Graphics
  Basicshttp//www.adobe.com/education/instruction/
  webtech/CS2/unit_graphics1/gb_print.htm
• Scalable Vector Graphicshttp//www.adobe.com/svg/
  viewer/install/main.htmlhttp//www.w3.org/TR/SVG/
  intro.html
• Scanning Tips by Wayne Fulton http//www.scantips
  .com/