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.
* Update – Ikuti juga tutorial konversi PSD menjadi CSS/Html desain web kartunama ini di VisualMagz
Tautan Terkait :
32 Contoh Tren Web Design Seperti Kartunama
cool!
ada ajah idenya richard ini
bikin web mockup pakai macromedia/adobe fireworks
langkah2nya bisa lebih sederhana daripada photoshop
*sekedar saran saja*
thanks Zam!
iya nih sepertinya harus belajar Fw *siap2 nyediain waktu
kalau tutorial belajar html dasar dimana..buat blog atau belajar php kang..
hCard might be a perfect complement to this tutorial, Mr. Fang. One implemented example of it is my about page (http://merdekaataoemati.com/about).
Halah!
hCard’s official wiki:
http://microformats.org/wiki/hcard
baru tau hCard, bukan nya vCard ya? hehehe btw inspirasi nya dari Tim Van Damme – http://timvandamme.com/
Social comments and analytics for this post…
This post was mentioned on Twitter by jurusgrafis: *Tutorial Baru! – Merancang Desain Website Seperti Kartunama http://bit.ly/1uymi9…
mockup-nya sudah selesai saya convert ke XHTML dan CSS…
sekarang sedang membuat tutorialnya… semoga bisa segera di publish ke temen-temen…
wow di tunggu yah Sigit
sorry richard, 960 is not gonna work with this design, and making the text bigger is not gonna help
[...] kelanjutan dari tutorial yang sudah di buat oleh Richard Fang di situs Jurus Grafis dengan judul Merancang Desain Website Seperti Kartunama. Saya tertarik untuk menjawab permintaan Richard di akhir tutorialnya. Bagi yang berbaik hati ingin [...]
[...] Merancang Desain Website Seperti Kartu Nama – Jurus Grafis [...]
hai Richard,
Keren abizzzz… bro…
saya baru tahu kalau tutorial desain lokal disini, biasanya saya ngeCek langsung ke smashing magazine. lanjutkan desainnya.
Mas kalo bisa di bikinkan tutorial membuat desain website dari awal pembuatan desain sampai dengan slashing di photoshop dan bikin css di dreamweaver nya mas …
trimakasi atas bantuannya ….
waduh hebat banget nie karyanya…. ooo ia…
share ya tentang design… ke blog design saya…
http://www.spycer32.blogspot.com
yang buat blog spycer ini masih muda banget jadinya perlu ada pengetahuan yang lebih banyak jadi jangan lupa ya mas2 atau mbak2 share dengan quh ya…. haha….
tutorial merancang desain web seperti kartu nama,bagus sekali mas,cuma saya masih kesulitan dalam penerapannya pada langkah 4 di sana di dijelaskan mengenai pembuatan lipatan bayangan.mas saya punya usul bagaiamana kalau tutorialnya dalam bentuk video?
semoga usulan saya bisa di tindak lanjuti
terima kasih
yep, ditunggu detail tutorialnya *agak2 belum mudeng*
maaf, saya kurang memperhatikan masalah sotoshopnya
gak pernah make hehe. Sepertinya ini konsep one page design yang lagi ngetrend itu yah. Nice, ditunggu demo page nya 
Hasil akhir desain yang cukup bagus nih…. Tapi sayang ngga bisa diajarin ya sampe jadi template cms siap pakai (wordpress atau joomla)
maklum saya hanya interface designer
kalau ke html/css, Sigit VisualMagz udah bikin tutsnya, cek disini
maaf..bisa kasih tw saya, bagaimana biar gambar tidak pecah untuk taro diwebsite.. saya menggunakan software adobe Photoshop. Brp Resolution yg harus dipakai? Menyimpanannya dalam bentuk Format apa (PNG,JPEG, atau GIF)
basically gambar ga akan pecah klo di taro di website, selama ukuran nya pas (jangan asli nya kecil di gedein)
format file itu terserah, tergantung kebutuhan
resolusi sudah pasti harus 72 DPI, untuk lebih jelas bisa baca artikel ini
terima kasih kang
oiya..lebih ringan mana, di save ke format JPEG, GIF atau PNG,.. soalnya saya save ke GIF maka gambarnya menjadi kotak2
kalau untuk foto (banyak gradasi warna) lebih baik jpeg atau png.
kalau banyak warna blok, pilih gif.
untuk masalah size bisa di save for web (quality high), klo jpeg
nice tuts mas Richard..
btw, mo nanya neh..kalo pake flash efektif gak ya untuk website portofolio?
efektif aja bro
tergantung desainer nya juga sih, biasanya yang pake flash untuk portfolio nya memang bisa flash, jadi portfolio nya itu bisa sekalian unjuk kemampuan
kelemahan nya cuma di waktu load aja, ga semua pengunjung akses internet nya bagus
wah..kemarin dah coba berantakan..hhe..
akhirnya nyoba blogging..ini jugamasih berantakan
wah……………….
mas Fang dapet inspirasi dari mana ?? whew..ebat amad.
top gan!!
*ntar tak langsung praktekin.