Ver 2.0

Adobe

I. PENDAHULUAN

M

embuat tampilan web yang indah dengan animasi yang bagus merupakan hal yang penting agar web yang kita buat menjadi lebih menarik. Untuk membuat tampilan seperti ini diperlukan kemampuan disain grafis dan animasi yang memadai.

Banyak software di pasaran yang dapat kita gunakan untuk membuat disain pada web. Salah satu program disain grafis sekaligus menyediakan fasilitas untuk membuat animasi dari grafis yang telah kita buat atau image lain ialah Adobe Image Ready (AIR).

II. TUJUAN

Modul ini disusun untuk membantu peserta latih mempelajari program aplikasi disain dan animasi grafis menggunakan Adobe Image Ready 2.0.

III. MATERI

A. Pengantar

S

esuai namanya, Image Ready ialah program yang untuk disain grafis yang dikembangkan oleh Adobe Corporation. Program ini merupakan program perluasan dari Adobe Photoshop versi 5.1. Jadi, apabila kita meng-install Adobe Photoshop versi ini, secara otomatis akan terinstall pula Image Ready versi 2.0. Jika Anda sudah familiar menggunakan Adobe Photoshop, maka untuk mempelajari Image Ready akan menjadi lebih mudah, karena menu yang disediakan banyak kesamaan dengan Photoshop. Namun, Anda tidak perlu khawatir apabila belum pernah menggunakan photoshop. Menu Program Image Ready cukup sederhana dan mudah untuk dikuasai.

B. Menjalankan Adobe Image Ready (AIR)

Program aplikasi Adobe Image Ready (AIR) idealnya dijalankan pada sistem Windows Versi 95 ke atas. Program ini dapat dioperasikan dengan baik pada komputer dengan spesifikasi sbb:

· Hardisk, minimal 1.2 GB

· Processor 166 MHz atau lebih

· RAM, minimal 32 MB

Langkah-langkah menjalankan program:

1. Nyalakan komputer

2. Klik Start pada task bar, pilih Program, pilih Adobe pada program group, kemudian pilih Photoshop 5.5 dan klik Adobe Image Ready.

3. Lihat tampilan pada gambar 1 (Seperti pada aplikasi disain grafis yang lain, pada menu utama aplikasi ini dapat dilihat Menu Bar yang terletak pada bagian atas (horizontal) dan Tools Bar pada bagian kiri (vertikal). Selain itu juga ditampilkan Animation Bar, Layer Bar, dsb yang semuanya dapat ditampilkan atau disembunyikan.

Lebih jelasnya, komponen-komponen yang ada pada Menu Bar dapat dilihat pada gambar 2.

Gambar 1. Menu Utama Adobe Image Ready

Gambar 2. Komponen-komponen pada Menu Bar

Tampilan pada menu bar memiliki banyak kesamaan dengan tampilan pada Adobe Photoshop. Selanjutnya, komponen-komponen tools bar pada menu utama secara detail dapat dilihat pada gambar 3.

Gambar 3. Komponen-komponen pada Tool Bar

Komponen Icon pada tools bar serta fungsinya sebagai berikut:

Tool bar	Icon	Nama	Fungsi
		Marque Tool	Untuk memberikan tanda area yang dipilih (bentuk pilihan : persegi, lingkaran)
		Move Tool	Untuk memindahkan obyek
		Lasso Tool	Untuk memberikan tanda area yang dipilih (bentuk area pilihan bebas)
		Magic Wand Tool	Untuk memberikan tanda area yang dipilih berdasarkan warna obyek
		Slice Tool	Untuk memotong obyek menjadi beberapa bagian agar agar download pada web lebih cepat
		Slice Select Tool	Untuk memilih slice
		Air Brush Tool	Untuk memberikan warna dengan efek spray (semprot)
		Paint Brush Tool	Untuk memberikan warna dengan efek kuas
		Rubber Stamp Tool	Untuk Membuat duplikat obyek pada layer lain dengan cara mengarsir obyek yang diinginkan
		Rectangle Tool	Untuk membuat bentuk segi empat
		Eraser Tool	Untuk menghapus obyek
		Pencil Tool	Untuk membuat bentuk dengan arsiran pensil
		Smudge Tool	Memberi warna berdasarkan warna obyek yang ada
		Dodge Tool	Memberikan cahaya pada obyek (image) yang dipilih
		Type Tool	Untuk mengetik
		Crop Tool	Untuk memotong obyek
		Paint Bucket Tool	Untuk memberikan warna terhadap obyek yang dipilih berdasarkan template warna yang diberikan oleh Image Ready
		Eye Dropper Tool	Untuk membuat/memilih warna berdasarkan warna obyek lain
		Hand Tool	Untuk menggeser tampilan
		Zoom Tool	Untuk memperbesar/memperkecil tampilan pada layar
		Foreground/ Background Color	Untuk mengganti/memilih warna

C. Membuat File Baru

Langkah-langkah :

1. Klik File pada menu bar,

2. Pilih New atau tekan Ctrl + N, maka akan tampak seperti gambar 4.

3. Buat nama file pada dialog box name

4. Tentukan ukuran image yang dikehendaki (lebar/width, tinggi/height)

5. Tentukan latar belakang pada layer pertama (White, Background color, transparent). Latar belakang ini akan karakteristik file yang nantinya akan disimpan. Jadi, tentukan dengan benar seperti apa image yang nantinya akan kita buat.

6. Selanjutnya klik OK

Gambar 4. Tampilan New Document

Selanjutnya akan muncul tampilan berikut:

Gambar 5. Tampilan Layer pada File baru

Bekerja dengan program Image Ready pada prinsipnya ialah bekerja pada layer yang dibuat. Layer adalah lapisan-lapisan yang menunjukkan posisi obyek berada. Pada Image yang kita buat, kita akan menampilkan beberapa obyek, posisi obyek yang satu berada di depan atau di belakang obyek yang lain. Agar setiap obyek dapat diberikan efek grafis yang berbeda-beda, maka kita tempatkan setiap obyek pada layer yang berbeda.

D. Menyimpan File

Yang penting dalam sub menu File, ialah menyimpan file. Ada dua format yang akan dihasilkan pada saat menyimpan file. Ini tergantung dari pilihan menu Save yang kita pilih, yaitu :

1. Save Optimized & Save Optimized As. Penyimpanan dengan menggunakan pilihan ini akan menghasilkan file image dengan ekstension GIF. File inilah yang nantinya akan kita gunakan untuk mempercantik tampilan pada web yang kita buat. Perlu diketahui, karena hasil penyimpanan berupa file image, sehingga layer yang digunakan akan hilang dan tidak dapat di edit menurut layer semula.

2. Save & save As. Penyimpanan dengan menggunakan pilihan ini akan menghasilkan file dengan ekstension PSD. File ini berukuran lebih besar dibanding dengan file GIF, karena dengan pilihan penyimpanan ini, setiap layer akan disimpan dan dapat dipanggil kembali pada saat kita membuka file tersebut.

E. Edit

Seperti lazimnya program lain yang berbasis Windows, menu Edit hampir sama fungsinya pada setiap program. Namun, pada Image Ready ini ada fungsi menu Edit yang berbeda dan penting untuk diketahui, yaitu: Edit Transform.

Pada menu Edit Transform kita dapat melakukan editing obyek dengan melakukan perubahan ukuran obyek (memperbesar atau memperkecil obyek), orientasi obyek (perputaran, kemiringan, cermin, perspektif, dsb) sesuai dengan yang kita inginkan.

Lebih lanjut mengenai fungsi masing-masing komponen pada menu Edit Transform dapat dilihat pada gambar 6.

Gambar 6. Menu Edit Transform

Transform	Fungsi
Scale	Untuk memperbesar atau memperkecil obyek (image atau font); memperlebar, mempertinggi
Rotate	Untuk memutar obyek
Skew	Untuk merubah ukuran masing-masing sisi obyek secara vertikal maupun horizontal
Distort	Untuk merubah ukuran masing-masing sisi obyek secara diagonal
Perspective	Untuk merubah bentuk obyek menjadi perspektif
Numerik	Untuk merubah ukuran obyek berdasarkan besaran nilai yang dikehendaki (modus : percent, pixel)
Rotate 180^o	Untuk memutar obyek dengan perubahan 180^o
Rotate 90^o CW	Untuk memutar obyek dengan perubahan 90^o ke kanan
Rotate 90^o CCW	Untuk memutar obyek dengan perubahan 90^o ke kiri
Flip Horizontal	Untuk menampilkan obyek dengan efek cermin berdasarkan garis horizontal
Flip Vertical	Untuk menampilkan obyek dengan efek cermin berdasarkan garis vertikal

F. Bekerja dengan Tools

Dalam sub bab ini hanya dijelaskan lebih lanjut beberapa fungsi Tools, karena secara umum fungsi ini sudah dijelaskan pada sub bab sebelumnya.

· Magic Wand Tool

Tool ini berfungsi untuk memberikan tanda area yang dipilih berdasarkan warna obyek. Selanjutnya area yang telah dipilih dengan tool ini dapat diberi perlakuan efek sesuai dengan yang kita kehendaki. Fungsi ini juga mempermudah kita untuk menghapus area yang tidak kita kehendaki. Lihat contoh pada gambar 7 dan 8.

Langkah :

1. Buka atau Copy gambar yang kita inginkan pada layer kerja

2. Klik tool Magic Wand

3. Klik pada area yang akan dihapus (aera segi empat)

4. Tekan tombol Del pada keyboard.

5. Hapus area selection dengan mengaktifkan menu Select,

6. Pilih Deselect

Gambar 7. Tampilan Awal	Gambar 8. Tampilan Hasil

· Slice Tool

Tool ini berfungsi untuk memotong obyek menjadi beberapa bagian. Maksud pemotongan obyek ialah agar ukuran image yang ditampilkan pada web tidak terlalu besar

Langkah-langkah :

1. Pilih obyek yang akan dipotong

2. Klik Slice Tool

3. Aktifkan menu Slice

4. Pilih Devide Slice

5. Tentukan jumlah potongan yang dikehendaki secara vertikal dan horizontal

Gambar 9. Devide Slice

Penentuan nilai 3 pada slice down dan nilai 3 pada slice across akan menghasilkan 9 buah image dengan ukuran lebih kecil pada saat file ini disimpan dengan mode Save Optimized.

Gambar 10. Pemotongan obyek dengan Slice Tool

· Air Brush Tool

Langkah-langkah :

1. Pilih warna dengan meng-klik foreground color tool

2. Tentukan warna yang dikehendaki dengan mengeser kursor berbentuk lingkaran pada area warna yang dipilih

3. Klik OK