Tutorial kali ini berdasarkan pada projek redesain situs DesainDigital. Kita akan menggunakan Photoshop untuk membuat desain situs minimalis dengan berbasiskan pada grid 960.gs. Kita akan memberikan cukup perhatian pada detail-detail kecil. Kita juga akan menjaga kesinambungan desain dengan mempertahankan gaya setiap elemen agar tampilannya tetap terasa menyatu.
Preview
Sebelum memulai tutorial ini, lihat desain situs yang akan kita peroleh di bawah.
Step 1
Untuk layout situs ini, kita menggunakan grid 960. Jadi, mulai dengan mengambil file layout yang tersedia di 960.gs. Di dalam file zip, buka file PSD di Photoshop. Dalam file telah tersedia beberapa guide dan group layer 12 Col Guide yang semuanya membentuk kolom-kolom. Inti dalam penggunaan guide adalah semua elemen harus berada dalam guide. Anda bisa membandingkannya dengan hasil desain yang kita peroleh di bawah. Semua elemen seperti kotak posting, logo, atau tweet semuanya berada dalam kolom.
Step 2
Isi Background dengan warna latar. Caranya dengan klik Edit > Fill dan pilih Color. Saya menggunakan #e9e6e1 di sini.
Step 3
Untuk bagian atas kita akan memberi ornamen unik. Mulai dengan membuat shape persegi di bagian paling atas. Gunakan warna #e9e4db. Di bawahnya, tambahkan path berbentuk lingkaran. Seleksi path lingkaran, tekan Ctrl + Alt + T untuk menduplikasinya. Geser beberapa pixel ke kanan dengan menekan tombol panah kanan. Ulangi proses transformasi dengan menekan Ctrl + Shift + Alt + T.
Step 4
Tambahkan layer style Drop Shadow.
Step 5
Sekarang kita akan menambahkan sedikit tekstur ke dalam shape. Buat layer baru di atas layer shape. Isi dengan putih. Klik Edit > Add Noise. Jangan gunakan terlalu banyak noise, cukup hingga terlihat ada titik-titik saja. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask. Ubah blend mode ke Multiply dan turunkan oapcity layer ke 70%.
Step 6
Tambahkan logo. Agar terlihat menonjol dibandingkan latarnya, kita tambahkan layer style Stroke pada logo.
Step 7
Buat seleksi ellipse di bawah logo. Isi dengan hitam dan haluskan dengan Gaussian Blur untuk memberi kesan bayangan pada logo.
Step 8
Di sisi kanan, buat sebuah shape rounded rectangle putih. Gambar juga path menggunakan tool pen untuk memberi tampilan bubble speech. Pastikan Anda memilih Add to Shape untuk menggabungkan kedua path.
Step 9
Tambahkan Inner Shadow, Inner Glow, dan Outer Glow. Ketiga styles ini memberi kesan emboss, seolah-olah latar menjorok ke dalam. Beri tulisan tweet terakhir.
Step 10
Masuk ke iconfinder dan cari ikon Twitter. Simpan ikon di bawah kotak tweet.
Step 11
Di bawah ikon Twitter, tambahkan navigasi halaman. Perhatikan bahwa penempatan elemen-elemen ini, teks tweet dan navigasi halaman, harus tetap mengikuti kolom.
Step 12
Sekarang kita akan membuat inset line. Cara membuatnya mudah saja, buat dua garis 1px berwarna hitam dan putih menggunakan tool pencil. Setiap garis berada di layer terpisah. Ubah opacity layer garis hitam menjadi 10% dan garis putih menjadi 50%.
Step 13
Dengan tool eraser lembut hapus kedua sisi garis hingga keduanya tepat berada di dalam kolom. Ini memberikan efek fading yang menarik di kedua sisi garis.
Step 14
Gandakan inset line dan simpan di bawah garis pertama.
Step 15
Tuliskan nama-nama kategori artikel untuk navigasi.
Step 16
Buat lagi garis-garis inset tipis memisahkan setiap kategori.
Step 17
Di sisi kanan, buat sebuah rounded rectangle putih. Di atasnya tambahkan tulisan Search… dengan warna abu-abu terang. Kita memilih warna ini agar tidak terlalu kontras karena bisa mengganggu fokus pada teks lainnya.
Step 18
Buat shape persegi dengan ukuran tepat 8 kolom. Isi artikel akan berada di kotak ini.
Step 19
Tambahkan layer style Drop Shadow.
Step 20
Kita tidak akan menggunakan drop shadow biasa, karena itu terlihat sangat jelek. Jika kita gunakan gunakan di sini, hasilnya akan sangat tidak unik. Kita akan memodifikasi bayangan ini.
Klik kanan daftar layer style di panel Layers dan pilih Create Layer. Langkah ini akan memisahkan bayangan ke dalam layernya sendiri. Tekan Ctrl + T lalu perkecil bayangan, klik kanan dan pilih Warp. Geser kotak di kanan bawah hingga kita peroleh sedikit bayangan yang keluar. Turunkan opacity bayangan ke 15%.
Bayangan seperti ini memberi efek seolah kotak mengelupas keluar dari latar. Unik dan tentunya jauh lebih baik dari Drop Shadow standard.
Step 20
Tambahkan layer style stroke 1px. Walaupun kecil, hanya 1px, ini cukup membantu untuk meningkatkan kontras antara kotak dengan latar.
Step 22
Tambahkan thumbnail artikel dengan ukuran 200×200 px ke dalam kotak. Pastikan Anda memberikan cukup banyak jarak ke sisi kiri dan kanan kotak. Jarak ini mempermudah mata ketika menscan gambar. Tambahkan juga efek Stroke 1px. Gunakan setting yang sama dengan stroke pada kotak artikel. Dengan efek yang sama, kita mempertahankan kesinambungan desain. Jika berbeda, misal warnanya beda atau ukurannya beda, ini berpotensi membingungkan pembaca.
Step 23
Sekarang kita tambahkan juga teks, seperti judul, isi artikel, data penulis, tanggal, dst. Saya tekankan lagi bahwa kita perlu mempertahankan kesinambungan desain. Usahakan agar semua link menggunakan warna yang sama.
Bersama dengan border 1 px pada kotak dan thumbnail, ini menghasilkan kesinambungan desain.
Step 24
Kumpulkan semua layer isi artikel ke dalam sebuah group layer. Ini akan mempermudah ketika kita ingin membuat post lain. Kita tinggal menggandakan group layer tersebut dan mengganti isinya.
Step 25
Buat juga kotak navigasi halaman di bagian akhir artikel. Untuk menjaga kesinambungan desain, gunakan style Stroke 1px yang sama.
Step 26: Sidebar
Buat kotak sidebar dengan ukuran tepat 4 kolom. Jaga kesinambungan desain dengan tetap menggunakan Stroke 1px. Warna teks biasa dan link harus disamakan juga dengan warna-warna yang sudah ada. Seperti saya katakan, ini akan menjaga kesinambungan desain.
Step 27: Footer
Untuk footer, kita tinggal menggandakan shape yang telah dibuat di Step 3. Putar 180 derajat dan perbesar shape rectangle hingga memenuhi seluruh area footer.
Step 28: Box Footer
Buat kotak footer dengan ukuran 4 kolom. Isi dengan judul kotak dan tulisan. Pastikan menggunakan warna teks yang sama.
Step 29: About Us
Saya ingin menonjolkan kotak About Us dengan menambahkan gambar profil saya. Tambahkan foto dan di sebelahnya tambahkan teks This is me dengan font Jellyka Hand Writing. Tulisan ini dipilih untuk memberi kesan personal.
Step 30
Aktifkan warp teks dan pilih Style Arc. Ini akan membuat teks sedikit melengkung dan memberi kesan alami.
Step 31
Tambahkan style Drop Shadow pada gambar profil. Seperti tadi, kita tidak ingin menggunakan drop shadow standar karena sangar buruk. Klik kanan style dan pilih Create Layer. Lakukan proses transformasi warp hingga sebagian bayangan mencuat ke bawah.
Hasil Akhir
Sampai sini, proses desain situs di Photoshop telah selesai. Langkah berikutnya adalah mengubah desain ke format yang ingin diinginkan, bisa berupa HTML dan CSS, atau dalam bentuk theme wordpress. Jika proses coding dilakukan pihak lain, pastikan untuk merapikan setiap layer terlebih dahulu. Namai setiap layer, kelompokkan ke dalam group layer, dan tambahkan data-data lain yang diperlukan.
Saya harap Anda belajar banyak dari tutorial ini. Jika ada pertanyaan silakan tuliskan dalam komentar di bawah.
Wih,ternyata tutorialnya udah ada. Pake studi kasus desain blog ini sendiri pula
Sedikit nanya. Dalam bikin mockup di photoshop sebagai desainer, perlu gak sih kita bikinnya pixel-perfect gitu? Yah setidaknya presisi lah, demi memudahkan programmer mengubahnya dalam bentuk HTML/CSS.. Selama ini saya belum pernah bikin desain untuk dikerjain programmer lain soalnya. Desain sendiri ya di-coding sendiri juga
Sebaiknya pixel perfect. Programmer yang baik tentunya akan memastikan agar hasil codingnya sama persis dengan mockup di Photoshop.
Seperti yang Anda lihat di sini, hasil akhir theme situs ini tidak beda jauh dengan mockup PSD-nya. Berarti proses coding-nya berhasil.
nIce TuTs, Thanks bang jeP. BneR” ajIb TuTsnya bang jeP, jd bs bLajar nI….
Sama-sama.
mantap bg! tutorialnya detail. sangat bermanfaat bg yg berminat menjadi web designer.
Mungkin kedepannya bisa dilanjutkan dgn tutorial coding, msh sangat jarang di Indonesia!
Saya tidak bisa coding. Proses coding situs ini dilakukan oleh teman, kerja saya hanya sampai desain di Photoshop.
saya sepertinya harus membiasakan diri dengan Adobe
Ya, memang sebaiknya para desainer web menguasai Photoshop juga.
Fungsi Photoshop untuk membantu visualisasi desain web. Kalau langsung coding begitu saja, saya tidak yakin hasilnya akan bagus.
Wah wah wah benar2 mantaph nie tutor
Makasih nie
Okay, sama-sama. Silakan dipelajari.
keren mas jeprie…
izin ctrl + s [buat belajar ntar malam]
Boleh. Silakan dipelajari.
terima kasih mas japrie….tutorial seperti ini sangat bermanfaat buat saya….di tunggu tutorial berikutnya…
Tutorial baru di-publish setiap minggu. Tunggu saja.
Ternyata cukup rumit juga untuk mendesain sebuah situs yang saya anggap cukup sederhana ini, Mas Jeprie. Jumlah 31 step ini masih belum ditambah lagi dengan satu proses lagi, yaitu proses konversi dari desain dengan format PSD ke format code-code web HTML dan CSS.
Hem, kalau saya sudah nyerah, hehe….Mending saya serahkan ke ahlinya aja karena saya ndak mudeng blas kalau sudah bicara pemograman web. Saya hanya mengerti kode-kode HTML dasar saja.
Kalau mau mengubah ke theme wordpress ada 3 tahap. Desain mockup di Photoshop, konversi ke HTML/CSS, lalu ke theme wp.
Saya juga tidak bisa coding. Di projek redesain ini, proses coding diserahkan ke teman.
Web nya keren niy mas…mantap, thanks ya, saya follow twitter nya.
Good stuff Jeprie!
I really like this design… minimal, with just the right amount of flare.
Thanks David, nice to see you visit me here.
Too bad I don’t have time to translate this to English. Just wait for my kick ass tut in Psdtuts+.
Nice!
BTW, saya sendiri memilih aliran “mockup in markup”. Jadi mockup dibuat langsung dalam dokumen HTML bukan PSD. Photoshop/GIMP digunakan untuk mengolah grafis/gambar pendukungnya saja.
Mockup dengan photoshop mungkin lebih mudah dikerjakan — daripada dengan kode — tetapi memiliki kekurangan. Misalnya pada masalah pixel prefect, kita tahu browser tidak dapat merender font sebaik pada file gambar. Belum lagi masalah crossbrowser yang tidak terdeteksi sejak dini.
Tetapi PhotoShop masih sangat populer digunakan untuk mendesain web hingga sekarang. Banyak website dengan tampilan menawan dibuat dengan photoshop.
Penggunaan Photoshop memang berfungsi hanya untuk memvisualisasikan desain akhir yang kita peroleh,
Misal dalam kasus desain ini. Di desain ini, sebetulnya hanya ada empat gambar yang digunakan, logo, latar twitter, bayangan, dan this is me. Kalau saya hanya membuat empat gambar itu saja di Photoshop saya pikir akan sulit buat pemrogram untuk mengeksekusinya. Dengan menyerahkan hasil jadi seperti ini, proses komunikasinya pasti lebih mudah.
Kekurangan-kekurangan itu saya rasa diatasi. Yang paling penting kita harus bisa menerima bahwa hasil render di semua browser tidak selalu sama. Saya bahkan tidak men-test desain ini di berbagai browser. Saya cuma nyoba di Chrome, Firefox 3, dan IE7 karena memang itu semua ada di komputer semua.
Ah ya, bisa dikatakan mockup photoshop adalah blueprint yang menjadi konsumsi pihak desainer agar memudahkan proses koding. Untuk klien adalah dokumen HTML yang sudah jadi.
Bahkan saya pernah baca artikel, sebaiknya desainer web tidak memberikan mockup desain dalam format PSD pada klien. Lebih aman jika memberikan dalam format HTML. Ini mencegah klien untuk melakukan perubahan-perubahan yang terlalu ekstrim dan berpotensi merusak.
Jika sudah mengetahui teknik coding, saya rasa mendesain web di Photoshop tidak jadi masalah.
Programmer web sebaiknya tahu Photoshop juga, walaupun sedikit. Besar kemungkinan ada tawaran coding dari PSD.
teknik yg saya lakukan sama seperti Mas ArdianZzZ yaitu langsung di markup HTML, maklum g Sotoshop…
@Raksaka Indra: Ya, semua orang punya cara kerjanya sendiri. Tidak ada yang perlu disalahkan, bagi klien yang penting adalah hasil akhirnya bukan proses.
Saya sealiran dengan Mas Ardianzzz, langsung hajar di HTML. Alasan utamanya: saya tidak begitu mahir menggunakan photoshop.
Dulu sempat nyobba bikin di photoshop, ngikutin tutorialnya M. Khaled di PSDTuts. Setelah jadi ternyata masih dipusingkan juga dengan konversi ke HTML+CSS-nya.
Tapi menurut saya seorang desainer web memang sebaiknya menguasai Photoshop juga. Paling nggak bikin mockup nya aja lah.
BTW, saya belum sempat membaca semua tutorialnya. Besok aja deh, sekalian praktek. Kalau tutorial nggak dibarengin sama praktek susah masuk otak, maklum otak lemot
Memang sebaiknya desainer web bisa Photoshop juga, walaupun sedikit. Ini membantu proses visualisasi desain, terutama ketika bekerja dengan klien.
M. Khaled juga tidak bisa coding. Desainnya yang di tutorial psdtuts+ di-coding oleh orang lain di nettuts+.
Theme terbaru di woothemes, crisp, dibuat oleh desainer yang tidak bisa coding.
Proses coding blog ini juga dilakukan oleh teman. Saya hanya membuat mockup di Photoshop saja.
saya rasa seorang webdesigner harus mengerti betul menggunakan Photosop dibarengi dengan kemampuan coding. karena dua hal ini saling berkatan
Idealnya begitu, tapi tidak harus. Faktanya ada sebagian orang yang sangat bebal dan tidak bisa menguasai keduanya, misalnya saya.
Tepatnya untuk UI Designer.
Desain web cukup kompleks, tidak menyangkut masalah User Interface saja — mungkn ada salah kaprah, yang dimaksud desainer web adalah mereka yang merancang tampilan muka (front end) pada sebuah web — tetapi menyangkut aksesibilitas, usabilitas, arsitektur UX, bahkan internet marketing & SEO.
Kalau berdasarkan definisi ini, contoh desainer web yang bagus siapa ya?
Bukannya internet marketing dan SEO harus terkait dengan perjalanan situs? Jadi, desainer web di sini harus ikut aktif menjaga keberlangsungan situs.
Mantep nih saya bookmark dulu yah bro
Silakan, mudah-mudahan tutorialnya bermanfaat.
wah banyak ketinggalan nih, tiba-tiba desain digital kok makin mantep tampilannya..
terlalu lama tidur di alam nyata jadinya alam maya ketinggalan nih.
kepikiran juga buat ganti tampilan di situs saya, hmm bisa jadi bahan inspirasi saya tutorial ini mas, karena saya kurang perhatiin yang grid2 gituan jadi langsung hajar aja, biar yang coding yang pusing hehe..
keren mas jep!!
hayoo para coding jangan kalah buat tutorial codingnya..*berharap mode on.
Kalau ada programmer web yang ingin meneruskan tutorial ini hingga ke proses coding, saya menyambut baik.
Sayang sekali, saya tidak bisa meneruskan ke sana.
Nice!!! Saya berharap tutorial ini bahkan lebih lagi langsung ke proses pembuatan temanya. Hehehehe.. Komplit kan?
Anyway, apakah di Photoshop bisa langsung di export kata-kata yang digunakan menjadi teks biasa di HTML ya? Sekalian sama CSS nya juga? Could you tell me how to do this?
Saya persilakan kalau ada yang bisa meneruskan tutorial ini hingga ke proses coding-nya. Saya sama sekali tidak mengerti masalah itu.
Photoshop tidak bisa mengekspor teks ke format HTML, apalagi dengan CSS-nya. Paling dengan bantuan plugin, misalnya SiteGrinder. SiteGrinder katanya bisa secara otomatis mengubah desain di Photoshop menjadi HTML/CSS. Saya belum pernah nyoba jadi tidak bisa berkomentar banyak tentang kualitasnya.
Hm… butuh waktu juga untuk membuatnya mulai dari 0 ya?
Saya sendiri berharap ada yang bersedia melanjutkannya. Dari kalangan pembuat tema WordPress. Richard Fang dari Jurus Grafis bisa tidak ya?
Hehehe…
Todong Richardnya saja Mas Jeprie.
Hehehehe…
Ganda kan bisa coding, kenapa tidak diteruskan saja desain ini jadi tutorial. Kalau mau nanti saya kasih file PSD-nya.
Salam kenal mas Jeprie, tutorial dan designnya baik sekali membuat saya jadi pengen belajar..
Tadi saya juga habis dari webnya mas Richard, sama designya webnya bagus sekali.
Semoga ke-2 orang ini bisa jadi panutan saya buat belajar..
Salam kenal juga.
Tentu desain web Richard Fang lebih bagus karena dia memang ahlinya. Saya tidak mendalami desain web, hanya sekadar eksperimen saja.
Kalau dari kalangan pembuat tema Textpattern gak boleh ya?
Silakan kalau mau dibuat TXP. Saya penasaran dengan hasil jadinya.
Justru lebih mantap dong kalau ada versi TXP nya. Hahahaha… Hayo bro Adrian, tunjukkan skillmu.
Saya malah salah manggil nama. Hahaha…
@Bro Ganda,
kan situ ahlinya coding? kalau saya sih ahlinya minta yang sudah jadi
Berarti ini lebih parah lagi ya. Bukan di desain, bukan juga di coding. Maunya minta jadi.
Tapi saya lebih ke Web Apps bro. Bukan ke coding themes.
Mas Jeprie,
Apalagi saya belum pernah mencoba CSS framework 960 itu. 
Erm, butuh waktu lama bagi saya untuk menyelesaikan yang beginian. Hahahaa.. Saya kurang berbakat di sisi desain-desainan.
Saya belum mengerti tahu menghubungkan mockup PSD ini ke CSS 960. Well, I’m not a theme designer.
walah. kalimat saya rancu.
Mantap tutorial ini mas,,
bisa belajar membuat template sendiri nih, kebetulan saya juga punya blog yang menyediakan template blogger >> http://anbu-template.blogspot.com
Salam kenal mas Jeprie. tutorialnya bagus mas, sepertinya belum ada buku dipasaran yang membahas pembuatan mockup, apalagi menggunakan grid960. Kebetulan saya lagi belajar penggunaan grid960.
Ada rencana membuat bukunya mas, khusus pembuatan mockup ?. (saya belajar photoshop pertama kali lewat bukunya mas Jeprie)
Ya, memang setahu saya belum ada buku Ps di Indonesia yang membahas pembuatan mockup situs. Rencana yang bagus.
Saya sendiri sekarang sedang menulis buku desain ikon. Setahu saya, buku Ps yang membahas tentang ini belum ada.
saya ikutan bookmark aja dulu mas, nanti kalo ada pertanyaan ,saya mampir lagi
Silakan bertanya lewat komentar ini.
Mas,bikin donf tutorial membuat web dengan photoshop,yang bermodalkan blank page..
Saya bingung bagaimana ketika file psd di save menjadi html,kemudian dibuka di dreamweaver dapat diberi link??
Saya tidak menguasai proses konversi dari PSD ke HTML. Saya hanya menguasai di sisi desain via Photoshop.
thank bgt atas tutornya ..
sxan mo nanya ne mas,lo disini kan tutor designnya y mas ada recomendasi khusus ga ne lo mo belajar coding mas,tmn mas gitu,.
baru kali ne q nemuin tutor yang gratis,lengkap,bagus bgt pula designnya,,
salam succes mas.
Untuk tutorial coding yang paling lengkap ada di nettuts. Kalau mau belajar desain web lengkap dari Photoshop hingga coding, saya sarankan ikuti tutorialnya Piervincenzo di wegraphics.
wah keren mas jeprie btw gk skalian di mock up ke HTML n CSS nya nih hehehe tanggung mas …
btw nice share
Terima kasih. Sayangnya saya bukan coder. Skill saya hanya terbatas pada desain di Photoshop, tidak pada HTML dan CSS-nya. Jika ada yang tertarik meneruskan tutorial ini, saya persilakan.
mantap mas Jeprie …
sy baru akhir2 ini bikin web pake 960 grid
sebelum2 nya pake jurus kira2
baru mulai bljr 960grid krna situs ini . thanks
jadi pengen belajar nii..
thanks bngt atas tutorialny…
ini buat wordpress bisa ya?
Bisa, ini baru proses coding saja. Mengubah ke CMS biasanya dilakukan setelah dikonversi HTML/CSS.
cara konversinya pakai apa mas? wakh artikelnya bagus2 nih.. udah 2 kali ke desaindigital.com, jd subscriber ah..
waduh, setelah sekian lama browsing2.
akhirnya dapat juga tutrial yang lengkap untuk pemula….
mkasih ya mas…
klu boleh request, cara konversinya ke CSS ya mas…. B-)
Situs ini hanya fokus pada proses desain di Photoshop.
ini berlaku buat templates blogspot juga kah sob?
Ini berlaku untuk semua jenis desain web yang menggunakan grid 960. Proses coding berikutnya yang menentukan hasilnya sebagai theme Blogspot, wordpress, atau HTML biasa.
Makasih sob, meskipun aku kurang jelas. maklum saya masih newbie
mas kalo gitu sekali-kali diajarin juga cara convert atau cara codingnya mas dari photoshop supaya bisa digunakan juga..
atau mungkin ada teman-teman sebelumya yg tau link belajar buat tutorial coding bagi pemula seperti saya sehingga bisa mengubahnya ke css/html..
Salam kenal mas Jeprie..
boleh saya minta file PSD nya ( ngarep mode ON ) sya pengen belajar dengan cara membandingkan hasil kerja saya dngan PSD mas Jeprie
File PSD itu tidak dibagikan karena digunakan dalam desain waktu itu. Sekarang filenya juga sudah hilang.
Beberapa tutorial desain web lain di desaindigital tersedia berikut dengan file PSD. Silakan pelajari yang itu.