[SoldierX]

[img]http://imageshack.us/a/img90/6030/bannermo.gif[/img]


[img]http://i.imm.io/1cx80.png[/img]

Welcome to another session of SoldierX Tutorials, Today I will be teaching and guiding you through "How to design a minimal Log-in interface".


Final Product, That we will get in the end of this tutorial.

[img]http://i.imm.io/1cx9f.png[/img]

Let us begin, Now

[img]http://i.imm.io/1cxa1.png[/img]

Open Photoshop with a new document of height 500px and width 800px and a background color of #dddddd and add a pattern to it.

[img]http://i.imm.io/1cxaz.png[/img]

[img]http://i.imm.io/1cxbm.png[/img]

Create a rounded rectangle with radius of 2px, height of 197px and of width 256px. And add stroke with the following settings. Color :- #aaaaaa

[img]http://i.imm.io/1cxcU.png[/img]

To Get

[img]http://i.imm.io/1cxdj.png[/img]

[img]http://i.imm.io/1cxem.png[/img]

Now create a line with color #222222 height 1px and mask it over the rectangle made earlier with opacity set to 10%

[img]http://i.imm.io/1cxfg.png[/img]

[img]http://i.imm.io/1cxfP.png[/img]

Now write the desired text in the middle of the space provided between the line and the box top in color #358bce, Center it.

[img]http://i.imm.io/1cxgd.png[/img]

[img]http://i.imm.io/1cxgE.png[/img]

Draw two rectangles of Height 57px width 209px color them #eeeeee and add a stroke with following settings.

[img]http://i.imm.io/1cxi0.png[/img]

To Get

[img]http://i.imm.io/1cxib.png[/img]

---

[img]http://i.imm.io/1cxje.png[/img]

Now create two rounded rectangles of radius 4px width 209px height 79px and of color #358bce. Place the other just beneath the other with some shifting in the position to get the button effect. And now add the text to it.

[img]http://i.imm.io/1cxkv.png[/img]

[img]http://i.imm.io/1cxkQ.png[/img]

Now add the random text to the text boxes with color #358bce and opacity set to 50%

[img]http://i.imm.io/1cx9f.png[/img]

[img]http://i.imm.io/1cxn2.png[/img]

[img]http://i.imm.io/1cxmm.png[/img]

[Ludicolo]

Nice high quality tutorial, I might be using shortly

[SoldierX]

Thank you sir and I hope it comes handy.

[xHissy]

Lovely tutorial.
Very detailed and straight to the point.

Great tutorial I'll be using this.

[SoldierX]

Thank You for the kind words sir 🤝

[xesenced]

I like how you've got the exact dimensions available rather than just writing 'put a box here lol'
Makes it easier to write up the CSS for it.

[alignment]

How can you code this aswell?
Nice tut.

[Z0mbie.]

Liked this tutorial Soldier.
Loving it.
😉

[SoldierX]

Thank you for the kind words of appreciation 🤝

[๖ۣۜ₮¥ℓєя]

very nice indeed nicely done mate
everything looks nice and smooth and professional
easy to understand :P for all the nubs
if you asked for a rate it would be 10 :P

[SoldierX]

Thank you sir for your kind words 🤝

[Citrᴜs]

Nice man I like this. Looks very clean and this will come in handy.

[Fraile]

Looks very clean and nice, the only problem is the colors don't match, maybe try improving on that.

[BisualZ]

Nice tutorial! The only thing I don't like are the fonts used.
Thanks for writing it!

[quadcore_]

Nice tutorial man, I'll use this tutorial for sure.