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 ?

Plotter (cutting sticker)

Plotter (acrylic laser cutting)


memperoleh gambar

• Scanner dan produk-produk

digital imaging

• Banyak bentuk scanner

– Drum

– Flat-bed

– Negatif / slide

– Genggam


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"


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

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

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 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


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 %

Black white

0% 50% 100%

Colour depth

• 1 bit per pixel = 2 colours (monochrome)

• 2 bits per pixel = 4 colours



Umumnya cukup baik untuk gambar berwarna


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


• 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


• 128 * 128 * 1 =16384 Bytes

Ukuran image

• Vector Graphic

• Dipengaruhi isi image

• Menyimpan deskripsi obyek

• Makin kompleks, makin banyak

deskripsi yang dibutuhkan


• 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


• 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).

http://www.libpng.org/pub/png/img_png/pnglogo-blk.jpg

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

image/ gambar/ citra graphics/ grafik · pdf filehardware yang digunakan untuk memperoleh...

Documents