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

  Monitor CRT Hardware yang digunakan untuk menampilkan gambar

  Monitor LCD  LED

  Plasma Monitor

  Printer

  Printer

  Printer ?

  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

  Tablet and pen Digitiser

• – Disukai oleh seniman digital
• – Tekanan sensitivitas
• Digitiser tablet
• – Disukai oleh seniman teknis
• – Mouse yang akurat untuk membantu mendigitalkan gambar

  

Sistem Koordinat

& Resolusi

  Cathode Ray Tube

• sinar dalam tabung diarahkan

  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:

  

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

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

  Dot colour 1 Dot colour 2

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 %

  0% _Black

^50%

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

  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)

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 Gra
• 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 Grap>Drawing Programs • Contoh: Flash, Freehand, Illustrator • Bentuk sederhana dengan warna flat atau gra>Bi
• 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 rect>Bitmapped Graphic
• 128 * 128 * 1 =16384 Bytes

Ukuran image

• Vector Gra>Dipengaruhi isi image
• Menyimpan deskripsi obyek
• Makin kompleks, makin banyak deskripsi yang dibutu>Bitmapped Gra>Untuk tiap luasan menyimpan jumlah data yang sama, tidak peduli seberapa kompleks isinya.
• Jumlah data dipengaruhi juga oleh

Bitmapped vs. Vector

• Vector Grap>Untuk menerapkan efek, harus diubah menjadi bitmap terlebih dahulu
• Image tetap sama pada saat di- scaled/resized
• Mudah untuk memilih obyek secara indi>Bitmapped Gra>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

Konversi Bitmap dan Vector

• • Mudah, Vector  Bitmap

  •Proses: rastering

• • Susah, Bitmap  Vektor

  •Proses: tracing

Converting image formats Text

  

Bitmapped

image

  Bitmapped font TrueType / PostScript Type font Optical Character Recognition (OCR)

Vector image

  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

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

  Transparency GIF

Not a transparent GIF

a transparent GIF

JPEG Format

• JPEG – Joint Photographic Experts Group

  lossy " untuk

• Menggunakan kompresi " memperkecil ukuran file.
• Kualitas citra yang disimpan dalan format JPEG akan menurun.

  quality factor ,"

• Derajat degradasi kualitas, " 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 sedikit banyak warna 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

  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

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