desain template web dari photoshop

# 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

4.  Buatlah persegi di layer… seperti dibawah ini: 

5.  Klik kanan pada seleksi Transform Selection

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

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:

15.  Klik Slice Tool pada Tool Box 

16.  Potong  Bagian  yang  di  Inginkan  menggunakan  Slice  Tool  (dengan  cara  seleksi bagian yang ingin di potong)

17.  Klik menu File – Save For Web – Save

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

19.  Maka hasilnya seperti dibawah ini: 

Ganti file name nya: 

20.  Klik Menu Start – Program – Desain – Macromedia ­ Dereamweaver

21.  Klik File – New – Badic Page­ HTML – Create 

22.  Klik menu Insert ­ Table

23.  Tentukan Table Size nya ­ Ok 

24.  Klik menu File­ Save ­ Save

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

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

27.  Ganti ukuran H (height) : 150

28.  Untuk mebuat Footer  cara nya sama seperti membaut Header 

Tinggi Header : 150

29.  Untuk Memberi  Background, klik Page Properties…

Maka Hasilnya seprti dibawah ini: 

Note: tampilan di atas warna background terputus, di karenakan Ukuran Panjang Background yang dibuat hanya 800px,

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

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.

Maka Hasilnya seperti dibawah ini: