Merancang Desain Website Seperti Kartunama

Ya kamu tidak salah membaca, kita akan merancang desain website kartunama. Sekarang ini sedang tren di luar sana karena gaya visual nya yang biasanya minimalis dan to the point. Sehingga waktu loading yang di butuhkan lebih cepat di banding website portfolio biasa.

Sebelum kita memulai mendesain untuk website (jenis apa saja, tidak hanya web kartunama ini) kita perlu mengunduh template grid yang sudah menjadi standar jaman sekarang, yaitu 960 Grid System. Dengan menggunakan grid ini kita ...

di bantu, karena ukuran lebar website kita pasti aman di resolusi monitor manapun (dari 1024 x 768 ke atas), dan juga untuk mempermudah proses pengkodingan nantinya.

Mengapa website kartunama? well, selain tren, cara penggunaan website ini juga mudah, tidak banyak embel-embel sana sini dan konsep bentuk nya yang mini sangat menarik dan berbeda, seperti kartunama tetapi online. Biasanya hanya terdiri dari 3-4 menu utama saja, walaupun ada juga yang hanya 1 menu (halaman about saja). Ok, jika sudah siap semua, mari kita mulai!

Langkah 1

Buka template 960 gs yang sudah kamu unduh tadi di photoshop. Untuk website jenis ini, saya menggunakan tipe 12 kolom.

Langkah 2

Buat background dengan menggunakan Rectangle Tool (U). Sisakan bagian atas tetap kosong, karena kita akan membuat 2 bidang background.

Duplikasi layer ‘back1′ sehingga menghasilkan layer ‘back1 copy’, ubah nama layer nya menjadi ‘back2′. Lalu pindahkan ke bawah layer ‘back1′ dan geser ke atas sehingga menghasilkan bidang background yang kedua.

Langkah 3

Gunakan Rectangle Tool lagi dan buat bidang berwarna putih sebagai dasar konten web ini. Atur supaya bidang ini pas berada di tengah dokumen. (caranya mudah tinggal menghitung grid kiri dan kanan lalu samakan jumlahnya). Perhatikan juga pengorganisasian layer kamu, gunakan folder dan namakan setiap layer. Ingat, mungkin saja bukan kamu nantinya yang melakukan proses koding, jadi lebih baik buat dokumen ini mudah di mengerti.

Selanjutnya membuat bagian bawah bidang konten dengan Rounded Corner. Tetap gunakan Rectangle Tool, tekan icon Rectangle Tool sampai muncul list bentuk-bentuk yang bisa kita gunakan, lalu pilih Rounded Rectangle.

Sengaja saya buat terpisah supaya nanti jika konten nya banyak (memanjang ke bawah), maka kita tinggal mengatur shape Rounded Rectangle saja yang masih bersifat vektor dengan sangat mudah.

Langkah 4

Kita akan membuat efek seperti kertas berlipat dari dalam background. Buat bidang diantara layer ‘back1′ dan ‘back2′ dengan menggunakan Rounded Rectangle Tool.

Lalu buat bayangan lipatan nya, masih dengan menggunakan Rounded Rectangle Tool, setelah itu lakukan Masking pada layer tersebut. Cara Masking adalah pilih layer yang mau di masking > klik kanan > Create Clipping Mask.

Buat juga bayangan untuk sisi kanan dengan teknik yang sama, sehingga hasil yang kamu dapat akan menjadi seperti dibawah ini.

Langkah 5

Supaya tidak terlihat kaku, maka kita akan memberikan efek dimensi di dalam bayangan tersebut. Dobel klik layer bayangan tersebut dan berikan Style Gradient Overlay. Aplikasikan juga pada sisi bayangan yang satu lagi, jangan lupa merubah arah gradient nya sehingga terlihat natural.

Langkah 6

Selanjutnya kita membuat bayangan untuk bidang putih, yang perlu di perhatikan adalah intensitas bayangan, jangan terlalu terlihat sekali, cukup sedikit saja dengan pengaturan Opacity. Jadi efek yang di hasilkan akan terlihat lebih lembut dan natural.

Gunakan Soft Brush (B) karena lebih mudah di kontrol dan tidak kaku, daripada langsung memberikan efek Drop Shadow biasa.

Langkah 7

Berikan dimensi pada background dengan menggunakan Soft Brush. Buat layer baru, lalu langsung masking di atas layer ‘back1′. Setelah itu kamu tinggal mem-brush dari kiri ke kanan.

Langkah 8

Sekarang background yang kedua, di bidang ini kita akan memberikan efek cahaya seolah-olah ada di belakang area konten. Caranya masih sama dengan langkah 7.

Langkah 9

Buat tombol menu utama. Untuk saat ini saya menggunakan 3 menu saja, yaitu About, Works dan Contact. Gunakan Rounded Rectangle Tool dan atur posisi nya sehingga jarak setiap tombol sama persis.

Langkah 10

Berikan Layer Style pada ketiga tombol tersebut. Yang pertama kita akan menggunakan Gradient Overlay, untuk menghasilkan dimensi (supaya tidak flat), dan yang kedua kita menambahkan Stroke, agar tombol terlihat lebih tajam. Ikuti pengaturan di bawah ini, lalu Copy Layer Style (caranya : pilih layer tombol > klik kanan) ke setiap tombol.

Saya memutuskan untuk mengatur ulang bentuk tombol menjadi seperti di bawah ini. Menggunakan warna merah pada tombol yang sedang aktif dan warna abu-abu muda untuk yang tidak aktif.

Langkah 11

Namakan tombol tersebut dengan Type Tool, saya menggunakan font Georgia Bold Italic dan setelah itu beri efek Drop Shadow supaya lebih jelas.

Langkah 12

Buat dimensi pada bagian konten area dengan menggunakan Rounded Rectangle Tool, lalu Masking Shape tersebut dengan Gradient.

Langkah 13

Sekarang saatnya kita mengisi bagian konten tersebut, saya menggunakan gaya yang minimal saja. Gunakan foto atau avatar kamu, lalu atur tata letak tulisan.

Yang perlu di ingat adalah ukuran font pada body text, sekarang ini standar nya adalah 14 point, memang 12 point masih terbaca, tetapi saya tidak mau menyulitkan orang yang melihat website kartunama ini.

Hasil Akhir

Selanjutnya tinggal membereskan tiap bagian, saya berusaha membuat nya se-simpel mungkin. Untuk bagian Works, langsung menampilkan portfolio, jika di klik akan muncul LightBox lengkap dengan judul projek. Dan yang terakhir bagian Contact, langsung menampilkan form kontak.

Kamu bisa mengganti bagian Contact, dengan icon social media, seperti Facebook, Twitter dan lain nya untuk memudahkan orang mengontak dan berteman dengan kamu.

Yak! kita sudah selesai, tinggal merapihkan dokumen (menamakan layer dan mengatur folder) lalu siap untuk di berikan ke web developer/programmer, atau lebih baik lagi kalau kamu bisa melakukan pemrograman sendiri.

Bagi yang berbaik hati ingin mengkoding website kartunama ini silakan, tolong beritahu saya dan kita bisa bagikan gratis kepada para pembaca Jurus Grafis, mau sekalian di buat tutorial koding nya di blog kamu juga boleh. Dapatkan dokumen ini (1 Mb) dengan menggunakan tombol unduh di akhir posting.

Tautan Terkait :

32 Contoh Tren Web Design Seperti Kartunama

Merancang Desain Website seperti Kartunama (10)

Hide