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 the Rounded 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 a path 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
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.
)){kind=link}
)){kind=link}
)){kind=link}
)){kind=link}
)){kind=link}
)){kind=link}