Hand Held Interface

Step 1.

Create a new document that is 500x500 in size, and fill the background with a dark grey color I'm using: #313131

Step 2.

Get out the polygon lasso tool, create a new layer and make a selection on the canvas similar to this:

Go to: Select->Smooth with a setting of 5 pixels:

Set your foreground color to: #78818C and your background color to: #414648

And fill the selection with a gradient from top to bottom like so:

Press Ctrl + D on your keyboard to deselect the selection.

Step 3.

Double click this layer, and apply the following blending options:

Drop Shadow:

Outer Glow:

Bevel & Emboss

Stroke:

Result:

Step 4.

Next create a new layer, and go to Filter->Render->Clouds

Now go to: Filter->Render->Difference Clouds

Press Ctrl + F on your keyboard to repeat the filter one more time.

Press Ctrl + G on your keyboard to group this layer with the previous layer.

Finally change the blending mode of this layer to "overlay". Here's how your layers pallet should look now:

Result:

Step 5.

Next create a new layer, get out the elliptical marquee tool, and make a large oval selection over the top portion of the interface-base like so:

Next set your foreground color to white (#FFFFFF) get out the gradient tool, and fill this selection with a gradient like so:

Change the blending mode of this layer to "screen" and drop the opacity down to 50 percent:

Next group it with the previous layer, by pressing Ctrl + G on the keyboard. Here's how your pallet should look:

Result:

Step 6.

Create a new layer, get out the polygon lasso tool again and create a selection inside of the interface-base, notice I used the elliptical marquee tool to deselect a portion in the top right corner of the screen I did this by holding the Alt key with the elliptical marquee tool:

Go to Select->Modify->Smooth with a setting of 5 pixels:

Fill this selection with a white to transparent gradient just like in the previous step:

Do not deselect!!

Change the blending mode of this layer to "overlay" and drop the opacity down to 59 percent:

Do not deselect!!

Result:

Do not deselect!!

Step 7.

Create a new layer, name this layer "screen base".

Go to Select->Modify->Contract with a setting of 4 pixels:

Set your foreground color to: #10131F and your background color to: #78818C

Get out the gradient tool, and fill this selection with a gradient similar to this:

Press Ctrl + D on your keyboard to deselect the area.

Step 8.

Create a new layer, go to Filter->Render->Clouds

Go to Filter->Render->Difference Clouds

Press Ctrl + F on your keyboard one or two times to repeat the filter.

Change the blending mode of this layer to 'overlay' and drop the opacity down to 75 percent

Press Ctrl + G on you keyboard to group this layer with the previous.

Here is how your layer pallet should look after this:

Result:

Step 9.

Create a new layer. Get out the elliptical marquee tool and make a selection similar to this:

Set your foreground color to white (#FFFFFF), get out the gradient fill tool, and fill this selection with a gradient like so:

Drop the opacity of this layer down to 26 percent, and press Ctrl + G on your keyboard to group it with the previous layer:

Result:

Step 10.

Create a new layer. Next hold down the Ctrl key on your keyboard and click the layer named "screen base" (it should be three layers down) to make a selection on the canvas with it's contents:

Go to Select->Modify->Contract with a setting of 8 pixels:

Set your foreground color to: #4D5898 and your background color to: #389EDF

Using the gradient fill tool, fill the selection with a a similar gradient:

Press Ctrl + D on your keyboard to deselect the area, double click this layer and apply the following blending options:

Inner Shadow:

Outer Glow:

Result:

Step 11.

Create a new layer, get out the elliptical marquee tool and make a selection similar to this:

Fill this selection with a white to transparent gradient as we have done in previous steps.

Change the blending mode of this layer to "overlay" and drop the opacity down to 73 percent.

Result:

Step 12.

Now we'll add the buttons to the interface. Create a new layer, and get out the elliptical marquee tool and make a selection similar to this:

Set your foreground color to: #424A4F and your background color to: #74818B

Get out the gradient fill tool, and fill the selection like so:

Do not deselect!!

Step 13.

Create a new layer, go to select->modify->Contract with a setting of 4 pixels:

Using the same colors, fill this selection with a gradient, only going the opposite direction:

Double click this layer, and apply the following blending options:

Outer Glow:

Bevel & Emboss

Stroke:

Result:

Step 14.

Create a new layer. Get out the elliptical marquee tool, and make a selection like so:

Set your foreground color to (#FFFFFF) white, and fill this selection with a transparent to white gradient form bottom to top.

Press Ctrl + D on your keyboard to deselect the area.

Change the blending mode of this layer to "overlay" and drop the opacity down to 45 percent.

Press Ctrl + G on your keyboard to group this layer with the previous.

Your pallet should look like this now:

Result:

And that completes all the techniques in the tutorial.

Here I've duplicated the steps and created another button. I've also added a small over-snap on the top with a speaker looking circle on it. (this is just another button, with a smaller button inside of it, nothing new). Here's how my piece turned out after playing with it for a few minutes:

Like I said, just continue to use the same techniques to add as many little panels/pieces you'd like.

I hope you enjoyed this tutorial, and that it's inspired you to create some great looking interface layouts for your next application or web site design! Thanks for reading.