Cara Membuat Website / Blog Dengan 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
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.
Read More
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
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.
Sekian dulu cara membuat desain / layout website dengan adobe photoshop, selamat mencoba dan semoga bermanfaat.
