Sketch - How to create Calculator in Sketch

In this tutorial we will learn to create CALCULATOR icon using Sketch.

Contents

• Step 1: Create artboard
• Step 2: A big rectangle
• Step 3: Rectangle for display
• Step 4: Small buttons
• Step 5: Bigger button

Step 1: Create artboard

Open Sketch and create a new Artboard.

Click on Insert and then select Artboard or hit the A key on your keyboard and you will be able to create an artboard.

Now draw a square artboard having width 128px and height 128px.

Step 2: A big rectangle

To create the calculator we will start by first creating a rectangle having width 90px and height 110px. This will be the body of the calculator.

Go to Insert then select Shape and then click on Rectangle or simply hit the R key on your keyboard. Now draw the rectangle.

Place the rectangle at the center of the artboard.

Remove the Borders from the right side menu and fill the rectangle with black color by setting the Fills to #000 which is hex code for black.

Also, set the Radius of the rectangle to 5 units from the right side menu. At this moment the rectangle will look something like the following.

Step 3: Rectangle for display

Now, we will draw another rectangle having width 82px and height 24px. This rectangle will represent the display of the calculator.

Go to Insert then select Shape and then click on Rectangle or simply hit the R key on your keyboard to draw this rectangle.

Make sure to align this at the center with respect to the first rectangle that we created in Step 2.

Remove the Borders and fill the rectangle with white color by setting the Fills to #FFF. And also set the Radius to 2 unit.

Step 4: Small buttons

It's time to create smaller buttons for the calculator. Go ahead and create 10 smaller squares having width 16px and height 16px.

Place the sqaures row-wise.

There will be three rows. The first row will hold 4 squares while the second and the third row will hold 3 squares as shown in the image below.

Remove the Borders and fill the squares with white color by setting the Fills to #FFF. And also set the Radius to 3 unit.

Step 5: Bigger button

Now, create a bigger rectangle button at the bottom right corner having width 16px and height 38px.

Remove the Borders and fill the rectangle with white color by setting the Fills to #FFF. And set the Radius to 3 unit.

Congratulation!!! You have successfully created the calculator.

Want to get more icons for FREE. Check out dyIcons project.

Have fun designing.