1. Select the website design you want to use. Generally it's just best to select the home page design. You can either just screenshot the design in your browser and bring it into photoshop, or if you have the original PSD you can use that. (Though, you will have a ton of layers to deal with in that case.)

2. Generally to create the overlay, it's best to use the eye dropper tool and pick a color. I used the darkest shade of blue found in the top and bottom of the design.

3. Create a new layer and make sure it's situated at the top of all the other layers.

4. Select the paint bucket tool and fill in the color.

5. With the layer still selected, change the opacity to around 66%. You can use your own judgement on what looks best.

6. Change the foreground color to white.

7. Choose the rounded rectangle tool by left clicking and dragging out the regular rectangle tool.

8. Change the "Radius:" at the top to 16 px.

9. Draw out a rectangle approximately the same size as seen on the reference image to the left. (Make sure you have the top layer selected before drawing the rectangle.)

10. Right click the layer we just created and duplicate layer.

11. Use the direct selection tool and drag out on the very bottom portion of the loginbox to select the very bottom 2 points. (See here). Hit your delete key to delete them.

12. Select the bottom 2 again in the same manner as the previous step. Left click on one of the points and while holding shift, drag them up to where they're half an inch away from the other nearest points. (See here).

13. On the duplicated layer, double click the white box to change the color. Choose a light blue color as shown to the left.

14. Choose a dark blue (like the one we used to blanket the design initially), then with the type tool type "Member Login" with a similar font as shown to the left.

15. Then beneath it, type in "Username:" - Then with that layer selected, change the font to arial, "Aa" (anti-aliasing) to none, and the font size to 14pt.

16. Right click the username text layer and duplicate it. With the move tool, move it a bit beneath the original "Username:" position. Then with the type tool, change it to "Password:".

17. Use the eye dropper to choose the light blue color that we selected in step 13.

18. Drag out the rounded rectangle tool and change it to the regular rectangle tool.

19. Drag out the username textfield box underneath the "Username:" caption. Change the color of the box we just created (in the layers window) and change it to a near-white shade of blue.

20. Double click the right side of the layer and select Stroke at the bottom. Change size to 1, Position to Inside, and the Color to the same color we chose in step 13.

21. Select "Gradient Overlay". Double click on the actual black/white gradient preview. At the top in "Presets" select the 2nd from the left (solid to gradient). Then double click the very left bottom color picker and change it to white. Hit Ok / Ok to get back.

22. Right click the layer we just worked on, duplicate it. Use the move tool to drag it beneath the password caption.

23. With the type tool and a medium blue foreground color, in the right blank area, type "* Not a member? Register here", then a couple lines beneath it, type "* Forgot Info". Change the font size to 12px.

24. Make sure the "Character" window is visible by going to the Window menu and making sure the "Character" is checked. Change the leading to 14 pt. Highlight "Register here" and choose the underline "T" in the character window. Highlight "Not a member?" and choose the bold "T" in the character window.

25. Choose the direct selection tool, left click on the white panel background to select the layer, drag down the bottom 4 points to extend the height and give us more room to place the login button.

26. With a dark blue foreground color selected, choose the rounded rectangle tool and draw out a login button beneath the password textbox.

27. With the type tool selected, click over the "Member Login" text. Right click the layer,
duplicate it, drag the layer to the very top, change the color to white, and with the move tool move it down over top of the login button we created. Change the text to "Login Now" and CTRL-T to change the size to fit within the button.

28. Select the bottom white background panel layer, double click the right side of the layer to bring up layer styles, and select gradient overlay. Double click the gradient preview and change it to the one we chose before (foreground to transparent). Change the first color picker to a light blue. Hit Ok / Ok. This gives the bottom of the panel a nice blue to white gradient.

29. Choose the initial blanket layer we used to cover the design. With the eye dropper, choose the blue color we used that sits beneath the "Member Login" text. With the type tool, type a "*" outside of the panel. CTRL-T and with shift held, enlarge it. Position it as shown to the left, with the type tool you can choose different fonts to get the best looking asterick.