desain template web dari photoshop
TRANSCRIPT
![Page 1: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/1.jpg)
# 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
![Page 2: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/2.jpg)
4. Buatlah persegi di layer… seperti dibawah ini:
5. Klik kanan pada seleksi Transform Selection
![Page 3: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/3.jpg)
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
![Page 4: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/4.jpg)
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:
![Page 5: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/5.jpg)
15. Klik Slice Tool pada Tool Box
16. Potong Bagian yang di Inginkan menggunakan Slice Tool (dengan cara seleksi bagian yang ingin di potong)
![Page 6: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/6.jpg)
17. Klik menu File – Save For Web – Save
![Page 7: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/7.jpg)
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
![Page 8: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/8.jpg)
19. Maka hasilnya seperti dibawah ini:
Ganti file name nya:
20. Klik Menu Start – Program – Desain – Macromedia Dereamweaver
![Page 9: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/9.jpg)
21. Klik File – New – Badic Page HTML – Create
22. Klik menu Insert Table
![Page 10: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/10.jpg)
23. Tentukan Table Size nya Ok
24. Klik menu File Save Save
![Page 11: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/11.jpg)
25. Blok baris pertama sebanyak 3 kolom – Klik kanan TableMerge Cell
![Page 12: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/12.jpg)
26. Aktif di baris pertama – klik Background URL of Cell – Pilih lokasi tempat penyimpatan file Images yang anda buat tadi Ok
![Page 13: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/13.jpg)
27. Ganti ukuran H (height) : 150
![Page 14: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/14.jpg)
28. Untuk mebuat Footer cara nya sama seperti membaut Header
Tinggi Header : 150
![Page 15: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/15.jpg)
29. Untuk Memberi Background, klik Page Properties…
![Page 16: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/16.jpg)
Maka Hasilnya seprti dibawah ini:
Note: tampilan di atas warna background terputus, di karenakan Ukuran Panjang Background yang dibuat hanya 800px,
![Page 17: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/17.jpg)
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
![Page 18: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/18.jpg)
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.
![Page 19: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/19.jpg)
Maka Hasilnya seperti dibawah ini:
![Page 20: Desain template web dari photoshop](https://reader038.vdocuments.mx/reader038/viewer/2022110108/589cf3191a28abcc258b5527/html5/thumbnails/20.jpg)