Stylish Login Form

1. Create a new document (225*225). We're going to design a login form for a website. You may use this as a login splash page or an email subscribe form or whatever…

2. Fill the background with white #ffffff.

3. Now use your rounded rectangle tool with a radius of 5 pixels to draw a box like shown below. You can fill this box with any color you like (front color is the standard color) because we're going to add a gradient overlay in the next step.

4. We're going to adjust the blending options of this layer so go to (layer - layer style - blending options) and adjust the settings to add the following effects.

5. In this fifth step we're going to use our rounded rectangle tool again (3 pixels radius). So pick a foreground color and draw a button like shown below! All the guide lines you can see in this screenshot are there to help me centering everything… You can also use them if you want to (tutorials can be found using google)!

6. We're going to adjust the blending options of this layer as well (just like in step 4) so go to (layer - layer style - blending options) and adjust the settings to add the following effects.

7. Now duplicate the layer from the previous step and drag it to the bottom of you login form, this will be your submit button!

8. Create a new layer in this step (layer - new layer) and use your rectangular marquee tool to select a box like shown in the screenshot, fill it with #ffffff… Users will be able to type in their login details here!

9. Adjust the blending options of this layer (layer - layer style - blending options) and adjust the settings to add a small outer stroke.

10. Duplicate this layer too (layer - duplicate layer) and drag it under the previous one. This box will be the one where they can fill in their password!

11. In this last step I've just added some demo text (microsoft sans serif, #ffffff and #9d9d9d)! I'll not explain how to code this design but there you go, an attractive login box for your visitors!