image

image / graphic?
“artifak / gambar dua dimensi yang memiliki kemiripan
tampilan dengan sebuah subjek.”
- wikipedia
dari sisi engineering?
pixel?
 pixel

• pixel = picture element

• satuan terkecil pada sebuah image
• terdiri dari kumpilan bit
• setiap bit-nya merepresentasikan warna, derajat
keabuan atau informasi lain yang dapat
ditampilkan
pixel
 pixel

pixel
pixel
pixel
 pixel
• Jumlah pixel pada gambar Pixel
(HxV) H (horizontal number of pixel)
• Setiap pixel
direpresentasikan dengan
– 1 bit (bw)
– 1 byte (greyscale)
– 1 byte (256 color)
– 2 byte (64K color)
– 3 byte (16M color)
– 4 byte ( ……….)
Bentuk - Bentuk
image
crea-tif.if-unpas.org
 Bentuk Image

Bentuk image secara umum:

– Fotografi
– Gambar
– Lukisan
– Televisi
– Gambar gerak
– Peta, dan lain – lain.
Peranan
image & graphic
 Peranan Image

Peranan image secara umum:

– Navigasi
– Komponen antarmuka pengguna
– Bantuan Sistem
– Clip art
representasi data
image & graphic
 Representasi Data Image & Graphic

tipe data umum:

• 1-bit image
• 8-bit grayscale image
• 24-bit color image
1-bit image
1-bit image
 1-bit image
• tipe image yang paling sederhana
• setiap pixel hanya bisa menyimpan 1 bit (0 atau 1)
• setiap bit menyimpan informasi warna “hitam” (0) atau
“putih” (1)
 1-bit image

1-bit
1-bit image
 1-bit image
• warna abu-abu diperoleh dari
tingkat kerapatan warna hitam
• biasa digunakan untuk
mendapatkan gambar dengan
ukuran kecil
• storage yang dibutuhkan untuk
menyimpan 640 x 480 gambar 1-bit:
640 x 480 / 8 = 38,400 byte

• digunakan juga untuk image

processing (tresholding)
tresholding
8-bit grayscale image
8-bit grayscale image
 8-bit grayscale image
• tiap-tiap pixel direpresentasikan dengan 1 buah byte
• nilai derajat keabuan dari 0 sampai 255
• keseluruhan image bisa dianggap sebagai array 2
dimensi yang berisi nilai-nilai pixel
 8-bit grayscale image

Pixel-2 Pixel-n
= 1 byte
Pixel-1
 8-bit grayscale image

1-bit 8-bit
 8-bit grayscale image
•resolusi
• tinggi: 1600x1200
• rendah: 640x480
• aspek ratio: 4:3
•storage yang dibutuhkan untuk
menyimpan 640 x 480 gambar
greyscale:
640 x 480 = 307,200 byte
24-bit color image
24-bit color image
 24-bit color image
• tiap-tiap pixel direpresentasikan dengan 3 buah byte,
untuk menyimpan nilai RGB
• nilai masing-masing warna RGB mulai dari 0 sampai 255
• sanggup menyimpan 256 x 256 x 256 = 16,777,216 warna
 24-bit color image

Pixel-1 Pixel-2 Pixel-n

= 1 byte
 24-bit color image

1-bit 8-bit 24-bit

 24-bit color image
•storage yang dibutuhkan untuk
menyimpan 640 x 480 gambar
berwarna:
640 x 480 x 3 = 921,600 byte
•kadang-kadang ada image 24-bit
yang disimpan sebagai 32-bit, 8-bit
digunakan untuk merepresentasikan
transparansi
raster vs. vector
 Vector Image
•image yang terdiri dari kumpulan
besaran dan arah
•menggunakan formula matematis
dalam penggambaran objeknya
•ukuran image relatif lebih kecil dan
tidak ‘pecah’ jika dilakukan
pembesaran
Vector Image
Vector Image
 Peranan Image & Graphic
• Microsoft bitmap (.bmp)
Digunakan di Microsoft windows

• TIFF – Tagged Image File Format (.tif)

Digunakan untuk faxing images (lebih
banyak digunakan untuk yang lain)

• JPEG – Joint Photographic Expert Group (.jpg)

Berguna untuk menyimpan gambar foto
 Peranan Image & Graphic
• GIF – Graphics Interchange Format (.gif)
Banyak digunakan pada situs web

• PNG – Portable Network Graphics (.png)

Format baru untuk web grafis
 Vector Image
software & file format
 Raster Image
•image disimpan dalam bentuk array yang
terdiri dari pixel-pixel
•setiap pixelnya menyimpan informasi
(warna, derajat keabuan, brightness, dll)
•gambar menjadi pecah pada saat di zoom
karena pixelnya sudah tetap.
 Raster Image
software & file format
vector raster
export
raster vector
tracing
format file gambar
GIF
 GIF
• GIF (Graphics Interchange Format)
• diciptakan oleh UNISYS Corporation &
Compuserve pada tahun 1987
• pada awalnya digunakan untuk mengirimkan
data gambar melalui line telepon
• tidak dimiliki oleh software manapun, saat ini
sudah didukung oleh semua software & OS
 GIF
• menggunakan algoritma kompresi LZW (Lempel-
Ziv-Welch)
• terbatas ke 8-bit (256) warna
• menggunakan metode interlacing
• mendukung transparansi & animasi
 GIF
• biasanya digunakan untuk:
§ grafik sederhana
§ penggambaran garis
§ image kartun
§ tombol navigasi
JPEG
 JPEG
• JPEG (Joint Photographic Experts Group)
• diciptakan oleh task group dari ISO (International
Standard Organization)
• memanfaatkan keterbatasan penglihatan
manusia
• memiliki tingkat kompresi yang paling tinggi
• menggunakan algoritma kompresi lossy
 JPEG
• baik digunakan untuk foto yang memiliki banyak
warna
• tidak cocok untuk digunakan untuk gambar yang
memiliki banyak teks dan sedikit warna
• mendukung hingga 16 juta warna (24-bit)
 JPEG

JPEG (1): 800 x 600 pixel, 642kb

 JPEG

JPEG (2): 800 x 600 pixel, 201kb

 JPEG

JPEG (3): 800 x 600 pixel, 46kb

 BMP
• BMP (Bitmap File Format)
• diciptakan oleh Microsoft sebagai format gambar
utama untuk OS Window
• dapat menyimpan data gambar berukuran 1-bit,
4-bit, 8-bit, dan data gambar original tanpa
kompresi
 BMP
• file BMP memiliki 4 komponen:
§ file head: informasi mengenai tipe
§ information head: panjang, lebar, algoritma kompresi
§ pallete: tipe skema warna yang digunakan
§ data image: data warna (RGB) berdasarkan index pixel
 PNG
• PNG (Portable Network Graphic)
• pengembangan dari GIF
• sanggup menampilkan true color (RGB, dengan
jutaan kombinasi warna)
• mendukung transparansi
• cocok untuk digunakan pada web
cara mendapatkan Gambar
screen capture
scanner
digital camera
digital image creation
dari sisi desain grafis?
unsur-unsur Desain
1. line / garis
 4 tipe dasar garis

Horizontal
Vertical

Curvilinear
 fungsi garis

• memisahkan ruang / konten dan mengarahkan mata

yang melihatnya
• menciptakan aliran dari konten
• mengorganisir informasi
• menciptakan sistem grid
2. shape / raut
 jenis raut

geometris
abstrak
natural
 fungsi raut

• dapat digunakan sebagai pengelompokan, pembeda,

penghubung, dll
• simbolisasi ide
• menciptakan pergerakan
• mengarahkan mood / perasaan
• penekanan
 fungsi raut

• menciptakan desain yang lebih ‘hidup’

• menghilangkan kesan membosankan
• menambahkan detil pada desain
• menimbulkan rasa ketertarikan
4. direction / arah
5. warna
sekian
pertanyaan?
terimakasih

Team Dosen
SISMUL