IMAGE/ GAMBAR/ CITRA GRAPHICS/ GRAFIK

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
Hardware yang digunakan untuk
menampilkan gambar
Monitor CRT
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
Tablet and pen
Digitiser
14
15
Sistem Koordinat
& Resolusi
Cathode Ray Tube
• sinar dalam
tabung
diarahkan
17
Bagaimana Gambar Tampil di Monitor
Komputer?
• Sistem tampilan raster
18
Sistem Koordinat
• Dalam sistem komputer untuk menampilkan grafik atau
gambar, digunakan Screen Coordinate.
• Perbedaan dengan Cartesian Coordinate lihat gambar
berikut:
Display Adapter & Resolution
20
WARNA
Cahaya putih disusun dari semua
komponen cahaya
White light components
White light
Prism
RGB - Red, Green, Blue
Layar Monitor jika diperbesar
CRT monitor
LCD 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 (NTSCUS, Japan), YUV (PALAustralia,
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
SAME COLOUR!!!
Dot colour 1
Dot colour 2
http://www.purveslab.net/main/
Human Vision - Brightness
Grey and White
Mempunyai kecerahan
yang sama!!
http://www.purveslab.net/main/
Human Vision - Contrast
Mempunyai Kontras yang sama!!!
http://www.purveslab.net/main/
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 %
0%
Black
50%
100%
white
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
width  height  colour depth
size_ in_bytes 
8
• 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)
Contoh
• Sebuah gambar dengan ukuran 640 x
480 dalam 24-bit warna, berapa ruang
memori yang diperlukan?
640  480  24 7372800
size in bytes 

8
8
 921600 bytes
 900KB
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 discaled/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
Jenis Gambar
• Dari Gambar Vektor ke Sistem
Tampilan/Display Raster
53
Konversi Bitmap dan Vector
• Mudah, Vector  Bitmap
• Proses: rastering
• Susah, Bitmap  Vektor
• Proses: tracing
Converting image formats
TrueType / PostScript Type font
Render as bitmap
Contour trace
Vector image
Text
Optical Character
Recognition (OCR)
Bitmapped image
Bitmapped font
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 multicitra. 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
Vector Graphic
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