How to Create a Clean and Stylish Login Form In Photoshop

Get our posts emailed to you with our monthly newsletter, subscribe here.

This is the first post in a two part tutorial, in this post I will walk you through how to create a clean and stylish login form in Photoshop, next week I will code the login form from the design concept into HTML/CSS3. Grab the RSS feed to catch the next post.

The Final Design

Getting Started

Open Photoshop and create a new document – File -> New. I set the my canvas size to 400x300px but you can make yours as big or as small as you wish. Create a new layer called ‘background’, set the background color to #4b4950 and add a sublte amount of noise to the background layer – Filter -> Noise -> Add Noise -> 3.

Typography

I wanted to keep the typography for this form modern and contemporary and quickly settled for Miso.

All the type in the form design is Miso, the actual text field value will be Arial.

Set the font tracking/spacing to 250 and set the font size to 14 pt, I will be using the font color #ffffff and the will set the weight to ‘bold’.

Creating Inputs

To create the text field inputs, use the ’rounded rectangle tool’ in Photoshop, you will need to set the border radius to 4 px and create the input field to the dimensions of 279 x 27 px. Set the background color of the rectangle to #303030 and create an ‘inner shaddow’. Layer -> Layer Style -> Inner Shadow.

Set the inner shadow settings to – Blend mode: Multiply | Angle: 90 | Distance: 1px | Choke: 0px | Size: 0px | Color: #000000 | Opacity: 75%.

Add the Labels

Style The Submit Button

To create the submit button, again use the ’rounded rectangle tool’ in Photoshop, you will need to set the border radius to 1 px and create the button 79 x 24 px.

Create a gradient overlay for the button from color #303030 to #3a3a3a – Layer -> Layer Style -> Gradient Overlay.

Finishing Touches

I decided to finish the form off with a couple of subtle minimal icons, these lovely designs were created by Some Random Dude, you can download them for free!

I added a very subtle effect to the minimal icons, for each icon add a ‘drop shaddow’ with these settings.

Next week,  I shall code this up using some CSS3! Subscribe to the RSS feed so as not to miss it…

Tutorial Update:

You can now see the tutorial, that takes this PSD form and converts it into html5/css3: Create a Clean and Stylish Login Form With HTML5 and CSS3

Posted by Jason Bayless

5 Comments

  1. How do you include this in the “form action” code?

  2. Spot on Monica, and I’ve said it before and I’ll say it again: this is a great site, and I’m particularly looking forward to the ‘Menu tutorial’ David suggested he might put together. That aside, I wonder if the ‘designwoop’ team might take on board the idea of putting together a tutorial around the dir and file structure of of the WordPress ap, and its minimalisation (?) …..

  3. great tutorial! I’m so happy I found your website. Minimal design is awesome.

  4. I’ve not used Photoshop before, and I’m normally, quite quick to pick up using a new ap, but for the life of me I can’t see how to set the background layer color to an alphanumeric value of #4b4950 …

    Please help !

    1. Hi Steve,

      There are a couple of different ways, it sounds like this is best suited for you – Layers -> New Fill Layer -> Solid Color.

      Hope it helps!

      – David.

Comments are closed.