How to Design a Clean and Beautiful Login Form in Photoshop

Easy Login Form in Photoshop

In this tutorial I`m going to show you how to easily design a clear, clean and beautiful Login form in Photoshop. Along the way, we`ll use different tools, apply multiple styles and create nice effects.

 

Lets start to create our Login Form in Photoshop.

Step 1

Open Adobe Photoshop, and create a new Photoshop document.

Step 2

Set your foreground color to # f5f5f5. Now draw a rectangle shape as show below by using Rectangle Tool (U). Name this layer “Base Layer“.

Apply the following blending option on Base Layer.

Inner Glow

Stroke

Preview

Step 3

Set your foreground color to # ffffff. Now draw a rectangle shape as show below by using Rectangle Tool (U). Rename this layer into “User Name“.

Step 4

Now duplicate the “User Name” layer (Ctrl+J). Move it down and change the name of the duplicate rectangle layer into “Password“.

Apply the following blending options on “User Name“.

Inner Shadow

Stroke

Preview

Step 5

Set your foreground color to # 4b8df8. Now draw a rectangle shape as show below by using Rectangle Tool (U). Rename this layer into “Button“.

Apply the following blending options on “Button“.

Stroke

Preview

Step 6

Set your foreground color to # f8f3f3. Now draw a rectangle shape as show below by using Rectangle Tool (U). Rename this layer into “check box“.

Apply the following blending options on “Check Box“.

Inner Shadow

Stroke

Preview

Set 7

Set your foreground color to # 000000. Using Horizontal Type Tool (T), Set fonts “Arial” and type the Sing in text on “Base Layer”.

Step 8

Set your foreground color to # 000000. Apply the same method on other texts, “User Name” and “Password

Step 9

Set your foreground color to # f8f4f4. Using Horizontal Type Tool (T), Set fonts “Arial” and type the Sing in text on “Button

Apply the following blending options on “Button Text“.

Outer Glow

Preview

Step 10

Set your foreground color to # 888686. Using Horizontal Type Tool (T), Set fonts “Arial” and type the Sing in text on “Base Layer

Final Preview

0 I like it
0 I don't like it