IM 2023

MULTIMEDIA
Semester Genap 2005/2006 Fakultas Teknik Informatika Universitas Kristen Duta Wacana

ANIMATION

Animation adalah illusion of motion yang dibuat dari image statis yang
ditampilkan secara berurutan.

Pada video atau film, animasi merancu pada teknik dimana setiap frame
dalam film dibuat secara terpisah.
Frame bisa dihasilkan dari komputer, dari fotografi atau dari gambar lukisan.
Ketika frame-frame tersebut digabungkan, maka terdapat ilusi perubahan
gambar, sesuai dengan teori yang disebut dengan persistance of vision

Jenis-jenis Animasi

1. Animasi Cel
Kata cel berasal dari kata celluloid yang merupakan materi yang
digunakan untuk membuat film gambar bergerak pada tahun-
tahun awal animasi.
Sekarang material film dibuat dari asetat (acetate)
 Biasanya digambar dengan menggunakan tangan (hand-drawn
animation)
Animasi cel biasanya merupakan lembaran-lembaran yang
membentuk animasi tunggal. Masing-masing sel merupakan
bagian yang terpisah, misalnya antara obyek dengan latar
belakangnya, sehingga dapat saling bergerak mandiri.
Misalnya seorang animator akan membuat animasi orang
berjalan, maka langkah pertama dia akan menggambar latar
belakang, kemudian karakter yang akan berjalan di lembar
berikutnya, kemudian membuat lembaran yang berisi karakter
ketika kaki diangkat, dan akhirnya karakter ketika kaki
dilangkahkan.
Animasi Cel disebut juga Animasi Tradisional dimana terdapat
beberapa langkah pembuatannya:
i. Menyiapkan ide/storyboard (script)
Script/ide disiapkan berupa gambar yang berupa sketsa dan
tulisan yang diserahkan ke director animasi.
ii. Voice Recording
Mempersiapkan segala musik, soundtrack, sound efek, dan
suara karakter animasi yang dibuat.
iii. Animatics (story reel)
Biasanya dibuat setelah soundtrack selesai dibuat, sebelum
seluruh animasi selesai dikerjakan.
Berisi gambar-gambar kejadian dan storyboard yang sesuai
dengan adegan-adegan gambar.
iv. Design and Timing
Setelah animatics selesai disetujui, maka animatics akan
dikerjakan di bagian design department.
Biasanya melibatkan character designers, background
stylist, art director, color stylist, dan timing director.
v. Layout
Layout meliputi: sudut penataan kamera, lighting, dan
shading.
vi. Animation
Animasi digambar dengan pensil berwarna di banyak kertas.
Perlu diperhatikan juga detail gerakan, penyesuaian waktu,
dan penyesuaian gerakan mimik muka dan mulut.
vii.Background
Background digambar dengan menggunakan water color,
oil paint, dan crayon.
viii. Traditional ink-and-paint and camera
Setelah semua selesai digambar maka akan dilakukan
transfer gambar diatas bahan yang disebut cel dan akan
difoto dan diputar di kamera seperti dibawah ini:

ix. Digital ink and paint

Pada jaman sekarang digunakan scanner dan komputer.

This image shows how two

transparent cels, each with a
different character drawn on them,
and an opaque background are
photographed together to form the
composite image.
2. Animasi Frame
Animasi frame adalah bentuk animasi paling sederhana.
Contohnya ketika kita membuat gambar-gambar yang berbeda-
beda gerakannya pada sebuah tepian buku kemudian kita buka
buku tersebut dengan menggunakan jempol secara cepat maka
gambar akan kelihatan bergerak.
Dalam sebuah film, serangkaian frame bergerak dengan
kecepatan minimal 24 frame per detik agar tidak terjadi jitter.
3. Animasi Sprite
o Pada animasi sprite, gambar digerakkan dengan latar belakang
yang diam.
o Sprite adalah bagian dari animasi yang bergerak secara mandiri,
seperti misalnya: burung terbang, planet yang berotasi, bola
memantul, ataupun logo yang berputar.
o Dalam animasi sprite yang dapat kita edit adalah animasi dari
layar yang mengandung sprite, kita tidak dapat mengedit bagian
dalam yang ditampilkan oleh layar untuk masing-masing frame
seperti pada animasi frame.
4. Animasi Path
o Animasi path adalah animasi dari obyek yang bergerak sepanjang
garis kurva yang ditentukan sebagai lintasan.
o Misalnya dalam pembuatan animasi kereta api, persawat terbang,
burung dan lain-lain yang membutuhkan lintasan gerak tertentu.
o Pada kebanyakan animasi path dilakukan juga efek looping yang
membuat gerakan path terjadi secara terus menerus.
5. Animasi Spline
o Spline adalah representasi matematis dari kurva. Sehingga
gerakan obyek tidak hanya mengikuti garis lurus melainkan
berbentuk kurva.
 6. Animasi Vektor
o Vektor adalah garis yang memiliki ujung-pangkal, arah, dan
panjang.
o Animasi vektor mirip dengan animasi sprite, tetapi animasi sprite
menggunakan bitmap sedangkan animasi vektor menggunakan
rumus matematika untuk menggambarkan sprite-nya.
7. Animasi Character
o Animasi karakter biasanya terdapat di film kartun. Semua bagian
dalam film kartun selalu bergerak bersamaan. Software yang
biasa digunakan adalah Maya Unlimited. Contoh film kartun
yang dibuat dengan Maya Unlimited adalah Toy Story dan
Monster Inc.

Apapun jenis animasinya, yang penting adalah memberikan efek hidup

(visual efek) pada gambar atau obyek.

Visual efek dapat dibuat dengan cara:

- Motion dynamics, efek yang disebabkan perubahan posisi terhadap
waktu.
- Update dynamics, efek yang disebabkan perubahan pada suatu obyek
(bentuk, warna, struktur, dan tekstur)
- Perubahan cahaya, posisi, orientasi dan fokus kamera.

Computer Based Animation

Adalah teknik pengolahan animasi menggunakan komputer dengan tool
untuk membuat visual effect.
1. Input process
Sebelum komputer dapat dipakai dalam animasi, gambar harus
didigitalisasi untuk membentuk keyframe terdigitasi.
2. Composition Stage
 Adalah stage dimana foreground dan background dikombinasikan
untuk menghasilkan individual frame untuk animasi final.
Hal ini dapat dilakukan dengan menggunakan image-composition
techniques, yaitu dengan menempatkan low resolution frame dalam
array.
3. Inbetween Process
Pergerakan dari satu posisi ke posisi lain membutuhkan komposisi
frame dengan posisi intermediate antar key frame. Proses tersebut
dilakukan dengan menggunakan interpolasi.

Kelemahan interpolasi adalah kurang realistis. Sehingga dapat pula

dilakukan dengan menggunakan spline (menggunakan vektor).
4. Pengubahan warna
Untuk mengubah warna animasi digunakan CLUT (Color Look Up
Table) pada frame buffer. Animasi pengubahan warna dilakukan
dengan cara memanipulasi LUT (misalnya dengan mengganti warna
secara berurutan) daripada mengganti keseluruhan gambar dengan
gambar yang baru yang pasti akan memakan bandwidth lebih besar.

Bahasa Animasi
Ada 3 kategori bahasa animasi:
1. Linier-list Notations
Semua event dalam animasi ditulis dengan sebuah awal dan akhir
nomor frame dan sebuah aksi yang akan dilakukan pada suatu
koordinat tertentu.
 42, 53, B, ROTATE PALM,1,30
Artinya: antara frame 42,53, rotate obyek yang bernama PALM pada
koordinat X = 1 dengan sudut 30 derajat dengan menggunakan tabel
informasi dari tabel B.
Contoh: program Scefo (SCEne FOrmat).
2. General Purpose Language
Dilakukan dengan menempelkan animasi pada bahasa pemrograman
biasa. Nilai dari variabel pada bahasa pemrograman tersebut dijadikan
sebagai parameter untuk prosedur, untuk membuat animasi.
Contoh: ASAS adalah bahasa yang dibuat dengan menggunakan LISP
3. Graphical Language
Graphical Language adalah bahasa visual yang mampu
memvisualisasikan aksi dari perintah-perintah untuk membangun
animasi.
Contoh: GENESYS, DIAL, dan S-Dynamics System.

Metode untuk mengontrol animasi

1. Full Explicit Control
Animator mengatur seluruh kontrol animasi dengan segala perintah-
perintah yang akan dilakukan dalam animasi, bahkan untuk data-data
seperti interpolasi dan rotasi dilakukan secara eksplisit atau
berdasarkan inputan dari mouse, keyboard, atau joystick.
2. Procedural Control
Berdasarkan komunikasi antar obyek untuk mendapatkan property nya.
Control yang terjadi adalah control antara satu obyek dengan obyek
yang lain. Misalnya: suatu obyek bola tidak boleh melewati obyek
dinding.
3. Constraint-based System
Pengontrolan terjadi karena pengaruh obyek lain, dimana obyek
tersebut berinterakasi.
 4. Tracking Live Action
Pengontrolan terjadi berdasarkan kenyataan yang ada sesuai dengan
dunia nyata.
5. Kinematics and Dynamics
Kinematik berdasarkan posisi dan kecepatan dari point.

Transmisi Animasi
1. Symbolic Representation
Obyek animasi (misal bola) direpresentasikan bersamaan dengan
perintah operasinya (bola digelindingkan), kemudian di sisi penerima
baru ditampilkan
Ukuran file lebih kecil, tetapi waktu untuk mendisplay akan lebih lama
karena harus ada scan-converting telebih dahulu di sisi penerima.
2. Pixmap Representation
Pixmap ditransmisikan semua dan ditampilkan di sisi penerima.
Waktu transmisi lebih lama, namun waktu mendisplay lebih cepat

Anime
- Animasi buatan Jepang. Anime biasanya menggunakan tokoh-tokoh
karakter dan background yang digambar menggunakan tangan dan
sedikit bantuan komputer.
- Cerita anime biasanya bermacam-macam jenis (adventure, science
fiction, children, romance, medieval fantasy, erotica/hentai, horror,
action, dan drama), memiliki banyak tokoh cerita, dan ada yang
dibukukan dalam bentuk komik (atau disebut manga) dan disiarkan di
televisi dan video, bahkan ada yang dibuat game-nya.
- Genre anime:
o Bish jo = 'beautiful girl', digunakan untuk mendeskripsikan anime
yang menceritakan tentang karakter gadis cantik yang gagah.
Contoh: Magic Knight Rayearth
 o Bish nen = 'beautiful boy', digunakan untuk mendeskripsikan
anime yang menceritakan tentang pemuda tampan dan elegan.
Contoh: Fushigi Yugi, Kindaichi.
o Ecchi = 'indecent sexuality'. Seperti: humor seks remaja.
Contohnya: Love Hina.
o Hentai = 'abnormal', 'perverted', digunakan untuk meracu pada
pornografi. Contoh: Golden Boy
o Josei = 'young woman', Anime yang bercerita tentang wanita
muda. Jarang ada, contoh dorama (drama) adalah Oshin, Great
Teacher Naomi.
o Kodomo = 'child', anime yang ditujukan untuk anak kecil.
Contohnya: Doraemon.
o Mecha: anime yang menceritakan tentang robot raksasa.
Contoh: Mobile Suit Gundam.
o Mo: anime tentang karakter yang sangat gagah atau cute,
Contohnya: Naruto.
o Seinen: anime yang ditargetkan untuk pemuda atau pria dewasa.
Contohnya: Oh My Goddess!, Kungfu Boy, Kenji.
o Sentai/Super Sentai = "fighting team" yang meracu pada team
superhero, Contoh: harlem beat, shoot!, Mini 4WD.
o Sh jo: = 'young lady' atau 'little girl', Contoh: Fruits Basket.
o Mah Sh jo: = 'Magical Girl', Contohnya: Sailor Moon.
o Sh nen: anime untuk anak kecil pria, contoh: Dragon Ball Z.

Flash dan Animasi Web

Animasi dapat ditambahkan ke dalam halaman web dalam bentuk

animasi GIF atau video embedded. Format yang paling populer untuk
animasi web adalah SHOCKWAVE FLASH (SWF), biasanya di-generate
menggunakan Macromedia Flash, yang berupa animasi vektor.
 Animasi SWF memerlukan bandwidth yang lebih rendah dibandingkan
video dan format bitmap. Harga yang harus dibayar dengan bandwidth yang
lebih rendah ini adalah animasi vekor tidak sepenuhnya didukung / dapat
ditampilkan dibandingkan dengan bitmap (perlu plug in khusus)

Flash lebih dari sekedar program animasi. Flash mendukung scripting

language, yang disebut Action Script, sehingga dimungkingkan untuk
membuat animasi yang interaktif dan membuat aplikasi web dengan user-
interface berupa Flash.

Timeline dan Stage

Animasi yang dibuat di Flash diorganisasikan dengan timeline

(representasi grafik yang terdiri dari kumpulan frame). Animasi dapat dibuat
pada single frame pada suatu waktu, dengan menambahkan key frames
pada timeline secara sekuensial.

Stage adalah sub-window di mana frame dibuat dengan

menggambarkan objek. Objek dapat dibuat dengan menggunakan drawing-
tool (hampir sama dengan Illustrator dan Corel), import dari aplikasi lain
(BMP, JPG, PNG, fasilitas auto-trace), animasi text (outline font).

Layer dapat dipergunakan untuk mengorganisasikan elemen frame

(layer background, layer tanaman, layer awan, layer)

Flash interface berisi vector drawing tool, host of palletes (colour mixing,
alignment, applying transformations, setting typographics options, .)

Symbol dan Tweening

 Objek dapat disimpan pada library dalam bentuk khusus, yang
dinamakan symbol, sehingga dapat dipergunakan ulang. Beberapa instance
symbol dapat ditempatkan pada stage. Symbol dapat ditransformasi (ukuran,
orientasi).
Tween motion dapat dibuat dengan beberapa cara. Cara termudah???
Hasil tweening dapat dilihat pada timeline berupa tanda panah pada awal dan
akhir keyframe yang dipilih.
Motion tweening? Gerakan gambar ditentukan terlebih dahulu dengan
membuat motion path.
Shape tweening? Dikenal dengan nama morphing. Perubahan bentuk
suatu objek menjadi bentuk baru.
Tiga macam symbol di dalam Flash :
1. Graphic symbol. Simply reusable vector objects. Dipergunakan untuk
motion tweening.
2. Button symbol. Dipergunakan untuk membuat bagian interaktif.
3. Movie clip symbol. Animasi yang dapat ditambahkan ke dalam movie
utama.

Animasi 3 Dimensi
Animasi 3D mudah untuk di deskripsikan, tapi lebih sulit untuk
dikerjakan. Properties 3D model didefinisikan dengan angka-angka. Dengan
merubah angka bisa merubah posisi objek, rotasi, karakteristik permukaan,
dan bahkan bentuk.
Faktor yang membuat animasi 3D lebih sulit :
Harus memvisualisasikan bentuk 3 dimensi.
Kemampuan processing untuk proses render objek 3D
Perlu cukup dana, kesabaran dan latihan
 Pengantar Aplikasi Desain
Grafis
PENGANTAR APLIKASI DESAIN GRAFIS
(6 jam)

Tutor :
Prasetyo Wibowo Yunanto

Standar Kompetensi :

Menggunakan paket-paket program desain grafis.

N Kompetensi Indikator Materi

o Dasar Pokok
Aplikasi grafis
1 Mengidentifik Mengidentifikasi perbedaan
asi program grafis berbasis vektor dan
membuat berbasis bitmap
grafis Menggunakan program
aplikasi grafis berbasis vektor
dua dimensi dan tiga dimensi
Menggunakan program
aplikasi grafis berbasis bitmap
dua dimensi dan tiga dimensi
Membuat desain gambar

Lab. Teknologi Informasi, Jurusan Teknik Elektro, VI-1

FT UNJ
 PENGENALAN PROGRAM APLIKASI DESAIN GRAFIS

MENGENAL WARNA

Warna dan Desain

Warna adalah elemen pokok di dalam desain. Apalagi di dalam
desain grafis, warna adalah bagian esensial karena dengan
menggunakan warna, sebuah desain bisa memunculkan makna yang
ingin disampaikannya.
Karena desain grafis adalah desain visual, yaitu desain yang dilihat
dengan mata, selain juga dirasa dengan hati, maka apa yang
ditangkap oleh mata itulah hal pertama yang akan diolah untuk
kemudian dicerna dan dipahami oleh khalayak. Apa yang bisa dilihat
oleh mata sangat ditentukan oleh warna-warna apa saja yang
ditampilkan dalam desain tersebut.

Mode Warna
Adobe Photoshop adalah program aplikasi image editor yang
menggunakan mode warna untuk menampilkan warna-warna penyusun
suatu image.
Mode warna adalah metode yang digunakan suatu program untuk
menampilkan suatu kode warna secara numerik. Karena warna yang
ada di dunia sangat banyak, sedangkan komputer sebagai suatu alat
mempunyai keterbatasan kemampuan, maka dibuatlah standarisasi
mode warna dan cara tampilannya. Mode warna inilah yang
digunakan dalam Adobe Photoshop.
Keunggulan Adobe Photoshop adalah mendukung penggunaan mode-
mode warna yang kompatibel untuk kepentingan desktop publishing
(tampilan di komputer) dan printing (percetakan).
Mode warna yang anda gunakan dalam sebuah image sangat
mempengaruhi jumlah channel yang digunakan pada image tersebut
dan ukuran filenya saat disimpan.

Model-model warna dalam Photoshop

Warna merupakan unsur utama dalam sebuah image yang menentukan
keindahan gambar. Warna dan pewarnaan dalam Photoshop dikenal
dengan istilah mode dan model warna. Model-model warna yang
digunakan dalam Photoshop untuk kepentingan tampilan (display) di
monitor atau pada proses pencetakan adalah sebagai berikut.
1. RGB (Red, Green,
Blue) Model
RGB memiliki tiga warna dasar, yakni merah, hijau, dan biru.
Untuk mendapatkan warna lain, dapat dilakukan dengan proses
pencampuran warna dasar. Oleh karena itu RGB disebut juga
Additive Color. Sebagai contoh, untuk mendapatkan warna putih
harus dilakukan proses pencampuran warna merah, hijau, dan biru.
Mode
Dalam pengaturan warna RGB digunakan skala 0 (terendah) sampai
255 (tertinggi). Untuk mendapatkan warna yang sesuai dengan
keinginan, harus mencampurkan warna yang sesuai dengan
keinginan, harus mencampurkan
 warna-warna dasar dengan komposisi yang benar. Jika masing-
masing warna RGB diset pada nilai 255, maka warna yang akan
didapat adalah putih. Jika masing-masing warna RGB diset 0, maka
didapat warna hitam.
2. CMYK (Cyan, Magenta, Yellow,
Black) Model
Pemodelan warna CMYK didasarkan pada tknik pencetakan pada
kertas yang dikenal dengan Separation Printing, yakni pada
kualitas penyerapan cahaya dari tinta yang dicetak pada kertas.
Misalkan, warna putih akan menyebabkan tinta menjadi tembus
pandang.
Mode
Jika pada RGB mode pewarnaan menggunakan skala 0-255, CMYK
menggunakan prosentase. Warna putih diprosentasekan oleh nilai
0%, sedangkan warna hitam oleh nilai 100%.
3. Bitmap Mode
Mode ini menggunakan satu dari dua nilai warna yaitu hitam dan
putih, untuk merepresentasikan pixel ke dalam image. Oleh sebab
itu, mode ini disebut juga Bitmapped 1 bit.
4. Grayscale Mode
Mode ini menggunakan lebih dari 256 bayangan abu-abu. Setiap
pixel dalam sebuah image dengan mode grayscale mempunyai nilai
kecerahan (brightness) dengan range 0 (hitam) 255 (putih). Nilai
grayscale juga dapat menggunakan prosentase (%). Nilai 0% untuk
warna putih dan 100% untuk warna hitam.
5. Duotone Mode
Mode ini menggunakan 256 warna pada saat dikonversi menjadi
indeks warna. Photoshop akan membentuk clut (Color Lookup Table)
yang menyimpan dan memberi indeks setiap warna dalam sebuah
image. Apabila ada sebuah warna dalam image aslinya tidak
terdapat pada table, program akan memilih warna terdekat atau
mensimulasikan warna dengan menggunakan warna yang tersedia
pada table.
6. Multichannel Mode
Mode ini menggunakan 256 level dari abu-abu pada tiap
channel. Image dengan mode ini sangat berguna pada
pencetakan khusus, misalnya mengkonversi duotone untuk
pencetakan dalam format scitex CT.

Image Bitmap dan Vektor

Secara garis besar, desain grafis terbagi menjadi dua jenis, yaitu grafis
bitmap dan grafis vector. Bitmap dan vector adalah dua jenis
terminologi dasar yang menjelaskan mengenai bagaimana sebuah
image ditampilkan oleh komputer dan bagaimana image tersebut akan
ditampilkan saat dicetak.
Pemahaman akan karakteristik masing-masing tipe grafis akan akan
membantu anda menentukan model mana yang tepat digunakan,
kapan harus digunakan, bagaimana menggunakannya, dan apa yang
akan diperoleh dengan menggunakan tipe grafis bersangkutan.
1. Image Bitmap
Bitmap, atau secara teknis disebut Raster, adalah sebuah image
yang tersusun dari kumpulan titik-titik warna dengan jumlah
tertentu yang tersusun secara
 sistematis sehingga membentuk suatu objek gambar. Singkatnya,
image betmap seperti mosaik yang tersusun dari elemen kecil-
kecil yang disusun guna membentuk gambar yang lebih besar. Titik-
titik penyusun image Bitmap disebut pixel.
Karena image bitmap tersusun dari pixel dengan jumlah tertentu
atau disebut sebagai resolusi, maka image bitmap akan terlihat
pecah atau kabur jika diperbesar melebihi kemampuan
maksimalnya. Hal ini disebut sebagai resolution dipendent. Namun
demikian, image bitmap banyak digunakan untuk gambar-gambar
fotografis natural seperti gambar manusia, pemandangan,
tanaman, dan sebagainya yang membutuhkan detail warna gradasi.
Gambar di bawah menunjukkan contoh image bitmap yang pecah
saat diperbesar.

size 100% sise 997%

Gb.1. Image Bitmap

2. Image Vector
Image Vector disusun tidak dari pixel-pixel, namun objek garis
dan kurva dengan perhitungan matematis mengenai tata letak,
urutan luas, dan sebagainya. Oleh karena itu, image vector tidak
akan pecah saat diperbesar karena informasi penyusunnya akan
senantiasa di-update menyesuaikan dengan perbesaran yang
diinginkan.
Kemampuan untuk tidak pecah ini disebut resolution independent.
Oleh karena itu, Image Vector banyak digunakan untuk membuat
objek-objek yang solid dan bisa diubah-ubah ukurannya untuk
berbagai keperluan, seperti logo, gambar kantun, dan sebagainya.
Kelemahan Image Vector adalah kurang tepat untuk menangani
gambar seperti beragam warna detail dan gradasi, seperti gambar
manusia, pemandangan dan sebagainya. Gambar di bawah
menunjukkan contoh perbesaran Image Vector tanpa menyebabkan
pecahnya gambar.
 size 66,7% sise 448%
Gb.2. Image Vector

Adobe Photoshop bisa menangani kedua jenis image tersebut,

baik image bitmap maupun vector. Akan tetapi yang menjadi
pertanyaan sekarang, kapan kita harus menggunakan image
bitmap dan kapan kita harus menggunakan image vector.
Sesuai dengan deskripsi singkat mengenai keduanya, berikut adalah
beberapa petunjuk kapan sebaiknya menggunakan kedua jenis
image ini.
Gunakan image bitmap untuk foto atau objek yang rumit yang
membutuhkan banyak warna dan perubahan antar warna yang
kompleks.
Gunakan image vector untuk objek berbentuk geometris dan
berwarna solid, seperti logo.
Perhatikan resolusi image bitmap saat kita akan melakukan
perbesaran.
Pastikan image tersebut memiliki resolusi yang cukup tinggi.
Perhatikan ukuran file yang dihasilkan karena semakin besar
resolusi, maka semakin besar pula ukuran file-nya saat akan
disimpan. Pastikan kita mengetahui untuk kepentingan apa image
itu akan dibuat.

LEMBAR KERJA PHOTOSHOP

Seperti program aplikasi lainnya yang beroperasi pada sistem operasi

Windows, lembar kerja photoshop tidaklah tampak asing bagi para
pengguna Windows. Pada modul ini akan dibahas penggunaan aplikasi
Photoshop 7.0 sebagai program aplikasi image editing. Sebelum
memulai penggunaan aplikasi Photoshop, hendaknya terlebih dahulu
kita kenal semua interface yang ada pada program aplikasi
Photoshop. Interface (tampilan antarmuka) adalah semua fitur dan
fasilitas/tool yang biasa dilihat dan digunakan pada suatu program.
Secara garis besar, tampilan antarmuka Photoshop dapat dibagi
menjadi 6 (enam) bagian, yaitu : A. Menu Bar; B. Option Bar; C.
Toolbox; D. Canvas; E. Pallete Well; dan F. Pallete.
 E

A
B

Gb.3. Interface Photoshop 7.0

Komponen Interface pada lembar kerja Photoshop

1. Title Bar
Title Bar berfungsi untuk menampilkan judul file aplikasi yang sedang
aktif yang dibuka pada lembar Kanvas.
nama file yang aktif restor close
e windows
minimize

Gb.4. TampilanTitle Bar

Gambar di atas menunjukkan bahwa file yang sedang aktif adalah

Gambar Latihan-1.psd. Selain menampilkan nama file yang aktif,
Title Bar juga dilengkapi dengan Control Box yang berfungsi untuk
menutup jendela Windows, minimize, maximize, dan restore dari
file pada aplikasi Photoshop yang sedang aktif.
2. Menu Bar
Disebut juga menu Pull Down dimana tampilan menu tersebut
adalah sebagai berikut.

Gb.5. Tampilan Menu Bar

Cara mengaktifkan menu tersebut adalah dengan menekan tombol

kiri pada mouse (left click) atau bila menggunakan keyboard
dengan cara short key Alt+huruf yang digaris bawah.
3. Option Bar
Merupakan pilihan tombol yang ditampilkan untuk melengkapi
pilihan pada Toolbox. Tampilan Toolbar akan berubah secara
dinamis seiring dengan tool yang digunakan. Cara mengaktifkan
atau menghilangkan Option Bar ini adalah dengan click menu
Windows Option, maka Option Bar akan berubah-ubah sesuai
kebutuhan dari Toolbox yang digunakan. Berikut ini contoh Option
Bar untuk Clone Stamp Tool.
 Gb.6. Tampilan Option Bar

4. Toolbox

Bagian terpenting dalam proses

desain adalah penggunaan
Toolbox. Toolbox merupakan Tool Selection
kumpulan icon yang berfungsi
untuk melakukan editing pada Tool Painting and Retouching
gambar. Biasanya Toolbox berada
di sebelah kiri layar. Bagian
Toolbox yang memiliki tanda
panah di bagian Tool Drawing, Shape and Patch
kanan bawah menunjukkan tombol
tersebut masih menyimpan tombol lain Tool Display and Zooming

yang tersembunyi.
Tool Background and Foreground
Untuk mengaktifkan
atau menyembunyikan Tool Mask editing
Toolbox dapat dilakukan dengan Tool Display
cara click menu Windows
Tool jump to Image Ready
Tools.
Tanda cek menandakan Toolbox
dalam keadaan aktif .
Untuk menyembunyikannya, ulangi
perintah di atas dengan menghilangkan

tanda cek. Gb.7. Tampilan Tombol pada

Berikut ini adalah nama-nama Toolbox
tombol yang terdapat pada
Toolbox.
5. Pallet Pallete berfungsi
e untuk monitoring,
mengatur, dan memperbaiki
gambar. Untuk menampilkan
suatu Pallete, dapat
menampilkan Toolbox dilakukan dengan cara click
menampilkan Options Bar menu Windows nama
Pallete yang akan
ditampilkan.

Untuk menampilkan dan

menyembunyikan beberapa
atau seluruh Pallete dapat
dilakukan dengan beberapa
cara, antara lain adalah
sebagai berikut :
nama / jenis pallete a Menampilkan d
. menyembunyi a
selur
kan uh
Pallete,
toolbox Bar ,
mene
tombol Tab pada keyboard.
* Tanda cek () berarti
mengaktifkan pilihan b. Menampilkan
dan
menyembunyikan
menampilkan Status Bar
Gb.9. Menampilkan seluruh Pallete yang telah
Pallete tampil dengan menekan
tombol Shift+Tab pada
keyboard.

Berikut ini adalah jenis-jenis Pallete menurut fungsinya.

1. Navigator Pallete
Pallete ini berfungsi untuk mengatur besar
kecilnya tampilan ukuran gambardalam
lembar kerja (canvas) melalui
sebuah salinan miniatur gambar. Bagian
tengan Pallete Navigator disebut Thumbnail.
Untuk melakukan perbasaran gambar,
click icon Zoom In dan untuk melakukan
pengecilan dengan
Gb.10. Navigator
cara click icon Zoom Out.
Pallete

2. Info Pallete
Pallete ini berfungsi untuk memberikan
informasi bagian image yang ditunjuk oleh
pointer tentang persentase campuran
warna, titik koordinat, dan posisi pointer
mouse dalam kanvas.

Gb.11. Info Pallete

3. Color Pallete
Pallete ini berfungsi untuk mengatur
presentase campuran setiap komponen
warna pada foreground dn background,
antara lain mode RGB dengan cara
menggeser slider untuk menentukan setiap
bagian dari mode pewarnaan atau dengan Gb.12. Color Pallete
meng-click Set Foreground Color.

Setelah meng-click Set foreground Color akan muncul kotak

dialog sebagai berikut.

Gb.13. Set Foreground Color

4. Swatches Pallete
Pallete ini berfungsi untuk mengatur warna
dengan menggunakan warna yang
disediakan.

Gb.14. Swatches Pallete

5. Styles Pallete
Pallete ini berfungsi untuk membuat suatu
objek dengan sistem pewarnaan dan efek
yang telah disedikan pallete.

Gb.15. Styles Pallete

6. History Pallete
 Pallete ini berfungsi sebagai pengingat di
mana setiap perintah yang telah dilakukan
akan terekam dan dipaparkan pada Pallete
ini.

Gb.16. History
Pallete

7. Actions Pallete
Pallete ini berfungsi untuk menjalankan
perintah yang akan diterapkan pada gambar
yang akan diproses lebih lanjut. Untuk
melakukan action yang telah ada, pilih nama
action yang telah ada. Selanjutnya click
tombol play selection. Gb.17. Actions
Pallete

8. Layer Pallete
Pallete ini berguna untuk mengatur layer
(lapisan gambar) sehingga memudahkan
dalam pengaturan urutan lapisan gambar
tanpa mempengaruhi bagian lapisan lainnya.
Pada Pallete ini, kita dapat membuat,
menghapus, menggandakan, dan mengatur
layer. Dalam keadaan default, layer yang baru Gb.18. Layer Pallete
dibuat akan diletakkan pada bagian yang
paling atas.

9. Channel Pallete
Pallete ini berfungsi untuk merekam
komponen warna yang digunakan pada
gambar. Bagian di atasnya merupakan
perpaduan atau model warna dari warna-
warna yang berada pada bagian bawahnya.
Untuk menampilkan atau mematikan salah
satu atau seluruh komponen gambar, gunakan
tombol Indicates Layer Visibility . Gb.19. Channel
Pallete

10. Paths Pallete

Pallete ini berfungsi untuk menyimpan
bagian gambar yang dipotong sehingga
sewaktu-waktu bagian potongan gambar
tersebut dapat ditampilkan kembali. Untuk
memotong gambar, dapat digunakan tool
Magic Wand, Lasso, atau Marquee.
Gb.20. Paths Pallete
Memulai Desain Grafis dengan Photoshop
Setelah mengetahui dan mengenal lembar kerja Photoshop,
barulah dapat dilakukan langkah mendesain gambar dari konsep
gambar yang telah dipikirkan sebelumnya atau dengan melakukan
coretan-coretan pada sebuah kertas untuk memberikan gambaran
langkah apa saja yang harus dilakukan dalam mendesain gambar
nantinya.

1. Pembuatan Dokumen Baru

Untuk membuat dokumen baru, langkah yang harus dilakukan
adalah dengan cara meng-click menu File New (Ctrl+N)

Gb.21. Create new Photoshop document

Setelah itu akan muncul kotak dialog New.

Gb.22. Kotak dialog New

Setelah selesai mengisi kotak dialog New, click OK.

 Hal yang perlu diperhatikan dalam pembuatan dokumen baru
adalah sebagai berikut :
a. Ukuran gambar dalam memori
Semakin banyak pixel berarti semakin besar pula ukuran file.
b. Dimensi Height menunjukkan dimensi gambar pada
Absolut pixel.
Nilai Width
dan

Aktifkan Resample Image untuk mengubah nilai.

c. Width dan Height
Ketikkan tinggi dan lebar pada gambar ketika akan dicetak.

2. Penyimpanan (save) file

Dalam mendesain suatu gambar sebaiknya dilakukan dengan
teliti hingga mencapai hasil yang maksimal sesuai dengan yang
diharapkan. Oleh karena itu, umumnya mendesain/editing gambar
membutuhkan waktu yang lama. Dengan demikian, kita perlu
melakukan penyimpanan (save) saat ingin menunda pekerjaan
kita, sehingga dapat dilanjutkan kembali proses desain/editing
pada lain waktu. Lokasi penyimpanan sebaiknya di dalam
harddisk karena kapsitas file relatif besar.
Langkah-langkah penyimpanan pada waktu pertama kali file
disimpan sejak pembuatan (open new document) dilakukan
dengan meng-click menu file
Save atau dengan menggunakan short key Ctrl+S
sehingga akan tampil kotak dialog sebagai berikut

Gb.23. Kotak dialog Save As

 Proses ini akan sama dengan ketika kita menggunakan mode Save
As yaitu dengan meng-click menu file Save As atau dengan
menggunakan short key Shft+Ctrl+S dalam menyimpan file.

Setelah muncul kotak dialog Save As, selanjutnya lakukanlah :

pilih folder tempat file akan disimpan
Ketik nama file pada kotak File name
Tentukan format file. (pada keadaan default, format file
Photoshop adalah *.PSD ; *.PDD).
Aktifkan pilihan pada save Options jika ingin mengaktifkan
pilihan berikut :
- Alpha Channel, untuk menyimpan informasi channel yang
menyertai gambar.
- Layer, untuk menjaga keberadaan layer pada gambar.
- Annotations, untuk menyimpan catatan pada gambar.
- Spot Color, untuk menyimpan spot channel pada gambar.
- Use Lower Case Extension, untuk membuat tulisan
ekstensi yang menggunakan huruf kecil.
Click Save untuk mengakhiri penyimpanan.

3. Pembukaan Dokumen Photoshop

Langkah-langkah yang dilakukan adalah click menu File
Open atau dengan menggunakan short key Ctrl+O,
kemudian akan muncul kotak dialog sebagai berikut :

Gb.24. Kotak dialog Open

Selanjutnya pilih directori/folder tempat file yang akan dibuka

pada kotak
Look in, kemudian pilih nama file, dan akhiri dengan click Open.
4. Penutupan dokumen Photoshop
Penutupan dokumen Photoshop dapat dilakukan dalam dua
cara yaitu menutup dokumen file aktif pada Kanvas dengan cara
click menu File Close atau dengan menggunakan short key
Ctrl+W pada keyboard, dan menutup file sekaligus keluar dari
aplikasi Photoshop sengan cara click menu File Exit atau
dengan menggunakan short key Ctrl+Q pada keyboard.

Bekerja dengan Photoshop

Kita dapat memulai pekerjaan desain grafis dan picture editing
menggunakan Photoshop dengan memanfaatkan bermacam-macam
tool yang telah disediakan oleh Photoshop.

1. Drawing
Pada program aplikasi berbasis bitmap, istilah drawing kurang
popular dibandingkan pada aplikasi berbasis vector. Namun pada
Adobe Photoshop telah disediakan tool-tool drawing yang
memiliki kemampuan untuk menangani masalah aplikasi vector.
Drawing merupakan proses pembuatan gambar (image) sebagai
hasil kreasi tangan dengan menggunakan tool pen dan tool
shape.

Gb.25. Tool Pen Gb.26. Tool Shape

2. Pembuatan Layer
Layer merupakan komponen yang sangat penting dalam
pengeditan gambar, terutama jika dalam satu kanvas terdapat
banyak layer. Layer diibaratkan sebuah plastik transparan
sebagai tempat objek diletakkan sehingga layer dapat
memberikan batasan antar objek yang jelas. Layer juga bisa
saling mempengaruhi dan dapat disatukan dalam satu set layer.
Cara-cara membuat layer baru dengan menggunakan tool
shape adalah dengan meng-click Tool Shape Shape Layer
pada Option Bar, click
 Set Shape to Create pada Option Bar untuk memilih bentuk,
kemudian
Drag pada area Canvas.

Set Shape to Create

Custom Shape
pilih, Drag to Canvas

Gb.27. Set Shape to Create

3. Bekerja dengan Teks

Teks merupakan media penyimpanan informasi paling efektif
dan paling penting dalan desain gambar. Dengan Photoshop, kita
dapat membuat teks secara horizontal, vertical, sembarang
atau dapat diletakkan di dalam gambar. Teks dapat berupa
huruf, angka, karakter, atau simbol lainnya. Teks tersusun dari
pixel yang mempunyai resolusi sama dengan file gambar tempat
teks berada. Secara otomatis teks atau tipe akan membentuk
layer sendiri.
Pada Photoshop teks terbagi menjadi 2 tipe, yaitu tipe point
dan tipe paragraph. Tipe point biasa digunakan untuk
membuat tulisan berupa banner, judul, dan tulisan indah
lainnya, sedangkan tipe paragraph digunakan untuk membuat
tulisan menjadi paragraph. Kedua tipe teks ini dapat dibuat
dengan menggunakan tool type yang terdapat pada Toolbox.

A. Pembuatan Text dengan menggunakan Type Tool

Pembuatan tulisan atau teks dapat dilakukan dengan
menggunakan fasilitas tool type pada Toolbox.
Gb.28. Type Tool
 Untuk mempercantik bentuk teks, selain dengan
menggunakan Option Bar yang tersedia secara otomatis,
tersedia juga pallete paragraph dan caracter. Untuk
mengaktifkan Pallete paragraph dan caracter, dapat
dilakukan dengan cara click menu Windows Character
atau dapat dilakukan dengan menggunakan icon toggle the
character and paragraph pellete .

Untuk lebih jelasnya dapat diperhatikan

gambar di samping. Dengan pallete tersebut,
kita dapat melakukan berbagai proses editing
text, seperti menentukan font style (jenis
huruf), font size (ukuran huruf), font color
(warna huruf), change case (pengaturan
huruf kecil dan huruf besar), identasi,
leading, kerning, tracking, skala vertical dan
horizontal.
Gb.29. Character and Paragraph
Pallete

B. Text Warping
Salah satu teknik untuk memperindah teks adalah dengan text
warping. Bentuk variasi-variasi teks yang telah disediakan
oleh photoshop akan memperindah dalam mendesain sebuah
text, seperti dalam pembuatan web, brosur, atau spanduk.
Warp text dapat digunakan dengan meng-click icon warp text
pada sebuah layer teks yang diinginkan, sehingga akan
muncul kotak dialog seperti di bawah ini

Warp style
Mode tulisan vertical / horizontal

Gb.30. Kotak dialog Warp Text

Berikut contoh teks yang diperindah dengan menggunakan

bantuan fasilitas Pallete paragraph dan character, yakni
leading, tracking, dan text warping.
 Gb.31. Pengolahan teks dengan teknik leading, tracking, dan
warping

C. Masked Text
Masked text merupakan tool untuk melakukan seleksi teks.
Masked type
dapat diubah, digeser, diberi efek, dan proses lainnya.
D. Editing Type
Dalam melakukan proses pengeditan sebuah teks, ada
beberapa proses editing yang harus diketahui. Proses-proses
editing tersebut meliputi
1. Rasterize type
Dalam keadaan point type,
pemberian efek seperti filter effect
tidak dapat dilakukan sebelum
dilakukan rasterize. Jika kita
melakukan pemberian efek, akan
muncul kotak dialog yang Gb.32. Kotak dialog
menanyakan apakah pada teks Rasterize
akan dilakukan proses rasterize.
Dengan melakukan rasterize,
layer type akan berubah menjadi layer biasa agar dapat
dilakukan proses editing. Perhatikan pada Pallete layers
berikut ini.

Layer setelah
proses rasterize

A. Sebelum proses rasterize B. Setelah proses rasterize

Gb.33. Tampilan layer text setelah dan sebelum proses

rasterize

2. Anti aliasing
Teknik pengeditan ini berfungsi untuk menghaluskan
tepian teks sehingga akan tampak seolah-olah teks
menyatu dengan warna layar (background). Dalam
keadaan default, teks diterapkan pada anti aliasing sharp.
Anti Aliasing dapat dilakukan dengan menggunakan toggle
the character and paragraph pellete atau
 dapat juga menggunakan option anti aliasing yang terdapat
pada
Option Bar untuk tool type.

Gb.34. Set the Anti-Aliasing method

A. Tanpa Anti-Aliasing (none) B. Menggunakan Anti-Aliasing

Smooth
Gb.35. Tampilan editing text sebelum dan sesudah
menggunakan
Anti-Aliasing

4. Memanfaatkan Filter Effect

Untuk meningkatkan kualitas seni sebuah text sehingga
mempunyai nilai komersial yang cukup tinggi, Adobe Photoshop
menyediakan fasilitas filter effect yang akan memoles teks atau
gambar yang kita buat. Filter effect dapat diaktifkan melalui
Menu Bar filter yang dikelompokkan dalam beberapa sub menu,
yaitu : Artistic filter, Blur Filter, Brush Strokes Filter, Distort
Filter, Noise Filter, Pixelate Filter, Render Filter, Sharpen Filter,
Sketch Filter, Stylize Filter, dan Texture Filter.
Dalam pembahasan kali ini akan dibahas salah satu filter effect
dua dimensi, yakni Motion Blur yang terdapat pada submenu
Blur Filter, dan salah satu filter effect tiga dimensi (3D), yakni
Lens Flare yang terdapat pada submenu Render. Untuk filter
effect yang lainnya, dapat dipelajari sendiri karena secara garis
besar adalah sama.

Untuk membuat filter effect Motion Blur, pertama pilih layer

yang akan diberi effect Motion Blur, selajutnya click menu Filter
Blur Motion Blur, sehingga akan muncul kotak dialog
sebagai berikut.
 Gb.36. Kotak dialog Motion Blur

Selanjutnya atur propertis pada kotak dialog Motion Blur,

kemudian click OK. Hasil editing dengan Filter Motion Blur akan
terlihat seperti gambar di bawah ini.

Gb.37. Hasil editing Teks dengan menggunakan Filter Motion

Blur

Untuk membuat filter effect Lens Flare, pertama pilih layer yang
akan diberi efek Lens Flare, selajutnya click menu Filter
Render Lens Flare, sehingga akan muncul kotak dialog
sebagai berikut.

Gb.38. Kotak dialog Lens Flare

Selanjutnya atur propertis pada kotak dialog Lens Flare, kemudian

click OK. Hasil editing dengan Filter Lens Flare akan terlihat
seperti gambar di bawah ini.
 A. Sebelum proses editing B. Menggunakan Filter Lens
Flare

Gb.39. Hasil editing image dengan menggunakan Filter Lens

Flare

5. Menggabungkan Dua Layer

Saat akan mengedit objek-objek di dalam layer yang berbeda-

beda, kadang kita merasa perlu untuk menggabungkan layer-
layer tersebut. Penggabungan layer-layer dapat dilakukan
dengan dua metode yaitu link dan merge.

Link menggabungkan beberapa layer menjadi

satu kesatuan dengan objek yang berdiri sendiri-
sendiri. Kita dapat memindahkan, mengkopi, dan
mengatur alignment-nya secara bersamaan.
Proses link layer dilakukan dengan cara click
bagian di antara icon visibility dengan thumbnail
Gb.40. Tanda Link
layer yang akan kita link sampai muncul tanda
Link . Untuk me-link
layer-layer yang kita kehendaki. Layer yang kita link akan ter-
Link dengan layer yang ada di atasnya.

Cara kedua adalah dengan Merge layer. Merge menggabungkan

beberapa layer menjadi satu layer. Dengan proses merge kita
tidak dapat mengedit layer-layer secara terpisah karena layer
tersebut tergabung dalam satu layer.
Terdapat beberapa pilihan fasilitas merge yang bisa digunakan
sesuai kebutuhan, yaitu :
Merge Down
Fasilitas Merge Down ini menggabungkan
layer yang sedang aktif dengan layer yang
berada tepat di bawahnya. Penggabungan
dengan cara ini akan menghasilkan satu
layer dengan nama layer di bagian bawah
layer aktif. Perintah Merge Down
hanya berfungsi jika layer di bawah layer aktif Gb.41. Merge
adalah layer biasa. Perintah ini juga dapat Down
digunakan untuk
 mengubah layer teks atau shape menjadi layer biasa seperti
jika kita menggunakan rasterize, yaitu jika kita
menggabungkan dengan sebuah layer biasa.
Merge Down dapat dilakukan dengan cara click menu Layer
Merge Down.
Merge visible
Fasilitas Merge Visible ini menggabungkan
semua layer yang tampak (visible) di Pallete
layers. Merge visible sangat berguna jika kita
ingin menggabungkan layer yang sangat
banyak dan letaknya berpencar tanpa
terlebih dahulu harus mengurutkan seperti
yang harus dilakukan pada Merge Down. Gb.42. Merge
Merge Visible dapat dilakukan dengan cara Visible
click
menu Layer Merge Visible.
Flatter Image
Fasilitas Merge Down hanya menggabungkan
layer dengan layer di bawahnya. Merge
visible menggabungkan leyer-layer yang
tampak. Fasilitas Flatten Image
menggabungkan semua layer yang ada.
Biasanya perintah Flatten Image ini baru Gb.43. Flatter Image
dipakai apabila pekerjaan desain grafis telah
selesai dan ingin mengekspor file ke tipe file
selain PSD.
Flatten Image dilakukan dengan cara click menu Layer
Flatten
Image.

Masking
Masking berarti melubangi objek di suatu layer dengan mask
sehingga memunculkan objek pada leyer di bawahnya. Metode
masking ini banyak digunakan untuk menciptakan kesan objek
yang saling melebur (blending). Langkah-langkah yang harus
dilakukan untuk dapat mengaplikasikan
masking pada suatu objek.
1. Susun objek yang akan diberi mask di atas objek yang akan
ditampilkan melalui masking tersebut.
2. Aktifkan layer yang akan diberi mask dengan meng-click
icon add Layer Mask pada bagian bawah palette layer.
3. Pilih Gradient Tool pada toolbar. Atur mode gradasi yang
diinginkan melalui Option Bar. Gunakan pilihan linear gradient.
Drag di objek pada layer aktif. Hasilnya akan terlihat seperti
gambar di bawah.
 Gb.44. Hasil olahan Masking pada dua buah objek

6. Beberapa contoh hasil image editing

Gb.44. Contoh hasil image editing dengan Photoshop