Web Desain with Photoshop



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 websiteyang 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 membuatdesain 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 tautanHome.
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 menjadi5px. 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

Les Private

Bagi yang pengin les private komputer segala macam materi bisa hubungi kami loh.