pg78 gregorius desain web graphic dengan fireworks mx

19
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. SUMBER ILMU PENGETAHUAN TANPA BATAS www.pustaka78.com E-Book yang Sedang Anda Baca Ini Berasal dari: 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

Upload: api-3815627

Post on 07-Jun-2015

193 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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.

SUMBER ILMU PENGETAHUAN TANPA BATAS

www.pustaka78.com

E-Book yang Sedang Anda Baca Ini Berasal dari:

Inilah situs yang selalu dicari. Akan menjadi sumber download buku digitalterbesar di Indonesia. Menyediakan ribuan ebook, audio, movie, foto, dan

software bermutu dalam berbagai kategori. Dijamin dapat didownloadGRATIS 100%. Kunjungi sekarang juga www.pustaka78.com

Page 2: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX
Page 3: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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

Page 4: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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 garis-garis 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

Page 5: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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

Page 6: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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

Page 7: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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

Page 8: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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

Page 9: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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. Pertama kali, buatlah persegi empat dengan mengikuti cara-cara yang pernah kita coba tadi.

8

Page 10: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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

Page 11: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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

Page 12: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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

Page 13: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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

Page 14: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

Untuk membuat poligon, Anda dapat mengikuti panduan langkah-langkah 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

Page 15: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

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 sampai ia dalam keadaan terpilih.

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

14

Page 16: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

Gambar 3.18. Jendela Properties

3. Aturlah jumlah sudut itu dengan memasukkan angka dari 3-25 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 sampai muncul jendela Properties.

15

Page 17: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

2. Di sudut kanan jendela Properties telah siap menu drop-down

Shape. Pilihlah Star untuk mengganti pilihan Polygon yang ada di sana.

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

Page 18: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

Untuk membuat garis tunggal, Anda bisa mengikuti panduan langkah-langkah 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

Page 19: PG78 Gregorius Desain Web Graphic Dengan Fireworks MX

Gambar 3.22. Tampilan Macam-Macam Garis dengan Stroke

18