Graphical images
1 / 16

Graphical images - PowerPoint PPT Presentation

  • Updated On :

Graphical images. Bit-mapped (or raster-based) image: Matrix describing the individual dots that are the smallest elements (pixels) of resolution on a computer screen or printer Bit-map tools ‘paint’ pixels of images Vector-based image: Formulas representing geometric shapes

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Graphical images' - Jeffrey

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Graphical images l.jpg
Graphical images

  • Bit-mapped (or raster-based) image:

    • Matrix describing the individual dots that are the smallest elements (pixels) of resolution on a computer screen or printer

    • Bit-map tools ‘paint’ pixels of images

  • Vector-based image:

    • Formulas representing geometric shapes

    • Vector-based tools ‘draw’ shapes of images

Bit map color depths l.jpg
Bit map color depths

  • N bit depth can represent a range of 2N colors

    • What is the range of 8-bit color depth (GIF)?

    • How many bits per pixel for monochrome?

    • How many bits per pixel for grey scale?

More color depth l.jpg
More color depth

  • Why is 24-bit color called “millions of colors”?

  • What are the tradeoffs of more or less depth?

    • Photorealism vs. file size

  • JPEG preserves 16-bit color depth

  • Photoshop saves in 32-bit color depth:

    • 24-bit color: 8 bits each for red, green & blue

    • 8-bit alpha: transparency mask

Rgb model is additive l.jpg
RGB model is additive

Red=Green=Blue=0 is black

(no color)

Add Red only

How to make pure white?

Add some blue

Hsb model l.jpg
HSB model

  • Based on human perception

    • Hue: color reflected from or transmitted through an object

    • Saturation: strength of color (% grey)

    • Brightness: relative lightness from black (0%) to white (100%)

Cmyk model l.jpg
CMYK model

  • Based on light-absorbing quality of ink printed on paper

    • As light is absorbed, part of spectrum is absorbed and part reflected back to eyes

    • So CMYK is a subtractive model (RGB is additive)

  • 4 channels: Cyan (C), magenta (M), yellow (Y), black (K)

    • In theory, pure colors should produce black, but printing inks contain impurities

    • So combining 3 pure colors produces muddy brown

    • Therefore pure K is needed to produce pure black

    • Hence CMYK is four-color process printing

Color gamut l.jpg
Color gamut

  • Eyes see more than screens or printers can show

  • Gamut is the range of a color model

  • RGB and CMYK show different subsets of colors

Alpha channel l.jpg
Alpha channel

  • Alpha channel stores mask information

    • A mask lets part of an image be transparent so that other layers show through

    • 8-bit mask value determines degree of transparency

    • So Photoshop files have 3 channels for color and 1 alpha (32 bits per pixel)



Clut or palette l.jpg
CLUT or Palette

  • 8-bit color is low-cost, limited gamut

    • GIF and web-safe colors are 8-bit

    • Indexing millions of colors to 256 is arbitrary

    • Here are some standard and custom palettes

Macintosh CLUT

(Color Look-Up Table)

Web-safe palette

(216 colors)

Palette issues l.jpg
Palette issues

  • What happens when converting from 24- to 8-bit color depth?

    • Dithering: finding closest possible color in palette

  • Why might a custom palette be useful?

    • Matching colors of a photograph

  • What happens when switching palettes?

    • Screen flashing

    • Avoid it by fading images to white or black

Bitmap compression l.jpg
Bitmap compression

  • .bmp, .pict or .psd files can be large

  • CODEC (compressor/decompressor) algorithms reduce file size

  • GIF codec removes repetition

    • E.g., if there’s a string of 100 pixels with the code 196, GIF encodes one 8 bit number to represent the color then two numbers that repeats that value 196 times

Bitmap compression 2 l.jpg
Bitmap compression (2)

  • JPEG uses a more complex codec:

    • Since most neighboring pixels have similar colors, group them into blocks of 4 to 16 pixels.

    • Then determine average values for a block. E.g., for pixels 459BF0, 459BF2, 459BED and 459BF0, the average is 459BF0.

    • Then encode the average, plus differences for individual pixels.

    • Next, quantize the blocks, by calculating the average of a group of adjacent blocks.

  • GIF is a lossless algorithm, whereas JPEG is lossy (averaging may lose information).

Gif or jpeg l.jpg

  • See graphics comparisons here

  • What rules of thumb do you infer about when to use GIF vs JPG?

  • GIFs work best large areas of the same color and a moderate level of detail

  • JPEG works best for continuous tone images, such as full-color photographs

Vector drawn images l.jpg
Vector-drawn images

  • Created from lines, rectangles, ovals, polygons using mathematical formulas

  • RECT 0,0,300,200,RED,BLUE says:

    • ”Draw a rectangle starting at 0,0 (upper left corner of screen) going 300 pixels horizontally right and 200 pixels downward, with a RED boundary and filled with BLUE.”

  • How can vectors be smaller than bitmaps?

  • Macromedia Freehand, Corel Draw & Adobe Illustrator are vector-drawing applications

  • Flash puts vector-drawing on the Web

  • Drawing vs painting l.jpg
    Drawing vs. painting

    • Drawing tools feature tools for drawing rectangles, polygons, ellipses, lines, freehand, plus reflect and scale

      • Convert bitmaps to vector formulas by autotracing shapes

      • E.g., in Flash 5, Modify > Trace BitMap

    • Paint/image processing feature tools for paint bucket, sharpen/blur, magic wand (to copy pixels)

      • Convert vector-based drawings to bitmaps by rasterizing

    3d graphics l.jpg
    3D graphics

    • Extend vector-drawn graphics in 3 dimensions x, y and z

    • Objects as a whole have properties such as shape, color, texture, shading & location. Extrusion and lathing.

    • Modeling also deals with lighting:set camera view to project shadows

    • A 3-D applications lets you model an object’s shape, then render it completely

    • To create Toy Story, Pixar used a farm of 117 SparcStations, each with 192-384MB RAM plus swap space, running Pixar’s proprietary Renderman software.