8/14/2019 4 - Gambar

1/44

Graphics

Pertemuan 4

Matakuliah : T0732 / Sistem MultimediaTahun : 2007

8/14/2019 4 - Gambar

2/44

Bina Nusantara

Learning OutcomesPada akhir pertemuan ini, diharapkan mahasiswa akanmampu :

Menunjukkan Penggunaan Gambar pada AplikasiMultimedia

8/14/2019 4 - Gambar

3/44

Bina Nusantara

Outline Materi What is an Image Image Media Types Bitmap Image Vector Image 3-Dimensional Graphic Models Working With Graphics

8/14/2019 4 - Gambar

4/44

Bina Nusantara

What is an Image? An image is the graphical and

visual representation of someinformation that can be displayedon a computer screen or printed

out

Images come in a variety of forms: Photographs Drawings Paintings Television and motion pictures Semantics Maps, etc.

8/14/2019 4 - Gambar

5/44

Bina Nusantara

What is an Image? Images play an important

part in multimedia

Navigation User interface components Help systems Clip art

Opening Screen

Main Menu

Jazz Dive Profile Promoted Bands

JohnButler Trio

TheWaifs

LittleBirdy

TheFlairz

History Contact

Links

8/14/2019 4 - Gambar

6/44

Bina Nusantara

Image Media Types Images can be generally divided into two

formats: Bitmapped or Raster images Draw-type or Vector graphics or Metafile images

Bitmapped images are stored as an array of pixels. It represents the image as an array of dots, called pixels

Vector graphics are stored as geometric shapeto represent the image (mathematically defined)

8/14/2019 4 - Gambar

7/44

Bina Nusantara

Raster Image A pixel is the smallest element of resolution on a computer

screen (Screen Resolution)

Bitmap matrix of pixel

Each pixel can be in a specific colour and each pixel consistsof two or more colors.

The range of these colours is known as the colour depth.

Colour depth is measured in bits per pixel Remember: a bit (binary digit) is either 1 or 0 and that there are eight bits in a

byte

8/14/2019 4 - Gambar

8/44

Bina Nusantara

Colour depth 1 bit per pixel = 2 colours (monochrome)

2 bits per pixel = 4 colours

4 bits per pixel = 16 colours

8 bits per pixel = 256 colours Generally good enough for colour images

16 bits per pixel = 65536 colours Better quality for photograph-like images, also known as high colour

24 bits per pixel = >16 million possible colours Used to recreate photo realistic images, also known as true colour

8/14/2019 4 - Gambar

9/44

Bina Nusantara

Colour Depth

http://en.wikipedia.org/wiki/Color_depth

True Colour (24 bits) 8 bits

4 bits 1 bit

8/14/2019 4 - Gambar

10/44

Bina Nusantara

Raster Image More colour per pixel bigger image size

The number of pixels is related to the size of filethat required to store an image.

Remember, two factors effect the size file bitmapare: Resolution Color Depth

8/14/2019 4 - Gambar

11/44

Bina Nusantara

Bitmaps imagesOriginal imageOriginal image

ShownShownmagnifiedmagnified

8/14/2019 4 - Gambar

12/44

Bina Nusantara

8 bytesinsize

depthcolour height width =

Calculating the size of a raster image

Where: Width of the images measured in pixels Height of the images measured in pixels Colour depth is the number of bits used for color measured in bits per

pixel

Remember: 1024 bytes = 1 kilobyte (KB) 1024 kilobytes = 1 megabyte (MB)

8/14/2019 4 - Gambar

13/44

Bina Nusantara

Example A 640 x 480 pixel image in 24-bit colour would require how much

disk space?

900KB

bytes921600873728008 24480640 bytesinsize

=

=

=

=

8/14/2019 4 - Gambar

14/44

Bina Nusantara

Type of CompressionLossless compression : Modify the way the data is organized or

represented to reduce storage size. No loss in detail;

Example: Run-length Encoding. Original : AAABBBCCCCCCABCABC RLE : 3A3B6C2ABC

8/14/2019 4 - Gambar

15/44

Bina Nusantara

Type of CompressionLossy compression schemes: Try to maximise compression without loss

obvious to human user. Remove detail during the compression NOTE: repeated compression caused loss in

quality

8/14/2019 4 - Gambar

16/44

Bina Nusantara

8/14/2019 4 - Gambar

17/44

Bina Nusantara

Popular bitmap formats Microsoft bitmap (.bmp)

Used in microsoft windows

TIFF - Tagged Image File Format (.tif) Used for faxing images (amongst other things)

JPEG - Joint Photographic Expert Group (.jpg) Useful for storing photographic images

GIF - Graphics Interchange Format (.gif) Used a lot on web sites

PNG - Portable Network Graphics (.png) A new format for web graphics

PCD Kodak photo CD A new format for store image in a compressed form on a CD

8/14/2019 4 - Gambar

18/44

Bina Nusantara

Advantages and Disadvantagesof using bitmap images

Advantages

Convey detail of information quickly Real life

Disadvantages

Depend on a Resolution Effect to the image quality Size file is big

8/14/2019 4 - Gambar

19/44

Bina Nusantara

Software to create bitmap images Popular PC packages include:

Microsoft Paint Included with microsoft windows

Microsoft PhotoDraw 2000 http://www.microsoft.com/office/photodraw/

Adobe Photoshop http://www.adobe.com/products/photoshop/main.html

Paint Shop Pro http://www.jasc.com/psp6.html

Macromedia Fireworks http://www.macromedia.com/software/fireworks/productinfo/

8/14/2019 4 - Gambar

20/44

Bina Nusantara

Software to create raster

8/14/2019 4 - Gambar

21/44

Bina Nusantara

Vector images Vector images are stored as the set of graphic

primitives required to represent the image

A graphic primitive is a simple graphic based ondrawing elements or objects such as shape e.g. square, line, ellipse, arc, etc.

The image consists of a set of commands(mathematical equations) that are drawn theobject when needed.

8/14/2019 4 - Gambar

22/44

Bina Nusantara

Vector images Storing and representing images by mathematical

equations is called vector graphics or Object Orientedgraphics.

Each primitive object has various attributes that go tomake up the entire image e.g. x-y location, fill colour, line colour, line style, etc.

Example: RECTANGLE : rectangle top, left, width, height, color is ( 0, 0,

200, 200, red) CIRCLE : circle top, left, radius, color LINE : Line x1, y1, x2, y2, color

8/14/2019 4 - Gambar

23/44

Bina Nusantara

Vector images Vector image or vector graphics can be resized

without losing the integrity of the original image.

Scaling a vector is a mathematical operation -only the attributes change, the image isunaffected

8/14/2019 4 - Gambar

24/44

Bina Nusantara

Primitive geometric drawing objects Shapes

Circle Ellipse

Rectangle Square Pie segment Triangle Pentagon,

hexagon,heptagon,octagon, etc

Basic Line Polyline

Arc Bezier curve

Text Font, weight

8/14/2019 4 - Gambar

25/44

Bina Nusantara

Scaling vector graphicsOriginal imageOriginal image

V

ShownShownmagnifiedmagnified

8/14/2019 4 - Gambar

26/44

Bina Nusantara

Advantages and Disadvantagesof using vector image

Advantages Relatively small amount of data required to represent

the image. Therefore, it does not required a lot of memory to

store Easier to manipulate

Disadvantages Limited level of detail than can be presented in an

image

8/14/2019 4 - Gambar

27/44

Bina Nusantara

Software to create vector

8/14/2019 4 - Gambar

28/44

Bina Nusantara

Software to create images Graphics programs are tools that allow an artist to create and edit

designs used in multimedia applications.

Generally, graphics programs can be categorized as: Drawing programs

Creating draw type graphics Provide freehand. Example geometric shape Example : Adobe Illustrator, Corel Draw, Macromedia Freehand

Paint programs Those creating bitmaps

Useful in creating original art Example: Paint Shop Pro Image editing programs

Making changes to existing images, such as manipulating the brightness or contrast, applying textures, patterns

Examples : Adobe Photoshop, Corel PhotoPaint

8/14/2019 4 - Gambar

29/44

Bina Nusantara

Vector formats Windows metafile (.wmf) Used by Microsoft Windows

SVG - Scalable Vector Graphics (.svg) A new format devised for the web

CGM - Computer Graphics Metafile (.cgm) Older format commonly used for clip art

Adobe PostScript (.ps) A page description language used to control printers

Adobe Portable Document Format (.pdf) A page description language common on the web

Drawing Exchange Format (.dfx) Store 3D image created by design program AutoCAD

Encapsulated PostScript (.epf) Professional printing: Illustration program, Adobe Systems, Desktop Publishing programs

8/14/2019 4 - Gambar

30/44

Bina Nusantara

3-Dimensional Graphic models A 3D model is a variation on

the vector format

The location of a 3-dimensional object is specifiedusing x, y and z co-ordinates

Further primitives can be foundin 3D models Cube, sphere, pyramid, etc. Camera, spotlight, texture,

shading etc.

3D model

XX

Y Y

ZZ

8/14/2019 4 - Gambar

31/44

Bina Nusantara

3-Dimensional Graphic models 3D graphics offer the photorealistics effects that

have you seen in TV, Computer Games

Examples, Motion Picture films such as: The Incredibles, Shrek, Happy Feet, Transformer, etc.

Examples 3D programs: Lightwave 3D Studio Max Maya

8/14/2019 4 - Gambar

32/44

Bina Nusantara

Photorealistics Effects

Transformer the Movie (2007)

8/14/2019 4 - Gambar

33/44

Bina Nusantara

Software to create 3D image

8/14/2019 4 - Gambar

34/44

Bina Nusantara

3-Dimensional Graphic models

8/14/2019 4 - Gambar

35/44

Bina Nusantara

Photorealistics Effects

8/14/2019 4 - Gambar

36/44

Bina Nusantara

Hardware used to acquire images Scanners and digital imaging

products

Many forms of scanner Drum Flat-bed Negative / slide Hand-held

Important to check the opticalresolution of the scanner measured in dots per inch (DPI)

8/14/2019 4 - Gambar

37/44

Bina Nusantara

Hardware used to acquire images Digital camera

Uses digital memory instead of film Images are transferred to computer via a

cable Can be very high resolution

Stills from a camcorder or PC web-

cam type camera Home products tend to be low resolution

8/14/2019 4 - Gambar

38/44

Bina Nusantara

Hardware used to create / edit images Graphics tablet and pen

Preferred by digital artists Pressure sensitivity

Digitiser tablet Preferred by technical artists Mouse has accurate crosshair to

help digitise drawings

Tablet and pen

Digitiser

8/14/2019 4 - Gambar

39/44

Bina Nusantara

Converting image formats

Text

Text

Text

Text

Bitmappedimag

e

Bitmappe

dimage

Bitmappedimag

e

Bitmappe

dimage

Vector image

Vector image

Vector image

Vector image

Bitmapped font

TrueType / PostScript Type font

Optical CharacterRecognition (OCR)

Contour trace

Render as bitmap

8/14/2019 4 - Gambar

40/44

Bina Nusantara

Working With Graphics Considerations and guidelines when we

are working with graphics:

Choose the graphic depend on your work Choose the correct software Use minimum color depth

Delivery Systems

8/14/2019 4 - Gambar

41/44

Bina Nusantara

How graphics/images can be used effectively Different types of graphics are used in different

ways: Line drawing are graphical representations of physical

objects. There are 3 kinds of line drawings: Isometric - represent 3-D objects without realistic perspective Orthographic - are 2-D representations of objects Perspective - represent objects in their most realistic form

8/14/2019 4 - Gambar

42/44

Bina Nusantara

How graphics/images can be used effectively Graphs and Tables

In just a glance, graphs canprovide specific data, showgeneral trends in data or depictthe relationships between dataand data trends

Diagrams Help users conceptualize a

process, flow or interrelationship. Examples of diagrams include: Flow charts,Schematic Drawings and BlockDiagrams.

8/14/2019 4 - Gambar

43/44

Bina Nusantara

Advantages and Disadvantages of using images

Advantages Convey a lot of information quickly Add visual simulation and colour

Can communicate across language borders Enhance other media

Disadvantages Do not provide in-depth explanations

Graphics rarely suffice to convey a whole message inbusiness, technical or safety settings

Can be misinterpreted Graphics should be used carefully to make sure the message

is not ambiguous or cryptic

8/14/2019 4 - Gambar

44/44

Q & A