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

Iklan

9 thoughts on “Mendesain Login Form Gelap Bergaya Modern

  1. saya udah desain form login, pas saya save for web..dengan extension .html kenapa pas dibuka dengan dreamweaver username + password tidak bisa di input karakter…mohon bantuannya

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s