Pg78 Gregorius Desain Web Graphic Dengan Fireworks Mx

E-Book yang Sedang Anda Baca Ini Berasal dari:

SUMBER ILMU PENGETAHUAN TANPA BATAS www.pustaka78.com Inilah situs yang selalu dicari. Akan menjadi sumber download buku digital terbesar di Indonesia. Menyediakan ribuan ebook, audio, movie, foto, dan software bermutu dalam berbagai kategori. Dijamin dapat didownload GRATIS 100%. Kunjungi sekarang juga www.pustaka78.com

Hak Cipta Terpelihara © Hak Cipta ada pada Penulis/ Pengarang, Penerbit, atau Sumber Online. LISENSI PENGGUNAAN: Dokumen ini boleh dikutip, dimodifikasi, atau disebarkan luaskan secara bebas tanpa menghilangkan identitas pemilik hak cipta. Pustaka Gratis 78 semata-mata hanya sebagai perpustakaan digital penyedia ilmu pengetahuan yang memiliki koleksi dokumen yang pada dasarnya bersumber pada publikasi online gratis atau dokumentasi yang tidak diperdagangkan lagi. Jika buku ini masih diperdagangkan, kami tetap menyarankan Anda untuk membeli versi cetaknya agar dunia perbukuan di Indonesia terus maju dan berkembang dengan pesat. Semoga semua bahan bacaan koleksi Pustaka Gratis 78 ini bermanfaat bagi masyarakat luas di Indonesia dan luar negeri.

BAB

3 Dasar-Dasar Membuat Vector Objects

Pada putaran ketiga ini kita akan belajar mengenal dan membuat objek-objek berjenis vector. Hal ini kita lakukan mengingat inti utama dari Macromedia Fireworks MX bukanlah gambar bitmap namun objek vector. Meskipun demikian, bukan berarti software ini tak mampu menangani gambar bitmap selincah ia menangani objek vektor. Seperti kita ketahui dalam bab 1 lalu, Fireworks MX dilengkapi dengan dua tools, masing-masing untuk mengedit objek vector dan gambar bitmap. Penekanan Fireworks MX pada objek vector dilatarbelakangi oleh fakta bahwa objek ini mudah diatur, dibuat, dan dimodifikasi ulang. Prosesnya pun cepat dan tidak memakan banyak sumber daya komputer seperti memori atau lainnya. Bagaimana sebenarnya sebuah objek vector dibuat? Objek ini sangat dipengaruhi oleh rumus-rumus matematika. Tentunya Anda mengenal banyak rumus sewaktu duduk di bangku sekolah. Namun, tenang saja sebab Anda tak perlu mengaplikasikan satu butir rumuspun untuk membuat objek vector. Biarkan Fireworks dan sistem komputer yang mengerjakannya buat Anda. Namun pada dasarnya, di balik pembuatan objek vector terjadilah proses penciptaan rumus matematika lewat pernyataan tertentu. Sebagai contoh, bila kita akan membuat sebuah lingkaran, Fireworks akan memerintahkan 2

komputer untuk menggambarnya lewat instruksi matematika yang dapat diilustrasikan seperti ini “buatlah lingkaran sebesar n diameter, dengan mengambil koordinat x,y sebagai titik pusatnya”. Tentunya kata-kata ini tak akan terlihat namun komputer akan menciptakan bentuk lingkaran berdasarkan rumus matematika yang telah diprogram.

3.1. Mengenal Path Asal muasal objek vector terletak pada Path. Bila diterjemahkan secara bebas, path adalah garis yang membentuk sebuah bangun tertentu. Untuk membuat path, minimal harus terdapat 2 buah titik, yaitu titik awal dan titik akhir. Dalam kasus seperti ini, path ini akan membentuk garis tunggal seperti gambar berikut ini :

Gambar 3.1. Path Membentuk Sebuah Garis Tunggal

Bentuk bangun yang lebih kompleks, seperti persegi empat, lingkaran, bintang, poligon, serta segi tak beraturan tetap dibentuk oleh garisgaris yang membentuk bangun itu. Dan, garis pembentuk itu dinamakan path. Agar path itu muncul dengan tampilan yang lebih memikat, Fireworks MX telah menyediakan fasilitas Stroke. Fungsinya, untuk menciptakan variasi lain dari bentuk garis di atas.

3

Gambar 3.2. Path dengan Beberapa Pilihan Stroke

Kita akan membahas bagaimana menggunakan stroke ini lebih lanjut dalam bab tersendiri.

3.1.1. Path Terbuka dan Path Tertutup Ada dua path yang dikenal oleh Macromedia Fireworks MX, yaitu path terbuka dan path tertutup. Membedakan keduanya cukup mudah. Bila titik awal pada saat path itu dibuat bertemu dengan titik akhir path tersebut maka ia akan disebut path tertutup. Sebaliknya, bila titik awal tidak bertemu dengan titik akhir path maka ia akan disebut path terbuka. Sebagai ilustrasi, lihatlah gambar di bawah ini:

4

Gambar 3.3. Path Tertutup (Atas) dan Path Terbuka (Bawah)

Dapat dilihat bahwa bangun yang terletak di bagian atas terbuat dari path tertutup sedangkan bawahnya path terbuka sebab kedua titik tidak bertemu menjadi satu. Meskipun berwujud path terbuka, Macromedia Fireworks MX tetap bisa mewarnai bagian dalam bangun tersebut tanpa perlu meluberi bagian lain dari kanvas dengan warna tersebut. Hal ini tentunya menjadi keistimewaan Fireworks MX dimana ia bisa mewarnai bangun yang dibentuk dengan path terbuka.

5

Gambar 3.4. Bangun yang Dibuat Oleh Path Terbuka Masih Bisa Diisi oleh Warna Seperti Halnya Path Tertutup

3.2. Membuat Bangun Persegi Empat Sesudah mengenal path, mari kita mengenal bangun dasar yang pertama, yaitu bangun persegi empat. Meskipun didominasi oleh bangun berbentuk kotak—sehingga terkadang kita menyebut semua bangun persegi empat dengan nama “kotak”—namun pada dasarnya bangun persegi empat didefinisikan sebagai bangun yang memiliki empat titik serta empat sudut. Pada prinsipnya, ada dua cara membuat bangun persegi empat. Akan kita terangkan satu demi satu mulai dari cara pertama : 1.

Klik Rectangle Tool yang ada di kotak Tools bagian Vector sampai ia dalam keadaan terpilih.

2. Arahkan kursor ke salah satu sudut kanvas bagian kiri atas. 3. Klik tombol kiri mouse dan seretlah ia ke sudut kanan bawah kanvas hingga tercipta bangun persegi empat seperti gambar di bawah ini.

Gambar 3.5. Proses Pembuatan Bangun Persegi Empat

6

Pada kasus di atas, Anda membuat bangun persegi empat dengan memilih salah satu titik yang terletak di bagian tepi bangun persegi empat tersebut. Sekarang, kita akan menciptakan eksperimen lain. Kita akan membuat bangun persegi empat namun dengan model lain. Ikutilah langkah-langkah berikut ini : 1.

Pastikan pilihan Rectangle Tool masih dalam keadaan aktif.

2. Posisikan kursor mouse tepat di tengah-tengah kanvas. 3. Tekan tombol Alt 4. Pada saat yang bersamaan, tekan tombol kiri mouse dan seret ke sudut kanan-bawah kanvas. Dan, sebuah bangun persegi empat tercipta di sana.

Gambar 3.6. Membuat Persegi Empat dengan Mengambil Tengah Sebagai Titik Pusatnya

Kedua cara di atas akan membentuk bangun yang sama, hanya saja cara terakhir ini memilih tengah sebagai titik pusatnya dan bukannya bagian tepi bangun persegi empat.

3.3. Membuat Sudut Lingkar Persegi Empat 7

Lazimnya, sebuah persegi empat bersudut tajam seperti gambar di atas. Namun, dengan sedikit kreasi kita bisa ubah sudut tajam itu menjadi sudut lingkar atau sudut tumpul. Dengan menumpulkan sudut itu, maka akan tercipta kesan tidak kaku serta tidak formal. Para webmaster suka menumpulkan sudut pada persegi empat untuk tujuan yang sama, misalnya membuat kotak menu, dan yang terutama tombol-tombol navigasi. Sebagai contoh, situs Amazon.com tidak hanya melibatkan persegi empat saja untuk menghias tampilan awalnya namun juga persegi empat dengan sudut tumpul seperti gambar di bawah ini (lihat persegi empat dengan sudut tumpul pada bagian menu atas, kotak Browse, What’s New, dan lainnya) :

Gambar 3.7. Persegi Empat dengan Sudut Tumpul pada Situs Amazon.Com

Dengan menggunakan Fireworks MX, sangatlah mudah menciptakan persegi empat dengan sudut tumpul. Pada dasarnya, ada dua cara untuk membuat persegi empat dengan sudut tumpul. Masing-masing akan dijelaskan di sini mulai dengan cara pertama ini : 1.

8

Pertama kali, buatlah persegi empat dengan mengikuti caracara yang pernah kita coba tadi.

Gambar 3.8. Menggambar Persegi Empat dengan Sudut Lancip

2. Bila persegi empat itu masih dalam keadaan terpilih maka Anda akan melihat jendela Properties seperti gambar di bawah ini pada layar monitor Anda.

Gambar 3.9. Jendela Properties

3. Amatilah bagian Rectangle Roundness. Klik-lah ia dan pilihlah salah satu angka yang Anda kehendaki dengan menggeret kotak kecil yang ada di situ ke atas atau ke bawah . Dalam waktu singkat, sudut pada persegi empat akan menumpul membentuk seperempat lingkaran. Bahkan, bila Anda memilih angka maksimal, persegi empat itu akan menyerupai sebuah lingkaran. Lihatlah ilustrasi gambar di bawah ini. 9

Gambar 3.10. Model-Model Persegi Empat dengan Sudut Tumpul

Selain cara di atas, Anda bisa tetap membuat persegi empat dengan sudut tumpul lewat cara lain, seperti yang akan Anda lakukan lewat panduan langkah-langkah berikut ini : 1.

Klik Rectangle Tool yang ada di bagian Vector jendela Tools. Tekan terus tombol mouse itu sampai muncul pilihan tools baru seperti gambar di bawah ini :

Gambar 3.11. Pilihan Rectangle Tool

2.

Pilihlah Rounded Rectangle tool.

3. Setelah itu, gambarlah persegi empat seperti cara-cara yang telah kita lalui dulu. Cara kedua inipun akan menghasilkan persegi empat dengan sudut tumpul seperti cara pertama.

10

3.4. Membentuk Lingkaran Bangun ketiga yang akan dibahas di sini adalah lingkaran. Seperti halnya persegi empat, lingkaran juga kerap kali dipakai untuk menghias sebuah situs. Sebagai contoh, amatilah situs di bawah ini dimana ada banyak sekali kombinasi lingkaran untuk menciptakan bentuk bangun baru.

Gambar 3.12. Lingkaran Banyak Dipakai dalam Situs Ini

Membuat lingkaran tidaklah sulit, Anda hanya perlu mengikuti panduan singkat langkah-langkah berikut ini : 1.

Klik dan tahan Rectangle Tool sampai muncul menu baru seperti berikut ini :

Gambar 3.13. Menu Tambahan Rectangle Tool

2. Pilih Ellipse tool

untuk membuat lingkaran. 11

3. Arahkan kursor mouse di salah satu sudut kanvas dan klik tombol kiri mouse Anda. Seret ia ke bawah seperti halnya Anda membuat persegi empat sampai tercipta lingkaran seperti gambar berikut ini.

Gambar 3.14. Membuat Lingkaran

Seperti halnya persegi empat, Anda bisa membuat lingkaran dengan memilih tengah sebagai titik pusatnya, yaitu dengan menekan tombol Alt + tombol kiri mouse. Langkah ini bisa Anda tempuh bila ingin meletakkan lingkaran pada tempat yang lebih akurat beserta ukurannya.

3.5. Membuat Polygons Poligon didefinisikan sebagai bangun bersegi banyak dimana setiap sudut memiliki ukuran yang sama. Secara pasti, berapa jumlah sudut yang membentuk sebuah poligon? Macromedia Fireworks MX memberi kebebasan kepada Anda untuk menciptakan bangun bersegi banyak dengan jumlah sudut mulai dari 3 sampai 25. Bentuknya yang unik terkadang memberi inspirasi kepada kita untuk mendesain sebuah situs atau logo semenarik mungkin. Dalam kenyataannya, poligon sangat sering dipakai sebagai dasar pembuatan logo perusahaan atau organisasi tertentu.

12

Untuk membuat poligon, Anda dapat mengikuti panduan langkahlangkah berikut ini : 1.

Klik pilihan Polygon Tool seperti gambar di bawah ini sampai ia dalam keadaan aktif. Polygon Tool tersimpan di dalam area yang sama dengan Rectangle Tool, Ellipse Tool, dan Rounded Rectangle Tool.

Gambar 3.15. Mengambil Pilihan Polygon Tool

2. Ambilah salah satu lokasi dalam kanvas dan klik serta tahan tombol kiri mouse Anda. Seretlah ia ke arah bawah sampai muncul bangun baru seperti diperlihatkan di bawah ini.

Gambar 3.16. Proses Pembuatan Polygon Tool

3. Sembari membuat, Anda bisa menggeser mouse ke kanan kiri untuk menghasilkan tingkat kemiringan yang tepat.

13

Hasil akhir poligon dapat Anda lihat pada gambar di bawah ini. Seberapa banyak jumlah sudut yang ia miliki bisa Anda tentukan lewat cara lain.

Gambar 3.17. Poligon Berbentuk Segi Lima

3.5.1. Mengatur Jumlah Sudut Sesuai namanya, poligon merupakan bangun dengan jumlah sudut banyak. Kita bisa atur berapa jumlah sudut yang akan ada dalam poligon itu mulai dari 3 sampai 25 sudut. Di bawah ini tersaji langkah-langkah yang membantu Anda menentukan berapa jumlah sudut yang terdapat dalam sebuah poligon : 1.

Klik-lah Polygon Tool terpilih.

sampai ia dalam keadaan

2. Amatilah bahwa jendela Properties akan tampak seperti gambar berikut ini :

14

Gambar 3.18. Jendela Properties

3. Aturlah jumlah sudut itu dengan memasukkan angka dari 325 pada kotak Sides. 4. Selanjutnya, buatlah poligon lewat langkah-langkah yang telah kita lalui di atas.

Gambar 3.19. Poligon dengan Variasi Jumlah Sudut

3.6. Membuat Bintang Salah satu kreasi unik yang bisa dibuat oleh Macromedia Fireworks MX adalah bintang. Pada dasarnya, bintang merupakan saudara dekat poligon sebab alat untuk membuat bintang tidak jauh-jauh dari bangun bersegi banyak ini. Di bawah ini tersaji langkah-langkah untuk membantu Anda membuat bintang : 1.

Klik icon Polygon Tool Properties.

sampai muncul jendela

15

2. Di sudut kanan jendela Properties telah siap menu drop-down Shape. Pilihlah Star mengganti pilihan Polygon yang ada di sana.

untuk

3. Bila perlu, tentukan jumlah sudut yang akan dimiliki bintang itu dengan memasukkan angka yang tepat di bagian Sides. 4. Mulailah menggambar seperti biasa. Di bawah ini tersaji beberapa deret bintang lengkap dengan jumlah sudut yang sangat bervariasi.

Gambar 3.20. Tampilan Beragam Bintang dalam Kanvas

3.7. Membuat Garis Salah satu path yang paling mudah dibuat adalah garis tunggal. Macromedia Fireworks MX dan kebanyakan software grafis lainnya menyediakan fasilitas Line untuk membantu desainer membuat garis tunggal sederhana. Garis tunggal ini hanya memiliki 2 titik, titik awal dan titik akhir. Garis tunggal yang dibuat menggunakan Line tool ini benar-benar lurus. Hanya saja tingkat kemiringannya bisa diatur.

16

Untuk membuat garis tunggal, Anda bisa mengikuti panduan langkahlangkah berikut ini : 1.

Klik icon Line Tool

yang ada di jendela Tools

2. Tentukan titik awal garis ini dengan cara mengklik salah satu bagian yang ada dalam kanvas. 3. Seretlah mouse Anda pada posisi tombol kiri mouse masih dalam keadaan tertekan ke arah kanan atau kiri, atas atau bawah sampai muncul bayangan garis pada kanvas. 4. Lepaskan tombol kiri mouse. Dalam waktu singkat, kanvas Anda akan tergores sebuah garis lurus seperti tampak pada gambar di bawah ini :

Gambar 3.21. Garis Tunggal pada Kanvas Fireworks MX

Untuk memperjelas garis serta mempercantiknya, Anda bisa mengaplikasikan stroke pada garis tersebut untuk menentukan pola serta tingkat ketebalannya. Dalam bab tersendiri, kita akan belajar menggunakan Stroke.

17

Gambar 3.22. Tampilan Macam-Macam Garis dengan Stroke

18