Total Followers 132,503
In this tutorial we are going to create a minimal login interface using Adobe Photoshop. With some simple techniques we will create a beautiful login interface. We will be using some variations of the color gray to help keep the interface as simple, elegant and minimal as possible.
While anyone can follow this tutorial, it is ideal for beginners.
Step 1
Create a new document 800 pixels high and 600 pixels in wide. It can be any size, but be sure to have some space to work. With the Rounded Rectangle Tool (U) fill in a space of 320 x 210 pixels with a light gray color. This will be the base of our login interface.
Step 2
Apply a dark gray (#dbdada) shadow to our light gray base with a distance and size of 1 pixel. The blend mode must be set as “Multiply” and the opacity to 50 percent.
Step 3
Add a 1px stroke, the color being exactly the same as we used for the drop shadow effect.
Step 4
The final effect for our base rectangle will be a light gradient overlay. The colors must be white and a really light-greyish color (#f1f1f1). We want to make our gradient overlay really subtle, almost invisible, that is why the opacity should be reduced to 60-65%.
Step 5
We’re done with the effects for the base rectangle, but we should enhance it a little bit, that is why a 1 pixel line will really make a difference and won’t make it look blank and too simple. The line should be the same color as all previous effects applied, however, besides the gray line, the 1px white line must be placed exactly under the gray one.
Step 6
In the upper left corner, we will add some text. I simply wrote “Login Form” which will describe what the interface is for. While this isn’t something we really need in a Photoshop layout, this might be helpful on a live website. The text is a dark gray color, which contrasts well with the rest colors and gives the interface a minimal look.
Step 7
With the Rounded Rectangle Tool (U) create two white shapes. Apply a stroke of 1 pixel (#dbdada) and by using the same color write a random e-mail address in the upper shape (which will be used for inputting e-mail addresses) and in the bottom shape, input some star signs (*) which will show an inputted and hidden password. The font used is Droid Sans, which you can grab for free on Google Fonts
Step 8
To make it more clear what the forms will be used for, we will add some icons. I am using the YummyGum’s iconSweets 2 set all the time, and find a use for them almost in any project of mine.
Step 9
With the Rounded Rectangle Tool, create two small shapes (10×10 pixels) and apply the stroke effect with the same color we used in previous steps. Inside the upper box, with the Custom Shape Tool (U), browse for the “checked” sign you can see in the image, and place it in the center of the box. Using Droid Sans, write some text right next to the boxes
Step 10
The last touch to our interface will be a big button which will finish the “login process”. By using the Rounded Rectangle Tool (U) create a shape of about 110 x 35 pixels, and make it a dark-gray color (#6d6d6d). Apply some white shadow, and don’t forget to change the Blend Mode from “Multiply” to “Normal”.
Step 11
Apply an inner shadow effect to the button, the size and choke being 0, the distance 3 pixels, the opacity 30% and the blend mode: overlay.
Step 12
A final touch for the button would be a dark 1 pixel stroke (#595656).
Get The Only Freelancer crash course you will ever need to read!
Sunday, July 29th, 2012 07:31
Very helpful tutorial … just what I was looking for. Thank you.
Friday, June 1st, 2012 01:21
Why can’t we download these tutorial source files?
Friday, June 1st, 2012 16:54
Lol, you still haven’t posted a download link.
Wednesday, May 30th, 2012 13:26
Again a very nice tutorial, the login area looks really simple and clean.
Wednesday, May 30th, 2012 16:38
Glad you enjoyed tutorial, Jacob! Hope it will get you inspired to create something even better! :)
Wednesday, May 30th, 2012 13:21
Why would you not do this in HTML and CSS only? Nothing here requires Photoshop.
Wednesday, May 30th, 2012 16:39
Good point, but before you know how to do it with HTML and CSS you need to know what little elements are required to design it right?
However, agreed..would require some ninja skills to create in in html,CSS – maybe you want to write tutorial about that, if you can? We are paying 75-100$ for tutorial :)
Thursday, May 31st, 2012 07:42
HTML/CSS Tutorial version of this? 75-100$ ?
Thursday, June 7th, 2012 11:17
Did someone take the job to write tutorial HTML/CSS?
Saturday, June 9th, 2012 21:42
I do, right now im trying to make this in html5 with no images but is a little hard to make this exactly like the psd :|
Friday, July 13th, 2012 00:19
Thanks a lot for this tutorial Dainis. I am a total newbie in webdesigning and I do it just for fun. I have done the same thing using HTML5 and CSS3, I am not able to improve the checkboxes unless I use js or images. any suggestions???
Friday, July 13th, 2012 02:11
Saad, just search for CSS3 checkbox tutorial and you’ll understand how simple it is to do :) Just google it, why you need JS there?
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Bark Golgafrincham
Wednesday, May 30th, 2012 13:21
Why would you not do this in HTML and CSS only? Nothing here requires Photoshop.
Dainis Graveris
Wednesday, May 30th, 2012 16:39
Good point, but before you know how to do it with HTML and CSS you need to know what little elements are required to design it right?
However, agreed..would require some ninja skills to create in in html,CSS – maybe you want to write tutorial about that, if you can? We are paying 75-100$ for tutorial :)
Manuel Garcia
Thursday, May 31st, 2012 07:42
HTML/CSS Tutorial version of this? 75-100$ ?
Dainis Graveris
Thursday, May 31st, 2012 09:24
Yes! 100$ if you go step further and improve it!
Carlos Esquivel
Saturday, June 9th, 2012 21:42
I do, right now im trying to make this in html5 with no images but is a little hard to make this exactly like the psd :|
Karolis
Thursday, June 7th, 2012 11:17
Did someone take the job to write tutorial HTML/CSS?
Saad
Friday, July 13th, 2012 00:19
Thanks a lot for this tutorial Dainis. I am a total newbie in webdesigning and I do it just for fun. I have done the same thing using HTML5 and CSS3, I am not able to improve the checkboxes unless I use js or images. any suggestions???
Dainis Graveris
Friday, July 13th, 2012 02:11
Saad, just search for CSS3 checkbox tutorial and you’ll understand how simple it is to do :) Just google it, why you need JS there?
Devanche
Friday, June 1st, 2012 01:21
Why can’t we download these tutorial source files?
Dainis Graveris
Friday, June 1st, 2012 12:37
hm, will upload download button ASAP!
Devanche
Friday, June 1st, 2012 16:54
Lol, you still haven’t posted a download link.
Jacob Frank
Wednesday, May 30th, 2012 13:26
Again a very nice tutorial, the login area looks really simple and clean.
Dainis Graveris
Wednesday, May 30th, 2012 16:38
Glad you enjoyed tutorial, Jacob! Hope it will get you inspired to create something even better! :)
Sarah
Sunday, July 29th, 2012 07:31
Very helpful tutorial … just what I was looking for. Thank you.
Dainis Graveris
Sunday, July 29th, 2012 08:03
Thank you, glad you enjoyed it, Sarah!
Blagdon Manor
Saturday, June 2nd, 2012 03:44
Great tutorial. Nice result. Thanks for posting.