Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Login Field

Login Field


#1: Open a new image and have the size to be 500 width x 200 height

#2: After that is done, select the paint bucket and fill the background color with #373737

#3: Now select your marquee tool and draw a thin rectangle on your palette and fill it with the color white (#FFFFFF) using your paint bucket.

Example:

image 1

#4: Now to make this blank box look more attractive, we are going to add some depth to it. Follow these steps, 'Layer>Layer Style>Inner Shadow' and change yours to the following:

image 2

#5: We're going to add a gradient now for more depth. Click on 'Gradient Overlay' on the left, and your new menu will appear on the right. Change them to the following:

image 3

#6: Last step for the login box is to make it more visible, select 'Stroke' and of course, set your settings to mine. The color I used was: #C9C9C9

image 4

#7: Duplicate your layout for a password box, 'Right Click>Duplicate>Ok' and drag it down some. Your image should look something like mine:

image 5

With some gradient buttons, and some text, you get the finished product.

Login Field



Author's URL: NuPixel
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Login Field"

Captcha