Cara Mebuat Desain Template Website Sendiri di Photoshop

Membuat template di Photshop bisa dipastikan jauh lebih mudah daripada kita membuat template murni melalui web programming seperti CSS, HTML ataupun JS, karena jika kita membuat template di Photoshop maka desain atau bentuk objek (segetiga, kotak, bundar) bisa dibuat dengan mudah tanpa perlu pusing-pusing memikirkan kode CSS.

Membuat template web di Photoshop juga memiliki kelebihan lain, seperti :

• Responsive untuk semua resolusi
• Support semua browser
• Mudah dalam pengerjaan

Itulah beberapa kelebihan yang akan Anda dapatkan jika membuat template website dengan Photoshop. Untuk itulah di artikel ini saya akan mengajak Anda untuk belaajar cara membuat desain template website yang keren dan menarik, hanya dengan menggunakan software / aplikasi Photoshop.

Terkait : Cara Membuat Website

Cara Membuat Template Website

Sebelum memulai, saya harap Anda sudah mempunyai software Photoshop, tidak masalah versi berapapun, dan sebagai contoh disini saya menggunakan Photoshop CS4.

Jika software Photoshop sudah siap, kini saatnya ktia membuat template.

1. Buka Photoshop
   
   
   
   
   Silahkan buat lembar kerja baru dengan ukuran 1366x768. Itu adalah ukuran standar dari Laptop sekarang, jika Anda ingin membuat lebih besar juga lebih baik, namun pastikan masih dengan resolusi 16:9.
   
   
2. Buat Navbar
   
   
   
   
   Disini kita akan membuat 2 Navbar (Navigasi Bar) dan dengan dua warna dan ukuran yang berbeda.
   
   

   Navbar 1 : Tinggi 40px dengan warna #576f6f
   Navbar 2 : Tinggi 60px dengan warna f28858

   
   Susun seperti contoh pada screenshot saya diatas, buat kedua Navbar tersebut di Layer yang berbeda agar mudah saat mengedit template nanti.
   
   
3. Buat Header
   
   
   
   
   Dibawah Navbar akan kita masukkan Header, untuk membuat header pada website kita perlu ukuran yang lebih tinggi, karena Header akan berisi berbagai macam hal penting, misal kita sedang ada promosi produk, maka nanti kita bisa meletakkannya di Header, untuk membuatnya silahkan Anda pilih warna #c8d8d7 lalu beri motif seperti gelombang di akhir header agar template web lebih keren dan tidak monoton.
   
   
4. Buat Featured Menu
   
   
   
   
   Featured Menu adalah tempat untuk memasukkan deskripsi mengenai website Anda, bisa juga untuk menuliskan fitur-fitur yang menjadi kelebihan dari produk / jasa yang Anda tawarkan.
   
   Cara Membuat Featured Menu adalah dengan membagi halaman menjadi tiga, ini bisa Anda lakukan dengan mengukur halaman tersebut, karena tadi kita menggunakan ukuran lebar 1366 px maka kita akan membagi untuk masing-masing fitur dengan lebar 455px. Lalu susun seperti gambar diatas.
   
   
5. Buat Footer
   
   
   
   
   Kita masuk pada tutorial akhir mendesain template yaitu pada tahap pembuatan Footer. Membuat Footer tidak jauh berbeda dengan membuat header, disini kita juga akan menggunakan dua warna dan dua layer :
   
   

   Layer 1 : Warna #f28858 dengan Tinggi 250px
   Layer 2 : Warna #b56642 dengan Tinggi 40px

   
   Setelah itu beri motif pada layer #1 dengan desain mirip seperti yang Anda buat saat desain header template.

Di Tutorial Belajar Cara Membuat Desain Template Website di Photoshop selanjutnya kita akan belajar slicing, yaitu proses memotong desain template sesuai dengan bagian-bagiannya yang meliputi :

• Navbar
• Header
• Featured
• Footer

Jadi jangan lewatkan tutorial membuat template seri kedua ya.