Learning Outcomes Matakuliah Tahun
: T0732 / Sistem Multimedia : 2007
Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : • Menunjukkan Penggunaan Gambar pada Aplikasi Multimedia
Graphics Pertemuan 4
Bina Nusantara
Outline Materi • • • • • •
Apakah Image Itu ? • Image adalah representasi grafik dan visual dari informasi yang dapat ditampilkan pada layar komputer atau tercetak
Apakah Image Itu ? Tipe-Tipe Image Media Bitmap Image Vector Image Model 3-Dimensional Graphic Menggunakan Graphics
• Macam-macam bentuk Image : – – – – – –
Bina Nusantara
Bina Nusantara
Apakah Image Itu ?
Tipe Image Media • Secara umum Image dapat dibagi dua format :
• Peran penting Image dalam multimedia – – – –
Alat Navigasi Komponen User interface Sistem Help Clip art
History
– Bitmapped atau Raster images – Draw-type atau Vector graphics atau Metafile images
Opening Screen
Main Menu
Jazz Dive Profile
Bina Nusantara
Foto (Photographs) Gambar (Drawings) Lukisan (Paintings) Televisi dan Film (motion pictures) Semantics Peta (Maps), dll.
Contact
• Bitmapped image disimpan dalam array of pixel. Yang merepresentasikan image sebagai array of dots (pixel)
Links
Promoted Bands
The Flairz
Little Birdy
The Waifs
John Butler Trio
• 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)
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
• 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 sebagai colour depth
– Biasanya sudah cukup bagus untuk image berwarna
•
16 bits per pixel = 65536 colours
•
24 bits per pixel = >16 million possible colours
– Kualitas lebih baik untuk photograph-like images, dikenal sebagai high colour
• Colour depth diukur dalam bits per pixel – Ingat : 1 bit (binary digit) hanya memiliki 1 atau 0 dan ada 8 bit dalam 1 byte
– Digunakan untuk membuat photo realistic images, dikenal sebagai true colour Bina Nusantara
Bina Nusantara
Colour Depth True Colour (24 bits)
8 bits
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
4 bits
1 bit
• Ingat, 2 faktor yang mempengaruhi ukuran file bitmap adalah : – Resolusi – Color Depth Bina Nusantara
http://en.wikipedia.org/wiki/Color_depth
Bitmaps images Original image
Bina Nusantara
Menghitung Ukuran File Raster Image size in bytes =
width × height × colour depth 8
• Dimana: – Width dari image diukur dalam pixels – Height dari images diukur dalam pixels – Colour depth adalah jumlah bit warna yang digunakan diukur dalam bits/pixel
Shown magnified
• Ingat: – 1024 bytes = 1 kilobyte (KB) – 1024 kilobytes = 1 megabyte (MB) Bina Nusantara
Bina Nusantara
Contoh
Tipe Kompresi
• Sebuah image berukuran 640 x 480 pixel dengan 24-bit warna akan membutuhkan berapa besar disk space ?
Kompresi Lossless : • Mengubah cara data diorganisasi atau direpresentasikan untuk mengurangi ukuran penyimpanan • Tidak ada kehilangan (loss) pada detil
640 × 480 × 24 7372800 = 8 8 = 921600 bytes
size in bytes =
= 900KB
Example: • ‘Run-length Encoding’. – Original : AAABBBCCCCCCABCABC – RLE : 3A3B6C2ABC
• GIF / PNG Bina Nusantara
Bina Nusantara
Tipe 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
Keuntungan dan Kerugian Menggunakan Bitmap Images
Popular bitmap formats •
Microsoft bitmap (.bmp)
•
TIFF - Tagged Image File Format (.tif)
– Digunakan di microsoft windows
• Keuntungan – Menyampaikan detil informasi secara cepat – Nyata
– Digunakan untuk faxing images (biasanya)
•
JPEG - Joint Photographic Expert Group (.jpg)
•
GIF - Graphics Interchange Format (.gif)
– Berguna untuk menyimpan photographic images
– Banyak digunakan di web sites
•
• Kerugian – Bergantung pada resolusi – Berpengaruh pada kualitas image – Ukuran file besar
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
Bina Nusantara
Software to create bitmap images
Software to create raster
• 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
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.
Vector images • Menyimpan dan merepresentasikan image dengan persamaan matematika disebut vector graphic atau Object 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)
• Image terdiri dari set perintah (persamaan matematika) yang akan dipakai untuk menggambarkan obyek ketika dibutuhkan Bina Nusantara
– 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
Primitive geometric drawing objects • Basic – – – –
Line Polyline Arc Bezier curve
• Text – Font, weight
Bina Nusantara
Bina Nusantara
• Shapes – – – – – – –
Circle Ellipse Rectangle Square Pie segment Triangle Pentagon, hexagon, heptagon, octagon, etc
Text
Text
Keuntungan dan Kerugian Vector Image
Scaling vector graphics Shown magnified
Original image
• Keuntungan – Jumlah data yang digunakan untuk merepresentasikan Image relatif kecil – Karena itu, tidak membutuhkan banyak memori untuk penyimpanannya – Mudah untuk dimanipulasi
V e c to r g r a p h ic s
V e c to r g r a p h ic s
• Kerugian – Detil yang dapat dipresentasikan dalam image sangat terbatas
Bina Nusantara
Bina Nusantara
Software to create vector
Vector formats •
Windows metafile (.wmf)
•
SVG - Scalable Vector Graphics (.svg)
•
CGM - Computer Graphics Metafile (.cgm)
•
Adobe PostScript (.ps)
•
Adobe Portable Document Format (.pdf)
•
Drawing Exchange Format (.dfx)
•
Encapsulated PostScript (.epf)
–
–
–
–
–
–
– Bina Nusantara
Used by Microsoft Windows
A new format devised for the web
Older format commonly used for clip art
A page description language used to control printers
A page description language common on the web
Store 3D image created by design program AutoCAD
Professional printing: Illustration program, Adobe Systems, Desktop Publishing programs
Bina Nusantara
Model Grafik 3D
Model Grafik 3-Dimensional
• Sebuah model 3D adalah variasi dari format vector
• Grafik 3D menawarkan efek photorealistics yang kita lihat di TV atau Computer Games
• Lokasi dari suatu obyek 3dimensional dispesifikasikan menggunakan koordinat x, y dan z
• Contoh Film yang menggunakan 3D : – The Incredibles, Shrek, Happy Feet, Transformer, etc.
Bina Nusantara
– Lightwave – 3D Studio Max – Maya
3D model
• Primitive lain yang dapat ditemukan pada 3D models – Cube, sphere, pyramid, etc. – Camera, spotlight, texture, shading etc.
• Contoh 3D program/software:
X
Y Z
Bina Nusantara
Photorealistics Effects
Photorealistics Effects
Transformer the Movie (2007) Bina Nusantara
Bina Nusantara
Software untuk membuat 3D image
Bina Nusantara
3-Dimensional Graphic models
Bina Nusantara
Hardware Untuk Mendapatkan Images • Scanner dan produk digital imaging
Hardware Untuk Mendapatkan Images • Digital camera – Menggunakan digital memory dan bukan film – Images ditransfer ke komputer melalui kabel – Dapat memiliki resolusi yang sangat tinggi
• Bentuk-bentuk scanner – – – –
Drum Flat-bed Negative / slide Hand-held
• Penting untuk memeriksa optical resolution dari scanner
• Gambar yang di-capture dari suatu camcorder atau tipe kamera PC “web-cam”
– Diukur dalam dots per inch (DPI) Bina Nusantara
Bina Nusantara
– Home products biasanya ber-resolusi rendah
Hardware Untuk Membuat / Mengedit Images Tablet and pen
Mengubah image formats TrueType / PostScript Type font
• Graphics tablet dan pen
Bitmapped font
Text
– Lebih disukai oleh technical artists – Puck memiliki crosshair yang akurat untuk membantu mendigitasi gambar (drawings)
Optical Character Recognition (OCR)
Digitiser Bina Nusantara
Render as bitmap
Contour trace
Vector image
• Digitiser tablet
Bitmapped image
– Lebih disukai oleh digital artists – Menekankan sensitivitas
Bina Nusantara
Menggunakan Graphics • Konsiderasi dan guidelines dalam penggunaan graphics:
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 :
– Memilih graphics sesuai dengan kebutuhan penggunaan – Memilih software yang tepat – Gunakan minimum color depth – Delivery Systems
Bina Nusantara
• Isometric – merepresentasikan obyek 3-D tanpa prespektif realistik • Orthographic – representasi 2-D dari obyek • Perspective – merepresentasikan obyek dalam bentuk yang paling realistik
Bina Nusantara
Modeling and Rendering
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 mengkonseptualisasi 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 membantu artist untuk membuat atau meng-edit design yang akan digunakan dalam aplikasi multimedia
Keuntungan dan Kerugian Penggunaan Images • Keuntungan – – – –
• 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
• Kerugian – Tidak menyediakan penjelasan yang mendalam • Graphics jarang bisa merepresentasikan pesan secara utuh baik dalam bisnis, teknikal atau safety settings
– Image editing programs
– Dapat disalah-interpretasikan
• Membuat perubahan pada image yang sudah ada, seperti memanipulasi brightness atau contrast, meng-apply texture, patern • Contoh : Adobe Photoshop, Corel PhotoPaint Bina Nusantara
Bina Nusantara
Q&A
Bina Nusantara
Menyampaikan banyak informasi secara cepat Menambah simulasi dan warna visual Dapat berkomunikasi tanpa ada batasan bahasa Memperkaya media lainnya
• Graphics seharusnya digunakan secara hati-hati untuk menjamin pesan yang disampaikan tidak ambigu atau cryptic (tersembunyi)
