Design a clean web sign-in form with Photoshop

As a popular request, I will show you how to design a nice and simple sign in or log in form for your websites using Adobe Photoshop.

Create a new Photoshop document and choose Paint Bucket Tool.

Set a nice foreground color that goes well with the web site you are designing.

Click the document to fill it with your chosen color.

In the menu click Filter, Noise and choose Add Noise...

In the new settings window, set the Amount to about 1.2 % and use Gaussian as Distribution setting.

Click OK.

Choose the Rounded Rectangle Tool.

Set the Radius to 5 px (see picture).

Create a new layer.

Press D and then X to set the white foreground color and draw a rounded rectangle like I did.

Now click the Effects button and choose Inner Shadow... (see picture).

Choose the  same settings as I did and click OK.

Press Ctrl + J to duplicate the layer and drag the new duplicated layer above the original entry box layer (see picture).

In the menu click View, Show and choose Smart Guides to activate the guides that help you with positioning the objects, like you can see them on my picture.

Now set some nice color that goes well with the background and the whole web page.

We're going to create a sign in button.

Create a new layer.

Draw a button in text entry box so you'll be sure it's the same height as the text entry boxes (see picture).

Press V to select the move tool and move the button under password entry box. (see picture).

Now click the layer effects button and choose Bevel and Emboss...

Choose the same settings as I did ...

... and again choose the same settings as I did for Shading.

Click OK.

Press D and X to set the white fore ground color.

Now choose the Horizontal Type Tool, choose some nice web friendly font and type Sign in over the button.

Use the Move Tool (V) to adjust the text into the button.

Now again click the layer effects button and choose Bevel and Emboss...

Choose the same settings as I did and set the Highlight and Shadow opacity both to 15 %.

Click OK.

Again, choose the Horizontal Type Tool and type enter Username, enter Password and Forgot you password? like I did.

Choose a smaller font size for Forgot your password? text and again use the smart guides to help you adjust the texts so they fit perfectly.

Now set the same foreground color as you did for the button, if you don't remember the exact color, do the following:

Choose the Eyedropper Tool.

And click the button some where in the middle.

You just set the same foreground color as your button.

In the menu click Image and choose Canvas Size...

In the new settings window set the Height to 25 pixels, check the Relative option and click the middle square at the bottom row of the squares.

Canvas extension color should be set to Foreground (same color as button).

Click OK.

The login form dimension are now 200 x 225 pixels as you added 25 pixels to height.

Now enter Please sign in into the empty blue area, fine tune all the objects with move tool and you're done!

Don't forget to use the Forum if you need some help with this tutorial.