Web Design Tutorials osCommerce Template Tutorials
New osCommerce Templates osCommerce Specials osCommerce Forums Search Our Site Contact Us Resources Web Design Tutorials
Web Designers Library- Tutorials and Articles
Tutorial Search
  Advanced Search
 
Tutorial Menu
 
 Video Tutorials
  · Dreamweaver
  · osCommerce
  · Installations
 
 Photoshop
  · Tutorials
  Photoshop Basics
  Special Effects
  Text Effects
  3D Effects
  Textures & Patterns
  Web Layout
  Drawing Techniques
  Color Management
  Photo Editing
  ImageReady Animation
  Miscellaneous
  · Articles
 
 Web Design Basics
  · Design Principles
  · Website Usability
  · Color Theory
  · Templates & Tuning
 
 osCommerce
  · osCommerce Knowledgebase
  Catalog Area
  Installation and Upgrades
  Administration Tool
  General Information
  Developers Section
What's New
Latest Tutorials and Articles
Video Tutorials
osCommerce Tutorials
Template installation with cPanel and Ipswitch
Photoshop
Photoshop CS3: Output Sharpening
Change Color on an Object
Sunlight Effect
Autumn Effect
Eyes in Green Pea Pod
Web Design Basics
A To Z About RSS
Elements of Great Websites
The Next Generation Website Model
Why Use a Web Design Template?
Web Site Templates and Their Benefits
osCommerce
SSL - This page contains secure and non secure items
Post-Installation
Security - .htaccess
SSL - This page contains secure and non secure items
Tax Proposal
Photoshop : Tutorials : Web Layout Last Updated: Apr 15th, 2008 - 18:38:37


Login Field
Author: NuPixel
Authors Website: www.nupixel.com
Dec 29, 2006, 16:25

Email this article
 Printer friendly page

#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:
Web Designers Library- Tutorials and Articles
Login Field


#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:
Web Designers Library- Tutorials and Articles
Login Field


#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:
Web Designers Library- Tutorials and Articles
Login Field


#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
Web Designers Library- Tutorials and Articles
Login Field


#7: Duplicate your layout for a password box, 'Right Click>Duplicate>Ok' and drag it down some. Your image should look something like mine:
Web Designers Library- Tutorials and Articles
Login Field


With some gradient buttons, and some text, you get the finished product.
Web Designers Library- Tutorials and Articles
Login Field



Top of Page

 
Level Ten Hosting