In this tutorial we will create a clean login form that you can use on your own web design projects, the techniques used will be pretty basic and explained as we proceed. If you’re a newbie on Photoshop, you should read along as you might find new Photoshop tricks. This tutorials has been inspired by a great login form design created by Jan Losert @ 365psd.
Open your canvas, set the width to 450px and height to 400px.
Grab Rounded Rectangle Tool (U) set radius to 5px, and draw the rectangular shape same as above. Name this one as body.
In body layer, right click > Blending Options > Drop shadow set the angle to 90, distance and size to 1px.
Next is Stroke, set the size to 1px and Opacity to 100%.
After that duplicate your body layer, press arrow key up 2 times so it’ll move 2px above. Do this for the rest of the duplicate.
Write the welcome text above, I use Arial Bold 15pt color #c8c8c8.
Select your Rounded Rectangle Tool (U) same radius as before (5px) and draw the input form field.
In Blending Options > Gradient Overlay set the colors as above.
Follow the Gradient settings above.
In Stroke, set the size to 1px Opacity to 35px and color #d0cfcf.
Here is what your input form should look like.
Duplicate the input form by pressing CTRL + J and move the form below.
I also inserted the text for the input form, I use Arial Bold 15pt #dddddd. Now we will work on the button, Grab Rounded Rectangle Tool (U) and draw the shape same as above, set the radius to 5px. Background color is #0570a7.
In button layer, right click > Blending Options > Drop Shadow set the distance and size to 1px.
Inner Shadow set the foreground to #fbfbfb and size to 1px.
Follow the color settings above.
Here is the Gradient Overlay settings.
In Stroke, set the size to 1px and Opacity to 100%.
Here is our button, yours should look like the one above.
Add some text on the button, I used Arial 15pt Bold #ffffff.
To add some effect on our text, we will add drop shadow. Set the distance and size to 1px and fill in the color.
Under our button, we will add a checkbox. Every Login form uses a “Keep me login” feature. For that, grab your Rectangle Tool (U) and create a small square shape just below the button.
In checkbox layer, Blending Options > Gradient Overlay and fill in these colors.
In Stroke, set the size to 1px and use the foreground color #cacccd.
Here is the form, the text I added was Arial Bold 11pt #d7d5d5.
We will some text, I use Arial Bold 15pt and fill those colors above. The highlighted one is the link.
Another text was added, same color just change your font size to 12pt and you’re good to go.
We are done! As you can see, we used clean layout with basic tricks mainly on blending options. Keeping it clean and simple is one of the best layout we could offer to our clients. You can download the Freebie PSD here.
If you came up with different versions or you have other tutorial suggestions, feel free to do so in the comments below. I am eager to see what you guys have!