IMAGE/ GAMBAR/ CITRA GRAPHICS/ GRAFIK · PDF fileHardware yang digunakan untuk memperoleh...
Transcript of IMAGE/ GAMBAR/ CITRA GRAPHICS/ GRAFIK · PDF fileHardware yang digunakan untuk memperoleh...
IMAGE/ GAMBAR/ CITRA
GRAPHICS/ GRAFIK
Apakah Citra itu?
• Sebuah gambar adalah representasi visual dan grafis beberapa informasi yang dapat ditampilkan pada layar komputer atau dicetak
• Gambar datang dalam berbagai bentuk:
Foto
Gambar
Lukisan
Peta
• Gambar memainkan peranan penting dalam multimedia
Komponen antarmuka pengguna
Navigasi
Ikon/ Clip art
Monitor CRT
Hardware yang digunakan untuk
menampilkan gambar
Monitor LCD LED
Plasma Monitor
Printer
Printer
Printer ?
9
Plotter (cutting sticker)
Plotter (acrylic laser cutting)
Hardware yang digunakan untuk
memperoleh gambar
• Scanner dan produk-produk
digital imaging
• Banyak bentuk scanner
– Drum
– Flat-bed
– Negatif / slide
– Genggam
Hardware yang digunakan untuk
memperoleh gambar
• Kamera digital
– menggunakan memori
bukan film
– Gambar ditransfer ke
komputer melalui kabel
– Bisa resolusi sangat tinggi
• Jenis kamera :
– camcorder
– Pocket Camera
– DSLR
– PC "web-cam"
Hardware yang digunakan untuk
memperoleh gambar
• Graphics tablet dan pen
– Disukai oleh seniman
digital
– Tekanan sensitivitas
• Digitiser tablet
– Disukai oleh seniman
teknis
– Mouse yang akurat
untuk membantu
mendigitalkan gambar
14
Tablet and pen
Digitiser
15
Sistem Koordinat
& Resolusi
17
Cathode Ray Tube
• sinar dalam
tabung
diarahkan
18
Bagaimana Gambar Tampil di Monitor
Komputer?
• Sistem tampilan raster
Sistem Koordinat
• Dalam sistem komputer untuk menampilkan grafik atau
gambar, digunakan Screen Coordinate.
• Perbedaan dengan Cartesian Coordinate lihat gambar
berikut:
20
Display Adapter & Resolution
WARNA
Cahaya putih disusun dari semua
komponen cahaya
White light
Prism
White light components
RGB - Red, Green, Blue
Layar Monitor jika diperbesar
LCD monitor
CRT monitor
1 pixel
CMYK?
CMYK print
Model Warna
• Cara yang berbeda untuk mewakili informasi
tentang warna.
• Model yang digunakan untuk menentukan warna
dalam komputer adalah:
RGB model - Metodologi 24-bit di mana warna
ditetapkan dalam hal nilai merah, hijau, dan biru mulai
dari 0 hingga 255
CMYK (untuk media cetak/tinta)
HSB /HSL dan HSV model - Warna ditentukan sebagai
sudut 0-360 derajat pada roda warna
YIQ (NTSCUS, Japan), YUV (PALAustralia,
Europe), dan xvYCC (YCbCr/YPbPr +RGB)
CIE (International Commision Illumination, France, 1931)
Model Warna
• RGB: Red – Green – Blue
– Untuk monitor
• CMY: Cyan – Magenta – Yellow
– Untuk printing
28
RGB Model
Menambahkan intensitas warna merah, hijau dan biru untuk
membuat warna, sehingga termasuk model aditif.
Memberikan nilai intensitas untuk setiap piksel berkisar
antara 0 (hitam) sampai 255 (putih)
Misalnya warna merah cerah R=246, G=20, B=50
CMYK Model
• Berdasarkan menyerap cahaya kualitas tinta dicetak
di atas kertas.
• Sebagian cahaya diserap dan sebagian dipantulkan
kembali ke mata.
• Terkait dengan percetakan dan sering disebut
model subtraktif
Empat tipe: Cyan (C), magenta (M), kuning (Y) dan
hitam (K)
HSB Model
• Berdasarkan persepsi manusia
terhadap warna, menggambarkan
tiga sifat dasar warna:
Hue (Warna)
Saturation
(kroma atau kekuatan warna)
Brightness
(Kecerahan atau kegelapan warna)
Human Vision - Colour
http://www.purveslab.net/main/
Dot colour 1 Dot colour 2
SAME COLOUR!!!
Human Vision - Brightness
Grey and White
http://www.purveslab.net/main/
Mempunyai kecerahan
yang sama!!
Human Vision - Contrast
http://www.purveslab.net/main/
Mempunyai Kontras yang sama!!!
HSB Model
• Hue - warna diukur dalam roda warna
HSB Model
• Saturation (or chroma) -
kekuatan atau kemurnian warna
HSB Model
• Brightness - terang relatif atau
kegelapan warna, juga diukur
sebagai %
Black white
0% 50% 100%
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
Umumnya cukup baik untuk gambar berwarna
• 16 bits per pixel = 65536 colours
Kualitas yang lebih baik untuk gambar foto, juga dikenal
sebagai warna tinggi
• 24 bits per pixel = >16 million possible colours
Digunakan untuk menciptakan gambar realistik foto,
juga dikenal sebagai true color
Gambar Monokrom
• 1-bit: hitam atau putih
• 640x480 ≈ 37,5 kByte
Gambar keabuan
(greyscale 8-bit)
Menghitung ukuran file Gambar
Raster
• Dimana:
Lebar gambar yang diukur dalam pixel
Tinggi gambar yang diukur dalam pixel
Kedalaman warna adalah jumlah bit yang digunakan
untuk warna diukur dalam bit per pixel
Ingat!
1024 bytes = 1 kilobyte (KB)
1024 kilobytes = 1 megabyte (MB)
8in_bytes_size
depthcolourheightwidth
Contoh
• Sebuah gambar dengan ukuran 640 x
480 dalam 24-bit warna, berapa ruang
memori yang diperlukan?
900KB
bytes921600
8
7372800
8
24480640bytesinsize
Jenis Gambar
Bitmapped vs. Vector
• Bitmapped
• Vector
Bitmap vs. Vector graphics
• Vector Graphics
• lebih cocok untuk ilustrasi yang membutuhkan pengukuran yang tepat.
• Bitmapped Graphic
• lebih cocok untuk citra photorealistic yang membutuhkan variasi warna yang kompleks
Bitmap vs. Vector
• Vector Graphics
• Citra disimpan sebagai bentuk matematis
• Object-oriented graphics
• Bitmapped Graphic
• Citra dimodelkan dalam suatu senarai dari nilai piksel
• Raster graphics
Editing Program
• Vector Graphics
• Drawing Programs
• Contoh: Flash, Freehand, Illustrator
• Bentuk sederhana dengan warna flat
atau gradasi
• Bitmap
• Painting Programs
• Contoh: Photoshop, Paint
• Textures and continuous tones
Bitmap vs Vector
• Vector Graphic
• Postscript Language – 80 bytes
o 0 1 0 setrgbcolor
o 0 0 128 128 rectfill
o 1 0 1 setrgbcolor
o 32 32 64 64 rectfill
• Bitmapped Graphic
• 128 * 128 * 1 =16384 Bytes
Ukuran image
• Vector Graphic
• Dipengaruhi isi image
• Menyimpan deskripsi obyek
• Makin kompleks, makin banyak
deskripsi yang dibutuhkan
• Bitmapped Graphic
• Untuk tiap luasan menyimpan jumlah
data yang sama, tidak peduli seberapa
kompleks isinya.
• Jumlah data dipengaruhi juga oleh
tingkat kedalaman warna
Bitmapped vs. Vector
• Vector Graphics
• Untuk menerapkan efek, harus diubah
menjadi bitmap terlebih dahulu
• Image tetap sama pada saat di-
scaled/resized
• Mudah untuk memilih obyek secara individu
• Bitmapped Graphic
• Menerapkan efek semacam blur sangat
mudah
• Gambar akan kabur jika diskala (resized)
• Sukar untuk memilih obyek individual
53
Jenis Gambar
• Dari Gambar Vektor ke Sistem
Tampilan/Display Raster
Konversi Bitmap dan Vector
• Mudah, Vector Bitmap
•Proses: rastering
• Susah, Bitmap Vektor
•Proses: tracing
Converting image formats
Te
xt
Bitm
ap
pe
d im
ag
e
Ve
cto
r ima
ge
Bitmapped font
TrueType / PostScript Type font
Optical CharacterRecognition (OCR)
Contour trace
Render as bitmap
Bitmap dan Vector Images
Vector
Images
Bitmap
Images
Bitmap Picture
Bitmaps
• Citra Bitmap diperoleh melalui pemindai, kamera digital atau alat lain, dan merupakan format “alami” untuk layar dan printer
• Citra Bitmap dibangun dari grid warna
• Pada layar, citra adalah grid yang terdiri atas pixel, pada printer adalah grid yang terdiri atas titik-titik
• Bergantung pada kemampuan alat, pixel/dot dapat bervariasi dari dua hingga jutaan warna bit
Mengedit Citra Bitmap
• Citra bitmap mudah diedit menggunakan
program paint interaktif
• Dapat diterapkan filter, memodifikasi warna,
mengedit bagian-bagian kecil
• Diperlukan adanya layer untuk mempermudah
pengeditan
• Operasi yang umum dilakukan:
Blur and Sharpen.
Colour correction.
Brightness/Contrast adjustment.
Touch up.
Image manipulation
Pros & Cons of Bitmap Formats
• Keuntungan
Mudah direpresentasi sebagai kumpulan byte
Diproduksi oleh banyak alat masukan
Mudah diedit
Dapat disajikan dengan baik pada alat keluaran seperti CRT dan printer.
• Kekurangan
Ukuran besar
Tidak dapat diskalakan dengan baik
Asli diperkecil diperbesar informasi hilang
File Format - Bitmapped Graphics
• GIF
• Graphics Interchange Format
• 256 warna
• Lossless Compression
• Transparency
• JPEG
• Joint Photographic Experts Group
• Lossy Compression
• PNG
• Portable Network Graphics
• > 256 warna
• Alpha channel transparencies
GIF Format
• GIF – Graphics Interchange Format
• Termasuk format yang paling populer, terutama di Internet
• Berguna karena dapat digunakan untuk animasi. Di dalamnya dapat tersimpan beberapa citra yang ditampilkan seperti animasi.
– Animated GIF.
• Format GIF juga dapat mendefinisikan warna tertentu sebagai “background.” Warna itu akan menjadi transparan.
– Transparent GIF.
Animated GIF
• Keuntungan:
Tidak perlu software tambahan untuk menampilkannya
GIF adalah format standar di Web
Software untuk Animated GIF tersedia
• File berisikan kumpulan frame yang “ditumpukkan.”
Animated GIF
Transparency GIF
• Algoritme kompresi internal yang digunakan GIF
disebut LZW (Lempel-Zev-Welch = dictionary),
yang dipatenkan oleh Unisys Corporation.
Kompresi “lossless”.
Tidak ada informasi yang hilang dalam proses
kompresi.
Memanfaatkan perulangan pada data.
• Satu posisi pada palette dinyatakan sebagai
“transparent”.
• Semua pixel warna tersebut akan dijadikan
transparan ketika ditampilkan.
Transparency GIF
Not a transparent GIF
a transparent GIF
JPEG Format
• JPEG – Joint Photographic Experts Group
• Menggunakan kompresi "lossy" untuk memperkecil ukuran file.
• Kualitas citra yang disimpan dalan format JPEG akan menurun.
• Derajat degradasi kualitas, "quality factor," biasanya dapat diatur ketika menyimpan
Jika nilai faktor tersebut 100, degradasi minimal, tetapi ukuran file hasil kompresi tidak signifikan.
Jika nilainya mendekati 0, ukuran file sangat kecil, tetapi kualitas citra akan buruk sekali.
JPEG Format
• Degradasi citra bersifat kumulatif jika terus menerus disimpan ulang ke format JPEG.
• Sangat tidak cocok untuk teks, line art, desain mekanik (blue-print), dan yang semacamnya.
• Format yang lebih cocok adalah GIF, BMP, atau PNG.
• JPEG tidak mendukung transparency atau multi-citra. Juga tidak dapat digunakan untuk animasi.
• Kapan JPEG sesuai?
Citra fotografi
lukisan
Progressive JPEG
• Ada dua jenis file JPEG:
– Sequential/ Optimized JPEG menyimpan citra sebagai
bitmap tunggal.
– Progressive JPEG menyimpan citra sedemikian
hingga mula-mula muncul sebagai citra yang kurang
fokus lalu menjadi semakin jelas.
• Keuntungan: memberikan gambaran isi citra tanpa harus
menunggu citra selesai diunduh.
• Kekurangan: memerlukan daya komputasi lebih untuk
menampilkannya.
Pengaturan Kualitas pada
Photoshop & Corel PhotoPaint
GIF versus JPEG
GIF JPEG
Cocok untuk Line Art, citra
dengan sedikit
warna, teks
Foto, citra dengan
banyak warna
Kecepatan Cepat Lebih lambat,
komputasi lebih besar
Keuntungan Transparency,
Animation
Kompresi tinggi,
kedalaman warna
tinggi
Warna maks. 256 16.7 juta
PNG Format
• Portable Network Graphic (PNG), dibaca
“Ping”.
• Alternatif GIF, menggunakan kompresi
lossless.
• Mendukung tipe citra:
true color, grayscale, palette (8-bit).
PNG Format
• 2D interlacing PNG (kiri) vs 1D interlacing GIF (kanan)
PNG Format
• Keuntungan
– Kompresi yang lebih baik
• Deflate adalah perbaikan dari algoritme Lempel-Ziv.
– Interlacing yang lebih baik
• Lebih cepat ditampilkan dari Interlaced GIF.
– True Color & Transparency
• Mendukung16-bit (Grey scale) atau 24/48-bit (True Color)
• 8/16-bit untuk alpha channel (Transparency).
– Gamma storage
• Menyimpan pengaturan gamma pada platform pembuat citra.
• Kerugian
– Tidak didukung browser lama
– Ukuran file hasil kompresi tidak signifikan
Vector Graphic
Vector
Citra Vektor
• Citra vektor dibuat melalui deskripsi matematis satu atau
lebih elemen citra. Biasanya tidak hanya melibatkan
vektor sederhana, tetapi juga kurva lainnya.
• Dengan komponen sederhana itu, bentuk yang lebih
kompleks dapat didefinisikan.
• Citra vektor kemudian disimpan menggunakan rangkaian
bentuk dasar dan garis dengan parameternya (titik awal,
panjang, dll).
• Citra vektor berguna untuk menyimpan gambar, citra yang
dihasilkan komputer, dan cira lainnya yang dapat dipecah
menjadi bentuk-bentuk geometris sederhana.
Istilah dalam Vector Graphic
• Bentuk/shape
– Primitif: point, line, rectangle, round
rectangle, ellipse, polyline, polygon
– Turunan: 3D model
• Kurva kuadratik & kubik, serta Arc
• Antialiasing
• Stroke & Fill
Mengedit Citra Vektor
• Citra vektor dapat diedit dengan
menambah/mengurangi bentuk di
dalamnya dan dengan mengubah
parameter melalui transformasi.
• Penting diingat bahwa transformasi tidak
menghilangkan informasi citra karena
dapat dikembalikan ke aslinya.
Transformasi Geometris
•Scaling
•Rotation
•Translation
•Reflection
•Shearing
Format Vector
• Keuntungan:
Data vektor dengan mudah diskalakan untuk menyesuaikan dengan resolusi perangkat output.
Biasanya disimpan sebagai file teks sehingga mudah diedit.
Mudah diubah ke citra bitmap.
Mudah digunakan oleh plotter.
• Kerugian:
Sulit untuk citra kompleks seperti foto
Hasil penggambaran (rendering) citra dapat tergantung pada aplikasi yang digunakan
Rendering dapat memakan waktu lama (tiap elemen digambar satu per satu secara berurutan)
Bagaimana grafis / gambar dapat
digunakan secara efektif
• Grafik dan Tabel
– Grafik dapat menyediakan data spesifik,
menunjukkan kecenderungan umum data
atau menggambarkan hubungan antara data
dan tren data
• Diagram
– Membantu pengguna konsep proses, aliran
atau keterkaitan.
– Contoh diagram meliputi: diagram Flow,
skematis Gambar dan Diagram Blok.
Advantages and Disadvantages
of using images
• Keuntungan
Menyampaikan banyak informasi secara cepat
Menambahkan simulasi visual dan warna
Dapat berkomunikasi lintas batas bahasa
Meningkatkan media lainnya
• Kekurangan
Tidak memberikan penjelasan mendalam
• Gambar cukup jarang dapat menyampaikan seluruh
pesan
Dapat disalahartikan
• Grafik harus digunakan dengan hati-hati untuk
memastikan pesan tidak ambigu
86