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.

final

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:


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.

mendesain-login-form-modern-01

Langkah 2


Buka Adobe Extension Manager sebagai Administrator dengan cara klik kanan dan pilih Run as Administrator.

mendesain-login-form-modern-02

Langkah 3


Klik tombol Install dan pilih file ekstensi yang telah kita ambil.

mendesain-login-form-modern-03

Langkah 4


Klik Accept untuk menerima syarat-syaratnya. Ya, kita semua tahu tidak ada yang membaca ini. :)

mendesain-login-form-modern-04

Langkah 5


Tunggu beberapa saat dan ekstensi akan terinstall.

mendesain-login-form-modern-05

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.

mendesain-login-form-modern-06

Langkah 7


Di kotak dialog berikutnya, beri nama layer background.

mendesain-login-form-modern-07

Langkah 8


Klik Edit > Fill dan pilih Use Color untuk mengisi layer dengan sebuah warna.

mendesain-login-form-modern-08

Langkah 9


Di kotak dialog Color Picker, pilih warna #3b3b3b.

mendesain-login-form-modern-09mendesain-login-form-modern-10

Langkah 10: Menambah Noise


Klik ikon New Layer untuk membuat layer baru. Beri nama noise.

Mendesain Login Form Gelap Bergaya Modern

Langkah 11


Klik Filter > Noise > Add Noise.

Mendesain Login Form Gelap Bergaya Modern

Langkah 12


Ubah Blend Mode ke Multiply dan turunkan Opacity-nya.

Mendesain Login Form Gelap Bergaya Modern

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.

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Langkah 14


Turunkan Opacity layer gradasi hingga 10%.

Mendesain Login Form Gelap Bergaya Modern

Langkah 15


Aktifkan tool marquee persegi dan buat seleksi untuk bentuk dasar formulir.

Mendesain Login Form Gelap Bergaya Modern

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.

Mendesain Login Form Gelap Bergaya Modern

Langkah 17


Secara otomatis, akan dihasilkan guide berdasarkan bentuk seleksi dengan margin yang sesuai.

Mendesain Login Form Gelap Bergaya Modern

Langkah 18


Aktifkan tool rounded rectangle. Di baris pilihan, isikan radius 5 px. Buat shape di dalam guide dengan warna #323232.

Mendesain Login Form Gelap Bergaya Modern

Klik ganda layer shape dan tambahkan Layer Style berikut di kotak dialog yang muncul.

Mendesain Login Form Gelap Bergaya Modern

Gunakan sudut 90°.

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Inilah hasil yang kita peroleh. Tekan Ctrl + H untuk menyembunyikan semua guide.

Mendesain Login Form Gelap Bergaya Modern

Langkah 19


Ctrl-klik shape untuk membuat seleksi berdasarkan pada bentuk shape itu. Buat layer baru dan beri gradasi radial putih ke hitam.

Mendesain Login Form Gelap Bergaya Modern

Langkah 20


Turunkan Opacity layer hingga 10% dan ubah blend mode layer ke Screen.

Mendesain Login Form Gelap Bergaya Modern

Langkah 21


Tekan Ctrl + H untuk menampilkan kembali guide. Buat judul formulir menggunakan tool Type.

Mendesain Login Form Gelap Bergaya Modern

Tambahkan layer Style berikut.

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Di bawah adalah hasil yang diperoleh.

Mendesain Login Form Gelap Bergaya Modern

Langkah 22


Aktifkan tool rounded dengan radius 5 px. Munculkan kembali guide dengan menekan Ctrl + H. Buat shape dengan warna #f5e2c2.

Mendesain Login Form Gelap Bergaya Modern

Tambahkan Layer Style dengan setting berikut.

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Hasil yang kita peroleh.

Mendesain Login Form Gelap Bergaya Modern

Langkah 23


Tuliskan User Name di dalam kotak teks.

Mendesain Login Form Gelap Bergaya Modern

Tambahkan efek letterpress dengan memberinya Drop Shadow putih 1 px.

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Langkah 24


Buat lagi formulir untuk password.

Mendesain Login Form Gelap Bergaya Modern

Langkah 25: Tombol Login


Buat shape rounded rectangle dengan warna #d6901c.

Mendesain Login Form Gelap Bergaya Modern

Tambahkan Layer Style berikut.

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Langkah 26


Tambahkan teks LOGIN di atas tombol. Beri Drop Shadow.

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Langkah 27


Buat layer baru. Aktifkan tool brush dengan ukuran 27 px dan hardness 0%. Buat garis hitam vertikal di salah satu sisi formulir.

Mendesain Login Form Gelap Bergaya Modern

Langkah 28


Lakukan transformasi dengan menekan Ctrl + T. Klik kanan dan pilih Warp. Geser kotak warp hingga garis melengkung.

Mendesain Login Form Gelap Bergaya Modern

Turunkan Opacity layer hingga 50%.

Mendesain Login Form Gelap Bergaya Modern

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.

Mendesain Login Form Gelap Bergaya Modern

Mendesain Login Form Gelap Bergaya Modern

Langkah 30


Geser kedua layer garis ke belakang latar formulir.

Mendesain Login Form Gelap Bergaya Modern

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.

Mendesain Login Form Gelap Bergaya Modern

Download Link