MMT image & graphics

Text Audio Image/Graphics Movie Animation

imageandgraphics

Agenda • Raster graphics vs Vector graphics • Raster graphics • Raster image formats • Acquiring an image • Editing raster images • Vector graphics • Vector drawing formats

Raster Graphics vs Vector Graphics

Raster Graphics vs Vector Graphics Raster graphics (bitmap image)

Raster Graphics vs Vector Graphics Raster graphics Vector graphics (bitmap image) (drawing)

“Let’s take a look at Google Earth, for live demo...”

Raster Graphics • A raster image is composed of small, independently controlled dots (pixel, picture elements). • These dots are arranged in rows (x) and column (y), just as information is displayed on computer screens and most printers. • ‘Bitmap image’ comes from the description of the image pixels by bits and speciﬁc (x,y) coordinate.

Image Resolution • Image resolution is described by the number of pixels in its height and width. • The more pixels in an image, the higher its level of details or clarity. • The drawback = larger ﬁle size.

Anti-Aliasing • Aliasing is the jagged part in a line, curve, or edge that results from an image on a raster grid. • We call the jagged stairsteplike effect as the “jaggies”. • Anti-Aliasing diminishes jaggies → smooth edge.

Anti-Aliasing jaggies • Aliasing is the jagged part in a line, curve, or edge that results from an image on a raster grid. • We call the jagged stairsteplike effect as the “jaggies”. • Anti-Aliasing diminishes jaggies → smooth edge.

Color Depth • Color depth describes the number of bits used to represent the color of a single pixel in a bitmapped image.

2.2 LCD Displays 2.3 Truecolor 2.4 32-bit color 2.5 Beyond truecolor Color Depth 2.5.1 BrilliantColor 3 Selection of color depth 4 See also 5 References 6 External links Indexed color With relatively low color depth, the stored value is typically an index into a color map or palette. The colors available in the palette itself may be fixed by the hardware or modifiable. Modifiable palettes are sometimes referred to as pseudocolor palettes. 1-bit color (2 1 = 2 colors) monochrome, often black and white • Color depth describes the 2-bit color (2 2 = 4 colors) CGA 4-bit color (2 4 = 16 colors) as used by EGA and by the least common denominator VGA standard at higher resolution 6-bit color (2 6 = 64 colors) Original Amiga chipset number of bits used to 8-bit color (2 8 = 256 colors) Most early color Unix workstations, VGA at low resolution, Super VGA, AGA represent the color of a single 12-bit color (2 12 = 4096 colors) some Silicon Graphics systems and Amiga systems in HAM mode. pixel in a bitmapped image. Old graphics chips, particularly those used in home computers and video game consoles, often feature an additional level of palette mapping in order to increase the maximum number of simultaneously displayed colors. For example, in the ZX Spectrum, the picture is stored in a two-color format, but these two colors can be separately defined for each rectangular block of 8x8 pixels. Direct color As the number of bits increases, the number of possible colors becomes impractically http://en.wikipedia.org/wiki/Color_depth Page 1 of 4

Color Depth Color depth No. of colors Color mode Palette 1-bit color 2 Indexed color Yes 4-bit color 16 Indexed color Yes 8-bit color 256 Indexed color Yes 24-bit color 16,777,216 True color No

True Color RGB • In true color images, each pixel is deﬁned in terms of its actual: • red, green, blue (RGB) • cyan, magenta, yellow, black (CMYK) CMYK

Dithering • Dithering alternates the value of adjacent dots or pixels to create the effect of intermediate values. • Dithering is useful when performing color reductions. • Dithered images sometimes look grainy.

Dithering

Image Compression • Image compression is the application of data compression to digital images. • Reduce redundancy of the image data for efﬁcient storage or transmission of the image ﬁle.

Lossless vs Lossy • Two techniques:

Lossless vs Lossy • Two techniques: • Lossless - the data are compressed and uncompressed with no loss of information. The amount of compression is limited.

Lossless vs Lossy • Two techniques: • Lossless - the data are compressed and uncompressed with no loss of information. The amount of compression is limited. • Lossy - the uncompressed ﬁle is not exactly the same as the original. Some loss of minor data occurs. Much greater compression is possible.

Raster Image Formats • Native and nonnative format • Native - the ﬁle is intended to be opened only with the application that was used to create it. (say, PSD of Adobe Photoshop.) • Nonnative - cross-application compatible, which means that any applications can open and save in this format. • GIF, JPG, and PNG are most common.

GIF (pronounced ‘jif ’) • Graphics Interchange Format (GIF) • developed by Compuserve • uses 8-bit color • lossless compression, LZW (Lempel-Ziv- Welch) algorithm.

GIF • Best suited for • simple graphics • line drawings • cartoons • navigation buttons • image containing text (limited range of colors)

GIF (Transparent)

GIF89a (Animation) GIF animation is simply a ﬁle with multiple images stored in it. So, think about the size.

GIF89a (Animation) GIF animation is simply a ﬁle with multiple images stored in it. So, think about the Oh... and it has no sound.... size.

JPG • Developed by the Joint Photographic Expert Group. • 24-bit color is allowed • lossy compression - allow for smaller ﬁle size but with the sacriﬁce of some clarity

JPG ☺ best for photographic images (for which a variety of colors is important)

JPG ☹ jpg gif not suitable for line drawing or images with text

PNG • Portable Network Graphics (pronounced ping) • allow for true color • lossless compression • sophisticated transparency • support by modern web-browsers

Raster Image File Formats • .bmp • .psd • commonly used by • default proprietary MS-Windows format of Adobe Photoshop • lossless compression can be speciﬁed • extra features e.g. layering • uncompressed in some programs

Raster Image File Formats • .tiff / .tif • used extensively for traditional print graphics • lossy & lossless compression available

Acquiring an Image • Screen capture • Scanner • Digital camera & digital VDO camera • Other sources

Screen Capture

Screen Capture n at i ve s A l te r O S or App

Scanner

Scanners Flatbed Sheet-fed

Scanners Handheld Drum Use photomultiplier tube (PMT) instead of CCD (read more on wiki)

TWAIN Prior to TWAIN capture in one application

TWAIN Prior to TWAIN save the ﬁle

TWAIN Prior to TWAIN

TWAIN Prior to TWAIN open with another app

Using TWAIN

Using TWAIN OP. E ST It’s ON

Scanned Image Size (in 24-bit color) Resolution image dimension (dpi) 1”x1” 4”x6” 8.5”x11” 72 15 KB 356 KB 1,420 KB 100 29 KB 703 KB 2,739 KB 300 264 KB 6,328 KB 24,653 KB 600 1,055 KB 25,313 KB 98,613 KB

Digital Camera & VDO Camera

JPEG vs RAW • Normally, digital cameras save their images in the JPEG format. • Automatically adjusts: white-balance and all. • RAW format is exactly what the camera sees when it takes the picture; NO adjustments have been made to the images. BUT, the ﬁle is a lot bigger in size...

Type of image Min resolution Camera Spec. Web images 640x480 1 megapixel + 5”x7” 2048x1536 3 megapixels + 8”x10” 2272x1704 4 megapixels + 16”x20” 3072x2048 6 megapixels +

Editing Raster Images • Selecting an Area • Cropping • Image resizing & canvas size • Rotating • Adjusting the balance

Editing Raster Images • Sharping the contrast • Adjusting the resolution • Saving and exporting

Vector Graphics

3D Modeling

Converting Between Vectors & Bitmaps

Vector Drawing Formats • DWG - AutoCAD 2D/3D files • DXF - Standard ASCII text files storing vector data for CAD programs • WMF - Windows Metafile (stores vector and raster graphics) • AI - Vector format for Adobe Illustrator • CDR - Vector format for CorelDRAW

MMT image & graphics

0 comments

Notes on slide 1

2 Favorites