Learn How To Create A Modern Login Form

14/01/2013

Onlineprinters
www.onlineprinters.ch Vos impressions en temps record. En 8, 12, 16h, vous de choisir !

Search for:

Search

Your Email:

PHOTOSHOP TUTORIALS

FILES

ARTICLES

INSPIRATION

CODE SNIPPETS

CONTACT

Vendre Telephone Portable

www.avito.ma Dposez votre Annonce sur Avito.ma C'est facile, rapide et Gratuit !

LoAd HTog ewLi nMr aCe r on eo a r t F o m r

I think we can all agree that collecting or sending information seems to be a huge corner-stone of importance amongst many websites. In this tutorial Ill be showing you how easy it is to create a modern stylish looking login form.
November 23, 2011 In Designing

Advertise Here

Wle na Bt C g e ih a rl W t

Re es or sih a Ti U u lr c o T t n I e d
Social Connect Buttons WooFunction Icon Set

e n S G d te a g r it
Create a new (Ctrl + N) document 800 x 600 pixels with any style background. Ive simply created a simple background to showcase my login form and it looks like this.

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

1 / 11

Learn How To Create A Modern 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 youve created the rectangle add a 1 pixel stroke from within the layers style window using the settings below.

14/01/2013

LiT e Fi o n m g lt r
Select the Text Type Tool (T) then type out the title for your login box.

Here are the settings for the login box title.

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

2 / 11

Learn How To Create A Modern Login Form

14/01/2013

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.

The white line at this point isnt 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.

Once youve made the selection fill it with a linear gradient using a black to transparent gradient.

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

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

3 / 11

Learn How To Create A Modern Login Form

14/01/2013

Te FF hi o d m e r s l
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.

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

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

4 / 11

Learn How To Create A Modern Login Form

14/01/2013

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

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

5 / 11

Learn How To Create A Modern Login Form

14/01/2013

You should have something like this.

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). WooFunction Icon Set

nd T Cil g e d M h it a r D v e d r i
Select the Ellipse Tool (U) then make an ellipse in the middle of the login box.

Add the following layer styles to the ellipse.

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

6 / 11

Learn How To Create A Modern Login Form

14/01/2013

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.

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.

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

7 / 11

Learn How To Create A Modern 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.

14/01/2013

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

Aas Cc do nic Te ou dt gn S h n ie B o n l
Download the social connect buttons from the link below then add them to your canvas at the bottom right side of your login box. Social Connect Buttons

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

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

8 / 11

Learn How To Create A Modern Login Form

14/01/2013

Thats it all done, hope your enjoyed this tutorial.

Cl o u n i s c
Thanks for taking part in this tutorial, if you managed to finish this tutorial Id love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Dana 44 Lock-Right
www.sextonoffroad.com Save now on Dana 44 Lock Right Order now for Free Shipping!

Dou onr wc S a d le o

License and Attribution:

This file is licensed under the Creative Commons license. Attribution is required and always appreciated. Thanks.
Tweet

R w a f a
November 23, 2011 at 7:14 PM

Its perfect post, liked it and help me for my new project, thank you

saoy lirtO ul Tn
November 28, 2011 at 9:06 PM

Going to try using it on my site. Thanks!

W nu oa tl s e P
December 1, 2011 at 9:59 AM

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 view er. I really like the use of shadow and the effect you have created on the dividing lines w ithin the form. I w ill be using the techniques from this tutorial in my future design w ork. Not only w hen I am designing my login and contact forms but keeping them in mind w hen thinking about my navigation and layout of my future sites.

jr a D h s e
http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/ 9 / 11

Learn How To Create A Modern Login Form

jr a D h s e

14/01/2013

December 1, 2011 at 2:14 PM

Thanks a lot. Good Tutorial. I w ill make it sure

nu ag dy m o r
December 2, 2011 at 2:44 PM

Your social buttons are mixed up on the low er hand corner. W hen I click the tw itter icon it sends me to facebook and vice versa. Just thought you should know . :D Nice tutorial btw . :D

rCR edi ph na ec tr r a
December 2, 2011 at 3:15 PM

Thanks for the heads up, all fixed now

w a L R n a y
December 6, 2011 at 2:42 AM

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

w d o p r e c
December 6, 2011 at 9:49 PM

@Ryan Law just add the text in via photoshop and click enter to login *lol* im joking right, it needs to be sliced and coded into a w orking version.

A d m a
December 14, 2011 at 7:06 AM

Simply Superb!

haa nh vR as sie Vj
January 11, 2012 at 11:30 AM

like your new look of w ebsite. BTW . nice tutorial Thanks

eJ ks ao L h
January 12, 2012 at 3:00 PM

I w ould 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. Im definitely going to use some of these skills in my future w ork, especially how you have created the one pixel line w ith a w hite 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 forw ard more tutorials from you.

ns ow Yie a s k K
April 29, 2012 at 8:21 PM

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

rk d a ia b d i
June 11, 2012 at 9:12 PM

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

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

10 / 11

Learn How To Create A Modern Login Form

14/01/2013

K b y a d e t o
July 26, 2012 at 8:42 AM

I w ant to create a login box 2 my site

hn n a t si
November 1, 2012 at 8:55 AM

superb i w ill try

Ua Gb Yc vd ek F o e s iu r
Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments. Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

dn,ooawyn 'T awnAeo1se se thLeCC nu e o gdtHOer h mMrT5ltc r yin nnt r r em o em Fr o r a L !s u o y r

y lpR a eaL e ve
Your email address will not be published. Required fields are marked * Name * Email * Website

Comment You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite>

<code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Comment

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/

11 / 11