How to: Make a simple login screen

Create a canvas to work on. The dimensions I chose is 575x300.









 I colored in the background to give me a nice workspace. Then I drew a simple rounded rectangle using the Rounded Rectangle Tool. Then, I drew a rectangle and created a clipping mask over the rounded rectangle to create the 'header' area of the login screen.

Afterwards, double click the clipping mask and add a gradient overlay. Set the options to how I have it, or to your preferences.

 Then, add a stroke. You can change it to gradient and use a 1px rainbow stroke, or you can use the same settings as I've done. Feel free to explore more options than just these.

Now, we're going to add the text boxes for the email and password. I created a decent sized textbox and added a clipping mask at the front of the textbox. Then, I added an arrow, usually found in the Arrow folder in the custom shape menu, to the mask clipping so it will look like it does in the screenshot to the left.

Next, duplicate the text layers and add some icons if you'd like. Separate the text boxes and give them a decent space in between to write text there.

I adjusted the textboxes a bit and then added some text where I thought it was needed.

Now, we're going to add the login button. Add an inner shadow and the settings are:
Color: White
Blend Mode: Color Dodge
Opacity: 33%
Distance: 1
Choke/Size: 0

Inner glow settings:
Color: White
Blend Mode: Color Dodge 
Opacity: 18%

Choke: 100

Size: 1

Gradient Overlay:
Blend Mode: Screen
Opacity: 12%

Stroke:
Size: 1
Color: #3b3b3b
Position: Outside

 Now that you've got everything down, all you have to do is add the text and you're good to go!

You can download the project's source file here:

http://ge.tt/87wSA0K/v/0?c