learn how to create a modern login form.pdf

7/29/2019 Learn How To Create A Modern Login Form.pdf

1/11

Onlineprinters

www.onlineprinters.ch

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

PHOTOSHOP TUTORIALS FILES ARTICLES INSPIRATION CODE SNIPPETS CONTACT

LearnHowToCreateAModernLoginForm

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

WhatWellBeCreating

ResourcesUsedInThisTutorial

Social Connect Buttons

WooFunction Icon Set

GettingStarted

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 itlooks like this.

Search for: Search

Your Email:

Advertise Here

Vendre Telephone Portablewww.avito.ma

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

Learn How To Create A Modern Login Form 14/01/2013

http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/ 1 / 11
http://buysellads.com/buy/detail/40594/zone/1253194?utm_source=site_40594&utm_medium=website&utm_campaign=adhere&utm_content=zone_1253194http://buysellads.com/buy/detail/40594/zone/1253194?utm_source=site_40594&utm_medium=website&utm_campaign=adhere&utm_content=zone_1253194http://stats.buysellads.com/click.go?z=1253194&b=1658525&g=&s=&sw=1024&sh=768&br=firefox,17,win&r=0.7669260806829074&link=https://www.psd2html.com/order-now.html?rhttp://stats.buysellads.com/click.go?z=1259794&b=2958379&g=&s=&sw=1024&sh=768&br=firefox,17,win&r=0.03528051003360089&link=http://www.payperranks.co.uk/http://www.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/http://www.turkhitbox.com/photoshop/twitter-facebook-connect-buttons-psd.htmlhttp://www.photoshop-plus.co.uk/category/photoshop-tutorials/designing/http://www.photoshop-plus.co.uk/2011/11/23/learn-how-to-create-a-modern-login-form/http://www.photoshop-plus.co.uk/contact-photoshop-plus/http://www.photoshop-plus.co.uk/category/code-snippets/mobile-development/http://www.photoshop-plus.co.uk/category/code-snippets/jquery/http://www.photoshop-plus.co.uk/category/code-snippets/html-css/http://www.photoshop-plus.co.uk/category/code-snippets/wordpress/http://www.photoshop-plus.co.uk/category/code-snippets/http://www.photoshop-plus.co.uk/category/inspiration/http://www.photoshop-plus.co.uk/category/articles/resources/http://www.photoshop-plus.co.uk/category/articles/getting-to-know-photoshop/http://www.photoshop-plus.co.uk/category/articles/a-good-read/http://www.photoshop-plus.co.uk/category/articles/news/http://www.photoshop-plus.co.uk/category/articles/interviews/http://www.photoshop-plus.co.uk/category/articles/contests/http://www.photoshop-plus.co.uk/category/articles/http://www.photoshop-plus.co.uk/category/photoshop-freebies/psd-files/http://www.photoshop-plus.co.uk/category/photoshop-freebies/icons/http://www.photoshop-plus.co.uk/category/photoshop-freebies/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/mobile-design/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/animation/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/drawing/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/psd-conversion/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/text-effects/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/interface/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/icon-design/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/effects/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/designing/http://www.photoshop-plus.co.uk/category/photoshop-tutorials/http://www.photoshop-plus.co.uk/http://www.ebizontek.com/


2/11

LoginFormTitle

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 createdthe rectangle add a 1 pixel stroke from within the layers style window using the settings below.

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

Here are the settings for the login box title.




3/11

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 bewhite, 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 selectionunderneath 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.




4/11

TheFormFields

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 andsubmit button.

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




5/11

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




6/11

WooFunction Icon Set

CreatingTheMiddleDivider

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 theType Tool (T).

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.woothemes.com/2009/09/woofunction-178-amazing-web-design-icons/


7/11

Set your foreground color to #eeeeee then select the Rectangular Marquee Tool (M) and make a selection starting from underneath the top divider tothe 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 draggingfrom the left side of the box. Repeat this step for the side of the circle only this time drag the gradient from the right.




8/11

AddingTheSocialConnectButtons

Social Connect Buttons

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 andend 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.

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

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

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


http://www.turkhitbox.com/photoshop/twitter-facebook-connect-buttons-psd.html


9/11

Rawaf

November 23, 2011 at 7:14 PM

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

OnlyTutorials

November 28, 2011 at 9:06 PM

Going to t ry using it on my site. Thanks!

PaulWeston

December 1, 2011 at 9:59 AM

Found this a great little tut orial. Think the techniques you have used really add to t he feel of t he form, make it more engaging and

appealing to the view er. I really like the use of shadow and the effec t you have created on the dividing lines within the form.

I will be using the techniques from this tutorial in my future de sign work. Not only w hen I am designing my login and contact forms but

keeping them in mind whe n thinking about my navigation and layout of my future sites.

Conclusion

DownloadSource

License and Attribution:

This file is licensed under the Creative Commonslicense. Attribution is required and alwaysappreciated. Thanks.

Tweet

Thats it all done, hope your enjoyed this tutorial.

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 FacebookFan Page.

Dana 44 Lock-Right

www.sextonoffroad.com

Save now on Dana 44 Lock Right Order now for Free Shipping!


http://www.tristarwebdesign.co.uk/http://www.onlytutorials.com/http://www.nightocoder.com/http://creativecommons.org/licenses/by-nc-nd/3.0/http://www.facebook.com/ps.plus


10/11

Deshra

December 1, 2011 at 2:14 PM

Thanks a lot. Good T utorial.

I will make it sure

randomguy


Yo ur social butt ons are mixed up on the lowe r hand co rner. W hen I click t he twitter icon it sends me to facebo ok and vice versa.

Just thought you should know. :D

Nice tutorial btw. :D

RichardCarpenter


Thanks for the heads up, all fixed now

RyanLaw


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

wpcoder


@Ryan Law

just add the tex t in via pho tosho p and c lick ente r to login *lol* im jo king right, it nee ds to be sliced and code d into a wo rking

version.

Adam


Simply Sup erb!

RajeshVaishnav

January 11, 2012 at 11:30 AM

like your new look of w ebsite.

BTW. nice t utorial Thanks

JoshLake

January 12, 2012 at 3:00 PM

I would like to t hank you for this tutorial as it includes some really nice techniques on how to style your de sign so that it stands out and

looks more clean.

Im 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 g ive across a professional feel.

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

KwesiYankson

April 29, 2012 at 8:21 PM

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

abdikadir

June 11, 2012 at 9:12 PM

wow its a nice post i like it very much just t hat am realy hard how to use photoshop can some o ne use illustrator


http://comingsoon/http://www.crearedesign.co.uk/http://www.anarinfo.com/http://www.richard-carpenter.co.uk/http://noone/


11/11

Kaybeedot

July 26, 2012 at 8:42 AM

I want to create a login box 2 my site

nishanth

November 1, 2012 at 8:55 AM

superb i will try

GiveUsYourFeedbackHere on Photoshop Plus we use something called Gravatar , its a little image which will appear next to y our name when you comment on a blog. Us ing a gravatar will help us recognisegenuine comments from the spam comments.

Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There'scurrntyours!

LeaveYour email address will not be published. Required fields are marked *Name *

Email *

Website

CommentYou may use these HTML tags and attributes:

Post Comment

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


htt // h t h l k/2011/11/23/l h t t d l i f / 11 / 11
http://www.ebizontek.com/http://www.twitter.com/photoshop_plushttp://www.nairnishanth.com/http://www.kaybeedot.wapka.mobi/

learn how to create a modern login form.pdf

Documents