TutorialFeed

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:

Login Page Tutorial

Step 1

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

Create new page

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.

Create new header layer

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.

Create new body layer

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.

Create a new pattern

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:

Create a lighting effect

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.

Rounded corner login box

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:

Button

Button

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.

In this post I am sharing a visual cheat sheet that will improve your day-to-day web browsing experience. This cheat sheet created by me and it is divided into two pages, page 1 contains a IE 8 keyboard shortcuts and page 2 contains Firefox keyboard shortcuts.

This cheat sheet is very helpful for upcoming web designers and web developers. This sheet includes shortcuts like...Find text and links, Short keys for Browser Window, Short keys for Menu Bar, Short keys for Forms and some other useful shortcuts.

Here's a preview of cheat sheet page 1 (IE 8 Keyboard Shortcuts):

and preview of cheat sheet page 2 (Firefox 3.5 Keyboard Shortcuts):

This Cheat Sheet is available in high resolution gif format. Here's link to preview or download the high resolution version:

DOWNLOAD HIGH RESOLUTION GIF - PAGE 1 (IE 8 SHORTCUT KEYS)

DOWNLOAD HIGH RESOLUTION GIF - PAGE 2 (FIREFOX 3.5 SHORTCUT KEYS)

If you want to download PDF version then you need to login with your gmail id:

PDF VERSION - PAGE 1 (IE 8 SHORTCUT KEYS) | PDF VERSION - PAGE 2 (FIREFOX 3.5 SHORTCUT KEYS)

If you have any opinion, please leave a comment or ReTweet this post.