Cara Mudah Mendesain Template Website Dengan Menggunakan Photoshop

Hari ini saya akan membahas tentang bagaimana cara membuat template websit atau blog dengan menggunakan photoshop, Membuat template di Photoshop 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 (segitiga, kotak, bundar) bisa dibuat dengan mudah tanpa perlu pusing-pusing memikirkan kode CSS dan HTML.

Kelebihan membuat template di photoshop :

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

Mari kita mulai cara membuat template website dengan menggunakan photoshop, Jika software Photoshop sudah siap, kini saatnya ktia membuat template.

1.       Buka aplikasi photoshop

Silahkan anda 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

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 gambar diatas, buat kedua Navbar tersebut di Layer yang berbeda agar mudah saat mengedit template nanti.

3.       Buat Header

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, header disini akan membuat tampilan website anda akan menarik.

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 memalui website anda.

Cara Membuat Featured Menu 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

Tahapan ini adalah tahapan akhir pada tutorial 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 anda beri motif pada layer #1 dengan desain mirip seperti yang Anda buat saat desain header template.

Demikianlah tutorial sederhana yang saya berikan kepada anda, semoga dapat bermanfaat buat anda, selamat mencoba.