Create a 400×400 document with a white BG. then using the Rectangle Rounded Tool, create a standing rectangle and right-click the layer and Raterize Layer:
Then right-click and use this blending options:
Nice, huh. now we will create the screen, then again with the Rectangle Rounded Tool create a rectangle in the top part of the one you made before, raterize layer:
Right-click and use this blending options:
For the Gradient Overlay just choose the “Foreground to Background” and change colors but the two colors have to be in the same range just one darker than the other.
looking nice, now select the Pen Tool. the first Anchor Point put it in the 3/4 (from up down) in the left side of the screen and the other in the 1/4 (from up down) in the right side of the screen:
now something weird will happen, dont worry just close the path:
now with the path closed, raterize the layer and press Ctrl-I. now select the screen layer and select the Magic Wand Tool, click outside the screen and select again the that you just raterized and press DELETE. now just set that layer to Soft Light:
for the screen we will need some icons. go to DaFont and download the CellPic font (so we save a lot of work). now using that font type (all in seperated layers) H, J and N. in the N layer, press Ctrl+T and rotate. Place all layers on top of the screen and under the Soft Lighted one. Now just add the Track number, artist name, song name and some other things you see in a CD/MP3-Player screen. The font i used for text is named DS-Digital, you can find it in DaFont too.
Now we need buttons, create some small rectangles using the Rectangle Rounded Tool. Then right-click the first layer you created and Copy Layer Style then right-click the buttons layer and Paste Layer Style. Now go to Blending Options and in the Bevel and Emboss change the style to Inner Bevel and in the Shading change the angle to 90°.
Now for the Play button, in a new layer holding Shift create a small square then press Ctr+T and rotate, then cut half. And keep doing this until you are finished with all buttons you need.
Unique Web Button
Start by creating a 150×150 px document, with white background. Press Shift + F5 to fill the new layer with 353D44. Create a New Layer, select the Rounded Rectangle Tool and make a rounded rectangle (radious 10px) like this size:
Right-click the shape layer and Raterize Layer, now right-click it again and go to Blending Options:
Parts just needed to be edited will appear
Outer Glow
Blend Mode: Normal
Opacity: 60%
Color: Black (#000000)
Color Overlay
Color: 374756
Blend Mode: Normal
Opacity: 100%
If you want, you add a some white brush to the button:
Done that, create a New Layer (Control + Shift + N), insert your image or text (color: white) and resize the image or text you will use. Right-click layer and go to Blending Options:
Parts just needed to be edited will appear
Outer Glow
Blend Mode: Overlay
Color: White
Size: 10px
If you wont add anything else, then create a New Layer. Holding Control, click on the button layer (rectangular rounded shape) and with the Rectangular Marquee Tool make a selection (holding Alt) of the bottom-half part of the rounded rectangle:
Now, fill that selection with White and apply the White to Transparent 4 style:
*If you dont have this style, click the blue arrow in the Styles Windows and select Web Styles and click Append, now just go to the bottom of the styles list.
Next, just change the Gradient Overlay blend mode to Soft Light:
And thats it! For your site, just use the different colors needed.