Membuat website yang cantik dan kaya animasi itu gampang! Dulu, merancang website yang benar-benar indah, cemerlang, dan kreatif merupakan tugas yang berat. Kita harus me-layout tampilan web secara hati-hati dan memasukkan gambar-gambar ke dalamnya dengan tingkat ketelitian yang tak terbayangkan. Sekarang, dengan menggunakan Adobe Photoshop CS dan Dreamweaver MX 2004 plus Adobe ImageReady CS yang terbundel dalam satu paket yang sama, merancang website yang fantastis dan penuh dengan animasi akan terasa sangat mudah. Di sini, Anda akan belajar me-layout website, menciptakan slice, membuat rollover button, merancang tombol-tombol, membuat remote rollover lewat cara yang step-by-step, lengkap, dan penuh gambar. Di akhir bab, Anda akan mendapat banyak tip dan trik untuk mengoptimalisasi tampilan website Anda lewat cara yang singkat.Berikut langkah-langkah membuat website “My Diary” yang bisa Anda ikuti:
1. Pertama-tama, siapkan sebuah kanvas baru menggunakan setting berikut:
- Width : 720 pixel
- Height : 480 pixel
- Resolution : 72 pixel/inch
2. Klik ikon warna latar depan dan pilih warna baru dengan rumus #FFF2AD.
3. Klik menu Edit > Fill. Pada bagian Use, pilih Foreground Color.
4. Tekan tombol OK dan kanvas Anda akan tampak seperti ini.
5. Kita akan atur ulang warna latar depannya untuk membuat persegi empat. Klik ikon warna latar depan dan masukkan rumus berikut #FFCC00. Dengan begitu, Anda akan mendapat warna oranye.
6. Klik Rectangle Tool
dan buatlah persegi empat seperti gambar berikut ini.
7. Raster bentuk persegi empat ini dengan mengklik menu Layer > Rasterize > Shape.
8. Klik Elliptical Marquee Tool dan buatlah bidang seleksi seperti gambar di bawah ini.
9.Tekan tombol Del dan susul dengan menekan tombol Ctrl+D untuk menghilangkan garis seleksi.
10. Klik menu Layer > Layer Style > Drop Shadow. Masukkan setting seperti gambar di bawah ini:
- Ganti size menjadi 18
- Lalu ok
maka akan menjadi seperti ada bayangannya :
Mendesain Tombol
Idealnya, sebuah website pasti dipenuhi oleh tombol-tombol, kita akan mengaktifkan tombol-tombol itu sehingga bisa diklik oleh orang lain. Sekarang, kita akan ciptakan tombol website dengan langkah-langkah berikut ini:
1. Klik Rounded Rectangle Tool
dan pada bagian Radius,
isikan angka 10px . 2. Sebelum kita membuat persegi empat dengan sudut tumpul untuk membuat tombol, aturlah terlebih dulu warna latar depan yang sedang aktif saat ini. Klik ikon warna latar depan dan pilih warna dengan rumus #DAC75E yang akan menghasilkan warna coklat agak tua.
3. Buatlah persegi empat kecil di atas kanvas dan raster jika sudah dengan mengklik menu Layer > Rasterize > Shape. Hasilnya seperti ini:
4. Beri ia sedikit style agar tampak bergaya. Klik menu Layer > Layer Style > Outer Glow. Masukkan setting seperti berikut ini:
- Opacity = 100%
- Range = 53
5. Sedangkan untuk warna Glow-nya, Anda bisa memakai warna oranye dengan rumus seperti ini, #FFA00B.
6. Klik check box Stroke untuk menciptakan garis tepi bagi tombol. Masukkan setting seperti gambaran di bawah ini dan khusus untuk warna stroke-nya, kita pilih warna coklat agak tua dengan rumus #A49455.
Maka tampilan nya akan seperti ini
7. Klik menu Layer > Duplicate Layer untuk membuat tombol dengan desain sama persis dengan tombol yang kita ciptakan tadi.
8. Lakukan langkah 7 dua kali lagi sehingga praktis kita punya empat tombol yang sama mirip. Posisikan keempat tombol itu seperti ilustrasi berikut.
9. Sekarang, kita akan bubuhkan sebuah teks di tiap-tiap tombol web tersebut. Klik Horizontal Type Tool
![clip_image002[6]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ljamIdl27zhGjdSXsQaamsdfvsM6oJtsMLEWwT9zWx4HPeRGHhsC-Jq-bDthWBgWmISMeVSnyUtMWnpXrADEPF6H4WsrR9TzJt_IuCguY5UlflAAOxNMs1X9Fi8BCxXCTjYV1NFY6Jw/s1600-h/clip_image00263.gif "clip_image002[6]"){kind=small}
dan aturlah font seperti pengaturan berikut ini: - Nama Font : Ex Ponto
- Size : 30 pt
- Style : Regular
Atau jika anda ingin mengganti dengan nama Font yang lain pun tak apa.
10. Untuk tombol pertama, buatlah teks “About”. Setelah mengklik Horizontal Type Tool, ketikkanlah teks tersebut tepat di atas tombol pertama, yaitu tombol teratas.
11. Setelah selesai menulis, tekan tombol Ctrl+Enter.
12. Lakukan langkah 10-11 masing-masing untuk ketiga tombol yang lain. Di tiap-tiap tombol, ketikkan “Gallery”, “Activities”, dan “Links”. Lihat hasilnya berikut ini:
Memasukkan Gambar-Gambar Agar tambah meriah
Kita bisa memasukkan gambar-gambar ke dalam website.
Berikut langkah-langkahnya :
1. Ambil gambar pensil atau apa yang anda inginkan, dengan cara klik File – Open – dan cari gambar yang anda inginkan. Di sini saya akan menggunakan gambar pensil seperti berikut :
2. Klik Magic Wand Tool
dan klik tepat di bidang putih yang mengelilingi pensil itu. 3. Tekan tombol Shift+Ctrl+I untuk membalik bidang seleksi. Lihat prosesnya seperti gambar di bawah ini:
4. Tekan tombol Ctrl+C dan beralihlah ke kanvas tempat kita mendesain halaman web tadi.
5. Susul dengan menekan tombol Ctrl+V untuk mem-paste gambar tersebut.
6. Mungkin, setelah Anda paste, gambar tersebut masih berukuran cukup besar. Untuk memperkecilnya, klik menu Edit > Free Transform > Scale. Perkecil sesuai selera.
7. Beri bayangan dengan mengklik menu Layer > Layer Style > Drop Shadow. Masukkan setting berikut ini:
- Opacity = 43%
- Distance = 5, Spread = 0, dan Size = 27
- Noise = 0.
8. Lalu tambahkan foto-foto sesuai dengan selera anda dan lakukan langkah 1-7.
Memasukkan Teks
Pada putaran ketiga ini, kita akan memasukkan teks ke dalam desain web. Teks yang kita masukkan ini berjenis bitmap yang tak mungkin bisa diedit menggunakan software-software pengolah kata jika nanti teks tersebut memang akan diedit, seperti menggunakan Notepad, Dreamweaver MX 2004 dan sebagainya. Pada bagian lain, kita akan belajar cara membuat teks yang bisa diedit menggunakan Dreamweaver MX 2004 atau Notepad.
Ikuti langkah-langkah berikut ini untuk membuat teks judul:
1. Klik ikon warna latar depan dan pilihlah warna kuning dengan rumus #F0FF00.
2. Klik Horizontal Type Tool
![clip_image002[8]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyMV07sD0C0RzTGZJRUAyjEuBG0rKi9zKYWyLlI2PaP_rrxglr7WeFg4zhBqumSHD2tb-ECcZateDeuEWyG1PREovjbwKIS_o04KL_eQiXsArmXhMAd-Zq0h6GI-CbfU-5C1aU4BQNZ44/s1600-h/clip_image00283.gif "clip_image002[8]"){kind=small}
dan pakailah setting huruf seperti ini: - Jenis Font : Edwardian Script ITC 13
- Style : Regular
- Size : 120 pt
3. Ketikkan “My Diary” seperti ilustrasi berikut ini:
4. Klik menu Layer > Layer Style > Outer Glow dan masukkan setting seperti gambar di bawah. Khusus untuk warna outer glow-nya, pakai warna kecoklatan dengan rumus #B59C15.
- Opacity = 100%, Noise = 0%.
- Spread = 0, Size = 13.
- Rage = 50%, Jitter = 0%
5. Kalau sudah, klik check box Stroke dan pakai setting seperti gambar yang tersaji di bawah ini. Untuk warnanya, pilih warna oranye dengan rumus #FFAE00.
- Size = 2.
- Position = Outside.
- Blend Mode = Normal.
- Opacity = 100%.
Maka akan tampak seperti berikut :
Memasukkan Pernak-Pernik
Sebenarnya, kreasi web yang telah kita ciptakan di atas sudah cukup bagus. Tapi sayangnya, kreasi web di atas kurang seramai yang kita inginkan. Untuk menambah keramaian dan keceriaan website tersebut, kita manfaatkan kreasi pernak-pernik yang akan kita ciptakan berikut ini. Sebenarnya, kita tidak perlu susah-susah untuk menciptakan pernak-pernik di atas mulai dari awal sebab kita hanya memanfaatkan fasilitas Custom Shape dari Photoshop CS. Inilah langkah-langkahnya:
1. Klik Custom Shape Tool
dari jendela Tools. 2. Klik anak panah kecil yang ada di option Shape pada toolbar dan pilih
Snowflake 3.
3. Atur warna latar depan dengan warna coklat terang berumus #FCEFD3.
4. Buatlah bentuk salju di atas desain web, mulai dari pojok kiri atas seperti ilustrasi di bawah ini:
5. Perbanyak bentuk salju itu dengan mengklik menu Layer > Duplicate Layer sampai beberapa kali.
6. Bentuk-bentuk salju yang lain dapat Anda modifikasi besar kecilnya sehingga tampak lebih dinamis. Lihat tampilannya berikut ini:
7. Selain salju, kita akan menciptakan pernak-pernik lain, yaitu daun. Klik Custom Shape Tool dan pilih bentuk Leaf 2 seperti gambar di bawah ini.
8. Atur warna latar depan yang aktif dengan warna kuning muda (#F9FDBF) dan buatlah objek leaf 2 di atas kanvas.
9. Klik menu Layer > Duplicate Layer sehingga kita punya dua buah daun.
10. Klik Move Tool
dan untuk objek daun yang kedua, klik menu Edit > Free Transform > Flip Horizontal. Posisikan di samping kanan daun pertama sehingga akan menjadi seperti ini: 
Hasil Akhir
Beginilah hasil akhir yang akan Anda dapatkan begitu proses desain halaman web menggunakan Adobe Photoshop CS berlangsung mulus. Simpanlah hasil kreasi tersebut dengan mengikuti langkah-langkah berikut:
1. Klik menu File > Save As.
2. Simpan dengan nama terserah anda dan dengan tipe jpg/gif tekan tombol Save jika sudah.
Semoga ilmu ini bermanfaat bagi anda
, dan jangan lupa kasih komen di bawah jika anda kesulitan dengan tutorial di atas dan jika anda merasa puas dengan tutorial di atas OK 
.
