XtremeSkill.com

When working on GUI design, shapes are a great way to achieve a realistic look to your design. As the shapes are vector based, you enjoy the ability to resize them with minimal detail loss, which is a significant consideration in GUI design.

In this tutorial, I will show you how to create a detailed audio player from scratch. This tutorial will be a great opportunity for you to practice those Shape Tools and Layer Styles skills, with lots of adding and subtracting of Shapes. Enjoy!

Step 1

Create a new document using the settings shown below. You can actually use whatever resolution you choose, in this tutorial I used 1024x768.

Step 2

Grab the Gradient Tool, select Linear Style and fill the layer from top (#000000) to bottom (#45494d).

Step 3

Select the Ellipse Tool (Shift + U) and draw a circle. Rename the layer that was just created "Player_L1" and apply a Gradient Overlay and an outside Stroke, using the settings shown below.

Step 4

Next, we will add a nice pattern to this layer. Since you cannot have pattern and a gradient styles applied to the same layer, duplicate the layer and rename it "Player_L1_Pattern." Change the layer's Blending Mode to Multiply with 40% Opacity and apply the layer styles that are shown below. I have used a very cool "Spiderman" pattern by *s0nkite which you can download from here.

Step 5

For the next step you will need to create a vinyl record. A nice tutorial by Arik on Creating a Vinyl Record In Photoshop that will show you how to do it.

You can follow Arik's tutorial, creating the record in this design, simply without the background. Once you have the record done, merge all its layers and rename the merged layer "Player_L2." Apply the following layer styles and also make sure to rotate the record so that its glare will be positioned as shown.

Step 6

Create a new layer and rename it "Player_L12_Shade." While still on this layer, Command-click the "Player_L1" layer to select its shape. Make sure you have selected black as your Foreground color, grab the Brush Tool (B) and using a 200px soft rounded brush gently add some black shading working your way from outside the selected area. Make sure you only color the bottom, as that is the only area that requires shading for now. Change the layer's blending mode to Multiply with 80% Opacity.

Step 7

Duplicate the "Player_L1" layer and place it on top of all other layers. Name this layer "Player_L3." Hit Command + T to transform the shape. We will increase its size by 105% as shown below.

Step 8

Next we need to carve into the newly created circle. In order to do this, click the "Player_L3" layer, grab the Pen Tool (P) and select Subtract From Shape Area (-). Use the Pen Tool to draw the shape as shown below.
Once the shape is ready, grab the Path Selection Tool (A) and select the shape you have just created. Alt-drag the shape to duplicate it, choose Edit > Transform > Rotate and rotate the duplicated shape until it is in the right angle to be placed opposite to the original one.

Step 9

We will now create a pattern, which we'll use to pop up our design a bit. Create a new file (File > New) with the following settings: size of 4px by 4px, resolution of 72 dpi, and a transparent background. Grab the Pencil Tool (B) and adjust the size to 1 px, then create the following pattern using a white color (you may want to zoom in so that the drawing will be easier). Once you are done drawing the pattern, choose Edit > Define Pattern and name it "Dotted Pattern."

Step 10

Double-click on the "Player_L3" layer and apply the following layer styles.

12-18-2008, 08:44 AM

Step 11

Duplicate the "Player_L3" layer and name the new layer "Player_L3_2," also change the layer's Blending Mode to Soft Light with 50% Opacity. Double-click this layer to apply the following layer styles.

Step 12

Create a new layer and name it "Player_L3_Shade." While still on this layer, Command-click the "Player_L3" and add some shading to the right and bottom sides of the selected area (the same way as we did in Step 6).

Step 13

Now we will add a small glare to the player's body. Create a new layer and name it "Player_Glare." While on this layer, Command-click the "Player_L1" layer to select its shape. Fill the selected area with white and de-select the layer (Command + D).
Select the contents of "Player_Glare," choose Select > Transform Selection, and then press the Down Arrow seven times. Next press the Right Arrow five times to move the selection area. When done click Enter to apply the change. Click Delete to delete the contents of the selection area. You now have the glare's shape.
Transform (Command + T) the shape to move and rotate the shape into place as shown. Change the layer's Blending Mode to Soft Light and double-click the layer to apply the following Gradient Style.

Step 14

The next step is a bit tedious, I admit. However, Photoshop lacks the ability to align shapes on paths, and so we must do this step by step in a repetitive manner. Grab the Rectangle Tool (U) and horizontally draw a rectangle 5px wide and 470px long (you can draw one at any size and then change its size by using the Transform Menu, as you can see below).
Grab the Path Selection Tool (A) and select it. Make sure you are in Add To Shape Area mode and then Alt + Shift-drag the rectangle up to duplicate it. Repeat this until you get twenty-five rectangles. Now comes the tedious part - you will need to rotate twenty-four of these rectangles in order to get them organized in a circle.
You can rotate them in -7.5 degrees multiplies. When you are done select all the shapes using the Path Selection Tool (A) and align their horizontal and vertical centers. To finish this step, select the Ellipse Tool (Shift + U), make sure you are in Subtract From Shape Area (-) mode, and draw a large circle leaving only around 10px or so from the original rectangle lines (see below). Repeat the last action, this time with a Rectangle Tool (U) to remove all unnecessary shapes. You've made it through this step! Woohoo!.

Step 15

Name the layer "Decorations" and apply some Inner Shadow using the following settings.

Step 16

Using the Rectangle, Ellipse, and Pen Tools, and the methods described above, create the main panel of the player. To create the 3D effect make the shape you are interested in, name the layer "Main_Panel_1" and apply the following layer styles.

Step 17

Next, duplicate the "Main_Panel_1" and name the new layer "Main_Panel_2." Scale down the shape to 95% width and 92% height of it's original size by clicking Command + T and and using the Transform Toolbar. To finish the look, apply a Gradient Overlay as shown.

Step 18

We will now start creating the audio control buttons and sliders. Choose white as your Foreground color, grab the Ellipse Tool (Shift + U), and while holding the Alt + Shift keys, draw a perfect circle. Name the layer "Control_button_1." Double-click the layer and apply the following Outer Glow settings.

Step 38

As you can see in the final image, I have added some decoration behind the main panel and the control buttons' background. To create this decoration grab the Ellipse Tool (Shift + U) and draw a large perfect circle. Select the Rectangle Tool (U), choose Subtract From Shape Area from the Options Bar.
Now draw two rectangles. One intersects the top side and the other the bottom side of the circle. Resize the shape to fit in the appropriate area. Once you have the shape ready, place the layer below the "Buttons_Bk" layer. Apply the layer styles as shown.

Step 39

The last elements to create are the Close, Minimize, and Compact buttons. The close button is quite simple to create as it is done using the same method we used for the control buttons (Steps 18 through 21). The difference is in the layer styles. In the screenshots below you can see the settings and how to create that Close icon. I will not explain how to create the Minimize and Compact icons, as they are very easy to accomplish.

Step 40

Now it is time to start wrapping things up. Group all layers (excluding the background of course) and name the group "Player 1." Duplicate the group twice, name the two new groups "Player 2" and "Player 3" and re-order the three groups in a descending order.
Merge all the layers in "Player 1" group, name the new layer "Final1." Duplicate the layer and go to Filter > Blur > Gaussian Blur, then select Radius of 1.0 and apply. Create a layer mask, press (D) to reset your color palettem and (X) to make black as your Foreground color.
Select the Gradient Tool making sure you are on Radial Gradient mode. Next use the default Foreground to Background preset to apply the gradient from the center of the player to the outside, so that the center area of the player will be sharp, while the edges will be a bit blurry. This will be used to create a depth of field effect. Name this layer "Final1_Blur."

Step 41

Create a new layer, grab the Gradient tool again (G), and select the Foreground to Transparent gradient preset. Draw again from the center of the player to the outside. Click Command + T to transform the gradient and scale it from top to bottom creating a nice shadow at the width of the player. Place the shape a bit further away from the bottom of the player to create a floating effect. Name this layer "Fianl1_Shadow" and place it under "Final1" layer.

Step 42

Duplicate the "Final1" layer and place it under "Final1_Shadow." Click Command + T to transform the shape. Next, while in that mode, Control-click on the transformed shape and choose Flip Vertical. Drag the transformed shape down, place it in the middle of the shadow area and hit Enter. Name this layer "Final1_ref," change its Opacity to 50% and place it under the "Final1_Shadow" layer.
Create a layer mask, press (D) to reset your color palette. Select the Gradient Tool making sure you are on the Radial Gradient mode and use the default Foreground to Background preset to apply the small gradient from the top of the flipped player to its center. This will make a nice reflection of a rounded object.

XtremeSkill.com

Browse XTREME

Browse Tutorials

Friends

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."