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 Tablet and pen
digital
– Tekanan sensitivitas
• Digitiser tablet
– Disukai oleh seniman
teknis
– Mouse yang akurat
untuk membantu
mendigitalkan gambar

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

HD 10B0
lWZ0 x l0W0

WUXGA
SXGA
1280 x
1024
17:

Z:4

QSXGA
2 5 6 0 x 2 0 48
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)
Color Picker (Background Color)

Cancel

Add TD Swatches

CDIDr Libraries

• H: B0 L:
s:
b:
D
R: C: 40 C

204
51 Y: 93 D
C
> Only Y.’eb
Cobrs
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

Mempunyai kecerahan
yang sama!!
Human Vision - Contrast

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 %

0% 50% 100%

Black 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

size_ in_bytes  width  height  colour dept

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?

sizein 640 480 900KB

bytes
24
 8
 921600
bytes
 7372800
 8
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
 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

Bitmapped font

Bitmapped image

Vector image
Render as bitmap
Text

Optical Character Contour trace

Recognition (OCR)
Vecloi-tssed hm$e Bll1l1fi§
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 Foto, citra dengan

dengan banyak warna
sedikit warna,
teks
Kecepatan Cepat Lebih lambat,
komputasi lebih besar
Keuntungan Transparency, Kompresi tinggi,
Animation 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