I decided to share a short but useful tutorial on how to design some basic elements for your website or application.

The elements that we will be building will be clean and simple, not because I don’t want to get fancy or anything, its because simplicity is universal and it works. Ever wonder why some of the most successful UI’s out there stick to the basics, keep it clean, neutral colors, simple fonts, plenty of white space? Because it works!

In this tutorial we will cover the following:

• A Simple container to hold our information
• An input field with a browse button
  
• A browse button with 3 states (normal, hover, pressed)

You will need photoshop CS3 to follow along. Lets get started!

(NOTE: The following instructions are for average to advanced Photoshop users, I will not stop the tutorial and explain where and how to find each tool.)

Here is what we will end up with after the tutorial is over

1. A Simple container to hold our information

Fire up Photoshop and start a new Canvas. Size doesn’t really matter, for this tutorial I chose 537×400 but you can do whatever feel’s right. Since we are building for web go ahead and set your Resolution to 72 dpi.

Create a new layer and name it “Container”. Next grab the Rounded Rectangle Tool set the radius of the curve to 4px, just enough to break the rough edge, I don’t like over doing the round edges, I think the smaller the radius the cleaner the button, plus big round buttons I think it look over done and tacky! But that’s me! So, with the Rounded Rectangle Tool selected, draw a box about 330×330 again the size is up to you.

Next thing we want to do is give out container a smooth black gradient. Go to your layer pallet and right click on the “Container layer” from the drop down menu choose Blending Options and set the values as the image (s) below:

Gradient Overlay

Click on the bottom left color diamond and chose a true black as our first color #000000 then click on the bottom right diamond and choose #45494d. This will give us a subtle but nice black fade for our base container.

Next we want to add a little bit of Bevel and Emboss, just enough to make it pop. Set the values as the image below:

Bevel and Emboss

That’s it! That’s our container, clean and simple. Now lets move on to our input field and browse button.

2. An input field with a browse button

OK, so we have our container but its a bit lonely, so lets give it some friends! wow, wow, was that a Bob Ross moment?! Anyways, moving on, Create a new layer and name it “Input” grab the same Rounded Rectangle Tool as above with the same 4px radius and create a rectangle about 165×35, then go over to your layers pallet and right click on the “Input” layer and choose Blending Options ( You will eventually memorize these steps because they are the same through-out the whole tutorial, as you can see on our final product above its all rectangles and gradients, the only thing changing is the colors and effects) go ahead and add a Gradient Overlay with the following settings:

Gradient Overlay

Click on the bottom color diamond and chose a grey as our first color #cccccc then click on the bottom right diamond and choose #eeeeee. This will give us a subtle grey fade.

If you followed all the steps you should have something like my image below.

Next we want to create the Browse button for our input field. Yep, you guessed it we will be using the same tools as above. Create a new layer and name it “Button 1″. With our Rounded Rectangle Tool, 4px radius, create a rectangle about 127×33. Line it up to the right side of your input field. Next we want to right click our new layer and add Blending Options once again, but this time with the following settings:

Bevel and Emboss

Gradient Overlay

Click on the bottom left color diamond and chose true black as our first color #000000 then click on the bottom right diamond and choose #45494d. This will give us a subtle but nice black fade, same as our container.

Then if you want to create another set of input field and browse button to match the final product just duplicate your layers and move them down.

3. A browse button with 3 states (normal, hover, pressed)

We already have our normal state button from the steps above, so we just need to create 2 more buttons with the hover and pressed state. Duplicate the “Button 1″ layer and move it outside your container, name it “Normal”. Next create another duplicate of the “Normal” button layer move it down under your normal state button and rename it to “Hover”. Then we gonna want to change the gradient of the hover button to a lighter grey. Open your blending options for that layer and change the gradient to the setting below:

Click on the bottom left color diamond and chose color #555555 then click on the bottom right diamond and choose #9fa1a4.

Next step is the pressed state of our button. Make a duplicate of the “Normal” layer once more and rename it “pressed”, move it under our hover layer, open your blending options for that layer and change the effects to the settings below:

Inner Shadow

This time because our button is blue we want to use a dark blue color for our Blending mode. Use this blue #004e61.

Bevel and Emboss

The same thing with the bevel and emboss shadow color, we want to use a blue color to match our button. I chose #009ec7.

Gradient Overlay

For the gradient colors I used #009ec3 for the darker blue and #00b7ea for the light blue.

And there you have it! Easy right? now feel free to change the gradients and colors to fit your design.

Just keep in mind that subtle gradients and smaller corner radius make for a better looking design. Have fun!!