Whether you're designing an application interface, a skin for your favorite audio/video player software, or a slick website layout, you'll find that the techniques outlined in this tutorial will be useful in these and many other instances. The example in this tutorial is a single part of what would make up a complete interface - several similar parts combined together would add up to a great looking interface. The point of this tutorial is to introduce you to many of the elements of interface design that you have at your disposal, to give you tools and ideas which you can call upon while designing your own interface.
5+Note: Before beginning, you should be aware that the steps involved in this tutorial require both a good deal of time/patience and a considerable level of knowledge of Photoshop and its tools. If after taking a peek at the steps ahead you feel uneasy, you should consider spending some more time trying out the more basic tutorials, and then come back to this one when you're ready.
Let's get started. You'll want to start with a fairly large image to give you plenty of space to work with - a good choice would be at least 500x50px, with a resolution of 72 pixels/inch and a white background. It can be scary staring at a blank white canvas, so why not paste your favorite wallpaper or background onto the first layer of your image, and turn the opacity down so it's present but not obtrusive.
2.
Let's start with the main shape. The shape for this tutorial will be fairly simple, based on a mini-disc player remote. Select a light gray as your foreground: #E5E5E5 and grab theRounded Rectangle tool.
Match your options to the following:
Now create a new layer and draw out a large pill shaped bar, about the size of the example below.
You "could" just stick with this simple shape... but hey where's the adventure in that? The cool thing about using the vector shape tools in Photoshop is that the shape is actually apath that you can change any way you like.
To manipulate the shape, grab the Direct Selection tool and click the center of your shape to highlight the path. Now click along the path so that all of the anchor points can be seen.
With the Direct Selection tool still active, click the anchor point in the top right so it becomes black. Now on the keyboard nudge the point up 5 times (5 pixels). Do the same with the bottom right anchor point. It should look like this:
At the moment it looks like an un-even pill shape. Grab the Add Anchor Point tool (found by right clicking on the pen tool in the toolbar). Click along the path in the same places as in the example below to add two new anchor points.
Now using the Direct Selection tool again, select the top anchor point you just added by clicking on it, and press down on the keyboard 4 times to nudge it down 4 pixels. Do the same with the bottom anchor point you just created, but nudge it 4 pixels up instead of down.
If you did that correctly, it will look like this.
Press CTRL + H to hide the path and look at your smooth shape.
Now we are done creating our main shape, but since we did it as a path we can easily modify it later if we need to which is always a good bonus.
TIP: try to create as much of your interface using paths/shape tools, since they're vector-based and as such will always be better quality and you'll always be able to go back and edit them.
3.
The main shape is complete, so now we want to make it stand out and look realistic. An important thing you can do that will vastly speed up your work is to save all of the layer styles you create when using Photoshop version 6.0 and later. For instance, in this tutorial's example, a smooth metal bevel layer style was created for the main shape... if the rest of the interface were completed, the same layer style could be instantly applied to the main shape of that as well. It saves you LOADS of time compared to entering the same settings over and over again, and looks great.
So on your shape layer, go to Layer » Layer Style » Gradient Overlay
Enter these settings: Gradient Overlay
Add a Satin layer style with these settings: Satin
Add a Bevel style with these settings: Bevel and Emboss
Add an Inner Glow layer style with these settings: Inner Glow
Now we need an Inner Shadow with these settings: Inner Shadow
And last but not least a drop shadow: Drop Shadow
Add a Satin layer style with these settings: Satin
Add a Bevel style with these settings: Bevel and Emboss
Add an Inner Glow layer style with these settings: Inner Glow
Now we need an Inner Shadow with these settings: Inner Shadow
And last but not least a drop shadow: Drop Shadow
If you save your layer style by clicking the style button at the top of the styles palette then clicking "New Style", you can use it again and again later on. Once you've finished, click OK.
As you can see, we've created our main shape for all of our elements to sit on essentially using only two tools: the pen/shape tools and layer styles. No interface is complete without a slew of fancy buttons and gadgets though, right?... on the next page you'll learn how to add an inset tab, a glossy LCD screen, buttons, and plenty more.
4.
5.
6.
The next addition will be a black plastic tab that's inset into the surface, which will later contain the interface's screen (for extra details, see the Inset Buttons tutorial). Select the Rounded Rectangle again with the same options as before:
This time though, use white as your foreground color. Create a new layer and draw another smaller pill shape over the top of your interface shape so it looks like the example below. Go to Layer » Layer Style » Gradient Overlay and use these settings: Gradient Overlay. Click OK.
The previous step created the inset, and in this step it's time to make the plastic tab itself. The plastic tab will consist of another (black) pill shape slightly smaller than the one created in the previous step. Drag the layer with the gradient pill shape on it to the "Create a new layer" icon 
to duplicate it. Right click on the newly duplicated layer and choose "Clear Layer Style". Click on the new layer to make sure that it's the active layer and press D then X (to reset your color palette), then hit CTRL+Backspace to fill the new shape with black. Now we need to make this shape slightly smaller, so press CTRL+T to enter Transform mode.
to duplicate it. Right click on the newly duplicated layer and choose "Clear Layer Style". Click on the new layer to make sure that it's the active layer and press D then X (to reset your color palette), then hit CTRL+Backspace to fill the new shape with black. Now we need to make this shape slightly smaller, so press CTRL+T to enter Transform mode.Hold ALT and drag the bottom side up slightly (holding ALT mirrors anything done to the bottom side onto the top side so it remains equal). Now do the same with the right hand side. Once you're happy with it, Hit ENTER to commit it or ESC to cancel and try again.
If all went well, it should look something like this:
Now it's time to add a bit of shine to the black plastic area.
Go to Layer » Layer Style » Bevel and Emboss
and use these settings: Bevel and Emboss
Now add a contour layer style with these settings: Contour
And lastly, you might want to add an inner glow: Inner Glow
Again, you might want to save this style before you click OK.
Go to Layer » Layer Style » Bevel and Emboss
and use these settings: Bevel and Emboss
Now add a contour layer style with these settings: Contour
And lastly, you might want to add an inner glow: Inner Glow
Again, you might want to save this style before you click OK.
It should look similar to the example below at this point:
5.
Now for the fun part — time to add the LCD screen. Create a new layer, and select#86B7E7 as your foreground color. Using the Rounded Rectangle tool with the following options, draw your LCD screen onto the black plastic tab, as shown below.
And it will look like this:
Time for... yeah I know you're not expecting this... another layer style!
Go to Layer » Layer Style » Drop Shadow and use these settings: Drop Shadow
Now add an Inner Glow with the following settings: Inner Glow
Next a Bevel and Emboss layer style: Bevel and Emboss
And lastly a Stroke layer style: Stroke
Go to Layer » Layer Style » Drop Shadow and use these settings: Drop Shadow
Now add an Inner Glow with the following settings: Inner Glow
Next a Bevel and Emboss layer style: Bevel and Emboss
And lastly a Stroke layer style: Stroke
As usual, you should consider saving your new layer style for later use. When you've completed the settings, click OK and compare your results with the example below.
Now, the next part is optional, but to make the LCD look more realistic (er ok, maybe just more cool haha), you can simulate light reflecting off the surface by adding a highlight. Here's how:
This can get a little tricky, and while there are a few easier ways of getting a similar effect, this way is more realistic. Duplicate the layer that contains your blue LCD screen by dragging it onto the "Create a new layer" icon . Right click on this new layer and choose "Clear Layer Style", then press X then D on the keyboard to reset your colors. Now hit CTRL + Backspace to fill the shape with white.
. Right click on this new layer and choose "Clear Layer Style", then press X then D on the keyboard to reset your colors. Now hit CTRL + Backspace to fill the shape with white.With the Direct Selection tool, click the now-white shape, and press CTRL + T to transform the shape.
In the options bar at the top, enter these settings (see highlighted):
Hit Enter on your keyboard to commit the changes.
It should now look like this:
Lower the fill opacity (in the layers palette) to 0% so the white shape is invisible:
Now, press D then X to reset your colors.
Go to Layer » Layer Style » Gradient Overlay and use these settings: Gradient Overlay, then click OK. You should have a good looking highlight now, but it's actually a little too perfect.
Go to Layer » Layer Style » Gradient Overlay and use these settings: Gradient Overlay, then click OK. You should have a good looking highlight now, but it's actually a little too perfect.
In the Layers palette, add a layer mask to your screen highlight layer by pressing the "Add layer mask" icon 
. Now select the Pen tool (make sure you have the correct one).
. Now select the Pen tool (make sure you have the correct one).In the options bar, set the options to these:
Now, on your canvas, draw a path that will contain all parts of the highlight you want to keep (see image below)
Now right click INSIDE the path and choose "Make Selection" (you should still have the pen tool as your active tool). Leave all settings as default and click OK in the dialogue that pops up.
Press X then D to reset your colors (if needed) and hit CTRL + Backspace on the keyboard to fill the selection with ... Press CTRL + D to deselect, and your results should look similar to the example.
The LCD screen is now complete; all that remains is to add your text to it. You can download an LCD-like font here.
6.
Now you will want to add your buttons to the interface. As usual, you should try to use layer styles as much as possible to create your buttons.
The process of creating and adding buttons will not be covered in this tutorial, but look out for interface button tutorials coming soon. By this point you now have quite an array of useful interface-design techniques under your belt - see what you can come up with.
Let me know if you face any problem