+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Graphics (https://hackforums.net/forumdisplay.php?fid=156)
+---- Forum: Graphics (https://hackforums.net/forumdisplay.php?fid=6)
+---- Thread: The Empire | How To Create MINIMAL Log-in Interface (/showthread.php?tid=3622844)
The Empire | How To Create MINIMAL Log-in Interface - SoldierX - Jul 15, 2013
[img]http://imageshack.us/a/img90/6030/bannermo.gif[/img]
[img]http://i.imm.io/1cx80.png[/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 - Jul 15, 2013
Nice high quality tutorial, I might be using shortly
* - SoldierX - Jul 15, 2013
Thank you sir and I hope it comes handy.
* - xHissy - Jul 16, 2013
Lovely tutorial.
Very detailed and straight to the point.
Great tutorial I'll be using this.
* - SoldierX - Jul 16, 2013
Thank You for the kind words sir 🤝
* - xesenced - Jul 16, 2013
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 - Jul 17, 2013
How can you code this aswell?
Nice tut.
* - Z0mbie. - Jul 17, 2013
Liked this tutorial Soldier.
Loving it.
😉
* - SoldierX - Jul 17, 2013
Thank you for the kind words of appreciation 🤝
* - ๖ۣۜ₮¥ℓєя - Jul 25, 2013
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 - Jul 25, 2013
Thank you sir for your kind words 🤝
* - Citrᴜs - Jul 26, 2013
Nice man I like this. Looks very clean and this will come in handy.
* - Fraile - Jul 26, 2013
Looks very clean and nice, the only problem is the colors don't match, maybe try improving on that.
* - BisualZ - Jul 28, 2013
Nice tutorial! The only thing I don't like are the fonts used.
Thanks for writing it!
* - quadcore_ - Jul 28, 2013
Nice tutorial man, I'll use this tutorial for sure.