Photoshop Tutorial: Audio Interface

Published August 3rd, 2004

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.

Step 1

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.

Step 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 (such as #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 Path 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 Path 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 uneven 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 Path 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 Cmd+H (PC: 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.

Step 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 tons 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.

Step 4

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 tool 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 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 (to reset your color palette), then hit Option+Delete (PC: Ctrl+Backspace) to fill the new shape with black. Now we need to make this shape slightly smaller, so press Cmd+T (PC: 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.

It should look similar to the example below at this point:

Step 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

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 New Layer icon. Right click on this new layer and choose “Clear Layer Style”, then press D on your keyboard to reset your colors. Now hit Cmd+Delete (PC: Ctrl+Backspace) to fill the shape with white.

With the Path Direct Selection tool, click the now-white shape, and press Cmd+T (PC: 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 and flip 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.

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).

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 Option+Delete (PC: Ctrl+Backspace) on your keyboard to fill the selection with … Press Cmd+D (PC: 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.

Step 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.