MAR203: Graphics, Part I

Understanding Your Computer Screen

Pixels, Pixels, Pixels: Color

• Screen is made up of little dots of light (see diagram, IT&S, 155)
  • Image is created by electron gun zapping them and turning them a certain color
  • Three phosphor dots (red, green, blue--or RGB) create one colored pixel
• But not all pixels are created equal; some monitors are able to create more colors from these RGB pixels than others
  • The more colors available, the better the image will look
• Monitors are rated in terms of the maximum number of colors they are capable of displaying (explain bit depth [how many binary digits [IT&S, 80] are used to create color; 2 to the power of x] after number of colors):
  • 2 = 1-bit
    • Black and green/amber/white in monochrome displays
  • 16 = 4-bit (2x2x2x2)
    • Old standard, especially for Windows 3 machines
  • 256 = 8-bit
    • Current standard for the Web
  • 65,500 (64k) = 16-bit
    • Often just referred to as "thousands of colors" or "high color" (Windows95)
  • 16,700,000 = 24-bit
    • Or, "millions of colors" or "true color" (Win95)
• Many monitors allow you to select a lower number of colors than is their maximum capacity--which is useful for Web design
  • Show how to change color settings in Mac, Win95
  • E.g., sample photo at different color settings (though projector is limited to 256 colors)
  • 
  • Have students pull up image on their computers in thousands or millions of colors

Pixels, Pixels, Pixels: "Size"

• "Size" is a misnomer--actually all pixels are same size--but some monitors can squeeze more onto the screen by decreasing the space between them (which is known as the dot pitch)
  • Usually referred to as screen resolution or dimension
• Monitor resolution is rated in terms of the maximum number of pixels it is capable of fitting on the screen:
• 640x480
  • Horizontal x vertical
  • De facto standard for Web
• 800x600
  • Common upgrade
• Many monitors allow you to select a lower resolution than is their maximum capacity--which is useful for Web design
  • Show how to change color settings in Mac, Win95
  • E.g., sample photo at different resolution (though projector is limited to 640x480?)
• How many pixels in an inch then?
  • At the standard of 640x480, there are 72 pixels (or dots) per inch (dpi)
  • E.g., same image at different resolutions is physically a different size

Understanding Images Created For Your Computer Screen

Color

• Similar to monitor capacity, images are also rated in terms of the number of colors that they contain
• An image can contain millions of colors; but ultimately the way is appears depends on how many of those colors the monitor can reproduce
  • If a monitor cannot handle all the colors you've packed into an image, it'll do its best to reproduce most of them--with varying results

Size

• Since most users have a screen resolution of 640x480, the standard dpi of images on the Web is 72

Using Adobe Photoshop to Capture Images

• A scanner is a device much like a fax machine or a photocopier
• Converts a paper image or 3D object into digital form
  • Line by line
    • Reads the image one pixel-sized line at a time and converts it to a screen image
• Once in the computer, each of those pixels may be manipulated--allowing for endless creative potential

Scanning: Step by Step

1. Select File Menu, then Import, and the name of the scanning device [e.g., Silverscan II] attached to the computer.
2. Choose "Resolution".
   • Choose 72 dpi if going straight to the Web; or a higher resolution if you're going to manipulate it.
3. Set "Ruler" to "pixels."
4. Choose "Scanning Mode" to set number of colors
   • "Full" = thousands of colors; other choices = numbers of colors
5. Select preview to see the size and orientation.
6. Adjust the selection markers (the little dotted lines) to crop the image.
7. Scan it by hitting the Acquire button!
8. Manipulate it.
9. Save it in either Photoshop, CompuServe GIF or JPEG format.
   • Filename conventions:
     • End with an extension: .psd, .gif, .jpg or .jpeg
     • No spaces!

File Formats

• There are many different ways of storing image information in a file
  • Just as there are many different ways of storing word processed information in a file (e.g., MS Word and Corel WordPerfect files hold information in incompatible ways)
  • Each of these ways is known as a file format
• Almost all images on the Web are either in the GIF or JPEG format--to be discussed Friday
  • GIF = "Graphic Interchange Format"
    • Initially developed for an online service (CompuServe) in the 1980s and owned by Unisys
    • Noone can agree on how to pronounce it: "jif" or "gif"!
  • JPEG = "Joint Photographic Experts Group"
    • Pronounced "jay-peg"