Create a Clean Web 2.0 Login Form, Part 1: Photoshop

Published on: Jan 06 2012 by Anli

Create a Web 2.0 Login Form, Part 1: Photoshop

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):

Web 2.0 Login Form

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.

New Document 800 x 600

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:

Background Pattern

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

Background

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.

Rounded Rectangle Tool

Rounded Rectangle Settings

Rounded Rectangle Color

After creating the rectangle, apply these layer styles to the rectangle’s layer:

Inner Shadow (color #000000)

Inner Shadow

Gradient Overlay (#ffffff to transparent)

Gradient

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

Rounded Rectangle

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.

Rectangular Marquee Tool

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)

Blue Rectangle Inner Shadow

Inner Glow (color #000000)

Blue Rectangle Inner Glow

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

Login Form, step 2 b

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.

Resize Rectangle

Set the rectangle’s Layer Fill to 0%.

Rectangle Layer Fill

Apply this layer style:

Stroke (color #3d3d3d)

Rectangle Stroke

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

Login Form, step 2 c

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:

Login Font

Type “LOGIN”.

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

Line Tool

Line Tool Weight 1px

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%:

Line's Opacity

Add these layer styles to the line’s layer:

Drop Shadow (color #000000)

Line's Drop Shadow

Gradient Overlay (#000000 to transparent)

Line's Gradient

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

Login Form, Step 3 a

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:

Username Field Settings

Draw the rectangle. This is the username input field. Add these layer styles to the username field’s layer:

Inner Shadow (color #000000)

Username Field's Inner Shadow

Gradient Overlay (#dddddd to #f8f8f8)

Username Field's Gradient

Stroke (color #dddddd)

Username Field's Stroke

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:

Username and Password's Font

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

Login Form, Step 3 b

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)

User and Padlock Icon - Inner Shadow

Gradient Overlay (#ffffff to transparent)

User and Padlock Icon - Gradient

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):

Login Form, step 3 c

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)

Radio Button, Second Ellipse - Drop Shadow

Gradient Overlay (#ffffff to transparent)

Radio Button, Second Ellipse - Gradient Overlay

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

Login Form, step 3 d

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):

Web 2.0 Login Form

DOWNLOAD FILE: Web 2.0 Login Form PSD (8888)

* You can use this login form in personal and commercial projects, but you can’t sell or redistribute it directly. If you want to publish it somewhere please refer to this page.

Soon I’ll publish the second part of this tutorial in which I’ll code this design in HTML and CSS, so, stay tuned!

UPDATE 15/01/2012: I finished coding the login form in HTML & CSS. You can find it here: http://azmind.com/2012/01/15/create-a-clean-web-2-0-login-form-part-2-html-css/

25 Comments to “Create a Clean Web 2.0 Login Form, Part 1: Photoshop”

  1. Justin says:

    Hi

    The link from ”this images” doesn’t work can you
    fix this please?

    Thanks :)

  2. Justin says:

    Oh nvm

  3. Danyh says:

    Nice !

    I wait the second part.

    Thanks

  4. ibnumalik says:

    This is very very great tutorial to make login form. Thank you and i will give feedback when I use it for my website!

  5. I like this tut but I wish I could find CSS tutorial how to achieve the same result.

  6. I have been hunting for a style like this for awhile and just happened upon your site. Very nice. I hope you don’t mind if I use the basis of this in an application I am developing (with full credits of course :) ).

  7. Vee says:

    Can you give some information on how you sliced the psd for html coding? any help is much appreciated

    • Anli says:

      Hi Vee. For slicing the psd I selected the single parts (I hided the other parts) using the Rectangle Marquee Tool. Then I copied them: Edit > Copy Merged, from the main menu. Finally, I opened a new document, pasted the image and saved it in transparent png file. I hope this will help you.

  8. Rickyrick says:

    Hey, nice tutorial.
    But I can’t figure out how to slice it, how to use this on a website to actually put text in to the boxes ^^
    Could you please make an tutorial for that?

  9. raivis says:

    Thanks, very useful.

  10. Meble Zabrze says:

    I will use this tut to created own form ;)
    TXH

  11. starfall says:

    Really helpful, a bit complicated for new user. but the tutorial was awesome. your brilliant and your blog. Thanks.

  12. denis says:

    this great tutorial make login form …

    thanks before :D

  13. royalz says:

    thank you so much :)

  14. Devdas says:

    Nice tutorial! Is there anyway I can do all this using just HTML5 and CSS3? I am lazy designer. Don’t want to launch Photoshop ;(.

  15. Ana says:

    How to import psd layout (login form) into dreamweaver?

  16. pack says:

    while I appreciate anyone that spends their time making a tutorial for others I think its’ worth pointing out that this is not the right way to do this. You should be using css and html5 to achieve this which is a much better solution for size and efficiency for your site.

Leave a Reply

*

*

x
Subscribe to the Azmind Newsletter

Subscribe to the newsletter and I'll update you as soon as I release a new WordPress Theme, Bootstrap Template or other Freebie:

Subscribe