Technology

Bagaimana Mendesain Template Website (Bagian 1)

 

   

Nah jagFamily, kali ini kami akan menunjukkan bagaimana mendesain halaman home sebuah website. Software yang akan kita gunakan adalah Adobe Photoshop dengan versi bebas. Hasil jadi dari eksperimen desain template kita kali ini bisa dicek pada gambar. Silakan klik untuk memperbesar.

Pada percobaan kali ini, kita membuat template dari website panti asuhan. Maka, elemen yang harus ditonjolkan adalah tombol donasi yang seharusnya bisa ditemukan dengan mudah.

Apabila anda ingin coba praktekkan, variasi dari template yang anda bikin nantinya bisa didonasikan pada program SedekahWeb.com untuk disalurkan pada panti asuhan – panti asuhan penerima website gratis dari program SedekahWeb. Selamat mencoba ;-)

Langkah 1. Kita akan mulai dengan membuat canvas yang cukup besar. Buka Photoshop anda, kemudian atur canvas baru dengan rasio Width x Height : 1020 x 1725 piksel.

Langkah 2. Selanjutnya, kita buat background. Fill Layer dari background dengan warna abu-abu solid (#e6e6e6). Caranya, pilih menu Layer > New Fill Layer > Solid Color. Kemudian, buat Shape lagi berwarna kuning cerah (#ffcb05) dengan tinggi 70 px untuk bagian navigasi header. Terakhir, buat sebuah Shape dengan tinggi 500 px untuk background slider. Beri warna merah velvet (#c73047).

Langkah 3. Sekarang kita fokuskan pada pembuatan bagian header. Untuk menu-menu navigasi, kita bisa gunakan font Arial Bold dengan ukuran 12px. Sedangkan untuk logo panti, kita bisa gunakan LogoType dengan font Arial Regular ukuran 24px. Agar lebih sinergi, warna font bisa kita set jadi merah velvet seperti warna background slider.

Langkah 4. Berikutnya kita buat tombol di samping kanan menu navigasi. Melalui Rounded Rectangle Tool (U), buat bentuk memanjang. Kemudian tambahkan Layer Style berupa Gradient Overlay pada shape pertama yang telah kita buat. Warna 1 isi dengan #b82031, sedangkan warna 2 isi dengan #c73047.

Langkah 5. Tambahkan teks “Unduh Proposal” di atas tombol. Untuk memberi kesan detail, beri Layer Style berupa Drop Shadow warna hitam (#000000) dengan Distance 1 px dan Opacity 30% pada teks tersebut. Sekarang buat 1 lagi tombol dengan Gradient Overlay, di mana warna 1 #1f1f1f dan warna 2 #2e2e2e. Tambahkan teks “Detail Program”.

Langkah 6. Gunakan Rounded Rectangle Tool (U) untuk membuat bentuk baru dengan tinggi 340 px dan lebar 700 px. Warnai dengan abu-abu gelap (#2d2d2d).

Langkah 7. Sekarang, kita akan menambah pita (ribbon) untuk mempercantik background slider. Buat shape baru dengan Rectangle Tool, tinggi 40 px dan lebar 716 px. Beri warna kuning (#ffcb05) yang selaras dengan warna background header.

Langkah 8. Kemudian buat shape lagi untuk efek lipatan pita. Atur tinggi 40 px dan lebar 8 px. Beri warna kuning yang lebih gelap (#a68500), kemudian taruh di belakang shape kotak kuning pertama. Terakhir, Transform Path kemudian Skew shape ke bawah (lihat contoh gambar).  Duplikat layer shape tersebut dan pindahkan ke bagian pita paling kanan, kemudian Transform Path dan Flip Horizontal.

Langkah 9. Isi background slider dengan konten. Untuk bagian ribbon, tambahkan teks judul. Gunakan font Arial Bold 18 px dengan warna abu-abu gelap (#333333). Kemudian masukkan gambar dengan ukuran 435×240 piksel. Tambahkan pula satu paragraf teks di sebelah gambar dengan font Arial Regular 12 px. Beri warna putih (#ffffff).

Langkah 10. Buat tombol “Read More” untuk konten slider. Caranya, duplikat tombol yang sudah kita buat pada langkah 4, kemudian ganti warna Gradient Overlay dengan warna 1 (#c79f00) dan warna 2 (#ffcb05). Taruh tombol di bawah paragraf slider.

Langkah 11. Tambahkan teks di bawah slider untuk menonjolkan langkah – langkah melakukan donasi. Gunakan font BebasNeue ukuran 70px dengan warna abu-abu gelap (#2d2d2d) sebagai judulnya. Jika Anda belum mempunyai font BebasNeue, Anda bisa download dulu di situs DaFont.com.

Langkah 12. Tambahkan 3 shape persegi panjang berukuran 250 x 150 piksel berwarna merah velvet (#c73047). Buat shape tersebut sejajar dengan jarak yang sinergi. Kemudian tambahkan garis penghubung antara persegi panjang tersebut. Gunakan warna abu-abu gelap (#2d2d2d).

Langkah 13. Sekarang tambahkan teks ke dalam kotak merah velvet. Gunakan font Arial Regular 12px berwarna putih. Kotak pertama isi dengan teks sederhana. Kotak yang kedua akan kita isi dalam bentuk list. Melalui Ellips Tool (U), buat beberapa lingkaran kecil berwarna putih (#ffffff) sebagai bullet. Terakhir tambahkan angka di kanan bawah kotak. Gunakan font Georgia Italic ukuran 60px dengan warna pink gelap (#992536).

Langkah 14. Pada kotak terakhir, tambahkan teks dan angka 3 di pojok kanan bawah. Kemudian buat tombol donasi menggunakan Rounded Rectangle Tool. Panjang 200 px, dan lebar 48 px. Kemudian tambahkan Layer Style berupa Gradient Overlay dengan warna 1 (#c79f00) dan warna 2 (#ffcb05). Tambahkan Drop Shadow warna hitam (#000000) dengan Distance 1 px, Angle 90, Opacity 50%.

Langkah 15. Tambahkan icon “Coin”. Anda bisa mencarinya dulu di situs IconFinder.com. Kemudian masukkan teks atas dengan font Arial Bold 18px dan teks bawah dengan font Arial regular ukuran 12px. Beri keduanya warna abu-abu gelap (#2d2d2d2). Tambahkan Layer Style berupa Drop Shadow seperti pada langkah 5. Tambahkan juga efek Color Overlay dengan warna abu-abu gelap (#2d2d2d) pada icon “Coin” agar lebih selaras.

Langkah 16. Buat 2 tombol lagi dan posisikan keduanya di bawah kotak merah velvet kedua (di tengah halaman). Sama seperti langkah 4 dan 5.

Langkah 17. Pencapaian kita sampai sejauh ini bisa dicek pada Gambar 17 di bawah ini.

Nah JagFamily, desainnya saat ini boleh disimpan dulu. Karena bagian 2 akan kita lanjutkan besok. Saat ini, kelanjutan dari artikel ini bisa dibaca di laman berikut: Bagaimana Mendesain Template Website (Bagian 2). Sekaligus nanti pada bagian – bagian selanjutnya, kita juga akan belajar bagaimana mengaplikasikan desain ini hingga jadi sebuah website yang running. Menarik bukan? Jadi jangan sampai dilewatkan ya ;-)

Dapatkan Segera! Video Marketplace Domination: Cara Sukses Jualan di Tokopedia dan Bukalapak. Download Now!


Artikel Terkait

4 komentar

  • 7 December 2012 - pukul 19:34

    terimakasih informasinya sangat bermanfat.’
    sukses selalu pak…

    • Syahrul Munir
      23 December 2013 - pukul 19:10

      sama sama Pak :)
      sukses juga buat Anda

  • 24 April 2014 - pukul 13:18

    mkasih infonya sob..lagi nyari pixel2 untuk ukuran gambar .. dan nemu di sini ..sangat bermanfaat..

Berikan Komentar

Your email address will not be published. Required fields are marked *