MMT image & graphics

Image/Graphics Movie AnimationText Audio

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(bitmap image)



Vector graphics(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 specific (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 file 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




Anti-Aliasing




jaggies

Anti-Aliasing




jaggies

Anti-Aliasing




jaggies

Anti-Aliasing




jaggies

Color Depth

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

Color Depth

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

12/18/2006 05:21 PMColor depth - Wikipedia, the free encyclopedia

Page 1 of 4http://en.wikipedia.org/wiki/Color_depth

Color depth

8-bit color

15/16 bit: Highcolor

24/32 bit: Truecolor

Web-safe color

Related

RGB color model

Palette

Color depth

From Wikipedia, the free encyclopedia

Color depth is a computer graphics term describing the number of bits used to represent the

color of a single pixel in a bitmapped image or video frame buffer. This concept is also

known as bits per pixel (bpp), particularly when specified along with the number of bits

used. Higher color depth gives a broader range of distinct colors.

Contents

1 Indexed color

2 Direct color

2.1 HighColor

2.2 LCD Displays

2.3 Truecolor

2.4 32-bit color

2.5 Beyond truecolor

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 (21 = 2 colors) monochrome, often black and white

2-bit color (22 = 4 colors) CGA

4-bit color (24 = 16 colors) as used by EGA and by the least common

denominator VGA standard at higher resolution

6-bit color (26 = 64 colors) Original Amiga chipset

8-bit color (28 = 256 colors) Most early color Unix workstations, VGA at low

resolution, Super VGA, AGA

12-bit color (212 = 4096 colors) some Silicon Graphics systems and Amiga

systems in HAM mode.

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

Color Depth

Color depth No. of colors Color mode Palette

1-bit color 2 Indexed color Yes



24-bit color 16,777,216 True color No

True Color

• In true color images, each pixel is defined in terms of its actual:

• red, green, blue (RGB)

• cyan, magenta, yellow, black (CMYK)

RGB

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

• 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

Dithering

Dithering

Dithering

Image Compression

• Image compression is the application of data compression to digital images.

• Reduce redundancy of the image data for efficient storage or transmission of the image file.

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 file 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 file 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

• Best suited for

• simple graphics

• line drawings

• cartoons



GIF

• Best suited for

• simple graphics

• line drawings

• cartoons



GIF

• Best suited for

• simple graphics

• line drawings

• cartoons



GIF

• Best suited for

• simple graphics

• line drawings

• cartoons



GIF (Transparent)

GIF89a (Animation)

GIF animation is simply a file with multiple

images stored in it. So, think about the

size.

GIF89a (Animation)

GIF animation is simply a file with multiple

images stored in it. So, think about the

size.Oh... and it has no sound....

JPG

• Developed by the Joint Photographic Expert Group.

• 24-bit color is allowed

• lossy compression - allow for smaller file size but with the sacrifice of some clarity

JPG

☺best for

photographic images (for which a

variety of colors is important)

JPG

☺best for



JPG

☺best for



JPG

☹not suitable for line drawing or

images with text

jpg

gif

PNG

• Portable Network Graphics (pronounced ping)

• allow for true color

• lossless compression

• sophisticated transparency

• support by modern web-browsers

Raster Image File Formats

• .bmp

• commonly used by MS-Windows

• lossless compression can be specified

• uncompressed in some programs

• .psd

• default proprietary format of Adobe Photoshop

• extra features e.g. layering

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

Screen CaptureAlternatives

OS or

App

Scanner

Scanner

Scanners

Flatbed Sheet-fed

Scanners

Handheld Drum

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

TWAINPrior to TWAIN capture in one application

TWAINPrior to TWAIN save the file

TWAINPrior to TWAIN save the file

TWAINPrior to TWAIN

TWAINPrior to TWAIN open with another app

Using TWAIN

Using TWAIN

Using TWAIN

It’s ONE STOP.

Scanned Image Size (in 24-bit color)

Resolution (dpi)

image dimension

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 file 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

Vector Graphics

Vector Graphics

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

Technology

MMT image & graphics