Learn How To Create A Modern Login Form

Learn How To Create A Modern Login Form

What We’ll Be Creating

Learn How To Create A Stylish Login Form

Resources Used In This Tutorial

Getting Started…

Create a new (Ctrl + N) document 800 x 600 pixels with any style background. I’ve simply created a simple background to showcase my login form and it looks like this.

Learn How To Create A Stylish Login Form

Select the “Rectangle Tool” (U) with your foreground color set to white #ffffff then create a rectangle in the middle of your canvas. Once you’ve created the rectangle add a 1 pixel stroke from within the layers style window using the settings below.

Learn How To Create A Stylish Login Form

Learn How To Create A Stylish Login Form

Login Form Title

Select the “Text Type Tool” (T) then type out the title for your login box.

Learn How To Create A Stylish Login Form

Here are the settings for the login box title.

Learn How To Create A Stylish Login Form

Select the “Rectangular Marquee Tool” (M) then make two 1 pixel lines on top of each other. The top line should be black and the bottom line should be white, the lines should also span the width of the login box leaving a 20 pixel space either side of the line.

Learn How To Create A Stylish Login Form

The white line at this point isn’t visible at the moment but will be in the next step. Select the “Rectangular Marquee Tool” (M) then make a selection underneath the two 1 pixel lines we made in the previous step.

Learn How To Create A Stylish Login Form

Once you’ve made the selection fill it with a linear gradient using a black to transparent gradient.

Learn How To Create A Stylish Login Form

Set the opacity of the gradient to 2%, you should now have something like this.

Learn How To Create A Stylish Login Form

The Form Fields

Select the “Rectangle Tool” (U) and create 3 rectangles on the left side of the login box. The 3 boxes should represent the username, password and submit button.

Learn How To Create A Stylish Login Form

Add the following layer styles to the first 2 rectangles, which will be the username and passwords fields.

Learn How To Create A Stylish Login Form

Learn How To Create A Stylish Login Form

Learn How To Create A Stylish Login Form

Now add the following layer styles to the smaller rectangle which will be the login button.

Learn How To Create A Stylish Login Form

Learn How To Create A Stylish Login Form

Learn How To Create A Stylish Login Form

You should have something like this.

Learn How To Create A Stylish Login Form

Download the icon set from the link below then add the icons shown in the image below to the desired fields. Then add the text to your fields using the “Type Tool” (T).

Learn How To Create A Stylish Login Form

Creating The Middle Divider

Select the “Ellipse Tool” (U) then make an ellipse in the middle of the login box.

Learn How To Create A Stylish Login Form

Add the following layer styles to the ellipse.

Learn How To Create A Stylish Login Form

Learn How To Create A Stylish Login Form

Set your foreground color to #eeeeee then select the “Rectangular Marquee Tool” (M) and make a selection starting from underneath the top divider to the bottom of the login box.

Learn How To Create A Stylish Login Form

Select the “Gradient Tool” (G) with the gradient color options set to “Foreground to Transparent”. Now drag the gradient inside of the selection dragging from the left side of the box. Repeat this step for the side of the circle only this time drag the gradient from the right.

Learn How To Create A Stylish Login Form

Now create two 1 pixels lines next to each other vertically, color the first line in black and the other white. The lines should start from the title divider and end at the bottom of the login box, the lines should also pass underneath the ellipse in the middle. Set the lines layers blend mode to “Overlay”.

Learn How To Create A Stylish Login Form

Finally add the word “OR” inside of the ellipse, you should have something like this.

Learn How To Create A Stylish Login Form

Adding The Social Connect Buttons

Download the social connect buttons from the link below then add them to your canvas at the bottom right side of your login box.

Learn How To Create A Stylish Login Form

Now add some text above the social connect buttons like the image below.

Learn How To Create A Stylish Login Form

That’s it all done, hope your enjoyed this tutorial.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Learn How To Create A Stylish Login Form

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

15 comments
Rawaf says

It’s perfect post, liked it and help me for my new project, thank you

Reply
Only Tutorials says

Going to try using it on my site. Thanks!

Reply
Paul Weston says

Found this a great little tutorial. Think the techniques you have used really add to the feel of the form, make it more engaging and appealing to the viewer. I really like the use of shadow and the effect you have created on the dividing lines within the form.

I will be using the techniques from this tutorial in my future design work. Not only when I am designing my login and contact forms but keeping them in mind when thinking about my navigation and layout of my future sites.

Reply
Deshraj says

Thanks a lot. Good Tutorial.

I will make it sure

Reply
randomguy says

Your social buttons are mixed up on the lower hand corner. When I click the twitter icon it sends me to facebook and vice versa.

Just thought you should know. :D

Nice tutorial btw. :D

Reply
Richard Carpenter says

Thanks for the heads up, all fixed now

Reply
Ryan Law says

How to use the login form? I mean it’s an image how can you really type something in it? I’m new sorry :(

Reply
wpcoder says

@Ryan Law
just add the text in via photoshop and click enter to login… *lol* i’m joking right, it needs to be sliced and coded into a working version.

Reply
Adam says

Simply Superb!

Reply
Rajesh Vaishnav says

like your new look of website.
BTW. nice tutorial Thanks

Reply
Josh Lake says

I would like to thank you for this tutorial as it includes some really nice techniques on how to style your design so that it stands out and looks more clean.

I’m definitely going to use some of these skills in my future work, especially how you have created the one pixel line with a white line and a slight gradient underneath, and the 1 pixel line inside the login button as they really help to give across a professional feel.

Once again, thank you and I look forward more tutorials from you.

Reply
Kwesi Yankson says

thank you for this tutorial. My question is, after getting this done, how do you make it work as an html file? thank you

Reply
abdikadir says

wow its a nice post i like it very much just that am realy hard how to use photoshop can some one use illustrator

Reply
Kaybeedot says

I want to create a login box 2 my site

Reply
nishanth says

superb i will try

Reply
Add Your Reply

Popular posts

css.php