Pada tutorial kali ini, kita akan membuat sebuah tampilan form login sederhana dengan menggunakan photoshop. Tutorial ini dikhususkan untuk yang masih pemula, jadi kalo ngerasa udah jago ya pasti bisalah bikin tampilan seperti ini :D
Okee, sebelum masuk ke tutorialnya, disini saya akan menggunakan sebuah font yaitu Montserrat. Bagi yang belum punya bisa download dulu. Tapi gak wajib kok, kalo mau nyoba pake font lain juga silahkan.

Step 1

Langkah pertama tentunya kita akan membuat file baru pada Photoshop. Jadi silahkan buka menu File - New (Ctrl + N). Disini saya membuat file dengan konfigurasi sebagai berikut:


Step 2

Selanjutnya, beri warna background pada layer pertama dengan menggunakan paint bucket tool (G) atau dengan menggunakan gambar.

Step 3

Buat kotak form utama dengan menggunakan rectangle tool (U). Disini saya memberikan radius pada border dengan pengaturan sebagai berikut


Step 4

Lalu buat tampilan headernya dengan menggunakan rectangle tool, namun hanya beri radius pada bagian atas saja, seperti pengaturan dibawah. Untuk warnanya, saya beri warna #4e6fa7.


Step 5

Selanjutnya lakukan hal yang sama untuk membuat tampilan footernya, namun kali ini yang diberi radius adalah bagian bawahnya saja, seperti gambar dibawah. Untuk warnanya, saya beri warna #eeeeee.


Step 6

Kemudian tambahkan 2 buah kotak dengan menggunakan rectangle tool (U). Pada contoh dibawah saya menggunakan border radius 3px, warna background #f5f5f5 dan warna border #dddddd.


Step 7

Kemudian buat lagi tampilan untuk tombol utama dengan warna yang berbeda. Disini saya menggunakan warna #f86758. Untuk pengaturannya sama seperti contoh diatas.


Step 8

Langkah terahkir adalah memberikan teks pada masing masing bagian dengan menggunakan Type Tool (T). Untuk warna pada teks bisa disesuaikan dengan tampilannya.


Nah, seperti itulah kira kira langkah untuk membuat tampilan form login yang sederhana. Jika mengalami kesulitan saya sudah menyiapkan file .psd yang siap digunakan. 
Download final project
Semoga tutorial sederhana diatas dapat bermanfaat bagi anda yang sedang belajar membuat tampilan dengan menggunakan Adobe Photoshop.