Desain template web dengan photoshop

1. # DESAIN TEMPLATE WEB DARI PHOTOSHOP#
1. Klik menu File­ New ­ Ok
2. Klik Create a New Layer pada layer Pallete
3. Klik Rectangular Marquee Tool pada tool box

2. 4. Buatlah persegi di layer… seperti dibawah ini:
5. Klik kanan pada seleksi Transform Selection

3. 6. Tentukan ukuran Header yang di inginkan (Misal : W=950px, H=150px) setelah itu
klik tanda
7. Pilih warna Foreground dan background yang di inginkan
8. Klik Gradient Tool pada tool box
9. Klik kiri­ tahan dan tarik pada bagian area yang terseleksi.
10. CTRL_D

4. 11. Buatlah desain seperti dibawah ini…
12. Jika telah selesai mendesain Template Web… maka langkah selanjutnya kita
melakukan Silece pada pagian web yang di perlukan.
13. Tampilkan Ruler (CTRL_R)
14. Buat garis Bantu seperti dibawah ini degan menarik Ruler Horizontal atau Vertikal
seperti dibawah ini:

5. 15. Klik Slice Tool pada Tool Box
16. Potong Bagian yang di Inginkan menggunakan Slice Tool (dengan cara seleksi
bagian yang ingin di potong)

6. 17. Klik menu File – Save For Web – Save

7. Note: Klik Footer dan background nya juga dan cari format file yang di inginkan (cari ukuran file yang
paling kecil)
18. Klik tombol Save ­Save
Klik disini
Format File yang di gunakan
Kapasitas File
Menunjukan Kecepatan Waktu loading
Background
Footer
Nama File
Pilih Images Only
Default Setting
All User Slices

8. 19. Maka hasilnya seperti dibawah ini:
Ganti file name nya:
20. Klik Menu Start – Program – Desain – Macromedia ­ Dereamweaver

9. 21. Klik File – New – Badic Page­ HTML – Create
22. Klik menu Insert ­ Table

10. 23. Tentukan Table Size nya ­ Ok
24. Klik menu File­ Save ­ Save

11. 25. Blok baris pertama sebanyak 3 kolom – Klik kanan Table­Merge Cell

12. 26. Aktif di baris pertama – klik Background URL of Cell – Pilih lokasi tempat
penyimpatan file Images yang anda buat tadi ­ Ok

13. 27. Ganti ukuran H (height) : 150

14. 28. Untuk mebuat Footer cara nya sama seperti membaut Header
Tinggi Header : 150

15. 29. Untuk Memberi Background, klik Page Properties…

16. Maka Hasilnya seprti dibawah ini:
Note: tampilan di atas warna background terputus, di karenakan Ukuran Panjang Background yang dibuat hanya
800px,

17. 30. Klik Page Properties – Background Color­ klik warna paling bawah di warna
background, seperti gambar dibawah ini:
31. Klik Apply – Ok
Background Color anda Klik pada
Warna Background yg paling
Bawah
Klik disini

18. Maka Hasilnya seperti dibawah ini:
32. Blok Kolom atau baris pada Table yang ingin di beri warna – Klik Background
Color ­ pilih warna yang di inginkan.

19. Maka Hasilnya seperti dibawah ini: