Round the edges of the key slightly by selecting from the menu Effect, Convert to Shape, Rounded Rectangle. With the white rectangle selected, go to the Transform Panel and position the lower left corner to X: 16 px and Y: 16 px, as shown below. Click once on the artboard and define a rectangle 9 px wide by 50 px height. Select the Rectangle Tool and set the fill to white and stroke to black (1 px) as shown in the Toolbox below. Rename the layer “white keys”.ĭraw the leftmost key. Rename the layer “black background” and lock the layer.Ĭreate a new layer for the white keys by selecting the Create New Layer icon on the Layers panel as shown with the red circle below. Using the same width and height dimensions of the original rectangle for the Absolute values, set the rectangle to Width: 500 px and Height: 120 px, with a corner radius of 9 px.

With the black rectangle selected, round the corners by selecting from the menu Effect, Convert to Shape, Rounded Rectangle. With the black rectangle selected, go to the Transform Panel and position the lower left corner at X: 0 px and Y: 0 px, as shown below. Click once on the artboard and define a rectangle 500 px wide by 120 px height. Select the Rectangle Tool and set the fill to black and stroke to none as shown in the Toolbox below. Draw a black rectangle for the keyboard backgroundīegin with drawing the main background of the keyboard. This step by step tutorial demonstrates drawing a keyboard illustration using rectangles, grids, move and transform effects.Ĭreate a new document named “keyboard” with a custom size of 500 px width and 120 px height.

Drawing of piano keys