Chapter 8 Graphics Graphics This assortment of graphics

Chapter 8 Graphics

Graphics This assortment of graphics includes: • clipart • logos • line art • and symbols

Images A large collection of photographic images.

Negative to Photographic Prints • Analog photography: a negative is used to make prints • Digital photography: a binary image is used for output

Pixels Thirty-five red pixels coalesce to form this bitmap graphic of a capital letter H. A raster image is also called a bitmap.

Raster Images – Mosaic pixels are large

Raster Images – Digital pixels are much smaller You have to zoom in really close to see the pixels used to form this image.

• Most images you see on your computer screen are raster graphics. • Pictures found on the Web and photos you import from your digital camera are raster graphics. • The larger the image, the more disk space the image file will take up.

• Fortunately, there are several image compression algorithms that have been developed to help reduce these file sizes. JPEG and GIF are the most common compressed image formats on the Web, but several other types of image compression are available. • Raster graphics can typically be scaled down with no loss of quality, but enlarging a bitmap image causes it to look blocky and "pixelated. " • For this reason, vector graphics are often used for certain images, such as company logos, which need to be scaled to different sizes.

Resolution This series of triangles progresses from low to high resolution.

Number of Pixels This low-res image of President Ronald Reagan if formed with nearly 10, 000 Jelly Belly jelly beans (pixels).

Number of Pixels This hi-res digital image of President Reagan has 4 MILLION pixels.

Color Wavelengths The primary and secondary colors of white light become visible when refracted through a glass prism.

RGB Color Space • The primary colors of light are RED, GREEN, and BLUE. • Adobe Photoshop CS 5’s color picker is used for mixing colors.

RGB Color Space RGB color space is used for multimedia: • Animation • Computer Graphics • Digital Photography • Television/Video • Web • etc.

CMYK Color Space CMYK color space is used for four-color printing. • Books • Magazines • Newspapers • etc.

24 -bit RGB Color (true color) Any pixel in a 24 -bit color image can have one of 16. 8 million values.

Determining Pixel Count Pixel count is determined by multiplying the number of pixels across by the number of pixels high.

Resolution Sizes This chart displays resolution sizes and compression settings for the Canon G 12 digital camera.

Scaling is the act of resizing a digital image.

1. Scaling Upscaling Downscaling • Upscaling enlarges the size of the raster image • Downscaling decreases the size of the raster image

2. Resampling With resampling, both the pixel dimensions and the resolution of a raster image can be altered by applying mathematical algorithms that systematically add or delete color information during image resizing.

3. Cropping You can crop an image to change or enhance the subject’s focus. Cropping permanently deletes pixels from a digital image while preserving the original color values of the uncut pixels.

Aliasing Pixels create a visual stair-step effect known as aliasing. Anti-aliasing minimizes the effect.

Anti-aliasing Bitmap editing programs offer different antialiasing methods.

Compression This high-res photo contains lots of redundant information – perfect for JPEG compression.

Image Optimization Adobe Photoshop’s Save for Web interface allows you to perform a side-by-side comparison of different compression settings and file formats to achieve the optimum result (highest resolution/lowest file size).

Compression – can you see a difference?

Vector Images Vector images: • Crisp edges • No aliasing • Can be resized up or down

Paint-by-Numbers – paths vs. pixels A vector graphic is rendered geometrically in much the same way as a paint-by-numbers image.

Digital Screen Sizes Vary Digital screen sizes and resolutions for mobile devices.

Web Page Viewing - Actual size vs. magnified Ø Actual size (top) Ø Zoomed in (bottom) – zooming in enlarges the pixels, thus reducing resolution.

Common display resolutions

Interlaced vs. Progressive Scan § Broadcast TV (left): interlaced § Web Video (right): delivered progressively

Moving Images Moving images are created through a perceptual illusion, achieved by the rapid projection of individual still frames of film or video.

Then & Now! An oldfashioned analog television (left) vs. a modern home theater system complete with flat screen monitor and surround sound.