Biju Subhash: Create interface design in photoshop

Create Interface design with Photoshop
Author: Biju Subhash Date: 15th of October 2008

Here's How:

Open Adobe Photoshop » Create a new document.
Create a new layer. Name it Base Shape.
Select the eliptical marquee tool and draw a circle.
Press and hold the shift key, then draw another circle, without lifting the shif key press and hold space bar and place the circle where you want. The two circles will merge and you get a new shape.

Select gradient tool, press and hold the shift key and drag it from the top to bottom of the circle (Shift key helps you to draw it only horizondal, vertical or a 45°).
Add a layer style "Drop Shadow". Set the distance 14px, spread 6px and size 9px.
Add a layer style "Inner Glow". Set color value #00EAFF.
Add a layer style "Stroke". Set the color black and opacity 100%.

Create a new layer. Name it "Hollow" and draw circle with marquee tool.
Redo the gradient step. (Colors must swap, because it will looks like a small hollow)
Create another new layer. Name it "Play Button". Draw a circle smaller than the previous one and align center to the previous object.
Set the background color to "00EBF4 " and foreground is to "0E4BA0"
Press and hold the shift key and drag it from top to bottom
Add some layer styles. Inner Shadow, Bevel & Emboss and Stroke.
Settings for inner shadow: Distance 15px, Choke 0px and size 8px.
Settings for Bevel and Emboss: Depth 100%, Size 8px, Soften 0px. Heighlight mode is normal and the color is black.
Settings for Stroke: Size is 3px, Position outside and opacity is 100%. Now the play button is look like this

Creat a new layer. Name it "light reflection". Select the pen tool (P) and draw a shape for the light reflection for the play button

Press and Hold the control key after that press Enter key. You get a selection
Move the curson on the top of the "Play Button" layer (don't press or click). You will show the hand icon. Press and hold the control + Shft + Alt key. The hand icon is now changed with a "x" inside the box. Click now and you will get a selection of intersect shape
Change the foreground color to white. Select the gradient tool, open the gradient picker and select the foreground to transparent color.
Drag out the gradient from bottom to top

Create a new layer and name it arrow.
Select polygon tool. Set the sides to 3. Press and hold thd shift key and drag horizondally.
Reduce the opacity to 60% and add a drop shadow

Steps are completed for "Play Button". Do the same steps for "Pause Button" and the "Song Details" window.
After all, draw a regtangle in a new layer, move the layer down and place it under the "Base Shape" layer. Copy the layer styles from "Base Shape" layer and paste to this layer
That's it

Bookmark this tutorial online