Membuat Desain Web Dengan Photoshop CS3

          Postingan kali ini saya akan membahas tentang pembuatan desain web dengan adobe photoshop, memang artikelnya berupa tutorial tapi tak apalah, barang kali bisa dibuat belajar dirumah. Berikut langkah-langkah membuat desain web dengan adobe photoshop:

1. Buka aplikasi Photoshop, buat layer baru dengan klik File => New atau Ctrl + N
2. Buat ukurannya dengan width 1000 pixel dan Height 600 pixel, Resolusi 72 pixel/inch
3. Klik toolbox dan ganti warna foreground color dengan biru (#0038c6) dan background color putih
4. Masih di toolbox, pilih Gradient Tool (G) dan pada keyboard tekan Shift, lalu tekan mouse mulai dari atas dan lepaskan mouse jika sudah berada paling bawah
5. Buatlah garis bantu / Guide dengan, caranya pilih View => New Guide, lihat gambar dibawah.
6. Lalu membuat Header, caranya pada layer klik Create a new layer lalu pada toolbox klik Rectangle Tool lalu klik kanan mouse dan ubah foreground color menjadi putih lalu pilih Paint Bucket Tool (G)
7. Buat garis bantu / Guide lagi untuk membuat kotak logo dan kotak iklan
8. Lalu masukkan logo dan kotak iklan yang sudah anda buat terlebih dahulu
9. Buat garis bantu untuk membuat menu navigas
10. Untuk membuat kotak menu navigasi, caranya sama dengan nomor 5, ubah warna foreground color menjadi biru dan background color menjadi putih. Lalu klik Rectangle Tool, klik kanan mouse lalu pilih Make Selection dan berikan gradasi. Untuk membuat warna gradasi seperti pada nomor 3.
11. Buat teks dengan cara pada pallet layer, klik Create a new layer dan pada toolbox klik Horizontal Type Tool (T)
12. Buat garis bantu lagi untuk membuat kotak sidebar kiri, content / post blog dan kotak sidebar kanan
13. Buat garis bantu lagi untuk membuat Footer
14. Copy kotak menu navigasi pada nomor 10, caranya klik kotak menu navigasi dan tekan Ctrl+J, lalu move ke bawah. Lalu pada menu diatas silahkan klik Edit => Transform => Rotate 180°
15. Selanjutnya potong dengan Slice Tool (K) bagian-bagian seperti body, header, logo, kotak iklan, menu navigasi, sidebar kiri, post blog, sidebar kanan dan footer
16. Lalu pilih File => Save for Web and Devices
17. Untuk mengeditnya dilakukan dengan Adobe Dreamweaver