Create a GUI for an iPad Audio-DJ Application Using Photoshop

Slick designs are an important part of a successful iPad interface. In this tutorial we will explain how to create a beautiful GUI for an Audio/DJ iPad application in Photoshop. Let's get started!

Tutorial Assets

Step 1

Create a new file. Set Width to 768 and Height to 1024 and the resolution to 132 PPI.

Step 2

Make a new Group and name it Background. Open Leather Texture by Tommaso Nervegna, build a grid system just like the one in the example, by splitting the canvas in half on the horizontal and in 3 on the vertical. Resize the texture to fit the one of the 6 shapes and duplicate it 5 more time so we can fill each one.

Step 3

Merge all 6 layers that we previously did and apply a Gradient Overlay from the Layer Style panel. Center the gradient just over the middle of the canvas exactly like seen in the example and our Background is done. Continue reading to get more steps done.

Step 4

Create a ne Group and name it Platter. Now using Ellipse Tool (U) Make a perfect circle (513x513 px), reduce the fill level to 0 and apply the layer styles from the example. You should get a result similar to the one at the bottom of the example.

Step 5

Now we will give the shape a light stroke. Using Brush Tool (B) set the size to 300 and the Hardness, set foreground color to #01f5f5 and make a dot like the one in the example. Set the blending mode for the layer to Overlay.

Step 6

Using Ellipse Tool (U) make another perfect circle (483x483 px), set the foreground to #111111 and apply an Outer Glow, using the settings from the example.

Step 7

Again using Ellipse Tool (U) make another perfect circle (481x481 px) but make this one 2 px smaller than the previous one. Set the foreground color to #00a2ff and apply the Layer Styles from my example.

Step 8

Make a new circle using Ellipse Tool (U) set the foreground color to #c2c2c2, make it 10 px smaller than our previous one(471x471 px) and apply a Stroke from the Layer Styles panel, using the settings from the example.

Step 9

In this step we will create some shapes in order to give more depth to the Platter. Using Pen Tool (P) draw a shape like the one in the example. Make it around 64 px width and 55 height, set the foreground color to #000000 than duplicate it to build a circle out of the shapes and apply the Gradient Overlay to each shape, slightly changing the angle orientation as you move from one shape to another to give it a more dynamic shade, in this case offering us more depth. Group all this shapes and using Ellipse Tool (U) make a perfect circle (467x467 px) above this group. Transfer the Vector Mask Thumbnail from the circle we did to the group of shapes, and delete the circle.

Step 10

Using Ellipse Tool (U) draw another perfect circle (469x469 px), reduce the Fill level to 0 and apply the Layer Styles from the example.

Step 11

Using Pen Tool (P) draw a shape just like the one in the example. Make it around (425x425 px), set the foreground color to #8d8a8a and apply the Gradient Overlay using the settings in the example.

Step 12

Pick up Ellipse Tool (U) and make a perfect circle (405x405 px), set the foreground color to #232323 and apply the Layer Styles from the example.

Step 13

Duplicate the previous circle, reduce the Fill level to 0 and apply the Layer Styles.

Step 14

Using Ellipse Tool (U) make a perfect circle (160x160 px), reduce the Fill level to 0 and apply a 1 px, black (#000000) stroke from the Layer Style panel. Now duplicate this layer and resize it to make it a few pixels smaller than the one before him until you get a result like the one in the example.

Step 15

Select all the layers, merge them into a Smart Object and set the Fill level to 10%. Duplicate this Smart Object 4 more times, and place the duplicates in the indicated spots from the example image and set the Fill color to 5%.

Step 16

Create a new Group and name it Control Panel. Using Pen Tool (P) draw to shapes like the ones in the example, one on the left side and another on the right side of the Platter. Make the shapes around 300 px and. The foreground is not important because we will add a texture on top of the shape and only use the shape as a base for our wooden texture. After you've finished drawing the shapes, apply the Layer Styles from the example.

Step 17

Open and import the Wood Texture by Matthew Skiles and place one layer on top of the left and right base shape we did for the Control Panel. Transform the texture layers into Clipping Masks and move to next step.

Step 18

Using Pen Tool (P) draw 2 similar shapes to the previous ones, but a little smaller. Reduce the Fill level to 0 and apply the Layer Styles.

Step 19

In this step we will create the indicating arrows. Using Pen Tool (P) draw 2 shapes like the ones in the example. Set the foreground color to #000000 and apply the Layer Styles.

Step 20

Adding text with the help of Horizontal Type Tool (T). Using Tahoma > Bold as a font, set the size to 6 and write under the left arrow "-(bracket) REV" and under the right arrow "+(bracket) FWD" and apply to both a Drop Shadow effect from the Layer Styles panel using the settings from the example.

Step 21

Now to add some text to the left panel, which will become our Equalizer. Using Horizontal Type Tool (T) set the size to 4 px, font to Arial > Narrow and write down "10hz 20hz 40hz 80hz 1khz 2khz 3 khz 4khz 5khz 6khz " and apply the Drop Shadow effect keeping the settings from the example.

Step 22

Using Rounded Rectangle Tool (U) set the Radius to 2 px and draw 10 shapes like the ones in the example. The foreground color for the shapes is #000000. Set the blending mode for the layers to Soft light and apply the Layer Styles from the example.

Step 23

Now we will the EQ buttons. Using Rounded Rectangle Tool (U) set the Radius to 5 px and the foreground color to #ffffff and draw 10 shapes like the ones in the example. Make them around 30 px height and 20 width. Apply the Layer Styles and move to the next step.

Step 24

Using Horizontal Type Tool (T) we will insert a few intensity indicators. Using Tahoma > Regular as a font, 6 px as a font size and foreground color set to #ffffff write down a series of ". . . " like seen in the example. Now set the font to Bold and keep the previous settings, and write down, inside the red circles you see on the example image, following the same order "-", "0", "+" and apply the Layer Styles to all the text layers that we did in this step.

Step 25

Now let's move to the right panel. Here we will have our Pitch control and several other buttons. Using Rounded Rectangle Tool (U) set the Radius to 2 px, and draw a shape like the one in the example, afterwards apply a Bevel and Emboss style from the Layer Styles panel, using the settings in the example.

Step 26

Now using Rectangle Tool (U) we will draw indicator marks on both sides of the shape we did in the previous step. Set the foreground color to #00ffff and draw a series of rectangle shapes, just like the ones in the example. Make sure to keep a pattern in mind, and when drawing make one 22 px by 2 px rectangle shape, than draw 4 18 px by 1 px shapes and so on until you get to the bottom of the shape. When you're done drawing the shapes, select them all, and merge them into a Smart Object, and apply the Layer Styles indicated in the example. Then duplicate the Smart Object, and mirror it on the other side of the pitch slide.

Step 27

Let's make the Tempo button now. Using Rounded Rectangle Tool (U) set the Radius to 5px and draw a shape like the one in the image. Make it around 45 px x 55 px and set the foreground color to #dbdbdb, afterwards apply the Layer Styles seen in the example image.

Step 28

Using Rounded Rectangular Tool (U) with the Radius set to 5 px, make a shape like the one in the example. Set the color to #dbdbdb and apply the Layer Styles.

Step 29

Pick up Rectangle tool (U) and draw 3 white #ffffff shapes like the ones in the example. Over them draw another 3 shapes, same size as the previous ones, except make all 3 on pixel higher than the white ones. Set the foreground colors for these last 3 shapes to # 545353 and move to the next step.

Step 30

Using Ellipse Tool (U) draw 2 perfect circles on the left side of our application just under the EQ control panel. Make the shapes around 89 px x 89 px and set the Fill level to 0. Apply the Layer Styles seen in the example and continue reading the next step.

Step 31

Make 2 more circles using Ellipse Tool (U), a few pixels smaller this time, set the foreground color to #0a0a0a and apply the Layer Styles.

Step 32

Using Ellipse Tool (U) create 2 small circles like the shapes seen in the example, set the Fill level to 0 and apply the Layer Styles.

Step 33

Now to add some text, and symbols. On the left button, using Horizontal Type Tool (T) set the Font to Calibri > Bold, and the font size to 8 px and write down in the center of the button "/". For the Right button using the same settings write down "CUE". Now using Rectangle Tool (U) draw 2 rectangles like the ones in the example, on the right side of the "/" and on the left side, using Pen Tool (P) draw a triangle like the one in the example. Apply the Layer Style to all the text and shape layers that we did in this step.

Step 34

In this step we will make some more interesting buttons. Using Rounded Rectangle Tool (U) set the Radius to 10 px and draw 7 square shapes like the ones in the example, make them around 53 px by 53 px. Set the foreground color to #000000, reduce the Fill level to 10% and apply the Layer Styles.

Step 35

Now we are going to make the normal mode buttons. Using Rounded Rectangle Tool (U) draw only 5 shapes, like pointed in the example, set the foreground color to # 0a0a0a and apply the Layer Styles.

Step 36

Using Rectangle Tool (U) set the foreground color to #ffffff and draw rectangle shapes like the ones in the example. Now using Pen Tool (P) keep the foreground color to #ffffff and draw triangle shapes like the ones in the example. Pick up Horizontal Type Tool (T) and write down in the same places as seen in the example the words "PLAYLIST", "POWER", "EJECT", "TRACK SEARCH", "SEARCH". When you're done apply the Drop Shadow effect to all the layers we did in this step.

Step 37

Make a few rectangle shapes just like the ones in the example using Rectangle Tool (U) and apply the Layer Style. Be careful to make them 1 px width.

Step 38

Now to make the active buttons. Using Rounded Rectangle Tool (U) set the Radius to 10 px and draw 2 shapes like the ones in the example. Set the foreground color to #0a0a0a and apply the Layer Styles.

Step 39

Select Pen Tool (P) and draw 2 triangle shapes like the ones in the example. Set the foreground color to #ffffff and apply the Layer Style.

Step 40

Now to draw the USB plug. Using Rounded Rectangle Tool (U) set the Radius to 10 px and draw a shape above the Playlist button. Make it the same size as the Playlist base. Set the Fill level to 10 and apply the Layer Styles.

Step 41

Using Brush Tool (B) set the size to 36 and the hardness to 0 and make a small black #000000 dot like the one in the example. Now using Rectangular Marquee Tool (M) make a selection like the one in the example and delete it. Now our dot will become a shadow. Apply the Drop Shadow effect to the dot layer and using Pen Tool (P) draw a shape just like the one in the example. Set the foreground color to #000000 and apply the layer Styles.

Step 42

Select Brush Tool (B) again and set the size of the brush to 49 px and the hardness to 70% and make a black #000000 dot like the one in the example. Using Rectangular Marquee Tool (M) make a selection like the one in the example and delete that part. Set the Opacity level to 40% and duplicate the layer. Move the duplicated layer 1 px to the left and press CMD/CTRL + I (invert) and set the Opacity for this last layer to 10%.

Step 43

Now to draw the Speed buttons. Using Rectangle Tool (U) draw 2 white #ffffff lines like the ones in the example, then switch to Ellipse Tool (U) and draw 3 circles like the ones in the example. Set the Fill level for all the shapes to 0 and apply the Layer Styles.

Step 44

Using Ellipse Tool (U) draw 3 circles, inside the previous 3 circles, but this time a little bit smaller. This will represent the button itself. Set the foreground color to #0a0a0a for the middle button, this will be our active state button and apply the Layer Styles from the example.

Step 45

Set the foreground color to #0a0a0a for both left and right button, this will be the inactive state for the buttons and apply the Layer Styles.

Step 46

Using Ellipse Tool (U) make 2 small circles like the ones in the example, set the Fill level to 0 and apply the Layer Styles.

Step 47

Now to add text. Using Horizontal Type Tool (T) write down in the middle of each button, from left to right the numbers "1", "2", "3" and apply the Layer Styles to each one.

Step 48

Using Rounded Rectangle Tool (U) set the Radius to 10 px, and draw 3 shapes like the ones in the example on the right panel. Reduce the Fill level to 10% and apply the Layer Styles.

Step 49

Now make another shape using Rounded Rectangle Tool (U), keeping the Radius to 10 px but reduce the size of the shape so it can fit the previous one. Set the foreground color to #000000 and apply the Layer Styles.

Step 50

Draw 2 more shapes using Rounded Rectangle Tool (U), with the Radius set to 10 px like seen in the example, set the foreground color to #000000 and the Fill level to 10% and apply the Layer Styles.

Step 51

Now to make the active state. Using Rounded Rectangle Tool (U) set the Radius to 10 px and draw 3 shapes like the ones in the example. Only apply the Layer Styles to the upper shape, because that will be our active state button.

Step 52

Now for the normal state, apply the Layer Styles seen in the example to the buttons.

Step 53

Adding text. Using Horizontal Type Tool (T) set the Font to Tahoma > Regular, and the font size to 6 px and write down under each button the following text "BPM LOCK", "VINIL", "RESET TEMPO" and apply the Drop Shadow effect to all text layers.

Step 54

Using Custom Shape Tool (U) insert Arrow 18, from Arrows and place it in the middle of the last button. Got to Edit > Transform > Scale and place a minus in the Set a horizontal scale input, afterwards apply the Drop Shadow effect, keeping the settings seen in the example.

Step 55

Using Custom Shape Tool (U) insert the "NO" Sign, from Symbols and place it in the middle of the first button. Same as the previous shape, go to Edit > Transform > Scale and place a minus in the Set a horizontal scale input, afterwards apply the Drop Shadow effect, keeping the settings seen in the example.

Step 56

Now to create some active indicators. Using Ellipse Tool (U) draw some small circles like shown in the example. Set the foreground color to #00c52e for the Power button indicator and for the rest, set it to #007dc5 and apply the Layer Styles.

Step 57

Using Rounded Rectangle Tool (U) set the Radius to 4 px and draw a shape like the one in the example. Set the foreground color to #000000 and apply the Drop Shadow. Pick up Rounded Rectangle Tool (U), keep the same settings and draw another shape, but this time a little smaller. Set the foreground color to #000000 and apply the Layer Styles.

Step 58

Now let's make the Album Art Holder. Using Rectangle Tool (U) draw a rectangle shape like the one in the example, set the foreground color to #00fbff and apply the Layer Styles. Now open and place any album art that you like. My choice was Chase and Status, Album "More Than Alot". Transform the album art layer into a Clipping Mask. Now using Pen Tool (P) draw a shape like the one in the example. Add a Layer Mask and smoothly using a medium size brush, paint over the mask with black color #000000 to get a result like in the example. Set the Opacity level to 20% and move to our next step.

Step 59

Got to Digital dream Font and import it into Photoshop. Select Horizontal Type Tool (T), set the Font to Digital dream Fat Skew Narrow and the Font size to 12 px and write down "Chase & Status", "More than Alot" using white #ffffff as a foreground color. Keep the Font, but change the size from 12 px to 14 px and Write down on the bottom left size, like seen in the example the words "Pieces - (feat plan B)" and on the right side of our display "00 00 00 " 2 times, and reduce the Opacity level for this 2 text layer to 10 px. Now on top of them keeping the same setting write down "02:13. 33" and "04:49. 02" exactly like seen in the example. Apply the Outer Glow effect to all the text layers.

Step 60

Using Pen Tool (P) draw a shape like the one in the example, add a layer mask to it and using a black #000000 medium size brush, dodge away so that we get a smooth transition from white #ffffff to the information under this layer. Set the Blending Mode for this layer to Exclusion and the Fill level to 7%.

Step 61

Using Pen Tool (P) draw 2 shapes like the ones in the example. Set the Fill level to 0 and apply the Layer Styles, afterwards, convert each shape into a Smart Object. You will notice that the Gradien has changed. Add layer masks to both Smart Objects, and brush away the bottom part, using a medium black #000000 brush.

Step 62

Select Pen Tool (P) and draw 2 shape, like the ones in the example. Set the foreground color to #0c0c0c and apply the Layer Style.

Step 63

Using Rectangle Tool (U) make a series of rectagle shapes like the ones in the example. Set the foreground color to #ffffff for all, and group them by sides EX:"left side group EQ". Transform the groups into Smart objects and go to Edit > Transform > Warp. Pull the corners to get a similar result like the one in the example and reduce the Fill level to 10 %.

Step 64

Duplicate the Smart Obkects from our previous step. Set the Fill level to 100%, and apply the Layer Styles. Now using Polygonal Lasso Tool (L) make 2 selections like the ones in the example and add a layer mask to each smart object.

Step 65

Using Pen Tool (P) draw 2 shapes like the ones in the example. Set the foreground color to #ffffff, add a layer mask and brush away the bottom side using a medium black #000000 brush, like seen in the example. Reduce the Fill level to 20% and apply the Layer Style. Select Pen Tool (P) and draw #ffffff a white shape like the one in the example. Go to Filer > Blur > Motion Blur and set the Distance to 40 and the Angle to 0. Reduce the Opacity to 30% and we're done.

Conclusion

You can play around, make new elements, change colors and shape. Experiment! This was always the key in learning. Hope you've enjoyed this tutorial. Thanks for reading!