Mendesain Login Form Gelap Bergaya Modern
Artikel ini adalah bagian dari seri Panduan Desain Web untuk Pemula.
1. Kuis Berhadiah Buku "Panduan Mudah Desain Web Professional"
2. 8 Tips Belajar Desain Web
3. Mendesain Login Form Gelap Bergaya Modern
4. 10 Tutorial Desain Web yang Perlu Dipelajari Pemula
5. 21 Contoh Penggunaan Pola dan Tekstur dalam Desain Web
6. Mendesain Interface Menu Modern
7. Pemenang Kuis Panduan Mudah Desain Web Profesional
Dalam tutorial untuk pemula ini, kita akan mulai belajar membuat desain sebuah formulir login. Di sini, kita akan menggunakan ekstensi GuideGuide untuk mempermudah pembuatan guide. Terima kasih pada Izul Chaniago dan Rizky Nizamil Putra, Anda juga bisa mendownload versi HTML dari tutorial ini.
Preview
Di bawah adalah hasil yang akan kita peroleh.
Detail Tutorial
- Tingkat Kesulitan: Pemula
- Software yang Digunakan: Adobe Photoshop
- Teknik yang Dipelajari: Layer Style, Penggunaan Ekstensi GuideGuide
- Lama Pengerjaan: 1 jam
Resource yang Dibutuhkan
Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:
- Ekstensi Photoshop GuideGuide
Tutorial
Langkah 1: Instalasi Ekstensi GuideGuide
Pertama kali, kita akan menginstall GuideGuide. Ambil file ekstensi dari situsnya. Di sana tersedia file ekstensi untuk versi CS4 dan CS5.
Langkah 2
Buka Adobe Extension Manager sebagai Administrator dengan cara klik kanan dan pilih Run as Administrator.
Langkah 3
Klik tombol Install dan pilih file ekstensi yang telah kita ambil.
Langkah 4
Klik Accept untuk menerima syarat-syaratnya. Ya, kita semua tahu tidak ada yang membaca ini. :)
Langkah 5
Tunggu beberapa saat dan ekstensi akan terinstall.
Langkah 6: Menyiapkan Latar
Buat file baru dengan ukuran 600 × 400 px. Klik kanan Background dan pilih Layer from Background untuk mengubahnya menjadi latar biasa.
Langkah 7
Di kotak dialog berikutnya, beri nama layer background.
Langkah 8
Klik Edit > Fill dan pilih Use Color untuk mengisi layer dengan sebuah warna.
Langkah 9
Di kotak dialog Color Picker, pilih warna #3b3b3b.
Langkah 10: Menambah Noise
Klik ikon New Layer untuk membuat layer baru. Beri nama noise.
Langkah 11
Klik Filter > Noise > Add Noise.
Langkah 12
Ubah Blend Mode ke Multiply dan turunkan Opacity-nya.
Langkah 13
Buat layer baru lagi. Aktifkan tool gradient. Tambahkan gradasi dari putih ke hitam dengan tipe radial. Klik dari tengah atas hingga bagian bawah kanvas.
Langkah 14
Turunkan Opacity layer gradasi hingga 10%.
Langkah 15
Aktifkan tool marquee persegi dan buat seleksi untuk bentuk dasar formulir.
Langkah 16
Buka jendela ekstensi GuideGuide dengan klik Window > Extensions > GuideGuide. Di panel GuideGuide, isikan margin kanan dan kiri 32 px dan margin atas dan bawah 33 px. Klik tombol GG di bagian bawah panel.
Langkah 17
Secara otomatis, akan dihasilkan guide berdasarkan bentuk seleksi dengan margin yang sesuai.
Langkah 18
Aktifkan tool rounded rectangle. Di baris pilihan, isikan radius 5 px. Buat shape di dalam guide dengan warna #323232.
Klik ganda layer shape dan tambahkan Layer Style berikut di kotak dialog yang muncul.
Gunakan sudut 90°.
Inilah hasil yang kita peroleh. Tekan Ctrl + H untuk menyembunyikan semua guide.
Langkah 19
Ctrl-klik shape untuk membuat seleksi berdasarkan pada bentuk shape itu. Buat layer baru dan beri gradasi radial putih ke hitam.
Langkah 20
Turunkan Opacity layer hingga 10% dan ubah blend mode layer ke Screen.
Langkah 21
Tekan Ctrl + H untuk menampilkan kembali guide. Buat judul formulir menggunakan tool Type.
Tambahkan layer Style berikut.
Di bawah adalah hasil yang diperoleh.
Langkah 22
Aktifkan tool rounded dengan radius 5 px. Munculkan kembali guide dengan menekan Ctrl + H. Buat shape dengan warna #f5e2c2.
Tambahkan Layer Style dengan setting berikut.
Hasil yang kita peroleh.
Langkah 23
Tuliskan User Name di dalam kotak teks.
Tambahkan efek letterpress dengan memberinya Drop Shadow putih 1 px.
Langkah 24
Buat lagi formulir untuk password.
Langkah 25: Tombol Login
Buat shape rounded rectangle dengan warna #d6901c.
Tambahkan Layer Style berikut.
Langkah 26
Tambahkan teks LOGIN di atas tombol. Beri Drop Shadow.
Langkah 27
Buat layer baru. Aktifkan tool brush dengan ukuran 27 px dan hardness 0%. Buat garis hitam vertikal di salah satu sisi formulir.
Langkah 28
Lakukan transformasi dengan menekan Ctrl + T. Klik kanan dan pilih Warp. Geser kotak warp hingga garis melengkung.
Turunkan Opacity layer hingga 50%.
Langkah 29
Tekan Ctrl + J untuk menduplikasi garis. Geser garis ke sisi lainnya. TekanCtrl + T, klik kanan dan pilih Flip Horizontal untuk membalik arah lengkungan garis.
Langkah 30
Geser kedua layer garis ke belakang latar formulir.
Hasil Akhir
Melalui tutorial ini, Anda telah belajar cara membuat desain yang sangat akurat dengan bantuan guide. Saya harap Anda menyukai tutorial ini.
Di bawah adalah hasil akhir tutorial yang kita peroleh.
