Johny Hizkia Siringo Ringo BIT (Multimedia Tech.), MIMS (Soft. Dev.)

johny.hizkia@istb.ac.id johny.hizkia.ringo@gmail.com

www.istb.ac.id

GRAPHICS

UG141 – Multimedia Design

johny.hizkia@istb.ac.id www.istb.ac.id 2

Role of Graphic

• Graph and Chart

• Photograph or images

• Background metaphor

• Animated graphic

johny.hizkia@istb.ac.id www.istb.ac.id 3

Graphics – Some Terminology

• Pixel: A digital image consist of many picture elements

johny.hizkia@istb.ac.id www.istb.ac.id 4

Graphic – Some Terminology

• Resolution: The number of pixel determine the quality of the image (higher = better)

johny.hizkia@istb.ac.id www.istb.ac.id 5

Vector Vs Bitmap

• Vector

– is represented as geometric shape (lines and arc) and is stored as mathematical instruction.

– Example: SVG

• Bitmap

– is represented as pixel and stored

– Example: bmp, jpeg

johny.hizkia@istb.ac.id www.istb.ac.id 6

Bitmap

Vector

johny.hizkia@istb.ac.id www.istb.ac.id 7

johny.hizkia@istb.ac.id www.istb.ac.id 8

Vector

• Advantages of using Vector – Can be modified without affecting its quality

– Smaller in file size

– Ideal for animation and design

• Disadvantages of using Vector – Not a popular format

– Limited to certain programs like spreadsheet or graphic program

johny.hizkia@istb.ac.id www.istb.ac.id 9

Bitmap

• Advantages of using Bitmap

– Popular formats such as JPEG, BMP, and others

– Scanner normally output images in bitmap formats

• Disadvantages of using Bitmap

– Hard to be modified without affecting the quality

– File size can be large

johny.hizkia@istb.ac.id www.istb.ac.id 10

Bitmap

• Quality of Bitmap is determined by screen resolution and color depth (range of color available for pixels, measured in bits)

• File size = image in pixels * color depth in bits.

johny.hizkia@istb.ac.id www.istb.ac.id 11

Vector Vs Bitmap Bitmap Graphic Vector Graphic

Simple matrix or grids of dots with color information. Think about an array of colored dots that when seen from distance forms an image.

Image data are stored in the form of: • Data points which describe the collection of lines, curves, circle, etc

Smallest elements of a bitmap is a pixel The information of the images can be stored as coordinates.

Bitmap images get grainy and pixilated when zoomed in

The computer recreates the image based on the information describing the image

Best for large image with different colors Easily scaled without quality loss

johny.hizkia@istb.ac.id www.istb.ac.id 12

Vector Vs Bitmap

PROGRAM FILE EXTENSION BITMAP VECTOR

Adobe Photoshop .psd X

Mac Quikcdraw .pct / .pict X

Targa Bitmap .tga X

Windows Bitmap .bmp x

Adobe Illustrator .ai / .eps X

AutoCAD .dwg / .dxf X

AutoDesk Draw .cdr X

Windows Metafile .wmf x

johny.hizkia@istb.ac.id www.istb.ac.id 13

Guidelines for using Graphics

• Avoid using graphic that do not add value to contents

• Consider using thumbnails, when dealing with graphics

• Use quality graphic that adds value to content

johny.hizkia@istb.ac.id www.istb.ac.id 14

Graphic Authoring Tools

• Paint Program

– MS Paint

– Adobe Illustrator

• Image editing program

– Photoshop

– Gimp

– Corel Draw

johny.hizkia@istb.ac.id www.istb.ac.id 15

Graphic Authoring Tools

• Task to Perform:

– Crop: removing unwanted section of an image

– Enhance: Improving the quality or remove defects due to resolution and contrast

– Filter: Sharpening / Distort an image

– Layering: Using additional image in layers

– 3D Imaging

johny.hizkia@istb.ac.id www.istb.ac.id 16

GIF (Graphics Interchange Format)

• A bitmap image format

• Supports up to 8 bits per pixel (256 color)

• Using lossless data compression

• Usage: – GIFs are suitable for sharp-edged line art (such as

logos) with a limited number of colors.

– GIFs can be used to store low-color sprite data for games.

– GIFs can be used for small animations and low-resolution film clips.

johny.hizkia@istb.ac.id www.istb.ac.id 17

GIF (Graphics Interchange Format)

No color information lost

Compress line art well

Support transparency, interlace, animation

Advantages

Can only have maximum 256 colors

Does not compress photographs well

Copyrighted format

Disadvantages

johny.hizkia@istb.ac.id www.istb.ac.id 18

PNG (Portable Network Graphics)

• A bitmapped image format

• Employs lossless data compression

• Improve upon and replace GIF

• Support palette-based images (24-bit RGB)

johny.hizkia@istb.ac.id www.istb.ac.id 19

PNG (Portable Network Graphics)

No color information

Support more than 16.7 million colors

Compresses images well

Support transparent, interlace

Advantages

Not all supported by web browsers

Disadvantages

johny.hizkia@istb.ac.id www.istb.ac.id 20

Interlace/progressive

Begins with a low-resolution image and increases details as the file continue to load.

johny.hizkia@istb.ac.id www.istb.ac.id 21

JPEG (Joint Photographic Experts Group)

• Used method of lossy data compression

• The most common image format used by digital cameras and other photographic image capture devices

• Supports up to 16.7 million colors

johny.hizkia@istb.ac.id www.istb.ac.id 22

JPEG (Joint Photographic Experts Group)

Support a maximum 16.7 million colors

Compress photographs well

Support progressive images quality

Advantages

Losses some image information

No transparency

No animation

Disadvantages

johny.hizkia@istb.ac.id www.istb.ac.id 23

Summary

• Decision factors: • Support by the browsers

• Colors – photo-like image

• Transparency

• Animation

• Interlacing