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

4.      Klik Air brush tool

5.      Semprotkan pada layer kerja

6.      Anda bisa merubah besar ukuran brush dengan mengaktifkan menu Windows, pilih Show Brushes

7.      Pilih ukuran yang dikehendaki

 

Gambar 11. Efek Air Brush

Gambar 12. Ukuran Brush

 

 

 

 

·        Paint Brush Tool

 

Langkah dan Mode Paint Brush sesungguhnya mirip dengan Air Brush, hanya saja pada arsiran Paint Brush berupa garis, sedangkan pada Air Brush berupa semprotan (spray).

 

·        Rubber Stamp Tool

 

Penggunaan Rubber Stamp sesungguhnya ialah melakukan copy terhadap suatu obyek. Bedanya pada tool ini ialah dapat mengcopy sebagian area obyek sesuai dengan yang kita kehendaki.

 

Langkah-langkah :

1.      Tentukan obyek yang akan dicopy

2.      Pada kotak Windows Layer, klik Create new layer

3.      Klik Rubber Stamp Tool

4.      Tekan Alt + Klik pada area yang akan di copy

5.      Pada layar baru, geser kurson dengan mengarsir area obyek aslinya

 

 

 

Gambar 13. Contoh Penggunaan Rubber Stamp

 

 

 

Perhatikan tampilan di atas,  Gambar sebelah kanan ialah obyek asli dan sebelah kiri  hasil copy dengan Rubber Stamp.  Perhatikan pula tanda lingkaran  (O) pada obyek sebelah kiri dan tanda (+) pada obyek sebelah kanan.  Hasil copy gambar sebelah kiri tergantung dengan pergeseran area yang ditandai dengan (+) pada obyek sebelah kanan (aslinya).

 

 

·        Rectagle Tool

 

Tool ini berfungsi untuk membuat bentuk segi empat. Langkah-langkah pemberian warna pada area segi empat sama seperti pada air brush dan paint brush.

 

·        Eraser Tool

 

Tool ini digunakan untuk menghapus bagian obyek yang tidak kita kehendaki.  Untuk merubah ukuran mode eraser dapat dilakukan dengan merubah ukuran brushes pada Windows, Show Brushes.

 

·        Smudge Tool

 

Tool ini berfungsi untuk mengarsir dengan mode tangan berdasarkan warna yang ada didekatnya

 

 

Gambar 14. Contoh Penggunaan Smudge Tool

 

 

 

·        Dodge Tool

 

Tool ini berfungsi untuk memberikan cahaya pada obyek (image) yang dipilih, sehingga obyek menjadi lebih terang. Besar area yang diberi cahaya dapat diatur dengan merubah besarnya brushes.

 

Gambar 15. Contoh Penggunaan Dodge Tool

 

 

Kiri : Obyek asli (awal)               Kanan : efek dodge tool

 

 

 

·        Type Tool

 

Tool ini berfungsi untuk membuat tampilan teks.

 

Langkah-langkah:

1.      Klik Type Tool

2.      Ketik Teks yang dikehendaki pada layer (biasanya pemilihan type tool secara otomatis akan membuat layer baru)

3.      Untuk merubah jenis atau ukuran font, lakukan dengan menyorot teks yang akan dirubah, kemudian klik mouse sebelah kanan

4.      Pilih jenis atau ukuran font yang dikehendaki.

 

Pada tampilan teks ini ada efek Style  yang dapat digunakan untuk memperindah tampilan teks yang kita buat.

 

Gambar 16.  Style Efect

 

 

Langkah-langkah:

1.      Aktifkan Move Tool

2.      Pilih teks yang telah dibuat dengan move tool

3.      Pilih style yang diinginkan dengan meng-klik mode pada style

4.      Klik kanan pada mouse

 

Gambar 17. Contoh Penggunaan Type Tool

 

 

·        Crop Tool

 

Tool ini berfungsi untuk memotong obyek sekaligus membuat ukuran layer baru.

 

Langkah-langkah:

1.      Tentukan obyek yang akan di-crop

2.      Klik Crop tool

3.      Tentukan area yang akan di potong dengan mengklik titik awal dan menggesernya ke arah yang diinginkan

4.      Klik Move Tool

 

Gambar 18 merupakan hasil pemotongan dengan crop tool terhadap obyek pada gambar 17.

 

Gambar 18.  Hasil pemotongan obyek dengan Crop Tool

 

 

 

·        Paint Bucket Tool

 

Tool ini berfungsi untuk memberi warna pada obyek yang telah di-select.

 

Langkah-langkah:

1.      Buat bentuk dengan Marquee Tool

2.      Klik Paint Bucket tool

3.      Pilih warna dengan merubah warna yang ada pada foreground color tool

4.      Klik pada area yang telah dibuat dengan Marquee tool

 

·        Eye Dropper Tool

 

Tool ini berfungsi untuk membuat/memilih warna berdasarkan warna obyek lain. Warna yang dipilih selanjutnya dijadikan sebagai foreground color.

 

Langkah-langkah:

1.      Pilih obyek yang akan diambil warnanya

2.      Ketik Teks yang diinginkan

3.      Kilik Eye Dropper

4.      Klik warna yang ada pada obyek yang akan diambil warnanya

 

Gambar 19.  Memberi warna dengan Eye Dropper Tool

 

 

Teks “Eye Dropper” yang ke dua (bawah) telah dirubah warnanya persis sesuai dengan warna “anggur”  (obyek di atasnya). Warna ini bukan warna yang ada pada template foreground color. Namun dengan eye dropper tool, kita dapat memberikan warna lain yang tidak ada pada foreground color.

 

·        Hand Tool

 

Tool ini berfungsi untuk menggeser /menampilkan obyek yang tidak nampak akibat perlakuan zoom tool.

 

 

 

IV.             PENUTUP

 

Adobe Image Ready sangat cocok digunakan untuk membuat tampilan grafis pada web, karena fungsi-fungsi yang disediakan dan file yang dihasilkan sesuai dengan yang dibutuhkan untuk mendukung tampilan grafis pada web.

 

Penjelasan dalam modul ini hanya bersifat pengetahuan dasar dan dipilih pada materi yang pokok-pokok saja, Karena singkatnya modul ini, sudah pasti banyak kekurangan yang perlu ditambahkan. Informasi lebih lanjut tentang Modul ini silakan kontak melalui e-mail: admin@lrc-kes.or.id