Digital Images

1
Digital Images

• Scanning and Editing Graphics

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
(No Transcript)
6
Graphic File Formats

• TIFF EPS
• PCX BMP
• PICT
• GIF, JPEG and PNG

7
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

8
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.

9
Resolution

• When we create or scan a digital image we are
  capturing pixel information
• 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)

10
Print Resolution

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

11
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

12
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

13
Resolutionwhy 72 ppi?

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

14
Points to Remember

• PLEASE DONT LET THIS HAPPEN!!

• Good Ducky!

• Bad Ducky!

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

15
Points to Remember

• To get good quality images must understand image
  dimension.
• We must create or edit the image size to be
  suitable for the way we will use it.
• Start with a good scan.
• If you plan to edit or scale the image in any
  way, start with a higher resolution image and
  optimize and compress image for web after all
  edits are complete.

16
Optimizing Web Graphics -GIF

• GIF (Graphic Interchange Format)
• In general, best for line drawings, cartoons,
  illustrations, logos, or images that use large
  flat areas of color.
• Lossless compression
• 8-bit color support
• Supports interlacing
• Supports transparency
• Supports animation

17
Optimizing Web Graphics -JPEG

• JPEG (Joint Photographic Expert Group)
• In general, best for continuous-tone photographic
  images
• Lossy compression
• 24-bit color support (millions of colors)
• Progressive JPEG

18
Optimizing Web Graphics -Compression

• The process of reducing the amount of information
  needed to display an image file. Compression
  shrinks the file size which results in faster
  download times.
• Lossless compression
• Lossy compression

19
Compression- Lossy

• Lossy A compression method, which creates
  smaller files sizes by discarding parts of the
  image information. Lossy compression removes
  details and color information that may be
  unnoticed by the human eye.

20
Compression- Lossless

• Lossless A compression method that creates
  smaller files sizes by rewriting the image data
  into a compressed version of the same thing.
  Lossless compression does not remove any of the
  image data it simply uses fewer words to say the
  same thing.

21
Bit Depth

• The number of bits used to represent the colors
  of each pixel in an image. The greater the bit
  depth means more bits of information per pixel.
• 8-bit setting will display 256 colors
• 16-bit setting will display thousands of colors
• 24-bit setting will display millions of colors

22
Web-safe colors?

• A color palette made up of 216 colors that are
  commonly used on most computer platforms,
  operating systems, and browsers. Although a
  computer monitor is able to display more than 216
  colors, this system was created so that monitors
  using a 256 setting on either MAC or PC, would
  see the same range of colors without dithering.
• Do we need to worry about using web-safe colors?

23
Dithering Gamma

• Dithering The combining of different-colored
  pixels from a 256-color palette into an image to
  simulate a color that cannot be displayed on a
  256-color monitor.
• Gamma The measure of light intensity on display
  devices
• MAC1.8 gamma setting
• PCs 2.2 gamma setting (Graphics will appear
  darker on a PC than on a MAC)
• Gamma simulators available in many graphics
  software programs

24
Resources

• Adobe Web Tech CurriculumLesson 5.1 Graphics
  Basicshttp//www.adobe.com/education/instruction/
  webtech/CS2/unit_graphics1/gb_print.htm
• Scanning Tips by Wayne Fulton http//www.scantips
  .com/