Desain Web: Membuat Desain Website di Photoshop

Tutorial desain website untuk membuat layout website solid dark yang mendetil dengan menggunakan Photoshop.

Siapa bilang desain website itu susah? Buktikan dengan mengikuti tutorial desain website yang disajikan secara mendetil oleh Sribu.com.

Sebagai website desain yang menjembatani desainer-desainer Indonesia dengan calon client dari seluruh belahan dunia, Sribu selalu serius menggarap desain website Sribu.com. Tujuannya, selain untuk memudahkan pengunjung web menemukan informasi yang mereka cari, tentu saja agar para pengunjung betah berlama-lama menjelajahi website desain crowd-sourcing pertama di Indonesia ini.

Jangan salah lho, sribuddies. Untuk merumuskan desain website yang tepat, ada banyak hal yang perlu dipertimbangkan, bukan hanya sekedar estetika saja. Struktur informasi menjadi salah satu hal terpenting yang mesti diperhatikan, selain tentunya eksekusi desain yang sesuai dengan konsep.

Pertanyaannya sekarang, sebenarnya susah nggak sih membuat desain website, kalau sebelumnya sribuddies nggak punya background web desainer? Jawabannya, gampang-gampang susah, karena tidak seperti desain grafis, desain website memiliki detil yang cukup banyak, apalagi kalau sribuddies mau membuat sendiri icon-icon dan button-button webnya. Kabar baiknya adalah, sama seperti desain grafis, desain website juga banyak menggunakan program desain yang umum, seperti Adobe Photoshop. Contohnya nih, dalam tutorial kali ini, Sribu akan membagikan tips dan trik membuat desain website solid dark secara mendetil dengan menggunakan Photoshop. Tutorial ini memuat cukup banyak detil teknis, seperti pengunaan spacing yang tepat, typografi dan pemilihan warna. Jadi, sribuddies bisa belajar banyak tuh, dan coba-coba mengembangkan kreativitas desain sribuddies sendiri deh.

Hasil akhir yang akan kita dapatkan nanti akan terlihat seperti ini:

Contoh Desain Website

 

Keren kan, sribuddies? Langsung praktik, yuk! (Dialihbahasakan dari situs ini: URL)

Untuk memudahkan, sribuddies bisa mengunduh beberapa materi berikut ini:
- 960 Grid System
- Icons

Langkah 1: Menentukan Struktur Desain Website

Sebelum kita mulai, sribuddies perlu mengunduh 960 Grid System untuk memudahkan pembuatan guideline. Setelah diunduh, buka file “960_download\templates\photoshop\960_grid_12_col.psd”. Setelah itu, pastikan tampilan Ruler dan Guidelines kita aktif di Photoshop; lakukan dengan cara:
- Ctrl + R (untuk mengaktifkan Ruler)
- Ctrl + ; (untuk mengaktifkan Guidelines)

Lalu, tekan Ctrl + Shift untuk mengubah ukuran kanvas, seperti pada gambar di bawah ini.

tutorial desain website

Selanjutnya, dengan menggunakan Paint Bucket Tool (tekan G), tutupi layer background dengan warna #242b30.

Sekarang, sribuddies perlu membuat beberapa folder. Tujuan pembuatan folder ini adalah, agar pekerjaan desain website dapat lebih terorganisir. Jangan lupa untuk mengimplementasikan sistem ini pada semua desain yang sedang sribuddies gunakan ya. Percaya deh, hal ini akan sangat membantu sribuddies jika suatu saat nanti ada desain tertentu yang perlu diedit. Sistem folder-nya akan tampak seperti di bawah ini.

tutorial desain website

Nah, setelah semua langkah tersebut dijalankan, kita siap mulai proses desain website nih.

Langkah 2: Mengerjakan Header

Supaya seragam, ubah nama folder yang memuat layer 1 menjadi “Header”, dan ubah nama layer 1 menjadi “header_bg” (pastikan sribuddies sudah menyelesaikan proses pembuatan folder-folder seperti yang dibicarakan pada langkah 1 di atas). Setelah itu, buat guideline baru; caranya, pilih View -> New Guide, dan atur posisi menjadi 100px, dengan orientasi Horizontal. Tampilannya akan tampak seperti ini.

tutorial desain website

Pilih Rectangle Marquee Tool (tekan M), dan buat area seleksi seperti yang tampak pada screenshot di bawah, lalu timpa dengan warna #ffffff.

tutorial desain website

Tambahkan dengan Blending Option berikut ini:

Drop Shadow

tutorial desain website

Gradient Overlay
- Linear Gradient
- Angle: 90
- #171c20
- #22292f

tutorial desain website

Stroke
- #0d1012

tutorial desain website

Maka, tampilannya akan seperti ini:

tutorial desain website

Langkah 3: Membuat Logo

Buat folder baru di dalam folder Header, dan beri nama “Logo”. Ke depannya, masukkan semua layer yang berhubungan dengan logo ke dalam folder tersebut.

Sekarang ini, kita akan membuat judul website atau logo, jadi pilihlah Text Tool (tekan T), dan coba untuk membuat teks yang sama dengan yang tampak pada screenshot di bawah (perhatikan tipe, ukuran, warna font, dan lainnya).

tutorial desain website

Tambahkan Blending Option berikut ini:

Drop Shadow

tutorial desain website

Inner Shadow

tutorial desain website

Gradient Overlay
- Linear Gradient
- Angle: 90
- #929292
- #bcbdbd Location: 30%
- #dfdfdf Location: 50%
- #dfdfdf Location: 100%

tutorial desain website

Hasilnya akan tampak seperti di bawah ini:

tutorial desain website

Sekarang, setelah kita sukses menggayakan teks tersebut, gimana kalau kita membuat efek sinar untuk menjadikan teks tersebut terlihat semakin menonjol, sribuddies? Caranya gampang kok. Buat layer baru di bawah layer text, dan beri nama “light”. Lalu, buat area seleksi seperti tampak pada screenshot di bawah ini.

tutorial desain website

Atur warna foreground menjadi #ffffff, pilih Brush Tool (tekan B), lalu klik kanan pada area pengerjaan untuk menampilkan pilihan brush seperti di screenshot ini.

tutorial desain website

Aplikasikan brush seperti tampak pada screenshot di bawah ini untuk membuat efek radial yang menarik, yang akan menonjolkan logo kita.

tutorial desain website

Atur layer menjadi Soft Light dengan opacity 80%.

tutorial desain website

Taraaa! Hasilnya udah cakep belum nih, sribuddies? Kalau sudah, lanjut yuk dengan membuat navigasi.

Langkah 4: Membuat Navigasi

Buat folder baru di dalam folder Header, dan beri nama “Navigation”, yang nantinya akan memuat semua layer yang berhubungan dengan navigasi website kamu. Langkah selanjutnya adalah membuat tautan navigasi, jadi pilihlah Text Tool (tekan T), dan tuliskan teks seperti tampak pada screenshot di bawah ini (perhatikan jenis, ukuran, warna font dan lainnya).

tutorial desain website

Dalam screenshot tersebut, jika sribuddies perhatikan, tautan Home agak berbeda untuk menggambarkan kondisi tautan aktif. Untuk tautan lainnya, warna font yang digunakan adalah #b6aefd.

Lalu, tambahkan Blending Option berikut ini khusus pada tautan Home.

Drop Shadow

tutorial desain website

Color Overlay
- #232a2f

tutorial desain website

Sekarang, kita buat penggayaan untuk tautan aktif yuk. Dalam hal ini, yang akan kita gunakan sebagai contoh adalah tautan Home. Buat layer baru di bawah text layer Home. Pilih Rounded Rectangle Tool (tekan U), dan atur radius 5px.

tutorial desain website

Tambahkan Blending Options berikut ini:

Drop Shadow

tutorial desain website

Inner Shadow

tutorial desain website

Gradient Overlay

Ulangi langkah yang sama seperti yang kita terapkan pada saat pembuatan logo, seperti pada screenshot di bawah ini.

tutorial desain website

Stroke
- #13181b

tutorial desain website

Langkah 5: Membuat Slideshow

Buat Guidelines baru; caranya adalah, pilih View -> New Guide, dan atur posisi pada 140px, dengan orientasi Horizontal. Lalu, ulangi prosesnya, dan atur pada posisi 440px.

Sekarang, kita akan membuat “holder” dari slideshow kita. Atur warna shape menjadi #171c20, lalu pilih Rounded Rectangle Tool (tekan U), dan atur radius 5px. Gambarkan bentukan yang sama seperti pada screenshot.

tutorial desain website

Lalu, tambahkan dengan Blending Options berikut ini.

Drop Shadow

tutorial desain website

Kemudian, buat area seleksi pada bentukan yang baru saja kita buat dengan menekan Ctrl + click pada bentukan di panel layer. Pilih Select -> Modify -> Contract, lalu kontraksikan layer pada 5px. Lalu, pindahkan (drag) beberapa guidelines ke batas-batas sisi kiri, kanan, atas dan bawah seperti yang tampak pada screenshot.

tutorial desain website

Pilih Rounded Rectangle Tool (tekan U), dan atur radius menjadi 5px. Untuk warnanya, pilih saja #36414a. Sebenarnya, warna bentukan ini tidak akan berpengaruh banyak, karena toh bentukan ini nantinya hanya berfungsi sebagai holder dari image slideshow kita saja.

tutorial desain website

Kemudian, tambahkan Blending Options berikut ini.

Inner Shadow

tutorial desain website

Inner Glow
- #424f5a

tutorial desain website

Stroke
- #111417

tutorial desain website

Nah, hasilnya akan tampak seperti ini, sribuddies.

tutorial desain website
Langkah selanjutnya adalah, membuat folder baru di dalam folder Slideshow, dan beri nama Divider. Pastikan folder ini berada di atas layer bentukan yang baru saja kita buat ya sribuddies.

Untuk membuat pemisah (divider), yang perlu kita lakukan adalah memilih Rectangular Marquee Tool (tekan M), dan ikuti panduan yang tampak pada screenshot di bawah ini.

tutorial desain website

Kita akan membagi area tersebut menjadi dua, di mana di sisi kiri akan digunakan sebagai tempat untuk memuat deskripsi image pada slideshow yang juga akan menampilkan tombol-tombol “Next” dan “Previous”, sementara di sisi kanan akan menjadi tempat tampilnya gambar.

Kita mulai dengan sisi kiri dulu ya, sribuddies. Buat folder baru di dalam folder Slideshow, dan beri nama folder baru tersebut “Left”.

Lalu, pilih Rounded Rectangle Tool (tekan U), dan atur radius menjadi 5px. Untuk penempatan bentukan-bentukan tersebut, sribuddies dapat mengikuti panduan seperti tampak pada screenshot ini.

tutorial desain website

Tambahkan dengan Blending Options berikut ini.

Gradient Overlay
- Style: Linear
- #242b31
- #36414a

tutorial desain website

Hasilnya bisa dilihat pada screenshot di bawah ini.

tutorial desain website

Nah, sekarang buat layer baru, dan beri nama “Header”. Pilih Rounded Rectangle Tool (tekan U) dengan radius yang sama, dan ikuti panduan peletakannya sesuai dengan screenshot di bawah ini.

tutorial desain website

Lalu, tambahkan Blending Options berikut ini.

Inner Glow
- #424f5a

tutorial desain website

Gradient Overlay
- Style: Linear
- #21282d
- #2f3840

tutorial desain website

Stroke
- #111417

tutorial desain website

Hasilnya akan seperti ini, sribuddies.

tutorial desain website

Selanjutnya, kita akan menambahkan teks pada header tersebut, jadi pilihlah Text Tool (tekan T), dan tuliskan teks dengan cara yang sama seperti yang tampak pada screenshot di bawah ini.

tutorial desain website

Duplikasikan layer teks tersebut, dan tekan tuts panah ke bawah satu kali.

Lalu, tambahkan Blending Options berikut ini.

Gradient Overlay
- Style: Linear
- #d4d4d4
- #ffffff

tutorial desain website

Hasilnya akan seperti screenshot di bawah ini.

tutorial desain website

Kini, giliran kita menambahkan teks deskripsi nih sribuddies. Jadi, pilih lagi Text Tool (tekan T), dan tuliskan teks dengan cara yang sama seperti yang tampak pada screenshot di bawah ini.

tutorial desain website

Setelah itu, kita tinggal menambahkan button “Read more”. Caranya, buat folder baru di dalam folder Slideshow dan beri nama “Readmore”. Pilih Rounded Rectangle Tool (tekan U), dan atur radius menjadi 5px. Letakkan bentukan seperti tampak pada screenshot di bawah ini.

tutorial desain website

Sekarang, saatnya kita buat button untuk Next dan Previous nih, sribuddies. Buat folder baru di dalam folder Slideshow dan beri nama “Prev_next”. Pilih Rounded Rectangle Tool (tekan U), dan atur radius menjadi 5px. Letakkan bentukan seperti tampak pada screenshot.

tutorial desain website

Tambahkan dengan Blending Options berikut ini.

Drop Shadow

tutorial desain website

Inner Shadow

tutorial desain website

Inner Glow

tutorial desain website

Gradient Overlay
- Linear Gradient
- Angle: 90
- #929292
- #bcbdbd Location: 30%
- #dfdfdf Location: 50%
- #dfdfdf Location: 100%

tutorial desain website

Stroke
- #161b1f

tutorial desain website

Nah, hasilnya akan seperti ini nih, sribuddies.

tutorial desain website

Sekarang, kita tambahin anak panah ke kiri dan ke kanannya ya, sribuddies. Pilih Custom Shape Tool (tekan U), lalu cari anak panah seperti yang tampak pada screenshot di bawah ini.

tutorial desain website

Letakkan anak-anak panah tadi dengan mengacu pada screenshot di bawah ini.

tutorial desain website

Lalu, tambahkan Blending Options berikut ini.

Drop Shadow

tutorial desain website

Gradient Overlay
- Linear Gradient
- Angle: 90
- #21282d
- #2f3840 50% dan 100%

tutorial desain website

Hasilnya kira-kira akan tampak seperti ini, sribuddies.

tutorial desain website

Nah, sekarang saatnya sribuddies membongkar koleksi-koleksi desain grafis sribuddies selama ini, dan tampilkan sebagai image slideshow. Lalu, pada panel layer, buat lagi satu layer baru di atas layer image_holder, dan tautkan semuanya bersama-sama. Cara menautkannya bisa dilihat pada screenshot berikut ini.

tutorial desain website

Biar tampilan image slideshow kita semakin menarik, gimana kalau kita tambahkan beberapa efek, sribuddies? Hmmm, gimana kalau kita tambahkan efek shadow saja, biar ada kesan 3D-nya. Caranya gampang kok, pilih Pen Tool (tekan T), lalu tinggal ikuti cara-cara membuat shapenya sesuai dengan screenshot di bawah. Oh ya, jangan lupa untuk mengisinya dengan warna #000000 ya, sribuddies.

tutorial desain website

Sekarang, pilih layer, lalu pilih Filter -> Blur -> Gaussian Blur, dengan pengaturan radius 5.0px. Pada panel layer, atur opacity layer menjadi 80%. Begini deh jadinya.

tutorial desain website

Langkah 6: Membuat “What I Do”

Pilih folder What I Do. Pertama-tama, kita akan membuat header What I Do, jadi pilih Text Tool (tekan T), dan tuliskan teks sesuai dengan panduan pada screenshot berikut.

tutorial desain website

Lalu, tambahkan Blending Options berikut ini.

Drop Shadow

tutorial desain website

Gradient Overlay
- Style: Linear
- #d4d4d4
- #ffffff

tutorial desain website

Sekarang, saatnya mempersiapkan file icon yang telah sribuddies unduh pada saat awal nih. Kita akan menambahkan 4 folder baru di dalam folder What I Do. Namai masing-masing folder dengan “I Capture Smiles”, “I Design Website”, “Awards I Receive”, dan “I Love to Socialize”. Kesemuanya merupakan folder-folder terpisah ya, sribuddies. Setelah itu, ikuti panduan peletakan teks seperti tampak pada screenshot di bawah ini.

tutorial desain website

Setelah semua langkah selesai dilakukan, maka tampilannya akan seperti screenshot ini.

tutorial desain website

Langkah 6: Membuat Divider

Pilih folder Divider; di dalamnya masukkan sebuah folder baru yang diberi nama “lines”. Kita perlu membuat 2 garis setebal 1px sebagai divider, yang akan ditambahkan dengan beberapa Blending Options untuk membuat tampilannya semakin menarik. Untuk membuat garis, bisa kita lakukan dengan cara menggunakan Line Tool (tekan U). Untuk garis pertama, gunakan warna #111417, sementara untuk garis kedua, gunakan warna #364148.

tutorial desain website

Pilih Rectangle Tool (tekan U), letakkan seperti tampak pada screenshot, dan atur ulang layer fill menjadi 0%.

tutorial desain website

Lanjutkan dengan menambahkan Blending Options berikut ini.

Gradient Overlay

tutorial desain website

tutorial desain website

Duplikasi layer, karena kita akan sedikit mengubah pengaturan Gradient Overlay-nya menjadi seperti tampak pada screenshot.

tutorial desain website

- #242b30

tutorial desain website

Setelah semua rampung, tampilan yang akan sribuddies dapatkan akan menjadi seperti ini.

tutorial desain website

Langkah 7: Membuat About Me

Pilih folder About Me. Karena kini kita akan menambahkan header dan informasi About Me, maka pilih Text Tool (tekan T), lalu tuliskan teks sama seperti yang tampak pada screenshot. Kali ini, pengaturan yang digunakan untuk teks sama dengan yang digunakan di bagian What I Do.

tutorial desain website

Langkah 8: Membuat My Portfolio

Pilih folder My Portfolio. Sekarang kita akan menambahkan header My Portfolio , jadi pilihlah Text Tool (tekan T), dan tuliskan sama dengan petunjuk yang tercantum pada screenshot di bawah ini.

tutorial desain website

Kemudian, pilih Rectangle Tool (tekan U), dan letakkan bentukan seperti tampak pada screenshot.

tutorial desain website

Tambahkan dengan Blending Options berikut ini.

Drop Shadow

tutorial desain website

Stroke
- #161b1f

tutorial desain website

Sekarang, sribuddies tinggal tempatkan sampel image di atas layer ini, dan kemudian tautkan dengan cara yang sama seperti yang kita lakukan ketika membuat slideshow.

tutorial desain website

Terakhir, kita akan menambahkan informasi My Portfolio. Pilihkan Text Tool (tekan T), dan tuliskan teks sesuai dengan petunjuk pada screenshot di bawah ini.

tutorial desain website

Langkah 9: Membuat Footer

Pilih folder My Portfolio. Sekarang, kita akan membuat background untuk area footer, jadi yang perlu sribuddies lakukan adalah memilih Rectangle Tool (tekan U) dan mengatur warna menjadi #171c20. Letakkan bentukan sesuai dengan petunjuk pada screenshot di bawah ini.

tutorial desain website

Tambahkan Blending Options berikut.

Outer Glow
- #111417

tutorial desain website

Stroke
- #364148

tutorial desain website

Selanjutnya, kita akan menambahkan teks copyright pada sisi kiri, serta beberapa tautan pada sisi kanan. Jadi, pilih Text Tool (tekan T), dan tuliskan teks sesuai dengan petunjuk pada screenshot di bawah.

tutorial desain website

Langkah 10: Menambahkan Cahaya di Latar Belakang

Kita sudah sampai pada tahap akhir lho, sribuddies. Namun, sebelum semuanya rampung, perhatikan deh bagaimana datar dan tak menariknya latar belakang website kita. Makanya, pada langkah terakhir ini, kita akan memberi sedikit penerangan di area slideshow, dan juga di area tengah.

Pilihlah folder Background, lalu tambahkan dua layer baru bernama “Slideshow_light” dan “Whatido_light”.

Pertama-tama, pilih dulu layer Slideshow_light. Lalu, pilih Rectangular Marquee Tool (tekan M), dan buat area seleksi seperti tampak pada screenshot.

Untuk menciptakan efek cahaya, pilih Brush Tool (tekan B) dengan ukuran 700, dan tingkat kekerasan 0%. Aplikasikan brush pada bagian tengah atas area seleksi, kemudian pada panel layer, atur blend mode menjadi “Soft Light” dengan opacity 70%.

tutorial desain website

tutorial desain website

Sekarang, coba cek screenshot di bawah deh. Tampilannya terlihat lebih menarik kan, sribuddies?

tutorial desain website

Kemudian, untuk layer Whatido_light, pilih kembali Rectangular Marquee Tool (tekan M), dan buat area seleksi seperti tampak pada screenshot di bawah ini.

tutorial desain website

tutorial desain website

Satu langkah terakhir, setelah sribuddies selesai mengaplikasikan brush, atur layer blend mode menjadi Soft Light dengan opacity 70%. Ini akan menghasilkan efek cahaya yang membaur dengan background kita, persis seperti screenshot di bawah ini.

tutorial desain website

Daaaan, yeay … We’re done!! Seperti inilah hasil finalnya, sribuddies.

tutorial desain website

* Credits to:
- 1stWebDesigner.com

Sungguh sebuah proses desain website yang panjang, agak njelimet, namun menyenangkan bukan, sribuddies? Jadi, sudah siap beraksi dan menampilkan karya-karya desain website terbaik dong? Yuk, cek kontes yang sedang berlangsung di
Sribu.com. Siapa tahu ada kontes desain website, jadi bisa langsung dipraktikkan deh ilmu yang baru saja didapat. Hehehe…

Kalau masih ragu atau malu atau sungkan atau nggak enakan atau nggak berani untuk ikutan kontes, setidaknya coba dong post karya-karya desain website kamu yang terbaik di Facebook Sribu atau kirim TwitPic ke Twitter account kita di @sribudotcom. Kita menanti lho…

Salam,
Ryan Gondokusumo

Founder Sribu.com
^ Tutorial desain website

email

Ryan Gondokusumo

Founder Sribu.com, platform jasa desain grafis online yang telah membantu lebih dari 1.500+ pelanggan. Pengalaman lebih dari 7 tahun di bidang UI dan UX design, team building, pengembangan produk, strategic marketing, digital marketing dan retail.

37 thoughts on “Desain Web: Membuat Desain Website di Photoshop

  1. Duh gan, Puyeng yah kalau ingin nurutin keinginan untuk ingin bisa…. tapi ane coba deh…. siapa tau ilmunya berpihak//…. thank’s gan tutorialnya… ane serap yahhhhh

  2. kalo desain sih udah bisa alhamdulillah, sekarang tinggal masukin codingnya om, gimana tuh caranya biar nanti bisa di pencet-pencet :D
    ayo om tutorialnya ya :)

    Makasih

  3. mas, ada tutornya ga biar navigation menu agar selalu nongol di atas walau kita mengscroll halaman browser kita ke bawah. jadi navigation bar itu (kayak home all about busines) seperti di web sribu ini mengikut?

    sy berterima kasih sekali. web sribu ini adalah web pertama saya mudenk bikin desain web.. lg on progres nih desain web sy, terima kasih banyak ^^..

  4. maaf sebelumnya mas, saya masih nol soal desain begini….
    saya pake ps cs6, mau nyoba ikutin langkahnya tapi langkah pertama mau menggunakan paint bucket tool itu gak bisa, muncul tulisan “could not use the paint bucket because the layer is locked”. itu kenapa ya? tolong penjelasannya mas soalnya saya mau belajar nih..trimakasih

  5. tutorialnya mudh dimngerti ni om, :D
    ada tutorial buat codingnya gk om,,, ??
    buat yg masukin coding donk om.. :D

  6. Mas tolong bagi ilmu dong, saya mau nanya nih :
    Kita mengikuti sebuah kontes web design, nah kita men submit file itu dalam format jpg/png kan?. Dan Misalkan kita menang dalam contest itu, apa saja syarat yang harus dilakukan?

    Terimakasih :)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>