Design a Simple and Stylish Login Form Using Adobe Photoshop CS5

Creating website layouts and web forms is a great way to learn Photoshop. Today, in less than 10 steps I`ll show you how to design a modern login form using Photoshop. Along the way we`ll use blending options and we`ll create shadows and lights. At the end, you`ll obtain a clean Login form just ready to be coded.

What we`re doing today:

Step 1: Setting up the canvas

Open Photoshop, create a new canvas file of 600x400px and fill it with a gray color.

Step 2: Creating the web form shape

Now, select the Rounded Rectangle Tool (U) and with a radius of 4px, draw a rectangle of 280x180px.The size should be enough for a standard login form.

Step 3: Styling the background of the webform

To the rectangle created, add some blending options like Gradient Overlay and some shadows.







The form should look like this one:

Step 4: Making the form to shine

We`re gonna add now some reflections to the login form.We`ll draw some straight lines.So, select the Line Tool (U), choose Weight=1px and draw a horizontal line at the top of the form.



Now add the following Gradient to the line:



You should obtain a line like this one:



Duplicate the line`s layer and drag it at the bottom of the form.



Let`s add vertical lines too. As you made above, draw 2 vertical lines for the left and right side but this time add them the next Gradient.



The result isn`t very visible but details are the ones which counts.The form should look like this:

Step 5: Create the input fields

Select the Rounded Rectangle Tool(U) and draw a rectangle with a radius of 7px.



Let`s style it a lil bit.Add to it the next blending options:





The Input field looks nice now:



I`m gonna show you how to add a nice shadow to the input field.Select the Rounded Rectangle Tool(U) and with a Radius of 10px, draw a black rectangle and put it under the input field layer, like in the image below.



Now, add to it a gaussian blur of 4px (Filter->Blur->Gaussian Blur) and low the opacity of the layer to 30%. You should obtain a nice shadow:



Make another input field by duplicating the layers which creates the first input field and drag them below.

Step 6:Drawing the “Submit” button

Again, select the Rounded Rectangle Tool and draw a nice form under the input fields.Add it a nice and clean gray to black gradient.



Okay, what we have till now: A nice login box with 2 nice input fields and a clean submit button.Do you have the same thing as me?

Step 7: Adding 2 lines and a radio button

Now, below the input fields and submit button, draw 2 lines and a radio button(using the Rectangle Tool) by following the details from the next image:

Step 8: Finishing the layout

The layout is almost finished. All we have to do is to add some text and 2 more small icons.The icons are a green arrow for a valid entry and a red “x” symbol for an invalid entry.The icons are from Diagona Icon set and you can download them from below:

Valid Entry – Green Button

Invalid Entry – Red Button

The Final Image

The layout is done! Take a look at what we`ve done today!



Hope you liked the tutorial, vote for it and if you have any question or something else, leave a comment bellow!