How to Create a Simple Login Form Design



Today I would like to show you how to create a clean and detailed login form design in Photoshop. In few simple steps you will see how to use blending options, layer styles, how to stylize type for the web and more.

Hope you will find this tutorial useful and you will learn something new. Please share your opinion about this tutorial in comments section below.

Source File

To download the source file, you must be a member of the Web Design Fan Club. Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. Read more about our club here.
login.zip (1 MB)

Tutorial Resources

Fonts: Nevis

Photo: grass farm

Pattern: 20 Repeatable Pixel Patterns

Preview

login form design

Step 1: Create a new document

Open Adobe Photoshop and start by creating a new document CTRL+N. Then make the document 600 px by 420 px with a white background.

step01

Step 2: Guidelines

We need to add some guidelines. Go to View > New Guide… and add following guidelines: vertical at 90 px, 100 px, 500 px and 510 px, horizontal at 70 px, 80 px, 340 px and 350 px.

step02

Step 3: Background

At first create a new group (Layer > New > Group…) called “Background”. After that click twice on background layer and unlock it, then move it inside the group and download grass farm photo by davedehetre. Now drag photo to your Photoshop window and using Move Tool (V) drag it to your login form design document. Resize if needed by clicking Ctrl+T.

step03

Step 4: Body

Minimize “Background” group by clicking a small grey arrow next to the group’s title and create one more new group (Layer > New > Group…) called “Login Form”. After that set foreground color to white (#FFFFFF) and pick Rounded Rectangle Tool (U) with radius set to 5 px. Further draw a rounded rectangle between an external guidelines. An example shown on the picture below.

step04

Now click right mouse button on rounded rectangle layer and select Blending Options… after that apply following options.

step041

step042

Finally reduce Fill of the layer to 35%.

step043

Change foreground color to grey (#E8EBF2) and pick Rounded Rectangle Tool (U) with radius set to 5 px again. After that draw another rounded rectangle between an internal guidelines. An example shown on the picture below.

step044

Now click right mouse button on previous created rounded rectangle layer and select Copy Layer Style. Then click right mouse button on just created rounded rectangle and select Paste Layer Style and do not forget to change Fill to 100%.

step045

Now go to Filter > Noise > Add Noise… and set Amount to 1%. An example shown on the picture below.

step046

Create a new layer (Shift+Ctrl+N) and name it “Stripes”. After that download pixel patterns from 20 Repeatable Pixel Patterns. Then hold Ctrl button and click on grey rounded rectangle layer thumbnail to make selection. Now select Paint Bucket Tool (G), choose Pattern and load pixel patterns that you have downloaded. Select pixelpattern6 and fill selection.

step047

Click Ctrl+D to deselect and reduce “Stripes” layer Opacity to 3%.

step048

Step 5: Input elements

Change foreground color to white (#FFFFFF) and pick Rounded Rectangle Tool (U) with radius set to 5 px and draw 360×40 px size shape. After that move it 23 px down from the grey rounded rectangle top corner. An example shown on the picture below.

step05

Now click right mouse button on white shape layer you that just created and select Blending Options… then apply Stroke option.

step051

Change foreground color to green (#7EA431) and pick Horizontal Type Tool (T), choose Nevis font, set type size to 16 pt and write “E-mail:”. Place it 20 px to right from input shape left corner.

step052

Click on white input shape layer and duplicate it by clicking Ctrl+J. After that move it 20 px below the first one. Then write “Password:” inside the duplicated input element.

step053

Set foreground color to white (#FFFFFF) and grab Ellipse Tool (U). After that hold Shift button and draw 12×12 px size circle and paste layer style copied from input element layer.

step054

Change foreground color to green (#7EA431) and pick Horizontal Type Tool (T), choose Nevis font, set font size to 14 pt and write “Remember Me”. After that place it in the same level as circle. An example shown on the picture below.

step055

Now click right mouse button on text layer and select Blending Options… then apply following option.

step056

Now write “Forgot Password?” apply the same drop shadow option and place it on the right side as shown on the example below.

step057

Step 6: Login button

Pick Rounded Rectangle Tool (U), set radius to 5 px and draw 360×60 px size button. After that click right mouse button on it’s layer and select Blending Options… then apply following options.

step06

step061

step062

Set foreground color to white (#FFFFFF) and select Horizontal Type Tool (T), choose Nevis font, size set to 30 pt and write “LOGIN”. After that click right mouse button on text layer and select Blending Options… and apply drop shadow option.

step063

step064

Conclusion

We’re finally done with our login form design. Hope you’ve found this tutorial useful and covered techniques will help you in future projects. Any comments and suggestions are welcome.

Get fast success in testking mcitp exam questions by using our latest MB7-841 exam. We also offer up-to-date MB6-827 questions and answers for your prep of 70-640.