How to Create a Simple Player Bar UI in iDraw for iPad ~ KrobKnea

What You'll Be Creating

In the following tutorial you will learn how to create a simple player bar UI in iDraw for iPad. For starters you will learn how to set up a grid and how to create several rectangles that will serve as guides. Taking full advantage of the Snap to Grid feature and using basic blending techniques along with linear gradients, you will learn how to create a bunch of sleek dividers.
Next, you will learn how to create the main shape using the Rounded Rectangle Tool and the Effects pane. Using the same tool and pane, plus the Ellipse Tool, you will learn how to create the seek bar. We'll continue with the buttons and the volume bar and you will learn how to easily copy and paste a style from one shape to another. Finally, you will learn how to add a simple piece of text and how to make it stand out using two simple effects.

1. Create a New Document and Set Up a Grid

For this tutorial we'll create a new 600 x 400 pixel document. From the Documents Browser, tap the plus button at the top-right corner of the Titlebar and choose the Grid document style.
Focus on the right side of the Titlebar and tap the Settings icon. In the Canvas pane, set the Width to 600 px and the Height to 600 px, select Pixels for the base units, and verify that the Pixel-Align Strokes feature is enabled. The Pixel-Align Strokes feature ensures that all shapes which are aligned to the pixel grid will have solid, crisp strokes.

Next, we'll set up the document grid. Switch to the Grid & Rulers section in the Settings popover. Ensure that the Snap to Grid feature is enabled and keep in mind that this is where you should come whenever you wish to enable or disable the grid or Snap to Grid. Finally, simply tap the Grid Spacing section, and enter 5 px in both Spacing boxes and 0 px in the Subdivisions box.

2. Create Some Guide Shapes

Step 1

Focus on the Toolbar and you will notice that by default the fill color is set to white, while the line color is set to black. Tap the fill color box and set its color to R=0 G=152 B=245. Then tap the line color box and drag the Alpha slider to 0%, which will make your line invisible. Grab the Rectangle Tool, focus on your canvas, create a 50 px square, and place it as shown in the following image. The grid and the Snap to Grid feature will make your work easier.

Step 2

Return to your Toolbar, make sure that the Line is still invisible, and then set the Fill color at R=255 G=185 B=0. Reselect the Rectangle Tool, create a 45 x 50 px shape and place it as shown in the following image.

Step 3

Using that same Rectangle Tool, create a second, 45 x 50 px shape, and place it as shown in the following image. Now, you need to make this new rectangle blue. Select the existing blue rectangle, focus on the left side of your Titlebar, tap that paperclip icon, and then go to Copy Style. Reselect the rectangle made in the beginning of the step, return to that paperclip icon, and this time tap the Paste Style command. In the end things should look like in the following image.

Step 4

Use the Rectangle Tool to create a 185 x 50 px shape. Place it as shown in the first image and make it yellow using the same Copy Style and Paste Style commands mentioned in the previous step.
Make sure that the Rectangle Tool is still active, create a 90 x 50 px shape, make it blue, and place it as shown in the second image. Finally, create a 40 x 50 px shape, make it yellow, and place it as shown in the third image.

3. Create the Dividers

Step 1

Now, you will need a grid every 1 px, which simply means that you need to return to the Grid and Rulers pane, tap the Grid Spacing section, and enter 1 px for both Spacing boxes.
Focus on the right side of your leftmost, blue rectangle and grab the Rectangle Tool. Create a 1 x 50 px shape and place it exactly as shown in the following image. Once again, the grid and the Snap to Grid feature will ease your work.
Make sure that this new rectangle stays selected, focus on the right side side of your Titlebar, and tap the leftmost icon. Move to the Effects section and simply tap the color box that stands for the existing Fill. Tap the Gradient Fill and the Linear buttons, set the Angle at 90 degrees, and then move to the gradient sliders.
Tap the left one, set its color to black (R=0 G=0 B=0) and drag the Alpha slider to 0%. Then select the right gradient slider and add the same attributes. Simply tap on the gradient bar and you will get a new gradient slider. Select it, set the color to black, and make sure that the Alpha slider is set to 100%, and then drag it in the center of your gradient bar until the Location tooltip shows 50%.

Step 2

Make sure that your thin rectangle is still selected and keep focusing on the Effects pane. Tap the cogwheel icon that stands for the existing Fill and go to Blend Mode. Select the Soft Light blend mode and tap the Done button.

Step 3

Reselect the Rectangle Tool, create a second, 1 x 50 px shape, and place it as shown in the following image. Make sure that this new rectangle stays selected and focus on the Effect pane. Tap the color box that stands for the existing Fill, and simply replace the existing color with the linear gradient shown below.

Step 4

Pick the Path Selection Tool, focus on the newly opened tool pane, and activate the second tool mode which will allow you to easily select more than one shape. Reselect the two thin rectangles made so far, and focus on the right side of your Titlebar. Tap that rectangular icon, make sure that you focus on the Arrange section, and tap that Group button.

Step 5

Focus on the right side of your Titlebar and tap the rightmost icon top open the Layers pane. Tap the tiny arrow icon that stands for the existing Layer to open it. Here you should find the group made in the previous step, along with the set of blue and yellow rectangles.
Double tap on the name of your group and rename it divider. Make sure that it stays selected, focus on the bottom left corner of your Layers pane, tap that cogwheel icon, and go to Duplicate. Make sure that your newly created group stays selected, focus on your canvas, and place it as shown in the following image.

Step 6

Keep focusing on the Layers pane and make three new copies of that divider group. Select these copies one by one and place them as shown in the following image.

4. Create the Main Shape

Step 1

Get back to your Toolbar, make sure that the Line is still invisible, and then set the Fill color to R=235 G=235 B=235. Grab the Rounded Rectangle Tool, focus on the newly opened tool pane, and drag the Radius slider to 5. Move to your canvas, create a 455 x 50 px shape, and place it as shown in the following image, making sure that it covers almost entirely your blue and yellow rectangles.

Step 2

Reselect your rounded rectangles, focus on the Arrange pane, and drag that Order slider to the left, which will send your selected shape to the back. Now, grab the Path Selection Tool, focus on the newly opened tool pane, and activate the second tool mode. Select all blue and yellow rectangles and delete them using the X button from the left side of your Titlebar. In the end things should look like in the third image.

Step 3

Make sure that your rounded rectangles stay selected, focus on the Effects pane, and simply check the little box that stands for the existing Drop Shadow to activate it. Enter 1 in the Y box and 0 in the other two boxes, and then tap the color box that stands for this effect. Set the color to black and drag the Alpha slider to 15%.

Step 4

Make sure that your rounded rectangle is still selected and keep focusing on the Effects pane. Tap the cogwheel icon that stands for the existing Drop Shadow, and go to Duplicate. Focus on the new effect and simply replace the existing attributes with the ones shown in the following image.

Step 5

Make sure that your rounded rectangles stay selected, and keep focusing on the Effects pane. Activate the existing Inner Shadow effect and enter the attributes shown in the following image.

Step 6

Make sure that your rounded rectangles stays selected, keep focusing on the Effects pane, and duplicate the existing Inner Shadow effect using that same Duplicate command. Focus on the new effect and replace the existing attributes with the ones shown in the following image.

Step 7

Make sure that your rounded rectangles stays selected, keep focusing on the Effects pane, and duplicate the bottom Inner Shadow. Select this new effect and replace the existing attributes with the ones shown in the following image.

5. Create the Seek Bar

Step 1

For the following steps you will need a grid every 5 px, which simply means that you need to return to the Grid and Rulers pane, tap the Grid Spacing section, and enter 5 px for both Spacing boxes. Return to your Toolbar, make sure that the Line is still invisible, and then set the Fill color to R=185 G=185 B=185. Grab the Rounded Rectangle Tool, focus on the newly opened tool pane, and make sure that the Radius is still set at 5. Now, create a 135 x 10 px shape, and place it exactly as shown in the following image.

Step 2

Make sure that your newest rounded rectangle stays selected, and focus on the Effects pane. Activate the existing Drop Shadow effect and enter the attributes shown in the following image.

Step 3

Make sure that your newest rounded rectangle stays selected and focus on the Effects pane. Activate the existing Inner Shadow effect and enter the attributes shown in the following image.

Step 4

Make sure that your newest rounded rectangle stays selected and focus on the Effects pane. Activate the existing Inner Glow effect and enter the attributes shown in the following image.

Step 5

For the following steps you will need a grid every 1 px which simply means that you need to return to the Grid and Rulers pane, tap the Grid Spacing section and enter 1 px for both Spacing boxes. Get back to your Toolbar, make sure that the Line is still invisible, and set the Fill color to R=218 G=65 B=0. Grab the Rounded Rectangle Tool, create a 46 x 6 px shape, and place it exactly as shown in the following image.

Step 6

Make sure that your orange, rounded rectangle stays selected, and focus on the Effects pane. Activate the existing Drop Shadow effect, and enter the attributes shown in the following image.

Step 7

Make sure that your orange, rounded rectangle stays selected, and focus on the Effects pane. Activate the existing Inner Shadow effect and enter the attributes shown in the following image.

Step 8

Make sure that your orange, rounded rectangle stays selected, focus on the Effects pane and duplicate the existing Inner Shadow. Focus on the new effect and replace the existing attributes with the ones shown in the following image.

Step 9

Make sure that your orange, rounded rectangle stays selected, focus on the Effects pane and duplicate the bottom Inner Shadow. Focus on the new effect and replace the existing attributes with the ones shown in the following image.

Step 10

6. Create the Seek Bar Button

Step 1

Get back to your Toolbar, make sure that the Line is still invisible, and then set the Fill color to R=80 G=80 B=80. Using the Ellipse Tool, create a 20px circle and place it as shown in the following image.

Step 2

Make sure that your circle stays selected and focus on the Effects pane. Activate the existing Drop Shadow effect and enter the attributes shown in the following image.

Step 3

Make sure that your circle stays selected, keep focusing on the Effects pane and duplicate the existing Drop Shadow. Select this new effect and enter the attributes shown in the following image.

Step 4

Make sure that your circle stays selected, keep focusing on the Effects pane, activate the existing Inner Shadow and enter the attributes shown in the following image.

Step 5

Make sure that your circle stays selected, keep focusing on the Effects pane and duplicate the existing Inner Shadow. Select this new effect and enter the attributes shown in the following image.

Step 6

Make sure that your circle stays selected, keep focusing on the Effects pane and duplicate the bottom Inner Shadow. Select this new effect and enter the attributes shown in the following image.

Step 7

Return to your Toolbar, make sure that the Line is still invisible, and then set the Fill color to R=70 G=70 B=70. Reselect the Ellipse Tool, create a 10 px circle, and place it as shown in the following image.

Step 8

Make sure that your newest circle stays selected and focus on the Effects pane. Activate the existing Drop Shadow effect and enter the attributes shown in the following image.

Step 9

Make sure that your newest circle stays selected and focus on the Effects pane. Activate the existing Inner Shadow effect and enter the attributes shown in the following image.

Step 10

Make sure that your newest circle stays selected and focus on the Effects pane. Activate the existing Inner Glow effect and enter the attributes shown in the following image.

Step 11

Return to your Toolbar, make sure that the Line is still invisible then set the Fill color at R=218 G=65 B=0. Reselect the Ellipse Tool, create a 6 px circle and place it as shown in the following image.

Step 12

Make sure that your orange circle stays selected and focus on the Effects pane. Activate the existing Drop Shadow effect and enter the attributes shown in the following image.

Step 13

Make sure that your orange circle stays selected and focus on the Effects pane. Activate the existing Inner Shadow effect and enter the attributes shown in the following image.

Step 14

Make sure that your orange circle stays selected, keep focusing on the Effects pane and duplicate the existing Inner Shadow. Select the new effect and replace the existing attributes with the ones shown in the following image.

Step 15

Make sure that your orange circle stays selected, keep focusing on the Effects pane and duplicate the bottom Inner Shadow. Select the new effect and replace the existing attributes with the ones shown in the following image.

Step 16

7. Create the Player Button

Step 1

Get back to your Toolbar, make sure that the Line is still invisible, and then set the Fill color at R=80 G=80 B=80. Grab the Rounded Rectangle Tool, focus on the newly opened tool pane, and drag the Radius slider to 1. Create an 11 x 12 px shape and place it as shown in the following image.

Step 2

Grab the Path Selection Tool and activate the second tool mode from the tool pane. Focus on the left side of your latest rounded rectangle, select the top anchor points and simply drag them 5 px down. Move to the bottom side, select both anchor points and drag them 5 px up. In the end your shape should look like in the second image.

Step 3

Reselect your arrow shape and duplicate it using the Copy and Paste commands from that paperclip icon. Select this copy and place it exactly as shown in the first image. Once you're done, select both arrow shapes, focus on the Combine pane, and tap the Union button. The resulting shape will be your rewind button.

Step 4

Reselect your 20 px circle, return to that paperclip icon, and tap the Copy Style command. Select the rewind button shape, get back to that paperclip icon, and this time tap the Paste Style command. In the end things should look like in the second image.

Step 5

Duplicate your rewing button shape, select the copy, drag it to the right, and place it as shown in the following image. Make sure that this copy stays selected and grab the Rotate Tool. Focus on the newly opened tool pane, set the Angle at 180 degrees, and then tap the Rotate button. In the end things should look like in the second image.

Step 6

Return to your Toolbar, make sure that the Line is still invisible, and set the Fill color at R=80 G=80 B=80. Using the Rounded Rectangle Tool, create a 5 x 12 px shape and place it as shown in the first image. Create a new 5 x 12 px shape and place it as shown in the second image. Reselect both shapes made in this step, focus on the Combine pane and tap the Make Compound Path button. Make sure that your compound path stays selected, tap again that paperclip icon, and then tap the Paste Style command. In the end things should look like in the third image.

8. Create the Volume Bar

Step 1

Grab the Rounded Rectangle Tool, focus on the tool pane, and drag the Radius slider to 2. Create a 3 x 12 px shape and place it as shown in the first image. Using the same tool, create a 10 x 3, an 8 x 3, a 6 x 3 and a 4 x 3 px rounded rectangle. Place these new shapes as shown in the second image.

Step 2

Reselect the five, rounded rectangles made in the previous step, focus on the Combine pane, and tap the Make Compound Path button. Make sure that this new compound path stays selected, go to that paperclip icon, and tap the Paste Style command. In the end things should look like in the second image.

Step 3

Return to your Toolbar, make sure that the Line is invisible, and then set the Fill color to R=218 G=65 B=0. Using the Rounded Rectangle Tool, create an 8 x 3, a 6 x 3 px and a 4 x 3 px shape, and place these rounded rectangles as shown in the following image. Make sure that all three shapes are selected, focus on the Combine pane, and tap the Make Compound Path button.

Step 4

Make sure that your orange compound path stays selected and focus on the Effects pane. Activate the existing Inner Shadow effect and enter the attributes shown in the following image.

Step 5

Make sure that your orange compound path stays selected, keep focusing on the Effects pane, and duplicate the existing Inner Shadow. Select the new effect and replace the existing attributes with the ones shown in the following image.

Step 6

Make sure that your orange compound path stays selected, keep focusing on the Effects pane, and duplicate the bottom Inner Shadow. Select the new effect and replace the existing attributes with the ones shown in the following image.

9. Create the Elapsed Time Piece of Text

Step 1

Grab the Text Tool and simply double-tap inside that new field as you will be guided. Set the color at R=185 G=185 B=185, select the DIN Condensed Bold font and set the font size at 17. Then add your piece of text as shown in the following image. Using the Move Tool, select your piece of text and place it as shown in the following image.

Step 2

Make sure that your piece of text stays selected and focus on the Effects pane. Activate the existing Drop Shadow effect and enter the attributes shown in the following image.

Step 3

Make sure that your piece of text is still selected and focus on the Effects pane. Activate the existing Inner Shadow effect and enter the attributes shown in the following image.

Congratulations! You're Done!

Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.

KrobKnea