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 180o

Untuk memutar obyek dengan perubahan 180o

Rotate 90o CW

Untuk memutar obyek dengan perubahan 90o ke kanan

Rotate 90o CCW

Untuk memutar obyek dengan perubahan 90o 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