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