Graphics Pertemuan 07&08

Transkripsi

1 Matakuliah : O Computer / Multimedia Tahun : 2010 Graphics Pertemuan 07&08 Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Menerapkan Penggunaan Gambar pada Aplikasi Multimedia

2 Apa itu Image Outline Materi Tipe-Tipe Image Media Bitmap Image Vector Image Model Grafika 3-Dimensional Bekerja dengan Grafika Apa itu Image? Image suatu representasi 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.

3 Apa itu Image? Images memainkan peran yang penting dalam multimedia Navigation User interface components Help systems Opening Screen Main Menu Links Clip art Jazz Dive Profile Promoted Bands History Contact The Flairz Little Birdy The Waifs John Butler Trio Tipe-Tipe Image Media Raster / Bitmap Image Vector / Metafile

4 Raster/Bitmap Image Bitmapped image disimpan dalam bentuk array of pixels. Original image Shown magnified Raster Image Sebuah pixel adalah elemen terkecil dari resolusi pada layar komputer (Screen Resolution) ) 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

5 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 = 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 True Colour (24 bits) 8bits Colour Depth 4 bits 2bits

6 Raster Image Semakin banyak warna per 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: Resolusi Color Depth Tipe Kompresi Lossless compression Mengubah cara data diorganisasikan atau ditampilkan untuk mengurangi ukuran penyimpanan. p Tidak ada detil yang dihilangkan Lossy compression Mencoba memaksimalkan kompresi dengan menghilangkan detil yang tidak terlihat oleh user manusia. Menghilangkan detil saat kompresi

7 Lossy Compression NOTE: Repeated compression causes loss in quality Microsoft bitmap (.bmp) Used in microsoft windows Popular bitmap formats 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

8 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 Software Untuk Membuat Bitmap Image Adobe Photoshop Adobe Fireworks Corel Paint Shop Pro Microsoft Paint Microsoft PhotoDraw 2000 OpenCanvas

9 Software Untuk Membuat Raster/Bitmap 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 e.g. square, line, ellipse, arc, etc. Image terdiri dari kumpulan perintah (persamaan matematika) yang akan ditampilkan sebagai obyek saat dibutuhkan

10 Vector images Menyimpan dan menampilkan image dengan 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 Primitive geometric drawing objects Basic Shapes Line Circle Polyline Ellipse Arc Rectangle Bezier curve Square Pie segment Text Triangle Font, weight Pentagon, hexagon, heptagon, octagon, etc Text Text

11 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, sehingga image tidak terpengaruh Mengubah Vector Graphics Original image Shown magnified V e c t o r g r a p h i c s V e c t o r g r a p h i c s

12 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 Software Untuk Membuat Vector Image Adobe Flash Adobe Illustrator Adobe Freehand Microsoft Silverlight

13 Software to Membuat Vector Windows metafile (.wmf) Used by Microsoft Windows SVG - Scalable Vector Graphics (.svg) A new format devised for the web Vector formats 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

14 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 programs 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 Model Grafika 3-Dimensional Suatu model 3D adalah variasi dari format vector Lokasi dari suatu obyek 3- dimensional dispesifikasikan sebagai koordinat x, y dan z Primitives yang bisa ditemukan pada model 3D : Cube, sphere, pyramid, etc. Camera, spotlight, texture, shading etc. Z X 3D model Y

15 Model Grafika 3-Dimensional Grafika 3D menawarkan efek photorealistics yang dapat dilihat di TV, Computer Games Contoh : Motion Picture films seperti: Transformer, Christmas Carol, Up, Wall-E, Astroboy, Monsters VS Aliens, etc Photorealistics Effects Transformer the Movie (2007)

16 Photorealistics Effects Software Untuk Membuat Image 3D Lightwave 3D Studio Max Maya

17 Software Untuk Membuat Image 3D Model Grafika 3-Dimensional

18 35 Real atau 3D? 36

19 37 Hardware Untuk Mendapatkan Images Scanners dan produk digital imagingi 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

20 Hardware Untuk Membuat / Mengedit Images Graphics / digitizer tablet dan pen Lebih disukai oleh digital artists Menekankan pada sensitivitas Mouse memiliki crosshair yang akurat untuk membantu mendigitasi gambar Tablet and pen Bekerja dengan Grafika Konsiderasi dan panduan saat bekerja dengan grafika: Pilihan grafika tergantung pada apa yang kita kerjakan Pilih software yang tepat Gunakan color depth yang minimal i Pikirkan sistem penyampaian

21 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. Keuntungan dan Kerugian Penggunaan Image Keuntungan Menampilkan banyak informasi dengan cepat Menambah simulasi visual dan warna Dapat berkomunikasi tanpa batasan bahasa Memperkaya media lain Kerugian 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