Graphics
Pertemuan 4
Matakuliah
: T0732 / Sistem Multimedia
Tahun
: 2007
Bina Nusantara
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu :
• Menunjukkan Penggunaan Gambar pada Aplikasi
Multimedia
Bina Nusantara
Outline Materi
• Apakah
Image
Itu ?
• Tipe-Tipe
Image Media
•
Bitmap Image
•
Vector Image
• Model 3-Dimensional
Graphic
• Menggunakan
Graphics
Bina Nusantara
Apakah Image Itu ?
• Image adalah representasi grafik dan visual dari informasi yang dapat ditampilkan pada layar komputer atau tercetak • Macam-macam bentuk Image :
– Foto (Photographs) – Gambar (Drawings) – Lukisan (Paintings)
– Televisi dan Film (motion pictures) – Semantics
– Peta (Maps), dll.
Bina Nusantara
Apakah Image Itu ?
• Peran penting Image
dalam multimedia
– Alat Navigasi
– Komponen
User interface
– Sistem
Help
–
Clip art
Opening Screen Main Menu
Jazz Dive Profile Promoted Bands
John Butler Trio The Waifs Little Birdy The Flairz History Contact Links Bina Nusantara
Tipe Image Media
• Secara umum Image dapat dibagi dua format :
–
Bitmapped
atau
Raster images
–
Draw-type
atau
Vector graphics
atau
Metafile images
•
Bitmapped image
disimpan dalam
array of pixel
.
Yang merepresentasikan image sebagai
array of
dots (pixel)
•
Vector graphic
disimpan sebagai bentuk
geometri sebagai representasi image
(didefinisikan secara matematika)
Bina Nusantara
Raster Image
• Sebuah pixel merupakan elemen terkecil dalam resolusi layar komputer (Screen Resolution)
• Bitmap Æmatrix of pixel
• Setiap pixel mewakili suatu warna yang spesifik. Setiap pixel dapat memiliki 2 atau lebih range warna
• Range warna ini juga dikenal sebagaicolour depth
• Colour depth diukur dalambits per pixel
– Ingat : 1 bit (binary digit) hanya memiliki 1 atau 0 dan ada 8 bit dalam 1 byte
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
– Biasanya sudah cukup bagus untuk image berwarna
• 16 bits per pixel = 65536 colours
– Kualitas lebih baik untuk photograph-like images, dikenal sebagai high colour
• 24 bits per pixel = >16 million possible colours
– Digunakan untuk membuat photo realistic images, dikenal sebagai true colour
Bina Nusantara
Colour Depth
http://en.wikipedia.org/wiki/Color_depth
True Colour (24 bits) 8 bits
4 bits 1 bit
Bina Nusantara
Raster Image
• Semakin banyak warna yang bisa dimiliki tiap
pixel, semakin besar ukuran image
• Jumlah pixel berhubungan dengan ukuran file
yang diperlukan untuk menyimpan sebuah
image
• Ingat, 2 faktor yang mempengaruhi ukuran file
bitmap adalah :
– Resolusi
– Color Depth
Bina NusantaraBitmaps images
Original image
Original image
Shown
Shown
magnified
magnified
Bina Nusantara8
bytes
in
size
=
width
×
height
×
colour
depth
Menghitung Ukuran File Raster Image
• Dimana:
–Width dari image diukur dalampixels
–Heightdari images diukur dalampixels
–Colour depth adalah jumlahbitwarna yang digunakan diukur dalam
bits/pixel
• Ingat:
– 1024 bytes = 1 kilobyte (KB) – 1024 kilobytes = 1 megabyte (MB)
Bina Nusantara
Contoh
• Sebuahimageberukuran 640 x 480 pixel dengan 24-bit warna akan membutuhkan berapa besardisk space?
900KB
bytes
921600
8
7372800
8
24
480
640
bytes
in
size
=
=
=
×
×
=
Bina NusantaraTipe Kompresi
Kompresi
Lossless
:
• Mengubah cara data diorganisasi atau direpresentasikan
untuk mengurangi ukuran penyimpanan
• Tidak ada kehilangan (loss) pada detil
Example:
• ‘Run-length Encoding’.
– Original : AAABBBCCCCCCABCABC – RLE : 3A3B6C2ABC•
GIF / PNG
Bina NusantaraTipe Kompresi
Skema
Lossy compression
:
• Mencoba untuk memaksimalkan kompresi tanpa
ada kehilangan (loss) yang terlihat oleh user
• Menghilangkan detil selama kompresi
• Catatan: mengulang kompresi menyebabkan
kualitas memburuk
• Example :
– JPEG
Bina Nusantara
Bina Nusantara
Popular bitmap formats
• Microsoft bitmap (.bmp) – Digunakan di microsoft windows
• TIFF - Tagged Image File Format (.tif) – Digunakan untuk faxing images (biasanya)
• JPEG - Joint Photographic Expert Group (.jpg) – Berguna untuk menyimpan photographic images
• GIF - Graphics Interchange Format (.gif) – Banyak digunakan di web sites
• PNG - Portable Network Graphics (.png) – Format baru untuk web graphics
• PCD – Kodak photo CD
– Format baru untuk menyimpan image dalam bentuk terkompresi dalam CD
Bina Nusantara
Keuntungan dan Kerugian
Menggunakan
Bitmap Images
• Keuntungan
– Menyampaikan detil informasi secara cepat
– Nyata
• Kerugian
– Bergantung pada resolusi
– Berpengaruh pada kualitas image
– Ukuran file besar
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/
Bina Nusantara
Software to create raster
Bina Nusantara
Vector images
• Vector image tersimpan sebagai set grafik primitif yang
diperlukan untuk menampilkan image
• Suatu Grafik primitif yang merupakan grafik sederhana
berbasis pada elemen gambar atau object seperti shape
– e.g. square, line, ellipse, arc, etc.
• Image terdiri dari set perintah (persamaan matematika)
yang akan dipakai untuk menggambarkan obyek ketika
dibutuhkan
Bina Nusantara
Vector images
• Menyimpan dan merepresentasikan image dengan persamaan matematika disebutvector graphicatauObject Oriented graphic.
• Setiap primitif obyek memiliki bermacam-macam atribut untuk membuat image secara keseluruhan
– misal x-y lokasi, fill colour, line colour, line style, dsb.
• Contoh:
– 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)
Bina Nusantara
Vector images
•
Vector image
atau
vector graphics
dapat diubah ukuran
tanpa kehilangan integritas dari image aslinya
• Mengubah ukuran sebuah vector merupakan suatu
operasi matematika – hanya atribut yang berubah, tetapi
image tidak terpengaruh
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
Text
Text
Bina Nusantara
Scaling vector graphics
Original image
Original image
V e c t o r g r a p h i c sShown
Shown
magnified
magnified
V e c t o r
g r a p h i c s
Bina NusantaraKeuntungan dan Kerugian
Vector Image
• Keuntungan
– Jumlah data yang digunakan untuk
merepresentasikan Image relatif kecil
– Karena itu, tidak membutuhkan banyak memori untuk
penyimpanannya
– Mudah untuk dimanipulasi
• Kerugian
– Detil yang dapat dipresentasikan dalam image sangat
terbatas
Bina Nusantara
Software to create vector
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
Bina Nusantara
Model Grafik 3D
• Sebuah model 3D adalah
variasi dari format vector
• Lokasi dari suatu obyek
3-dimensional dispesifikasikan
menggunakan koordinat x, y
dan z
•
Primitive
lain yang dapat
ditemukan pada 3D models
– Cube, sphere, pyramid, etc. – Camera, spotlight, texture,
shading etc. 3D model
X
X
Y
Y
Z
Z
Bina NusantaraModel Grafik 3-Dimensional
• Grafik 3D menawarkan efek
photorealistics
yang
kita lihat di TV atau Computer Games
• Contoh Film yang menggunakan 3D :
– The Incredibles, Shrek, Happy Feet, Transformer, etc.
• Contoh 3D program/software:
– Lightwave
– 3D Studio Max
– Maya
Bina Nusantara
Photorealistics Effects
Transformer the Movie (2007)
Bina Nusantara
Photorealistics Effects
Bina Nusantara
Software untuk membuat 3D
image
Bina Nusantara
3-Dimensional
Graphic models
Bina Nusantara
Hardware Untuk Mendapatkan
Images
• Scanner dan produk
digital
imaging
• Bentuk-bentuk scanner
– Drum – Flat-bed – Negative / slide – Hand-held• Penting untuk memeriksa
optical
resolution
dari scanner
– Diukur dalamdots per inch (DPI)
Bina Nusantara
Hardware Untuk Mendapatkan
Images
• Digital camera
– Menggunakandigital memory dan bukan film
– Images ditransfer ke komputer melalui kabel
– Dapat memiliki resolusi yang sangat tinggi
• Gambar yang di-
capture
dari suatu
camcorder
atau tipe kamera PC
“web-cam”
– Home products biasanya ber-resolusi rendah
Bina Nusantara
Hardware Untuk Membuat / Mengedit
Images
•
Graphics tablet
dan
pen
– Lebih disukai olehdigital artists
– Menekankan sensitivitas
• Digitiser tablet
– Lebih disukai olehtechnical artists
– Puckmemilikicrosshair yang akurat untuk membantu mendigitasi gambar (drawings)
Tablet and pen
Digitiser
Bina Nusantara
Mengubah image formats
Te
xt
Te
xt
Bitmapp
ed imag
e
Bitmapp
ed imag
e
Ve
ctor im
age
Ve
ctor im
age
Bitmapped fontTrueType / PostScript Type font
Optical Character Recognition (OCR) Contour trace Render as bitmap Bina Nusantara
Menggunakan
Graphics
• Konsiderasi dan
guidelines
dalam
penggunaan
graphics
:
– Memilih
graphics
sesuai dengan kebutuhan
penggunaan
– Memilih
software
yang tepat
– Gunakan minimum
color depth
–
Delivery Systems
Bina Nusantara
Bagaimana
graphics/images
dapat digunakan
secara efektif
• Tipe-tipe
graphics
yang berbeda digunakan
dengan cara yang berbeda :
–
Line drawing
adalah representasi
graphical
dari
obyek fisikal. Ada 3 bentuk
line drawing
:
• Isometric – merepresentasikan obyek 3-D tanpa prespektif realistik
• Orthographic – representasi 2-D dari obyek
• Perspective – merepresentasikan obyek dalam bentuk yang paling realistik
Modeling and Rendering
Bina Nusantara
Bagaimana graphics/images dapat digunakan
secara efektif
•
Graphs
dan
Tables
– Dalam sekali lihat, grafik dapat menyediakan data spesifik, memperlihatkan trend umum data atau memperlihatkan hubungan antara data dan trend data
• Diagrams
– Membantu user meng-konseptualisasi sebuah proses, flow, atau
interrelationship. Contoh : Flow charts, Schematic Drawings, UML dan Block Diagrams.
Bina Nusantara
Software untuk Membuat Image
• Graphic program merupakan alat yang membantuartistuntuk membuat atau meng-edit design yang akan digunakan dalam aplikasi multimedia
• Secara umum, graphic program dikategorikan sebagai berikut :
– Drawing programs • Membuat draw type graphics
• Menyediakan freehand. Contoh : geometric shape • Contoh : Adobe Illustrator, Corel Draw, Macromedia Freehand – Paint programs
• Digunakan untuk membuat bitmap • Berguna dalam pembuatan original art • Contoh: Paint Shop Pro – Image editing programs
• Membuat perubahan pada image yang sudah ada, seperti memanipulasi brightness atau contrast, meng-apply texture, patern
• Contoh : Adobe Photoshop, Corel PhotoPaint
Bina Nusantara
Keuntungan dan Kerugian Penggunaan Images
• Keuntungan
– Menyampaikan banyak informasi secara cepat
– Menambah simulasi dan warna visual
– Dapat berkomunikasi tanpa ada batasan bahasa
– Memperkaya media lainnya
• Kerugian
– Tidak menyediakan penjelasan yang mendalam
• Graphics jarang bisa merepresentasikan pesan secara utuhbaik dalam bisnis, teknikal atau safety settings
– Dapat disalah-interpretasikan
• Graphics seharusnya digunakan secara hati-hati untuk menjamin pesan yang disampaikan tidak ambigu atau cryptic (tersembunyi)
Bina Nusantara
