What we'll design today:
Open Photoshop and create a new file with the canvas of 600x400px. I chose these dimensions just to provide you high-quality images, and not resized and blured ones. In principle, you can choose whatever dimensions you want.
For the background, we'll use a gray color on which a Noise Filter will be applied. Firstly, double-click the first layer(for your info, press F7 to open the Layer's Palette) to make it editable. Grab the Paint Bucket Tool(G) and paint the canvas with a gray color.(#e2e2e2). Then go to Filter->Noise->Add Noise and add a monochromatic noise of 3%.
Select the Rectangle Tool(U) and at the bottom of the canvas draw a rectangle with the height of aprox. 110px.Choose again a gray color but darker than the first one (#d5d5d5) then, apply to it the same noise you added to the first layer.
Now, just above the second layer, select the Line Tool(U) and draw a horizontal line with the same color(#d5d5d5). This line has the role to create an in-depth effect into the background.
The background is ready to support the form.For the login form we'll use the Rounded Rectangle Tool with a radius of 5px and we'll draw a rectangle of 475x280px.
Stylize the form by adding the next layer styles:
I chose a pattern from the Photoshop Standard Library called "Linen Weave" and is a part of "Color Paper" set so it shouldn't be a problem to find it. Anyway, you can use whatever pattern you want.
The form looks like this:
For the top half of the form, I wanted only a white background on which I can add login elements. To do that, Ctrl+Click on the form layer thumbnail from layers palette to reveal the selection of the form. Select the Rectangular Marquee Tool(M), from the options panel choose "subtract from the layer" and select the bottom of the form's selection. You should obtain a new selection with rounded corners at the top and straight corners at the bottom.
Select the Paint Bucket Tool(G), create a new layer above the form layer and paint with white inside the selection.
Now, select the Line Tool(U), choose Weight=1px and draw a horizontal line just above the bottom part of the form, with the same color used at form's stroke.
Let's build the fields for username and password. Select again the Rounded Rectangle Tool(U), set the radius to 3px and draw a white rectangle of 290x37px. Then add to it the next styles:
You've just obtained a beautiful, trends-following field.
Duplicate the field and place them one under another then add some text to replicate the real working forms we use on the web. For your info, I used Arial, Regular, 14pt.
Any form has a "Remember me" checkbox so let's do one. With the same Rounded Rectangle Tool(U) draw a small rectangle and add to it a gray stroke and a small drop-shadow by double-clicking the layer. Add some text too like "Remember me".
With this touch, the top-area of the form is ready and we can proceed to the bottom one.
In the bottom area, we'll be building a nice button and add a link for password reset.
Until now, you noticed that the main tool for creating shapes is the Rounded Rectangle Tool. Select again the tool, change the radius to 15px and draw a small button of 76x30px.
Double-click the button's layer to open the Style Panel and add the next styles:
The button looks great,isn't it?
Add a white text, like "Login" on the button and in the left area of the form, add an orange sentence and decorate it with a line under it.
The form is almost ready but we still need to add something more. I'm going to show you how to add a beautiful shadow under the form. The effect will give you the impression that the form is floating.
This time, select the Custom Shape Tool(U) and choose the banner shape pointed in the image:
Draw the banner onto the project and try to use the same dimensions as I did:
Now go to Filter->Blur->Gaussian Blur and add a blur of 4px.
Drag the shape's layer just under the form's layer (Layer no. 4 in the .PSD file) and reduce its opacity to 65% to obtain a nice shadow.With this final touch, our Login form is done and ready to be implemented into a web application. I thank you for reading the tutorial and hope you've learned something today. The Comments section is always open for your feedback! Till then, take a look at what we've done in just a few steps:
