Create a Clean Web 2.0 Login Form

In this tutorial I’m going to show you how to create a clean Web 2.0 login form. This is the first part of the tutorial and I will show you step by step how to design the login form in Photoshop. You can download the PSD file at the end of this article.








Here is the final result (click on the image to view it full size):

In the second part, which I’ll publish soon, I’ll code the design in HTML and CSS for making it a fully functional login page. So, open Photoshop and let’s begin:

1. Setting up the document and background:

Create a new project with a resolution of 800 x 600 pixels.

Create a new layer to use as background and fill it with the color #eeeeee. Download this image to use as a pattern for the background. Open it in Photoshop and then click Edit > Define Pattern, from the Menu. Apply the pattern (add a Pattern Overlay style) to the background layer with these parameters:

After applying these settings the background should look like this (click on the image to view it full size):

2. Creating the login form:

a) Select the Rounded Rectangle Tool. Set the rectangle size to 500 x 240 pixels and the radius to 20 pixels. Apply the color #3d3d3d. Create the rounded rectangle.



After creating the rectangle, apply these layer styles to the rectangle’s layer:
Inner Shadow (color #000000)

Gradient Overlay (#ffffff to transparent)

Now the rounded rectangle should look like this (click on the image to view it full size):

b) Duplicate the rectangle created before or create a new one and fill it with the color #3ac6ea. Rasterize the layer (click Layer > Rasterize > Layer, from the Menu, or right-click on the layer and select Rasterize Layer).
Select the Rectangular Marquee Tool, select a part of the rectangle (the blue one), select the rectangle’s layer and press CTRL+X or Edit > Cut, from the Menu.

Move the cut rectangle 1 or 2 pixels to the right. Now add some layer styles to this rectangle’s layer as follows:
Inner Shadow (color #000000)

Inner Glow (color #000000)

You should obtain something like this (click on the image to view it full size):

c) Duplicate the rectangle created in the point a). Select the duplicated rectangle’s layer and press CTRL+T or select Edit > Free Transform, from the Menu. Resize the rectangle 1 or 2 pixels to the right until it covers completely the other two rectangles.

Set the rectangle’s Layer Fill to 0%.

Apply this layer style:
Stroke (color #3d3d3d)

Here is the result (click on the image to view it full size):

3. Adding text, buttons and input fields:

a) Select the Type Tool. I have used the Verdana font here with the color #ffffff and with these settings:

Type “LOGIN”.
Select the Line Tool with a weight of 1 pixel and the color #4d4d4d.


Draw a line below the “LOGIN” text. Move the line’s layer under the blue rectangle’s layer created in the point 2 b). Align the line so it begins at the dark rectangle’s left edge and ends at the blue rectangle’s left edge.
Set the opacity of the line’s layer to 50%:

Add these layer styles to the line’s layer:
Drop Shadow (color #000000)

Gradient Overlay (#000000 to transparent)

Now the login form should look like this (click on the image to view it full size):

b) Now we’ll add the username and password input fields. Select the Rounded Rectangle Tool, set the color to #fffff and use these settings:

Draw the rectangle. This is the username input field. Add these layer styles to the username field’s layer:
Inner Shadow (color #000000)

Gradient Overlay (#dddddd to #f8f8f8)

Stroke (color #dddddd)

Duplicate the rectangle or draw a new one with the same settings. This is the password input field. Move it to the right and align it with the username field.
Select the Type Tool and type the “Username:” and “Password:” text above the username and password fields. Use the Verdana font that we used before, the color #ffffff and these settings:

Now the login form should look like this (click on the image to view it full size):

c) Now we’ll add a user icon in the username field and a padlock icon in the password field. For the user icon I have used the Ellipse Tool. Press and hold the SHIFT key when drawing the two ellipses. Use the color #ff8b00. Then merge the two ellipses and cut the bottom part of the second ellipse.
For the padlock icon I have used the Rounded Rectangle Tool. Use the color #ff8b00. For the upper rectangle use a layer fill of 0% and a stroke layer style of 3 pixels. Merge the two rectangles.
Add these layer styles to the user icon and padlock icon:
Inner Shadow (color #000000)

Gradient Overlay (#ffffff to transparent)

Now add some text in the username and password fields. I have added “azmind” in the username field. Use the Verdana font with the same text settings used before and with a font size of 16 pixels. Use the color #2d2d2d.
In the password field I have added some dots using the Ellipse Tool but you can also use the Type Tool. Use the same color, #2d2d2d.
Here is the result (click on the image to view it full size):

d) Select the Type Tool and use the same text settings that we used for the “Username:” and “Password:” text in the point 3 b). Type “Remember me”.
Type “Forgot username or password?” at the right of the “Remember me” text. Use the same text settings and the color #cccccc. Select the “username” part of the text and make it Italic. Select the “password” part and make it Italic too.
Now we’ll create the radio button at the left of the “Remember me” text. Use the Ellipse Tool pressing and holding the SHIFT key. We need two ellipses for creating the radio button.
For the first ellipse (the bigger one) use the color #ffffff and the same layer styles used for the username and password fields in the point 3 b).
For the second ellipse use the color #2d2d2d and these layer styles:
Drop Shadow (color #000000)

Gradient Overlay (#ffffff to transparent)

Here is the result (click on the image to view it full size):

e) For the arrow button in the blue rectangle I have created two rounded rectangles with the Rounded Rectangle Tool, I have rotated and aligned them. Then I’ve created a custom shape that you’ll find in the PSD file.
Use the color #ffffff and Inner Shadow + Gradient Overlay styles with the same settings used for the username and password input fields in the point 3 b).
Select the Type Tool and type “GO” below the arrow button. Use a font size of 26 pixels and the same text settings used for the “LOGIN” text in the point 3 a).
That’s all!
Here is the final result (click on the image to view it full size):

DOWNLOAD FILE: Web 2.0 Login Form PSD (669)

azmind.com