![Gambar Photoshop Gambar Photoshop](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6rFEx2J-KkNwUB10V4lcQGm8RqsGBtlsTEtfF32C7yLliPYTZeid45ZZOyaLSMdhpvhuIfw31wPhopEFXeAYl1QG6NbHXLQ4LLgwSzr7tFRngosU326jBdQRoTW-1zUi8X9kAXyChcs/s217/image59.png)
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.
![image image](http://lh4.ggpht.com/_4-JmwCnzu_s/TRqATO3J4sI/AAAAAAAAAbo/xDF7Bm-jn1A/image_thumb17.png?imgmax=800)
3. Klik menu Edit > Fill. Pada bagian Use, pilih Foreground Color.
4. Tekan tombol OK dan kanvas Anda akan tampak seperti ini.
![image image](http://lh6.ggpht.com/_4-JmwCnzu_s/TRqHKTJmglI/AAAAAAAAAbw/JPYhd9v1Cq0/image_thumb211.png?imgmax=800)
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
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TRqIqYxPSVI/AAAAAAAAAb4/2oEXpZugjE0/image_thumb22.png?imgmax=800)
![image image](http://lh5.ggpht.com/_4-JmwCnzu_s/TRqJYYlJ-GI/AAAAAAAAAcA/-M1wi_Uta6k/image_thumb27.png?imgmax=800)
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.
![image image](http://lh6.ggpht.com/_4-JmwCnzu_s/TRqW4pXRfPI/AAAAAAAAAcI/8gK3BofqGO8/image_thumb32.png?imgmax=800)
9.Tekan tombol Del dan susul dengan menekan tombol Ctrl+D untuk menghilangkan garis seleksi.
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCDpb8lE7I/AAAAAAAAAcQ/MBbXPaKU1oY/image_thumb381.png?imgmax=800)
10. Klik menu Layer > Layer Style > Drop Shadow. Masukkan setting seperti gambar di bawah ini:
![Photoshop Photoshop](http://lh6.ggpht.com/_4-JmwCnzu_s/TSCEKZ34gyI/AAAAAAAAAcU/N3-auhSvT9c/image8.png?imgmax=800)
- Ganti size menjadi 18
- Lalu ok
maka akan menjadi seperti ada bayangannya :
![Photoshop CS 12 Photoshop CS 12](http://lh4.ggpht.com/_4-JmwCnzu_s/TSCE9fHyEUI/AAAAAAAAAcY/s2WDXCXRdLQ/image15.png?imgmax=800)
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
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCFo8TTszI/AAAAAAAAAcg/tWCBH07rjuM/image_thumb10.png?imgmax=800)
![clip_image002 clip_image002](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCGFEuyoqI/AAAAAAAAAco/s8a1CEbG01I/clip_image002_thumb2.gif?imgmax=800)
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:
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCGpMcWSDI/AAAAAAAAAcw/Yc5QSLnYnkI/image_thumb161.png?imgmax=800)
4. Beri ia sedikit style agar tampak bergaya. Klik menu Layer > Layer Style > Outer Glow. Masukkan setting seperti berikut ini:
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCHFZ9RT2I/AAAAAAAAAc4/qM4eVb1cJvU/image_thumb21.png?imgmax=800)
- 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.
![image image](http://lh4.ggpht.com/_4-JmwCnzu_s/TSCHkHEP2SI/AAAAAAAAAdA/__u1QodZvV0/image_thumb25.png?imgmax=800)
Maka tampilan nya akan seperti ini
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCHvS5hZII/AAAAAAAAAdI/BifLue39hwE/image_thumb29.png?imgmax=800)
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.
![image image](http://lh6.ggpht.com/_4-JmwCnzu_s/TSCH6eLYqVI/AAAAAAAAAdQ/5LaPMkqD8uI/image_thumb34.png?imgmax=800)
9. Sekarang, kita akan bubuhkan sebuah teks di tiap-tiap tombol web tersebut. Klik Horizontal Type Tool
![clip_image002[6] clip_image002[6]](http://lh6.ggpht.com/_4-JmwCnzu_s/TSCIEK-ZGmI/AAAAAAAAAdY/gzLBnvy6QTE/clip_image0026_thumb1.gif?imgmax=800)
- 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:
![image image](http://lh5.ggpht.com/_4-JmwCnzu_s/TSCJVNeUvDI/AAAAAAAAAdg/4kK1MguZAl0/image_thumb38.png?imgmax=800)
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 :
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCJfEWmRVI/AAAAAAAAAdk/Fmgr4AOJ5ns/image601.png?imgmax=800)
2. Klik Magic Wand Tool
![image image](http://lh4.ggpht.com/_4-JmwCnzu_s/TSCKEYUaMEI/AAAAAAAAAds/ZW0883j5U0o/image_thumb44.png?imgmax=800)
3. Tekan tombol Shift+Ctrl+I untuk membalik bidang seleksi. Lihat prosesnya seperti gambar di bawah ini:
![image image](http://lh6.ggpht.com/_4-JmwCnzu_s/TSCKljtn3rI/AAAAAAAAAdw/kDJdrjIMgZs/image701.png?imgmax=800)
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCKt8Bz7HI/AAAAAAAAAd0/6gf7NjsPntA/image761.png?imgmax=800)
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.
![image image](http://lh5.ggpht.com/_4-JmwCnzu_s/TSCK6NBoK4I/AAAAAAAAAd4/M2Awk1jjRkI/image841.png?imgmax=800)
7. Beri bayangan dengan mengklik menu Layer > Layer Style > Drop Shadow. Masukkan setting berikut ini:
![image image](http://lh6.ggpht.com/_4-JmwCnzu_s/TSCLOcZAYCI/AAAAAAAAAd8/XcStOjecz2E/image901.png?imgmax=800)
- 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.
![image image](http://lh6.ggpht.com/_4-JmwCnzu_s/TSCLtzK-zSI/AAAAAAAAAeA/8ZzbhTjdok4/image971.png?imgmax=800)
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] clip_image002[8]](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCMBTaJxpI/AAAAAAAAAeI/knzTZf0QTGE/clip_image0028_thumb1.gif?imgmax=800)
- Jenis Font : Edwardian Script ITC 13
- Style : Regular
- Size : 120 pt
3. Ketikkan “My Diary” seperti ilustrasi berikut ini:
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TSCNnF1WrcI/AAAAAAAAAeM/owpQhRaPUFA/image1031.png?imgmax=800)
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.
![image image](http://lh4.ggpht.com/_4-JmwCnzu_s/TS70uVdM2VI/AAAAAAAAAeQ/WbBduT64aWo/image14.png?imgmax=800)
- 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.
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TS700q5WZWI/AAAAAAAAAeU/tzPrmvVqcYQ/image911.png?imgmax=800)
- Size = 2.
- Position = Outside.
- Blend Mode = Normal.
- Opacity = 100%.
Maka akan tampak seperti berikut :
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TS76a2bZLtI/AAAAAAAAAeY/GgPjaKm7yNA/image1611.png?imgmax=800)
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
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TS78nFwYBfI/AAAAAAAAAeg/FMQ1Vsf5OBg/image_thumb16.png?imgmax=800)
2. Klik anak panah kecil yang ada di option Shape pada toolbar dan pilih
Snowflake 3.
![image image](http://lh5.ggpht.com/_4-JmwCnzu_s/TS79zWkNKLI/AAAAAAAAAek/pWSra84r3jM/image261.png?imgmax=800)
![image image](http://lh4.ggpht.com/_4-JmwCnzu_s/TS79-yWekII/AAAAAAAAAeo/uijopFn6K7w/image321.png?imgmax=800)
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:
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TTAnz0VLALI/AAAAAAAAAe0/UhMwoFKAnN4/image3811.png?imgmax=800)
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:
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TTAoIt00QqI/AAAAAAAAAe4/boJcxk1dfCY/image4713.png?imgmax=800)
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.
![image image](http://lh4.ggpht.com/_4-JmwCnzu_s/TTAobhGZo9I/AAAAAAAAAe8/0BLNMlC-U1w/image5311.png?imgmax=800)
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
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TTAo67bvVuI/AAAAAAAAAfE/zr6P6nsMZzM/image_thumb41.png?imgmax=800)
![image image](http://lh5.ggpht.com/_4-JmwCnzu_s/TTApLhJGZDI/AAAAAAAAAfI/LvKWor3C1Oc/image631.png?imgmax=800)
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.
![image image](http://lh3.ggpht.com/_4-JmwCnzu_s/TTApkj1sH2I/AAAAAAAAAfM/_J5dJiQ662Y/image694.png?imgmax=800)
Semoga ilmu ini bermanfaat bagi anda
![Wink](http://messenger.msn.com/MMM2006-04-19_17.00/Resource/emoticons/wink_smile.gif)
![Thumbsup](http://www.cybergifs.com/faces/thumbsup2.gif)