Stereo Interface

For Use With Web Creation or Graphic Design

In this tutorial, we will learn to create a nice looking car stereo like design.

Create this shape with rounded rectangle tool.

Apply these layer styles :-

Image after applying above layer styles :-

Duplicate the layer. Click on rounded rectangle tool. Select substract from shape area (-) and draw a rectangle as shown.

Click on polygonal lasso tool and draw this selection :-

Create a new layer. Go to Edit>stroke and fill the outline with 1 pixel wide black color.

Keep the selection active. Go to select>modify>contract and contract the selection by 1 pixel. Fill the outline with light gray color.

Again, create a new layer. Select the portion as shown by polygonal lasso tool.

Fill the selection with any color of your choice. The color is not important because after applying gradient overlay, it will be replaced :) Apply these layer styles in it :-

Image after applying above layer styles :-

Draw the white color circle with ellipse tool.

Apply same layer styles in it as we applied for the first layer.

Draw another small circle in it leaving the upper 2 pixels from the main circle and apply this gadient overlay.

Duplicate the both layers (buttons) to other side :-

Draw this tinny white color circle :-

Apply these layer style in it :-

Duplicate the circle as shown :-

Draw a line with rectangle tool, apply same layer styles but change the bevel & emboss settings. Change the emboss style to pillow emboss.

Rasterize the layer and draw selection with polygonal lasso tool. Press delete to create the button. Duplicate and place them as shown.

Draw another black color buttons and place it at both sides.

If you want, than you can add custom text in the screen. Our car stereo is ready :)