IMAGE GAMBAR CITRA GRAPHICS GRAFIK

(1)

(2)

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

(3)

Monitor CRT

(4)

(5)

(6)

(7)

(8)

(9)

(10)

(11)

(12)

Hardware yang digunakan untuk

memperoleh gambar

•

Scanner

dan produk-produk

digital imaging

•

Banyak bentuk scanner

–

Drum

–

Flat-bed

–

Negatif / slide

(13)

memperoleh gambar

•

Kamera digital

–

menggunakan memori

bukan film

–

Gambar ditransfer ke

komputer melalui kabel

–

Bisa resolusi sangat tinggi

•

Jenis kamera :

–

camcorder

–

Pocket Camera

–

DSLR

(14)

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

(15)

(16)

(17)

17

Cathode Ray Tube

•

sinar dalam

(18)

18

Bagaimana Gambar Tampil di Monitor

Komputer?

(19)

Sistem Koordinat

• Dalam sistem komputer untuk menampilkan grafik atau gambar, digunakan Screen Coordinate.

(20)

20

(21)

(22)

Cahaya putih disusun dari semua

komponen cahaya

White light

Prism

(23)

(24)

Layar Monitor jika diperbesar

LCD monitor

CRT monitor

(25)

(26)

(27)

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)

(28)

Model Warna

•

RGB: Red

–

Green

–

Blue

–

Untuk monitor

•

CMY: Cyan

–

Magenta

–

Yellow

–

Untuk printing

(29)

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)

(30)

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

(31)

(32)

HSB Model

•

Berdasarkan persepsi manusia

terhadap warna, menggambarkan

tiga sifat dasar warna:



Hue (Warna)



Saturation

(kroma atau kekuatan warna)



Brightness

(33)

Human Vision - Colour

http://www.purveslab.net/main/

(34)

Human Vision - Brightness

Grey and White

http://www.purveslab.net/main/

(35)

Human Vision - Contrast

http://www.purveslab.net/main/

(36)

HSB Model

(37)

HSB Model

•

Saturation

(or

chroma

)

(38)

HSB Model

•

Brightness

- terang relatif atau

kegelapan warna, juga diukur

sebagai %

Black white

(39)

(40)

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

(41)

Gambar Monokrom

•

1-bit: hitam atau putih

(42)

(43)

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)

8

in_bytes

_

(44)

Contoh

•

Sebuah gambar dengan ukuran 640 x

480 dalam 24-bit warna, berapa ruang

memori yang diperlukan?

(45)

(46)

Bitmapped vs. Vector

•

Bitmapped

(47)

Bitmap vs. Vector graphics

•

Vector Graphics

•

lebih cocok untuk ilustrasi yang

membutuhkan pengukuran yang tepat.

•

Bitmapped Graphic

(48)

Bitmap vs. Vector

•

Vector Graphics

•

Citra disimpan sebagai bentuk

matematis

•

Object-oriented graphics

•

Bitmapped Graphic

•

Citra dimodelkan dalam suatu

senarai dari nilai piksel

(49)

Editing Program

•

Vector Graphics

•

Drawing Programs

•

Contoh: Flash, Freehand, Illustrator

•

Bentuk sederhana dengan warna flat

atau gradasi

•

Bitmap

•

Painting Programs

•

Contoh: Photoshop, Paint

(50)

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

(51)

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.

(52)

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

(53)

53

Jenis Gambar

•

Dari Gambar Vektor ke Sistem

(54)

Konversi Bitmap dan Vector

•

Mudah, Vector



Bitmap

•

Proses: rastering

•

Susah, Bitmap



Vektor

(55)

Converting image formats

Text

Bitmapped

image

Vector

image

Bitmapped font

TrueType / PostScript Type font

Optical Character Recognition (OCR)

(56)

(57)

Bitmap

dan Vector Images



Vector

Images



Bitmap

(58)

(59)

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,

(60)

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

.

(61)

(62)

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

(63)

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

(64)

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.

(65)

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

(66)

(67)

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

”.

(68)

Transparency GIF

Not a transparent GIF

(69)

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.

(70)

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

(71)

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.

(72)

Pengaturan Kualitas pada

(73)

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

(74)

PNG Format

•

Portable Network Graphic (PNG), dibaca

“Ping”.

•

Alternatif GIF, menggunakan kompresi

lossless

.

•

Mendukung tipe citra:

(75)

PNG Format

(76)

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

(77)

Vector Graphic

(78)

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

(79)

Istilah dalam Vector Graphic

•

Bentuk/

shape

–

Primitif: point,

line

,

rectangle

, round

rectangle,

ellipse, polyline, polygon

–

Turunan: 3D model

•

Kurva kuadratik & kubik, serta Arc

•

Antialiasing

(80)

Mengedit Citra Vektor

•

Citra vektor dapat diedit dengan

menambah/mengurangi bentuk di

dalamnya dan dengan mengubah

parameter melalui transformasi.

•

Penting diingat bahwa transformasi tidak

(81)

Transformasi Geometris

•

Scaling

•

Rotation

•

Translation

•

Reflection

(82)

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

(83)

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.

(84)

(85)

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

(86)