Langkah Awal Dalam Mendesain Template

langkah awal yang harus benar2 anda kuasai dalam merancang website adalah menggambar layoutnya pada Photoshop (program lan juga bisa sih, namun penulis biasa menggunakan program Photoshop). konsep nya sederhana, berikut akan kami jelaskan:

Langkah Perancangan Layout

Bikin bagian Bar Amplifier (Header)...

1. Bikin dokumen baru 760 x 500 pixels

2. Dengan Rounded Rectangle Tool (U) bikin bidang untuk body layout dasarnya, dan satu bidang lagi untuk headernya, radius 4 pixels. Ukurannya lu kira2 aja deeehh sama ukuran canvas.

3. Lu kasi sedikit stroke untuk body dan untuk headernya kasi style dibawah ini:

Stroke 1 pixel warna #000000

4. Lanjut ke membuat bidang mirip bar amlifier... bikin bidang dengan Rounded Rectangle Tool juga, radius = 4 px, tepat diatas bidang header, dengan warna forground putih. Ukurannya lebih kecil dikit dari headernya, ubah nama layernya "bar ampi".

Kalo style sebelumnya masih di Applay, lu clear dulu deh stylenya..masih inget kan caranya..klik kanan di layernya dan pilih Clear Layer Style. Jadi nanti warna path layout bar ampi akan kembali menjadi putih (warna foruground)

5. Nah sekarang pilih Path Selection Tool (A), klik 2 kali pada bidang layer "bar ampi" agar muncul titik pathnya.

6. Pilih tool Delete Anchor Point Tool dan klik pada titik - titik path layout yang ditandai warna merah berikut. Tool ini berfungsi untuk menghilangkan titik path. Jangan kaget dulu kalo tampilan layoutnya berubah menjadi miring.

7. Lanjut pilih Add Anchor Point Tool , klik pada titik tanda merah berikut. Untuk menambahkan titik path layout.

8. Pada titik nomor 1 tarik titiknya ke arah kanan bawah seperti gambar dibawah. Baru lu gunakan Convert Point Tool untuk mengedit (mengkonvert) titik path nomor 1 tadi. Ikuti arah panah untuk mengedit titik point nomor 1.

Kalo posisi titik satu yang udah di tarik tadi masih kurang ngepas, lu bisa geser lagi ke kiri. Jadi biar lengkungan di atasnya agak lebar.

9. Nah sekarang perhatikan titik 2. Dengan Convert Point Tool, klik pada titik path nomor 2 diatas, abis ntu tarik garis horizontal pathnya pada bagian yang ditanda merah ke kanan .

Titik 2

10. Pada bagian ujung kanan layout bar ampi ini, lu bisa rapiin posisinya, dengan teknik yang sama dengan langkah nomor 9 diatas.

11. Oke langkah untuk mengedit Path Layout Bar Ampi sudah selesai, tinggal lu poles aja deee...

Lu kasi style deeh.

Hasilnya...

dah dulu yachhhh.... cukup sekian tutor dari gua. referensi ini gw ambil dari dr.emi