Today I will show you how to create a stylish, modern login form. In this tutorial I will use only basic shapes and some of layer styles. You will see just how easy it is to make a great looking Login menu.
Final result
Let's begin.
Create new document with Width: 500px and Height 300px.
Choose your foreground color: #f2f2f2. Go to Edit > Fill > Use: Foreground color and press ok.
Now select Rounded Rectangle Tool. Use curent options in the toolbar. And press in the center of the page.
Use Fixed Size: Width: 250px Height: 40px
Check box: Snap to pixels
Use radius: 30px
You would obtain similar result.
Go to Layer > Layer Style > Blending Options
Go to Gradient Overlay and use gradient: #0c4988 to #1b8ed0 with settings:
Go to Stroke and use next settings:
Size: 3px
Color: #b3b3b3
Press ok. You could obtain similar result:
With Rectangle tool, inside of our form, create other 2 shapes for username and password. Fill them with white color (#ffffff).
Add some text with color#858585.
Use this icon to create the Go button. Copy it in Photoshop, resize and change Blending Mode to Divide.
Let's create registration button. Select Rounded rectangle tool. Use similar color (#b3b3b3) that we had used for stroke for our main shape and apply curent settings:
Use Fixed Size: Width: 80px Height: 25px
Check box: Snap to pixels
Use radius: 30px
You need to obtain similar result:
With Pen tool draw a triangle to conect this 2 shapes. (use color#b3b3b3).
Add some text.
With Rectangle Tool create a small check box. Go to Blending options Use Color overlay with color #ffffff and Stroke: 1px; with color #a4a4a4.
Add some text.
Final result
