Matakuliah Tahun
: O0414 - Computer / Multimedia : 2010
Graphics Pertemuan 07&08
Learning Outcomes Pada akhir p pertemuan ini,, diharapkan p mahasiswa akan mampu : • Menerapkan Penggunaan Gambar pada Aplikasi Multimedia
Bina Nusantara
1
Outline Materi • • • • • •
Apa itu Image Tipe-Tipe Image Media Bitmap Image Vector Image Model Grafika 3 3-Dimensional Dimensional Bekerja dengan Grafika
Bina Nusantara
Apa itu Image? • Image g suatu representasi p grafika dan visual dari beberapa informasi yang dapat ditampilkan di layar komputer atau tercetak • Image dapat tampil dalam format : – – – – – –
Photographs Drawings Paintings Television and motion pictures Semantics Maps, dll.
Bina Nusantara
2
Apa itu Image? • Images memainkan peran yang penting dalam multimedia – – – –
Navigation User interface components Help systems Clip art Jazz Dive Profile
History
Contact
Opening Screen Main Menu
Links
Promoted Bands
The Flairz
Little Birdy
The Waifs
John Butler Trio
Bina Nusantara
Tipe-Tipe Image Media
Raster / Bitmap Image Vector / Metafile Bina Nusantara
3
Raster/Bitmap Image • Bitmapped pp image g disimpan p dalam bentuk arrayy of p pixels. Original image
Shown magnified Bina Nusantara
Raster Image • Sebuah pixel adalah elemen terkecil dari resolusi pada l layar kkomputer t (Screen (S R Resolution) l ti ) • Bitmap Æ a map of bits Æ a matrix of pixel • Setiap pixel dapat berisi warna spesifik yang dipilih dari 2 atau lebih range warna • Range warna ini dikenal sebagai colour depth • Colour depth dihitung dalam satuan bits per pixel – Ingat : 1 bit (binary digit) berisi 1 atau 0 dan ada 8 bit dalam 1 byte
Bina Nusantara
4
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
Bina Nusantara
True Colour (24 bits)
Colour Depth 8 bits
4 bits
2 bits
Bina Nusantara
5
Raster Image • Semakin banyak y warna per p p pixel Æ semakin besar ukuran image • Jumlah pixel bergantung pada ukuran file yang dibutuhkan untuk menyimpan image (Resolusi Image) • Ingat, 2 faktor yang mempengaruhi ukuran file bitmap adalah: Bina Nusantara
– Resolusi – Color Depth
Tipe Kompresi Lossless compression • Mengubah cara data diorganisasikan atau ditampilkan untuk mengurangi ukuran penyimpanan. p y p • Tidak ada detil yang dihilangkan
Lossy compression • Mencoba memaksimalkan kompresi dengan menghilangkan detil yang y g tidak terlihat oleh user manusia. • Menghilangkan detil saat kompresi
Bina Nusantara
6
Lossy Compression
NOTE: Repeated compression causes loss in quality Bina Nusantara
Popular bitmap formats • Microsoft bitmap (.bmp) – Used U d iin microsoft i ft windows i d
• 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 Bina Nusantara
7
Keuntungan dan Kerugian Penggunaan Bitmap / Raster Image • Keuntungan – Menampilkan detil informasi dengan cepat – Nyata
• Kerugian – Bergantung pada resolusi – Berpengaruh pada kualitas image – Ukuran file besar Bina Nusantara
Software Untuk Membuat Bitmap Image • • • • • •
Adobe Photoshop Adobe Fireworks Corel Paint Shop Pro Microsoft Paint Microsoft PhotoDraw 2000 OpenCanvas
Bina Nusantara
8
Software Untuk Membuat Raster/Bitmap
Bina Nusantara
Vector images • Vector images disimpan dalam bentuk kumpulan graphic primitives yang dibutuhkan untuk menampilkan image • Graphic primitive adalah grafika sederhana berbasiskan elemen drawing atau obyek seperti shape p – e.g. square, line, ellipse, arc, etc.
• Image terdiri dari kumpulan perintah (persamaan matematika) yang akan ditampilkan sebagai obyek saat dibutuhkan Bina Nusantara
9
Vector images • Menyimpan y dan menampilkan image dengan g persamaan matematika disebut vector graphics atau Object Oriented graphics. • Setiap primitive object memiliki atribut yang bervariasi untuk membentuk suatu image – e.g. x-y location, fill colour, line colour, line style, etc.
• 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
Primitive geometric drawing objects • Basic – – – –
Line Polyline Arc Bezier curve
• Text – Font, weight
• Shapes – – – – – – –
Circle Ellipse Rectangle Square Pie segment Triangle Pentagon, hexagon, heptagon, octagon, etc
Text
Text
Bina Nusantara
10
Vector images • Vector image atau vector graphics dapat diubah ukurannya tanpa mengalami kehilangan integritas dari image aslinya. • Mengubah ukuran suatu vector menggunakan operasi matematika – hanya mengubah atribut atribut, sehingga image tidak terpengaruh
Bina Nusantara
Mengubah Vector Graphics Shown magnified
Original image V e c to r g r a p h ic s
V e c to r g r a p h ic s Bina Nusantara
11
Keuntungan dan Kerugian Penggunaan Vector Image • Keuntungan – Ukuran datanya relatif kecil untuk menampilkan image – Karena itu tidak membutuhkan memory yang besar untuk penyimpanannya – Mudah dimanipulasi
• Kerugian – Level detil yang terbatas untuk menampilkan image Bina Nusantara
Software Untuk Membuat Vector Image • • • •
Adobe Flash Adobe Illustrator Adobe Freehand Microsoft Silverlight
Bina Nusantara
12
Software to Membuat Vector
Bina Nusantara
Vector formats •
Windows metafile (.wmf) –
•
SVG - Scalable Vector Graphics (.svg) –
•
A page description language common on the web
Drawing Exchange Format (.dfx) –
•
A page description language used to control printers
Adobe Portable Document Format (.pdf) –
•
Older format commonly used for clip art
Adobe PostScript (.ps) –
•
A new format devised for the web
CGM - Computer Graphics Metafile (.cgm) –
•
Used by Microsoft Windows
Store 3D image created by design program AutoCAD
Encapsulated PostScript (.epf) –
Professional printing: Illustration program, Adobe Systems, Desktop Publishing programs
Bina Nusantara
13
Graphics Programs • Graphics programs adalah alat yang memungkinkan seniman untuk membuat dan mengedit design yang digunakan dalam aplikasi multimedia. • Umumnya, graphics programs dapat dikategorikan sebagai : – Drawing programs • Membuat draw type graphics • Menyediakan freehand. Contoh : geometric shape • Example : Adobe Illustrator, Corel Draw, Adobe Freehand
– Paint p programs g • Yang digunakan untuk membuat bitmap • Berguna untuk membuat original art • Contoh: Paint Shop Pro
– Image editing programs • Membuat perubahan pada image yang sudah ada, seperti memanipulasi brightness atau contrast, mengaplikasikan textures, patterns • Examples : Adobe Photoshop, Corel PhotoPaint Bina Nusantara
Model Grafika 3-Dimensional • Suatu model 3D adalah variasi dari format vector • Lokasi dari suatu obyek 3dimensional dispesifikasikan sebagai koordinat x, y dan z X
• Primitives yang bisa ditemukan pada model 3D : – Cube, sphere, pyramid, etc. – Camera, spotlight, texture, shading etc. Bina Nusantara
3D model
Y Z
14
Model Grafika 3-Dimensional • Grafika 3D menawarkan efek photorealistics yang dapat dilihat di TV, Computer Games • Contoh : Motion Picture films seperti: sepe t – Transformer, Christmas Carol, Up, Wall-E, Astroboy, Monsters VS Aliens, etc
Bina Nusantara
Photorealistics Effects
Transformer the Movie (2007) Bina Nusantara
15
Photorealistics Effects
Bina Nusantara
Software Untuk Membuat Image 3D
• Lightwave • 3D Studio Max • Maya
Bina Nusantara
16
Software Untuk Membuat Image 3D
Bina Nusantara
Model Grafika 3-Dimensional
Bina Nusantara
17
35
Real atau 3D?
36
18
37
Hardware Untuk Mendapatkan Images • Scanners dan produk digital i imaging i • Digital camera – Menggunakan memory digital untuk menggantikan film – Images ditransfer ke komputer melalui kabel atau memory card – Dapat memiliki resolusi yang sangat tinggi
• Gambar dari camcorder atau PC “web-cam” – Produk rumahan biasanya beresolusi rendah Bina Nusantara
19
Hardware Untuk Membuat / Mengedit Images • Graphics / digitizer tablet dan pen
Tablet and pen
– Lebih disukai oleh digital artists – Menekankan pada sensitivitas – Mouse memiliki crosshair yang akurat untuk membantu mendigitasi gambar Bina Nusantara
Bekerja dengan Grafika • Konsiderasi dan panduan saat bekerja dengan grafika: – Pilihan grafika tergantung pada apa yang kita kerjakan – Pilih software yang tepat – Gunakan G k color l d depth th yang minimal i i l – Pikirkan sistem penyampaian
Bina Nusantara
20
Bagaimana grafika/images dapat digunakan dengan efektif • Grafik dan Tables – Dengan sekali melihat, grafik dapat menyediakan spesifik data, menampilkan tren umum pada data atau memperlihatkan relasi antara data dan tren data
• Diagrams – Membantu user mengkonsepkan suatu proses, aliran dan hubungan. Contoh diagram: Flow charts, Schematic Drawings and Block Diagrams. Bina Nusantara
Keuntungan dan Kerugian Penggunaan Image g • Keuntungan – – – –
Menampilkan banyak informasi dengan cepat Menambah simulasi visual dan warna Dapat berkomunikasi tanpa batasan bahasa Memperkaya media lain
• Kerugian g – Tidak menyediakan penjelasan mendalam • Grafika jarang dapat menampilkan pesan yang cukup dalam bidang bisnis, teknikal dan aturan keselamatan
– Dapat disalah-interpretasikan • Grafika harus digunakan dengan hati-hati untuk memastikan pesan tidak ambigu atau kriptik Bina Nusantara
21
