You don t always need it

(1)

(2)

(3)

(4)

(5)

(6)

(7)

(8)

(9)

(10)

(11)

(12)

(13)

You don’t always need it

• Variasi kecerahan (brightness/

shades of grey) sudah mencukupi

• Manusia secara sempurna dapat mengenali suatu obyek meskipun tidak berwarna

• Beberapa keuntungan image tanpa warna

– Ukuran file lebih kecil

– Relatif sama jika ditampilkan pada segala media keluaran

• Jika digunakan secara efektif, sangat berguna

(14)

(15)

Warna

• Warna adalah efek cahaya yang dipantulkan oleh benda ke mata kita

• Obyek tampak berwarna

karena kemampuan mereka untuk memantulkan,

menyerap atau meneruskan cahaya

(16)

(17)

(18)

(19)

(20)

(21)

Spectral Power Distribution

• Pengukuran kuantitas warna secara fisik

• Panjang gelombang yang hanya dapat dilihat antara 400nm dan 700 nm

(22)

Model Warna

• Agar warna dapat diproses secara

elektronik/digital diperlukan model

warna

• Model warna ditujukan agar sensasi

subyektif dapat diukur dan dapat

diproduksi kembali untuk

(23)

rods cones light bipolar ganglion horizontal amacrine

(24)

Persepsi Warna

• Struktur mata

– Dua sel reseptor

• Rods (sel batang) • Cones (sel kerucut)

• Cones

memiliki 3

jenis, yang merespon

panjang gelombang

cahaya yang berbeda

(25)

Trisitimulus Theory

• Sembarang warna dapat dispesifikasikan hanya dengan tiga nilai, dengan memberikan bobot pada setiap komponen

• Sering disimpulkan (secara tidak akurat) sebagai respon tiap sel kerucut terhadap cahaya merah, hijau dan biru

(26)

Model Warna RGB

• Mana yang disebut sebagai Red, Green, Blue? • Tidak ada standar yang secara universal

diterima

– ITU-R BT.709

• Tidak mungkin merepresentasikan seluruh warna di alam dengan model RGB

(27)

RGB

• RGB additive primary

colours

– Berbeda dengan artist’s primary colours

• Layar televisi & CRT monitor dibuat dari tiga jenis fosfor & tiga jenis electron beam

• Untuk produksi warna hanya memainkan

(28)

Model Warna RGB

• Secara praktis, mayoritas warna yang ada di alam berada pada RGB Gamut

• RGB useful, simple, efficient

• Ditulis dalam format : (r,g,b)

• Masing-masing komponen bernilai bebas

(29)

126 14 111 36 36 111 36 111 36 12 12 17 17 111 14 126 17 36 12 111 36 36 200 12 14 126 17 36 36 111 12 14 36 36 200 12 14 126 17 36 36 111 36 200 200 12 14 111 14 126 126 17 36 36 36 36 12 14 111 111 36 126 17 36 36 200 111 72 72 12 12 17 10 128 36 17 200 12 111 14 126 126 126 126 17 17 17 17 36 36 36 36 36 200 200 200 12 12 12 14 14 111 111 72 72 72 106 155 10 128 36 17 200 12 111 14 126 126 126 126 17 17 17 17 36 36 36 36 36 200 200 200 12 12 12 14 14 111 111 72 72 72 106 155 14 126 17 36 36 111 36 200 200 12 14 111 14 126 126 17 36 36 36 36 12 14 111 111 36 126 17 36 36 200 111 72 72 12 12 17 126 14 111 36 36 111 36 111 36 12 12 17 17 111 14 126 17 36 12 111 36 36 200 12 14 126 17 36 36 111 12 14 36 36 200 12

RGB Image

(30)

CMY Color Model

• Cyan (C), Magenta (M), Yellow (Y), Black (K) • W = White

• C = G + B = W – R • M = R + B = W – G • Y = R + G = W – B • Subtractive

• untuk tinta dan percetakan

(31)

(32)

CMYK Color Model

CMYK = Cyan, Magenta, Yellow, blacK

Magenta – removes Green

B G R

Black – removes all Yellow – removes Blue

B G R B G R tr a n s m it

(33)

yellow B G R + B G R red R = magenta B G R B G R

(34)

C + M + Y = K (black) 100 50 70 = 50 0 20 50 + C M Y K C M Y

CMY + Black

• Menggunakan tiga warna untuk Black sangat mahal • C+M+Y = dark brown bukan black

(35)

RGB & CMYK

(36)

(37)

dari RGB ke CMY













−













=













B

G

R

Y

M

C

1

1 













−













=













Y

M

C

B

G

R

1

(38)

(39)

Ruang/Model Warna

• Linear (RGB, CMYK)

• Artistic View (Munsell, HSV, HLS)

• Standard (CIE-XYZ)

• Perceptual (LUV, Lab)

(40)

The Artist Point of View

• Hue – Warna yang kita lihat (red, green, purple)

• Saturation – Seberapa jauh warna dari abu-abu. (pink kurang tersaturasi

dibandingkan red)

• Brightness/Lightness (Luminance) – Seberapa bright sebuah warna

(41)

Color Wheel

• Dengan memutar seluruh warna 360o didapatkan magenta • Diukur dengan satuan derajat (0-360) • Karena semua cahaya berkumpul di tengah maka

(42)

HSV/HSB Color Space

Brightness Scale Saturation Scale HSV = Hue Saturation Value

(43)

HSV

Value Saturation

(44)

HLS Color Space

red 0° green 120° yellow Blue 240° cyan magenta V black 0.0 0.5 H S HLS = Hue Lightness Saturation

(45)

Lab

• L*a*b* (Lab) model • Luminance =100 (white) • Green to red component • Blue to yellow component • Luminance = 0 (black)

(46)

Color Depth

• Jumlah bit yang digunakan untuk

mewakili satu nilai warna

• RGB Color biasanya ditampilkan

dalam 24 bits (3 bytes atau 8 bits

tiap warna)

(47)

(48)

Kedalaman Warna

• Umumnya 3 byte (24 bit)

– Millions of colours (16,777,216) – True colour

• 16 bit (5,6,5)

– Karena mata manusia lebih sensitif terhadap cahaya hijau

– Thousands of colours (65,536) – hi colour

(49)

(50)

(51)

Indexed Colour

• >< Direct colour

• Menggunakan lookup table

• CLUT (color look up table)

• Dithering

(52)

(53)

Palette

• Memetakan warna fisik ke dalam warna logik

• Palet yang terdiri dari 256 warna lebih disukai

• Web-safe palette – 216 color • Dapat mengkonfigurasi palet sendiri – Contoh : – Munsell – Pantone

(54)

Munsell Color System

Hue: R, YR, Y, GY, G, BG, B, PB, P, RP (dibagi sepersepuluh)

Value: 0 ... 10 (dark ... pure white) Chroma: 0 ... 20 (neutral ... saturated)

Example: 5YR 8/4

(55)

(56)

(57)

Isu Buta warna

• 1 dari 12 lelaki

• Akibat sel

kerucut yang

sedikit berbeda

• Gunakan warna

terang terhadap

warna gelap

(58)

(59)

(60)

Efek warna dalam desain

• Bentuk dulu baru warna • pastikan bentuk dikenali

lebih dahulu sebelum ditambahkan warna

• Gubahkan warna yang senada untuk membuat hubungan antara produk dengan pesan yang

disampaikan

• Gunakan untuk hubungan antara produk dengan logo

(61)

• Gunakan warna untuk membuat

hierarki informasi

• Jangan gunakan drop shadows

kecuali memang diperlukan (hanya

menekankan produk/judul)

• Seimbangkan antara image dengan

teks

(62)

(63)

Mendapatkan palet warna

(64)

Apakah warna sangat

berpengaruh?

• Riset membuktikan bahwa seseorang membuat keputusan cepat tentang

sebuah benda dalam 90 detik

berdasarkan faktor penglihatan dan 62%-90%nya berdasarkan hanya pada warna

(65)

(66)

(67)

(68)

Tips

• Batasi warna palet tidak lebih dari tiga untuk mengurangi visual clutter.

• Gunakan warna yang cocok sesuai tema • Gunakan warna yang ditemukan di foto

kunci/grafik dalam halaman untuk menambakan harmoni

• Jauhi harsh oversaturated colors. • Desaturarsi warna untuk

mengaproksimasi warna yang ada di alam dan tekstil

(69)

Monochromatic

– Memakai gradasi saturasi – harmonious & peaceful.

– Membentuk keseragaman dan pengikatan

(70)

Analogous

– Memakai warna yang berhubungan tapi tidak sama

– Biru dan ungu, merah & oranye

– Ada sebagai dominan dan sebagai aksen

(71)

Contrasting

• Komplemen dan nyaman di mata • Warna lawan

• Kuning dan ungu, merah dan hijau • Warm <> cool

• Mata kesulitan memfokuskan dua warna kontras dalam satu waktu

(72)

Triadic

– Tiga warna yang berlawanan.

• Red, yellow, blue

(73)

Emosi Warna

• Merah:

– Semangat, hangat, kekuatan, sensual, bersahabat, kegembiraan, bahaya,

peringatan, kemarahan, ketidaksabaran

• Oranye

– Hangat, aman, kreativitas, lucu, menyenangkan, humor

• Kuning

– Semangat, gembira, terang, stimulasi, hangat, cerdas, optimisme, / sakit,

(74)

• Hijau

– Uang, alam, lingkungan, sihir, rahasia, lembut, damai, seimbang, ramah,

aman

• Biru

– Lembut, luas ,bijaksana, terpercaya, dapat diterima

• Violet,

Purple

,

Indigo

– Dramatik, mewah, lembut

(75)

Warm color

• Red: Warna paling hebat untuk menarik perhatian.

Melambangkan hasrat, api, cinta, nafsu. Telah dibuktikan dapat menaikkan tekanan darah & berkeringat.

Merefleksikan energi & memotivasi individu untuk melakukan tindakan. Juga melambangkan perang, kekerasan, darah dan agresi

• Pink, lebih lembut dari Red, romantis, calming &feminine. • Orange: bernergi, vibrant, hangat. Dihubungkan dengan

musim gugur, labu & halloween. Banyak menurunkan sifat red tapi lebih halus. Dapat membangkitakan selera makan & melambangkan kesehatan

• Yellow: melambangkan matahari dan kehangatan. Dapat bermakna harapan, cahaya dan energi. Di sisi lain dapat mencerminkan kelemahan, kesakitan atau pengecut

(76)

Cool Color

• Green: melambangkan kesehatan, pertumbuhan

(tanaman) dan kemakmuran (uang). Mewakili musim semi, pembaharuan & kesuburan. Juga berarti kecemburuan & tidak berpengalaman.

• Blue: warna paling menenangkan dan

dihubungkan dengan langit dan laut. Dianggap sebagai warna “aman”, melambangkan

kecerdasan, kepastian & kepercayaan. Diketahui dapat menekan selera makan & melambangkan depresi & kesedihan

• Purple: melambangkan kreatifitas, spiritual &

misterius. Deep purple dihubungkan dengan kemewahan, kekayaan, sedang Lavender dihubungkan dengan romance & nostalgia

(77)

Neutral colors

• Black: melambangkan kekuatan, elegan, kepuasan. Juga kematian (adat barat), setan, kejahatan, kemarahan &

kesedihan

• White: melambangkan kebersihan, kemurniah & spiritual,

kehidupan & perkawinan (adat Barat) tapi juga kematian (adat timur)

• Grey: Warna konservatif. Melambangkan keamanan, kedewasaan, kekokohan. Namun juga kesedihan dan kelesuan.

• Brown: warna spesial. Dapat digunakan sebagai warna

netral atau hangat. Melambangkan kredibilitas & stabil, hati, rumah dan bumi

(78)