Upload
theodora-xena
View
34
Download
1
Tags:
Embed Size (px)
DESCRIPTION
web graphics. Discussion Session August 16, 2000. Starting Points. Web Graphics Fundamentals Color Space Color Depth Dithering and Antialiasing Color Matching and Gamma Correction Raster vs. Vector True vs. Web Image Formats. Color Space. - PowerPoint PPT Presentation
Citation preview
Starting PointsStarting Points
Web Graphics Fundamentals
Color Space
Color Depth
Dithering and Antialiasing
Color Matching and Gamma Correction
Raster vs. Vector
True vs. Web Image Formats
Web Graphics Fundamentals
Color Space
Color Depth
Dithering and Antialiasing
Color Matching and Gamma Correction
Raster vs. Vector
True vs. Web Image Formats
Color SpaceColor Space
Model for representing colors numerically – Color space
Most common color space – RGB
Every instance of color identified by three numbers – Channels
Intensity of red, green, and blue specified as number – 0 (dark) to 255 (full intensity)
Model for representing colors numerically – Color space
Most common color space – RGB
Every instance of color identified by three numbers – Channels
Intensity of red, green, and blue specified as number – 0 (dark) to 255 (full intensity)
RGB Color Space CombinationsRGB Color Space Combinations
Channel intensity variations create individual colors on your monitor
Combinations like these produce pure, bright hues
Channel intensity variations create individual colors on your monitor
Combinations like these produce pure, bright hues
RGB Color Space CombinationsRGB Color Space Combinations
Increasing all channels at once adds white – creates a pale tint
Reducing the strongest colors adds black – creates a dark shade
Doing both adds gray – creates a muted tone
Increasing all channels at once adds white – creates a pale tint
Reducing the strongest colors adds black – creates a dark shade
Doing both adds gray – creates a muted tone
Color DepthColor Depth
RGB measures each channel from 0 to 255 – range from 8 bits of data
Color depth is amount of data used to represent a color
Color depth is important in two respects
Color depth of hardware – monitor, video adapter, software drivers
File color depth – file storage format
RGB measures each channel from 0 to 255 – range from 8 bits of data
Color depth is amount of data used to represent a color
Color depth is important in two respects
Color depth of hardware – monitor, video adapter, software drivers
File color depth – file storage format
True-Color DepthTrue-Color Depth
Three RGB 8-bit channels = 24-bit color depth = true-color
True-color monitors display every pixel color exactly
Shown as millions of colors in monitor settings
16,777,216 RGB combinations
True-color image files record the full range of colors precisely
Three RGB 8-bit channels = 24-bit color depth = true-color
True-color monitors display every pixel color exactly
Shown as millions of colors in monitor settings
16,777,216 RGB combinations
True-color image files record the full range of colors precisely
High-Color DepthHigh-Color DepthTrue color allows more hues than the eye can distinguish Operating systems offer 16-bit high color – thousands of colorsMonitor displays only 32 levels of red, 32 of blue, and 64 of greenReducing color depth to 16 bits per pixel boosts video performanceData rounded off only on display – files unaffected – few 16-bit formats
True color allows more hues than the eye can distinguish Operating systems offer 16-bit high color – thousands of colorsMonitor displays only 32 levels of red, 32 of blue, and 64 of greenReducing color depth to 16 bits per pixel boosts video performanceData rounded off only on display – files unaffected – few 16-bit formats
Indexed Color DepthIndexed Color Depth
Older hardware and certain file formats can display only 8 bits per pixel
8-bit environments use indexed color
The system or image file maintains a color table, or palette, of up to 256 colors
Indexed color lets 8-bit displays and images simulate true color
Older hardware and certain file formats can display only 8 bits per pixel
8-bit environments use indexed color
The system or image file maintains a color table, or palette, of up to 256 colors
Indexed color lets 8-bit displays and images simulate true color
Dithering and AntialiasingDithering and Antialiasing
Images may have more colors than the monitor can show or details too small for the pixels to render
Solutions to these problems are dithering and antialiasing
Images may have more colors than the monitor can show or details too small for the pixels to render
Solutions to these problems are dithering and antialiasing
DitheringDitheringCreates illusion of more colors by creating a diffuse pattern of pixels approximating the desired colorDisplay applications, like web browsers, dither images running on 8-bit display systemsImage editors use dithering to convert true-color images to indexed colorsAlternative to dithering is color substitution – uses the closest color on the palette
Creates illusion of more colors by creating a diffuse pattern of pixels approximating the desired colorDisplay applications, like web browsers, dither images running on 8-bit display systemsImage editors use dithering to convert true-color images to indexed colorsAlternative to dithering is color substitution – uses the closest color on the palette
ComparingImagesComparingImages
True color image example
Dithered image example
Color substitution image example
True color image example
Dithered image example
Color substitution image example
AntialiasingAntialiasing
Regardless of color depth computers render pixels in a grid
Creates problems for non-grid shaped images
Strict division between pixels is called alias
Applications use antialiasing to smooth out these divisions
Regardless of color depth computers render pixels in a grid
Creates problems for non-grid shaped images
Strict division between pixels is called alias
Applications use antialiasing to smooth out these divisions
Antialiasing ExampleAntialiasing Example
Antialiasing interpolates colors creating the illusion of smooth non-horizontal or non-vertical boundaries
Antialiasing interpolates colors creating the illusion of smooth non-horizontal or non-vertical boundaries
Aliased type Antialiased type
AntialiasingAntialiasing
Antialiased type appears smoother and more legible than pixilated aliased typeAntialiased images typically look less blocky and more professionalAntialiased images tend to require more colors increasing file size
Antialiased type appears smoother and more legible than pixilated aliased typeAntialiased images typically look less blocky and more professionalAntialiased images tend to require more colors increasing file size
Color Matching and Gamma CorrectionColor Matching and Gamma Correction
The RGB color model measures color relative to the hardware being used at the timeGraphics developed on one platform don't look the same on anotherAn image that looks great on a PC may appear pale or washed out on a Macintosh
The RGB color model measures color relative to the hardware being used at the timeGraphics developed on one platform don't look the same on anotherAn image that looks great on a PC may appear pale or washed out on a Macintosh
Color Matching and Gamma CorrectionColor Matching and Gamma Correction
The relation between RGB values and the actual color displayed on the screen is almost never linearA red channel set to 200 should theoretically be twice as bright as a red channel set to 100The actual relation, called gamma, varies from computer to computer
The relation between RGB values and the actual color displayed on the screen is almost never linearA red channel set to 200 should theoretically be twice as bright as a red channel set to 100The actual relation, called gamma, varies from computer to computer
Color Matching and Gamma CorrectionColor Matching and Gamma Correction
Color management is a problem with many computer peripheralsGamma correction solves color management for Web graphicsPortable Network Graphics (PNG) format includes gamma valuesWeb browsers and graphics applications have only recently begun to support PNG
Color management is a problem with many computer peripheralsGamma correction solves color management for Web graphicsPortable Network Graphics (PNG) format includes gamma valuesWeb browsers and graphics applications have only recently begun to support PNG
Raster Images Raster Images
Image data format determines your options for changing it
Raster image-file formats record images in pixels
Edited only by altering the pixels directly with a bitmap editor
Tools include apps like Photoshop and Paint Shop Pro
Image data format determines your options for changing it
Raster image-file formats record images in pixels
Edited only by altering the pixels directly with a bitmap editor
Tools include apps like Photoshop and Paint Shop Pro
Vector ImagesVector Images
Vector image files record images descriptively, in terms of geometric shapesVector shapes are converted to bitmaps for displayVector images are easier to modify than raster images
Components can be moved, resized, rotated, or deleted independently
Vector image files record images descriptively, in terms of geometric shapesVector shapes are converted to bitmaps for displayVector images are easier to modify than raster images
Components can be moved, resized, rotated, or deleted independently
Vector ImagesVector Images
Flash is closest to a standard vector format for Web graphics
Scalable Vector Graphics (SVG) is the only W3C-supported vector format – still under development
Tools include apps like Illustrator, Freehand, and CorelDRAW
Flash is closest to a standard vector format for Web graphics
Scalable Vector Graphics (SVG) is the only W3C-supported vector format – still under development
Tools include apps like Illustrator, Freehand, and CorelDRAW
Raster vs. Vector Raster vs. Vector
Raster images are usually more lifelike and realistic
Vector images are usually smaller and animate well on the Web
Raster images are usually more lifelike and realistic
Vector images are usually smaller and animate well on the Web
True vs. Web Image FormatsTrue vs. Web Image Formats
Choice of image format is based on a variety of factors
Future editing
Smallest possible file for downloading over the Web
Image editing tools available
Choice of image format is based on a variety of factors
Future editing
Smallest possible file for downloading over the Web
Image editing tools available
True Image FormatsTrue Image Formats
Accurately stores an image for future editingDozens – if not hundreds – of existing true image formatsEvery major computer operating system has its own native image format – BMP, PICT, XWDAll of these formats support full 24-bit color depth
Accurately stores an image for future editingDozens – if not hundreds – of existing true image formatsEvery major computer operating system has its own native image format – BMP, PICT, XWDAll of these formats support full 24-bit color depth
True Image FormatsTrue Image Formats
TIFF (Tagged Information File Format) is intended for cross-platform use
PNG is the most promising loss-free format for cross-platform use
Accurately compresses 24- or even 32-bit color images (24 + 8bit alpha)
Intended to be a Web format
TIFF (Tagged Information File Format) is intended for cross-platform use
PNG is the most promising loss-free format for cross-platform use
Accurately compresses 24- or even 32-bit color images (24 + 8bit alpha)
Intended to be a Web format
Web Image Format: GIFWeb Image Format: GIF
CompuServe's GIF (Graphics Interchange Format) compresses images in two ways
Uses Lempel-Ziv encoding which counts rows of like-colored pixels as a single unitLimits itself to indexed color
GIF can have 256 colors or lessIdeal for simple line art
CompuServe's GIF (Graphics Interchange Format) compresses images in two ways
Uses Lempel-Ziv encoding which counts rows of like-colored pixels as a single unitLimits itself to indexed color
GIF can have 256 colors or lessIdeal for simple line art
Web Image Format: GIFWeb Image Format: GIF
GIF has a couple of unique and useful features
Files can contain several images and a duration value for each one to produce animations
Files can have limited transparency – one color in an image's palette
GIF has a couple of unique and useful features
Files can contain several images and a duration value for each one to produce animations
Files can have limited transparency – one color in an image's palette
Web Image Format: JPEG Web Image Format: JPEG
JPEG (Joint Photographic Experts Group) format supports full 24-bit colorCompresses images by accurately recording the brightness of each pixel but averaging out the huesRecords a description of an image, not the actual image itself
JPEG (Joint Photographic Experts Group) format supports full 24-bit colorCompresses images by accurately recording the brightness of each pixel but averaging out the huesRecords a description of an image, not the actual image itself
Web Image Format: JPEG Web Image Format: JPEG
Web browser or graphics application decodes this description into a bitmap that looks more or less like the original image
Accuracy of the reconstructed image depends on how much compression is applied
Web browser or graphics application decodes this description into a bitmap that looks more or less like the original image
Accuracy of the reconstructed image depends on how much compression is applied
Web Image Format: JPEG Web Image Format: JPEG
Works very well for photographic images with gradual color changes and no sharp edges
JPEGs are notoriously difficult to edit – modifying interpreted bitmap rather than the JPEG data itself
Resaving as a JPEG will put the interpreted bitmap, defects and all, back through the encoding process resulting in further image degradation
Works very well for photographic images with gradual color changes and no sharp edges
JPEGs are notoriously difficult to edit – modifying interpreted bitmap rather than the JPEG data itself
Resaving as a JPEG will put the interpreted bitmap, defects and all, back through the encoding process resulting in further image degradation