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

2. Klik toolbox dan ganti warna foreground color dengan biru (#0038c6) dan background color putih

3. 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, lihat gambar

4. Buatlah garis bantu / Guide dengan, caranya pilih View => New Guide, lihat gambar dibawah.

5. 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), lihat gambar dibawah

6. Hasilnya seperti gambar dibawah ini

7. Buat garis bantu / Guide lagi untuk membuat kotak logo dan kotak iklan, seperti berikut

8. Lalu masukkan logo dan kotak iklan yang sudah anda buat terlebih dahulu, seperti contoh dibawah

9. Buat garis bantu untuk membuat menu navigasi, lihat gambar dibawah

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. Hasilnya seperti dibawah ini

12. Buat teks dengan cara pada pallet layer, klik Create a new layer dan pada toolbox klik Horizontal Type Tool (T), lihat gambar dibawah cara menempatkan teks di kotak menu navigasi

13. Buat garis bantu lagi untuk membuat kotak sidebar kiri, content / post blog dan kotak sidebar kanan, lihat caranya dibawah sesuai nomor urut. Untuk membuat kotaknya seperti pada nomor 5.

14. Hasilnya seperti dibawah ini

15. Buat garis bantu lagi untuk membuat Footer, lihat gambar dibawah

16. 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°

19. Dan hasil akhir dari desain website dengan photoshop, seperti gambar dibawah ini. Save dulu.

20. Selanjutnya potong dengan Slice Tool (K) bagian-bagian seperti body, header, logo, kotak iklan, menu navigasi, sidebar kiri, post blog, sidebar kanan dan footer. Dan hasilnya setelah dipotong dengan Slice Tool seperti dibawah ini.

21. Lalu pilih File => Save for Web and Devices

22. Nah selanjutnya untuk mengeditnya dilakukan dengan Adobe Dreamweaver pada tutorial berikutnya