Photoshop Tutorial: Let's Design a Awesome Login Page

Today in this tutorial you'll learn how to design a awesome login page by using Photoshop. After completing this tutorial you can use this login page in your project as well. Either you are a beginner or a intermediate level photoshop user this tutorial will guide you step by step process that how to use photoshop tools better to create nice looking login page.

I am sharing a full PSD and JPEG file of login page which is free to use and for your reference:

Download PSD File | Download JPEG File

Ok let's start now. Following is the preview of final login page that we are going to design:



Step 1

Open Photoshop and create a new page size 1024x768 pixels by pressing Ctrl+N or go to File and press new.



Step 2

Now select a Rectangular Marquee tool (Shortcut key is M) to create a new layer size 1024x45 pixels by pressing Ctrl+Shift+N, name it header bar. With selected Marquee selection press Alt+Backspace to fill a color, I am using this color code #0d141c.



You can place your logo over here like left side or right side.

Step 3

Now select a Rectangular Marquee tool (Shortcut key is M) to create a new layer size 1024x723 pixels by pressing Ctrl+Shift+N, name it whatever you like. With selected Marquee selection press Alt+Backspace to fill a color, I am using this color code #263137.



Step 4

In this step we will decorate the new layer that we have created in step 3 by using some pattern and lighting effects. To give a similar pattern effect like I have used here you need to create a new pattern for that. So create a new page size 50x50 pixels by pressing Ctrl+N with transparent background.



Now select Custom Shape tool and choose shape which I have chosen and create it by dragging a tool. After creating custom shape go to Edit and select Define Pattern and click ok.



Step 5

Now go to your main page (Login page) and select body layer, Now go to Layer > Layer Style > Blending Options and configure following blending effects and click ok:



Step 6

In this step give we will give lighting effect to the same layer select Filter > Render > Lighting Effects. and configure following settings:





Adjust position of lighting circle in middle of the layer by dragging it with the center dot or point and click ok.

Step 7

In this step we'll create a login box. Now you need to create a new rounded corner shape layer (size 404x233 pixels) by selecting Custom Shape tool and setting Redius by 10px. Before creating rounded shape set your Foreground color to White.



Now go to Layer > Layer Style > Blending Options and configure following blending effects and click ok:



Use this color code #c1cdd5 for outer glow effect.

Step 8

Now add a Sign In, User Name and Password by selecting some good fonts. I have used Trebuchet MS and Times New Roman fonts over here. Now create a text box for User Name, Password and Submit. For this we need to create one text box, will make a copy of the same to use for Password for instance.

Create a new layer size 374x31 pixels by pressing Ctrl+Shift+N and press Alt+Backspace to fill a color on that. Always Keep in mind that Alt+Backspace fill color which is your Foreground color and Ctrl+Backspace fills Background color.

After filling color now go to Layer > Layer Style > Blending Options and configure following blending effets and click ok:





Now press Ctrl+J to make a copy of the same layer. After creating both text boxes adjust positioning of the same by selecting Move Tool (Short key is V).

Step 9

In this we will create submit button. Now create a new layer size 84x27 pixels by pressing Ctrl+Shift+N and press Alt+Backspace to fill a color on that. To give similar effect to the button select text box layer Right Click (of Mouse) on it and select Copy Layer Style, select button layer again and Right Click on it and select Paste Layer Style. Now you'll get similar effect like we have on text boxes. See images below:





Now write a text on it by selecting a Horizontal Type Tool or pressing T. Use Times New Roman font with Italic style and 18px size with Black Color.

For footer design I refer you my PSD file please download from above link. Footer design is very simple, I have used two white horizontal and 5 pairs of vertical dotted lines. I suggest you see my PSD file carefully you'll understand easily.

If you find any difficulty during the tutorial please leave a comment or DM at Twitter, @mytutorialfeed.

Related Posts :