Yes another Photoshop tutorial! What can I say I am on a roll. I was starting to feel bad I guess, promising to post some and I never got around to it. This tutorial would range in the intermediate skill level so everyone should be able to keep up without any issues. Really the only tricky thing to make here is the ribbon.

In today's tutorial I will be teaching you how to create a clean, simple, and professional looking login box design. This type of login box could be used for many different things such as: websites, software, web applications, etc. It is very easy to change the colors and so on, which makes it very customizable for whatever you need it to work with.

A complete (x)html / CSS tutorial is now up, Click Here to view it!

Ok so what is this login box going to look like?

Step 1.) Create the background

To start off the first thing you will want to do is create the background or body of the login box. Doing this is simple.

Grab your Rounded Rectangle Tool and set the radius to 10px. Then set your foreground color to #aeaeae.

Now with these settings draw the background to your login box. Here is what mine looks like. The size is totally up to you. You don't even have to use a 10px radius if you don't want too.

Once you have completed this apply these layer styles to the login box background.

Opacity 40%

Drop Shadow:

Gradient Overlay: Stock Black, White:

Now I have this

Step 2.) The Ribbon

This will be the most difficult part of the tutorial, so follow closely!

Start by setting your foreground color to #51a5c5. And again grab your Rounded Rectangle Tool and set the radius to 10px.

Now draw a shape like mine.

Now duplicate this layer TWO TIMES CTRL+J TWICE.  Now with both layers selected right click on one of them and click "Rasterize Layer".

Using your Rectangular Marquee Tool make a selection on your original shape layer you created in the last step and fill it with your foreground color #51a5c5.

Now you will want to CTRL+Click on the thumbnail of your original shape layer and with the Rectangular Marquee Tool selected move the selection (marching ants) down a few pixels. Like shown here:

Now press delete and deselect CTRL+d, you should have this now.

Select your third duplicated layer you made at the very start of this step and fill it with #091e27. Now move it under your light blue layer on both your workspace and layers palette (F7). You should have this now.

We are almost done this step I swear. Again grab your trusty Rectangular Marquee Tool and make a selection like the one shown.

Click delete on both of your layers. You should have this now.

Now the easy part!  Draw a selection with your Rectangular Marquee Tool the same height as your light blue shape layer. And fill it with #51a5c5.

To finish the ribbon effect on the other side duplicate your light and dark shape layers. Then with both duplicated layers selected click "Edit -> Free Transform". Then click "Edit -> Transform -> Flip Horizontal."

With both layers selected still move them all the way to the right of the screen using your right -> arrow key on your keyboard. Hold down shift while doing this to move 10 pixels at a time. Now you should have something like this.

Yes now you are done. Looks ok right? Now lets apply a gradient and drop shadow to them.

Step 3.) Ribbon styling

Select your middle layer of your ribbon and apply the following effects.

Drop Shadow:

Gradient Overlay:

On your right and left light blue ribbon parts, just apply the gradient effect. No drop shadow.

Now you should have something like this.

Step 4.) Ribbon text

This along with any other text you would code in, but we will add it anyways.

Grab your Type Tool (t) and type Login to your account with #ffffff (white) as the color. Use Arial bold as the font, 12pt aa = none.

Duplicate this layer and move it under your original text layer CTRL+[.  Now fill this text layer with #478fab and move it up one pixel by pressing up on your keyboard arrow key once.

Now you should have this.

Step 5.) Background footer, and stroke

Set your foreground color to #478fab and grab your Rectangular Marquee Tool, make a selection like the one shown, and fill it with your foreground color ALT+Backspace.

Deselect CTRL+d. Now on your main body layer (the gray box you made in step 1) CTRL+click on the shape mask and invert the selection by pressing CTRL+Shift+I. Once you have done this click back on your blue footer layer and press delete on your keyboard and deselect.

Now you should have this.

Now we are going to apply a gradient to the footer to give it some depth and not look so flat.

Gradient Overlay:

Now we are going to apply a white stroke to the body. CTRL+click on the shape mask, and create a new layer right above it CTRL+ALT+Shift+N. Click Edit->Stroke and use these settings.

We are not going to leave it here. We are going to apply a mask to this stroke to fade it.

Click on the "Add layer mask" button on the bottom layers palette (F7).

With the layer mask selected grab your Gradient Tool. Set your Gradient to Foreground to Transparent. With these options.

While holding shift click and drag from bottom to top, let go and like magic you have your fading effect to the line layer.  And now do this again but this time shift click and drag from top to bottom. Like so.

Now you should have this nice stroke.

Now we are going to apply a stroke to the top of the footer. Create a new layer and select your Pencil Tool (b).  Using Hard Round 1 Pixel Brush hold shift and draw a line from the left of the footer to the right.

Now set this layers opacity to 30%.

This is what I have now.

Step 6.) Login button and footer text

For the foot text, select Arial regular 11pt, and set the aa to sharp. Use color #ffffff and type Forgot my password. Register a new account.

For the login button grab your Rounded Rectangle Tool with a radius of 5px and draw the background for your button. Like this.

Now apply these layer styles.

Drop Shadow:

Bevel and Emboss:

Gradient Overlay Stock Black, White:

Select your Rectangular Marquee Tool and a selection like the one shown. Fill it with black #000000.

While on the black layer you just created make sure its above your login button background and click Layer -> Create Clipping Mask. Or press ALT+CTRL+g.

Now set the layers opacity to 10%.

Using the Polygonal Lasso Tool draw a arrow and fill it with color #8a8a8a.

Now select your Type Tool (t) and using Arial 14pt Regular, aa = Sharp type Login. Set it to color #7d7d7d.

You should now have.

Step 7.) Logo and white glow

Now you are going to want to use a different logo obviously. So grab you logo and add it to your document.

With your foreground color set to white #ffffff grab your Brush Tool (b). Using  Airbrush Soft Round 300px click once on a new layer, under your logo. You will want to play with the opacity, adjust it to your liking.

Here is what mine looks like now.

Step 8.) Text fields (Last Step)

Make a selection with your Rectangular Marquee Tool and fill it with white #ffffff.

Deselect and apply these layer styles.

Inner Shadow:

Gradient Overlay Stock Black, White:

Stroke:

Now select your Type Tool (t) and using Arial 12pt Bold, aa = None type Username. Set it to color #478fab.

Duplicate your text field layer, and your user name text layer. Move them down by pressing down on your keyboard arrow a few times.  Hold shift to move 10 pixels at a time.

And thats it! Your done. Here is your final result.

If you have any questions/comments or need some help please post them in the comments below!

Click here to download the .psd used in this tutorial.

View the follow up xhtml/css tutorial for this login box!

About the Author

Adrian Balkwill is a web designer and a user interface designer for a software/web design company located in Canada, he is also the founder of Blogfullbliss. It is his goal to make Blogfullbliss the best source on the web for design/technology related articles and tutorials. 

Subscribe to our RSS Feed!       Follow Adrian on Twitter!