Advertisement

Create a Mobile Phone Music Player Interface

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called Vector Mobile App Design.
Quick Tip: How to Make an iOS Style Mobile Navigation Bar

In the following tutorial you will learn how to create a mobile phone music player interface. We'll build the interface using pixel perfect alignment, quality vector shape building techniques, as well as gradient and lighting control.

Step 1

Hit Command + N to create a new document. Enter 640 in the width box and 960 in the height box, then click on the Advanced button. Select RGB, Screen (72ppi), and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid).

Next, you'll need a grid every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Pick the Rectangle Tool (M) and create a 640 by 30px shape. Fill it with black, remove the color from the stroke and place it as shown in the following image.

Step 3

Pick the Rectangle Tool (M) and create a 640 by 200px shape. Fill it with R=50, G=50, B=50, make sure that there's no colors set for the stroke, and place it as shown in the following image. Disable the Snap to Grid (View > Snap to Grid), then go to Edit > Preferences > General, and make sure that the Keyboard Increment is set at 1px.

Select this new shape and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the down arrow once (to move it 1px down). Reselect both copies, open the Pathfinder panel, and click on the Minus Front button. Fill the resulting shape with black.

Step 4

Reselect the large rectangle created in the previous step and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Again, fill the resulting shape with black.

Step 5

Reselect the large rectangle created in the third step and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 6

Reselect the large rectangle created in the third step and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 7

Reselect the large rectangle created in the third step, focus on the Appearance panel, and add a second fill using the Add New Fill button. It's the white, square icon located at the bottom of the Appearance panel. Select this new fill, make it black, lower its Opacity to 7%, change the blending mode to Multiply, and go to Effect > Sketch > Note Paper. Enter the data shown below and click OK.

Step 8

Reselect the shape edited in the previous step, add two new fills, and use the radial gradients shown below. The yellow zeros from the gradient images stand for Opacity percentage.

Step 9

Re-enable the Snap to Grid (View > Snap to Grid). Pick the Rectangle Tool (M) and create a 640 by 70px shape. Fill it with the linear gradient shown below and place it as shown in the following image. The white number from the gradient image stands for location percentage.

Step 10

Pick the Rectangle Tool (L) and create a 590 by 10px shape. Fill it with white, place it as shown in the first image, and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK, and go to Object > Expand Appearance. Select the resulting shape and focus on the Appearance panel. First, replace the white from the fill with a dark color (R=25, G=25, B=25).

Next, add a 3pt stroke for this shape. Set its color at R=15, G=15, B=15 and align it to inside. Finally, reselect this rounded rectangle, make sure that no fill or stroke is selected (in the Appearance panel), and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 11

Reselect the shape created in the previous step and make a copy in front (Command + C > Command + F). Select this copy and edit the gradient used for the fill (as shown in the first image).

Next, you need need to mask this new shape. Pick the Rectangle Tool (M), create a 190 by 30px shape, fill it with black, and place it as shown in the second image.

Open the Transparency panel. Select this black shape, along with the copy created in the beginning of the step, open the fly-out menu of the Transparency panel, click on Make Opacity Mask, then uncheck the Clip box. In the end, your masked, rounded rectangle should look like the fourth image shown.

Step 12

Pick the Rectangle Tool (M) and create a 640 by 90px shape. Fill it with the linear gradient shown below and place it as shown in the following image.

Step 13

Disable the Snap to Grid (View > Snap to Grid). Select the shape created in the previous step and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black.

Reselect the shape created in the previous step and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=90, G=90, B=90.

Step 14

Reselect the rectangle created in step 12, add a second fill, and select it. Make it black, lower its Opacity to 7%, change the blending mode to Multiply, and go to Effect > Sketch > Note Paper. Enter the data shown below and click OK. Reselect the three shapes created in the last two steps and group them (Command + G).

Step 15

Re-enable the Snap to Grid (View > Snap to Grid). Select the group created in the previous step, make five copies, and place them as shown in the following image.

Step 16

Pick the Rectangle Tool (M) and create a 640 by 120px shape. Fill it with R=50, G=50, B=50, and place it as shown in the following image.

Step 17

Disable the Snap to Grid (View > Snap to Grid). Select the shape created in the previous step and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black.

Step 18

Reselect the shape created in step 16 and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 19

Reselect the shape created in step 16, add a second fill, and use the radial gradient shown below. Remember that the yellow zero from the gradient image stands for Opacity percentage.

Step 20

Re-enable the Snap to Grid (View > Snap to Grid). Pick the Ellipse Tool (L), create a 110px circle, and fill it with the first linear gradient shown below. Select this fresh shape and go to Object > Path > Offset Path. Enter a -2px Offset and click OK.

Duplicate the resulting shape (Command + C > Command + F). Select this copy and move it 2px down. Select these two smaller circles and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 21

Reselect the circle created in the previous step, add a second fill, and drag it in the bottom of the Appearance panel. Select it, fill it with the radial gradient shown below, and go to Effect > Path > Offset Path. Enter a 3px Offset and click OK.

Make sure that the circle is still selected and add a 2 stroke. Set its color at R=60, G=60, B=60, and align it to inside. Add a second stroke for this shape using the Add New Stroke button. It's the black square icon located at the bottom, left corner of the Appearance panel.

Select this new stroke, make it 1pt wide, set its color at R=25, G=25, B=25, and align it to inside. Reselect your 110px circle, make sure that no fill or stroke is selected (in the Appearance panel), and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 22

Pick the Rectangle Tool (M), create a 30px square, fill it with R=240, G=241, B=241, and place it as shown in the first image. Switch to the Direct Selection Tool (A) and focus on this fresh shape. Select the right anchor points and go to Object > Path > Average.

Check the Both button and click OK. Your square should turn into a triangle now. Select it and go to Effect > Stylize > Rounded Corners. Enter a 2px radius and click OK.

Step 23

Select all the shapes created in the last three steps, group them, (Command + G) and place the group as shown in the following image.

Step 24

Pick the Ellipse Tool (L), create a 90px circle, and fill it with the linear gradient shown below. Select this fresh shape and go to Object > Path > Offset Path. Enter a -2px Offset and click OK.

Now duplicate the resulting shape (Command + C > Command + F). Select this copy and move it 2px down. Select these two smaller circles and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 25

Reselect the circle created in the previous step, add a second fill, and drag it to the bottom of the Appearance panel. Select it, fill it with the radial gradient shown below, and go to Effect > Path > Offset Path. Enter a 3px Offset and click OK. Make sure that the circle is still selected and add a 2px stroke.

Set its color at R=60, G=60, B=60, and align it to inside. Add a second stroke for this circle, make it 1pt wide, set its color at R=25, G=25, B=25, and align it to inside.

Reselect your 90px circle, make sure that no fill or stroke is selected (in the Appearance panel), and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 26

Pick the Rectangle Tool (M), create a 15px square, fill it with white, and place it as shown in the first image. Switch to the Direct Selection Tool (A) and focus on this fresh shape.

Select the left anchor points and go to Object > Path > Average. Check the Both button and click OK. Duplicate the resulting triangle shape and drag this copy to the left. Switch to the Rectangle Tool (M), create a 5 by 15px shape, fill it with white and place it as shown in the third image.

Select the three shapes created in this step and group them (Command + G). Select this new group and go to Effect > Stylize > Rounded Corners. Enter a 1px radius and click OK.

Step 27

Select all the shapes created in the last three steps, group them (Command + G), and place the group as shown in the following image.

Step 28

Reselect the group created in the previous step and make a copy in front (Command + C > Command + F). Select this group copy, drag it to the right as shown in the first image, and go to Object > Transform > Reflect. Check the Vertical button and click OK.

Step 29

Pick the Rectangle Tool (M), create a 70 by 30px shape, fill it with white, and go to Effect > Stylize > Rounded Corners. Enter a 10xp radius, click OK and go to Object > Expand Appearance. Fill the resulting shape with the first linear gradient shown below and make two copies in front (Command + C > Command + F > Command + F).

Disable the Snap to Grid (View > Snap to Grid), select the top copy, and move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the second linear gradient shown in the following image.

Step 30

Reselect the rounded rectangle created in the previous step and add a 2pt stroke. Set its color at R=25, G=25, B=25, and align it to outside.

Add a second stroke for this shape, make it 1pt wide, set its color at R=60, G=60, B=60, and align it to outside. Make sure that no fill or stroke is selected and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 31

Pick the Type Tool (T), click on your artboard and add the "Shuffle" text. Use the Myriad font with a size 14pt and set the color at R=240, G=241, B=241.

Select this text, along with the shapes created in the last two steps, and group them (Command + G). Re-enable the Snap to Grid (View > Snap to Grid), select the group, and place it as shown in the following image.

Step 32

Pick the Rectangle Tool (M), create a 70 by 30px shape, fill it with white and go to Effect > Stylize > Rounded Corners. Enter a 10xp radius, click OK, and go to Object > Expand Appearance.

Fill the resulting shape with the linear gradient shown below and move to the Appearance panel. Select the fill and go to Effect > Stylize > Inner Glow. Enter the data shown below and click OK.

Step 33

Reselect the rounded rectangle created in the previous step and add a 2pt stroke. Set its color at R=25, G=25, B=25, and align it to outside. Add a second stroke for this shape, make it 1pt wide, set its color at R=60, G=60, B=60, and align it to outside. Make sure that no fill or stroke is selected and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 34

Pick the Type Tool (T) and add the "Repeat" text. Use the Myriad font with a size 14pt and set the color at R=73, G=230, B=198. Select this text, along with the shapes created in the last two steps, and group them (Command + G). Now place this new group as shown below.

Step 35

For the following step you will need a grid every 1px. Go to Edit > Preferences > Guides & Grid, then enter 1 in the Gridline every box. Pick the Rectangle Tool (M), create a 50 by 14px shape, fill it with white and go to Effect > Stylize > Rounded Corners. Enter a 3xp radius, click OK, and go to Object > Expand Appearance.

Fill the resulting shape with the linear gradient shown below and move to the Appearance panel. First, add a 2pt stroke. Set its color at R=15, G=15, B=15, and align it to outside. Add a second stroke for this shape, make it 1pt wide, set its color at R=70, G=70, B=70, and align it to outside. Make sure that no fill or stroke is selected and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 36

Pick the Rectangle Tool (M), create a 5px square, fill it with R=25, G=25, B=25, and place it as shown in the first image. Switch to the Direct Selection Tool (A) and focus on this fresh shape. Select the left anchor points and go to Object > Path > Average. Check the Both button and click OK.

Duplicate the resulting triangle shape and drag the copy to the right, as shown in the third image. Duplicate these two triangles, rotate them, and place them as shown in the fourth image.

Step 37

Return to "gridline every 5px". So, go to Edit > Preferences > Guides & Grid, then enter 5 in the Gridline every box. Pick the Ellipse Tool (L), create a 30px circle, fill it with the linear gradient shown below, and place it as shown in the first image. Select this new shape and make two copies in front (Command + C > Command + F > Command + F).

Disable the Snap to Grid (View > Snap to Grid), select the top copy, and move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 38

Reselect the circle created in the previous step and add a 2pt stroke. Set its color to R=25, G=25, B=25, and align it to outside. Add a second stroke for this shape, make it 1pt wide, set its color at R=60, G=60, B=60, then align it to outside. Make sure that no fill or stroke is selected and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 39

Re-enable the Snap to Grid (View > Snap to Grid). Select the shapes created in the last two steps and group them (Command + G). Make five copies of this group and place them as shown below.

Step 40

Pick the Rectangle Tool (M), create a 45 by 30px shape, fill it with the linear gradient shown below, and go to Effect > Stylize > Rounded Corners. Enter a 2xp radius, click OK, and go to Object > Expand Appearance. Make sure that the resulting shape is placed as shown.

Step 41

Disable the Snap to Grid (View > Snap to Grid), select the shape created in the previous step, and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px down. Reelect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.

Step 42

Reselect the rounded rectangle created in step 40 and add a 2pt stroke. Set its color at R=25, G=25, B=25, and align it to outside. Add a second stroke for this shape, make it 1pt wide, set its color at R=60, G=60, B=60, and align it to outside.

Add a second fill for this shape and drag it to the bottom of the Appearance panel. Select it, set its color at R=70, G=70, B=70, and go to Effect > Path > Offset Path. Enter a 2px Offset, click OK, and go to Effect > Warp > Arc Lower. Enter the data shown below and click OK.

Step 43

Re-enable the Snap to Grid (View > Snap to Grid). Select the shapes created in the last three steps and group them (Command + G). Make five copies of this group and place them as shown in the following image.

Step 44

Pick the Rectangle Tool (M), create a 110 by 35px shape, fill it with white, and go to Effect > Stylize > Rounded Corners. Enter a 5xp radius, click OK, and go to Object > Expand Appearance. Make sure that the resulting shape is placed as shown in the first image. Select it, make two copies in front (Command + C > Command + F > Command + F), and disable the Snap to Grid (View > Snap to Grid).

Select the top copy and move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image below.

Step 45

Reselect the rounded rectangle created in the previous step, replace the white with the linear gradient shown below, and add a 2pt stroke. Set its color at R=15, G=15, B=15, and align it to outside. Add a second stroke for this shape, make it 1pt wide, set its color at R=70, G=70, B=70, and align it to outside. Make sure that no fill or stroke is selected and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 46

Select the shapes created in the last two steps and group them (Command + G). Make a copy of this new group and drag it down as shown in the following image. Select the rounded rectangle inside this group copy, go to the Appearance panel, and open the existing Drop Shadow effect.

Replace the existing properties with the ones shown in the following image. The top group represents the active button, while the bottom group represents the inactive button.

Step 47

Select the inactive button group, make eight copies, and place them as shown in the following image.

Step 48

Focus on the bottom buttons, pick the Type Tool (T), and add some text. Use the Myriad font. For the active button, make your text bold, set the size at 17pt and the color it with R=150, G=150, B=150. For the inactive buttons, set the text style at italic and the colors at R=15, G=15, B=15, then add the discrete Drop Shadow effect shown below.

Step 49

Continue with the Type Tool (T) and add some new text. This time use the Calibri font, set the size at 20pt, and the color at R=208, G=210, B=211, then add the Drop Shadow effect shown below.

Step 50

Continue with the Type Tool (T) and add the 1 to 6 numbers as shown in the following image. Use the Myriad font, with a size of 15pt, and set the color at R=150, G=150, B=150.

Step 51

Next, you need to edit the rounded rectangle that stands for the playing song. Select it and focus on the Appearance panel. First, remove the bottom fill. Select the remaining fill, replace the existing gradient with the one shown below, and go to Effect > Stylize > Inner Glow. Enter the data shown below and click OK.

Return to the Appearance panel, select the top stroke, and replace the existing color with R=41, G=225, B=188. Reselect this rounded rectangle, make sure that no fill or stroke is selected, and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.

Step 52

Pick the Type Tool (T) and add some final text. Again, use the Myriad font with a size of 12pt.

Conclusion

Now your work is done. Here is how it should look.

And after placing it in a phone design.

Advertisement