Tutorials

How to Create a Nice Piano App UI in Photoshop

advertisement

In this article we’ll show you how to create a nice and clean piano app UI.

Tutorial Details

  • Program: Adobe Photoshop
  • Version: CS5
  • Difficulty: Beginner
  • Estimated Completion Time: 1-2 hours

Tutorial Assets

Final Result

piano-preview

Step 1

Create a new file in Photoshop and paint the background layer with #111111.

piano-01

Step 2

Create a new layer and pick the Rectangle Tool (U). Draw a rectangle like the one on the image below (color: #ebebeb) and then apply the following styles.

piano-02
piano-021
piano-022
piano-023

Step 3

Duplicate this shape until you fill the canvas from side to side.

piano-03

Step 4

Group these layers and name the group “white keys”. Then, create a new layer and once again pick the Rectangle Tool (U). Draw a much smaller rectangle and fill it with #111111.

piano-04

Step 5

Create a new layer and grab the Pen Tool (P). Draw a shape like the one on the image below, fill it with #111111 and apply the following styles.

vintv-05
piano-052
piano-053

Step 6

Create a new layer and again select the Pen Tool (P). Draw a shape like this (color: #111111) and add the following style.

piano-06
piano-061

Step 7

Group these three layers and duplicate the group nine times. Place the copies accordingly to the image below. Then, group all the black key groups and name this new group “Black Keys”.

piano-07

Step 8

Create a new layer and draw a big rectangle using the Rectangle Tool (U). Fill the shape with #111111 and add the following styles.

piano-08
piano-081
piano-082
piano-083
piano-084
piano-085

Step 9

Create a new layer and once again select the Rectangle Tool (U). Draw a narrow rectangle from side to side of the canvas. Fill it with #362f2d and apply the following styles.

piano-09
piano-091
piano-092
piano-093

Step 10

Duplicate this layer and move the copy upwards.

piano-10

Step 11

On a new layer draw a rectangle between these two narrow rectangles. Place this layer before the ones created in the previous two steps. Fill this new shape with #362f2d also, and add this style.

piano-11
piano-111

Step 12

Create a new layer and select the Custom Shape Tool (U). Find the “Shape 23″ (from the pack you downloaded) in the list. Change its color to #ecd573 and add these styles. Finally, duplicate this shape and go Edit>Transform>Flip Horizontal.

piano-12
piano-121
piano-122
piano-123
piano-124

Step 13

Create a new layer and select the Rounded Rectangle Tool (U). Set the radius to 10 px and draw a shape between the two ornaments. Fill it with #362f2d and apply the following styles.

piano-13
piano-131
piano-132
piano-133

Step 14

Duplicate the “White keys” and “Black keys” groups and merge the copies. Scale down a lot the new layer and duplicate it until you fill the rectangle you created in the previous step.

piano-14

Step 15

Draw a rectangle (Rectangle Tool – U) to cover some of the keys. Fill it with #000000 and turn its Fill to 60%. Add the following style.

piano-15
piano-151

Step 16

On a new layer draw a rounded rectangle (radius: 10 px) and fill it with #362f2d. Then apply the following styles.

piano-16
piano-161
piano-162
piano-163

Step 17

Pick the Custom Shape Tool (U) and find the “Arrow 2″ shape in the list. Change its color to #ecd573 and apply the following styles.

piano-17
piano-171
piano-172
piano-173

Step 18

Duplicate this arrow twice.

piano-18

Step 19

Repeat the two previous steps, only this time duplicate the arrow once.

piano-19

Step 20

Group these layers and name the group “Arrows”. Duplicate it and place the copy on the other side (flip the group horizontally).

piano-20

Step 21

Create a new layer and draw a big wide rectangle. Change its color to #362f2d and apply the following styles.

piano-21
piano-211
piano-212
piano-213

Step 22

Draw another rectangle and add this gradient (color: #362f2d).

piano-22
piano-221
piano-222

Step 23

Duplicate this shape and move it upwards.

piano-23

Step 24

Create a new layer and using the Rectangle Tool (U) draw a tiny rectangle. Fill it with #ecd573 and add this gradient (it’s the same you added in Step 22).

piano-24
piano-241

Step 25

Duplicate this shape three times and place them accordingly to the image below.

piano-25

Step 26

Draw another rectangle and fill it with #362f2d. Add this gradient.

piano-26
piano-261

Step 27

Create a new layer and grab the Rectangle Tool (U). Draw a very narrow rectangle and change its color to #d6c5b2. Change the Blend Mode to Overlay and apply the following style.

piano-27
piano-271

Step 28

Duplicate this layer three times and place the copies accordingly to the image below.

piano-28

Step 29

Create a new layer and select the Custom Shape Tool (U). Find the “Shape 63″ and fill it with a random color. Turn Fill to 0% and apply these styles.

piano-29
piano-291
piano-292

Step 30

Duplicate this shape and place it on the other corner.

piano-30

Step 31

Add some text (font: Verdana, size: 7pt).

piano-31

Step 32

Repeat the previous, but on the other side of the music stand.

piano-32

Step 33

Create a new layer and select the “Arrow 2″ from the Custom Shape list. Draw a very small arrow, change its color to #ecd573 and apply the following styles.

piano-33
piano-331
piano-332
piano-333

Step 34

Duplicate this arrow.

piano-34

Step 35

Pick the Rounded Rectangle Tool (U) and set the radius to 5 px. Draw a shape like the one below, turn Fill to 0% and apply the following styles. Copy these styles (right click>Copy Layer Style).

piano-35
piano-351
piano-352

Step 36

Create a new layer and select the Rectangle Tool (U). Draw some rectangles and then right click on these layers>Paste Layer Style.

piano-36

Step 37

Duplicate these rectangles, change their color to #ecd573, modify their length, turn Fill to 100% and replace their styles with this one.

piano-37
piano-371

Step 38

Create a new layer and draw a small rectangle. Apply the following styles.

piano-38
piano-381
piano-382
piano-383

Step 39

Duplicate this rectangle five times and place the copies accordingly to the image below.

piano-39

Step 40

Copy the layer styles from Step 38 and duplicate the rounded rectangle from Step 35. Paste the copied styles and change its color to #ecd573. Add a layer mask and hide the unwanted part by painting it black.

piano-40

Conclusion

That’s it. Your piano app UI is now ready. We hope you enjoyed the tutorial and learned something new.

Leave a Comment