16
Feb
2013

Design Blue Login Form in Photoshop

Posted in: Photoshop , Comments Off

In this Photoshop tutorial, we will design a stylish web login form. We will be applying some layer effects.

Final Preview

Before I start the tutorial, let’s see the final image of the login form that we will design in this tutorial.

Step 1:

Create a new document of size 600 X 450 px and white background color.


Fill it with color #464646

Step 2:

Select “Text Tool” and type Login Form using following font style.
Font Family: Arial
Font Weight: Normal
Font Size: 30p pt
Font color: White

Step 3:

Select “Rounded Rectangle” Tool with 10 px radius.
Rounded rectangle tool

Draw a shape in color #01436c as shown below.


Apply following layer style to this shape.




It should look like this now:

Step 4:

Again select Rounded Rectangle” Tool with 5 px radius and white color. Draw a box as shown below.


Apply following layer style to this shape.




It should look like this now.

Step 5:

Select “Text Tool” and type Username inside this box in color #215884


Repeat these steps to create another box for password.

Step 6:

Now we will add two icon to show username or password is correct or incorrect.

Step 7:

Select “Rectangle Shape” tool.
rectangle tool

Create a small square shape in color #FFFFFF as shown below.


Apply following layer style to this box.


To right of this box type “Remember Me” in white color.

Step 8:

In this step we will design login button. Using “Rounded Rectangle” tool and radius 4px draw a login button in color #0170a3 as shown below.


Apply following layer style to this button shape layer.




It should look like this now:


Using text tool, type Login on this button in white color.

Step 9:

Select text tool again. Add forgot password link and Register link text in color #047fa2 as shown below.


Our login form is ready. Below you can download the PSD file of this form.

download

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati
Both comments and pings are currently closed.

Comments are closed.