Her

Home Photoshop Tutorials Drawing Techniques Designing a Black Audio Player Interface (Part 1)

Designing a Black Audio Player Interface (Part 1)

Author: Adobetutorialz.com Author's URL: www.adobetutorialz.com More by this author
Added:Jun 24, 2008 Rating:   Level: Experienced Software: Photoshop  

For the beginning, let's create a new file (File>New), having 1280x1024 px and 72 dpi.

Select then the Rectangle Tool (U) that should be used for representing the background of the picture to be on the final stage.

image 1

Set the next demonstrated parameters by making a mouse click on the layers' panel, to be more exactly, on the layer we work with. Blending Options>Gradient Overlay

image 2

Gradient's parameters:

image 3

image 4

Now we should choose the Rounded Rectangle Tool (U) with a radius of 35 px to draw the primary layer of the media player's panel. The layer's color is #303030

image 5

The layer's parameters: Blending Options>Drop Shadow

image 6

Blending Options>Inner Shadow

image 7

Blending Options>Bevel and Emboss

image 8

image 9

Make a copy of the last made layer and then change the copied layer's parameters with those indicated below:

Fill 0%

Blending Options>Bevel and Emboss

image 10

image 11

Next we shall represent the next layer belonging to the same media player. In this case we shall use the Rounded Rectangle Tool (U) and the Free Transform option for the layer's small inclining.

image 12

The layer's parameters: Fill 0%

Blending Options>Inner Shadow

image 13

Blending Options>Outer Glow

image 14

Blending Options>Gradient Overlay

image 15

Gradient's parameters:

image 16

Blending Options>Stroke

image 17

Gradient's parameters:

image 18

image 19

Next we shall represent the screen of the media player, applying the Rounded Rectangle Tool (U) with a radius of 15 px.

image 20

The layer's parameters: Blending Options>Gradient Overlay

image 21

Gradient's parameters:

image 22

Blending Options>Stroke

image 23

image 24

Make a copy of the recently drawn layer and choose again the Free Transform selection to make the copy smaller, placing it as the next picture indicates it. The parameters of the copy – layer should be changed with those from below:

image 25

The layer's parameters: Blending Options>Drop Shadow

image 26

Blending Options>Gradient Overlay

image 27

Gradient's parameters:

image 28

Blending Options>Stroke

image 29

Gradient's parameters:

image 30

image 31

On the next stage we'll draw the primary layer reserved for the player's buttons. In this case we should use firstly the Ellipse Tool (U) and then press SHIFT button while using the Rounded Rectangle Tool (U) (radius 10 px) to insert several prominences on the left and right sides, as well as on the top and bottom parts. Press Alt button while using the Rectangle Tool (U) to divide the buttons on special sectors. Make the appropriate changes with the Free Transform option if necessary.

image 32

The layer's parameters: Blending Options>Inner Glow

image 33

Blending Options>Gradient Overlay

image 34

Gradient's parameters:

Designing a Black Audio Player Interface (Part 1)