Skip to main content

How to make a simple message icon on Sketch?

Here I will explain a simple tutorial on making a basic messenger icon on Sketch for. The easy to follow tutorial plays with the basic shapes and also using the Bohemian Operations in Sketch app.



















Open sketch for mac, click the new document, press "A"(shortcut for artboard). You will be shown the default apple devices options in the right-hand sidebar or the inspector. Choose the custom option.


Now simply drag the cursor on the canvas to make a square. You could get a perfect square shaped artboard by entering the value 300 in the width and height field. Now zoom into the artboard by simply pressing plus and minus button. 

Click U (shortcut for rounded rectangle/square) or choose the rounded shape by going to the insert option on the top left corner.

Make a rounded rectangle of size- height:250px and width:160 px. Deselect the fill option and go to the borders and change the thickness to 10px(you can simply enter the value 10 or by pressing up and down arrow. Choose the black color from the color palette. 

Position the rounded rectangle by entering the X and Y value. 

Change the radius of the rectangle to achieve a more rounded shape.

Now choose the triangle shape from the insert. Position the triangle shape below the rounded triangle, you can invert the triangle and position it at the lower bottom of the rectangle as shown. 

With both the shape selected, click the Union option from the top bar. 

With both selected again, go to the border option and click the setting icon, click joins for an even smoother edge. 

Now you will see the bottom triangle having a sharp edge, click the triangle and now go to the edit option on top.


This will show points of edits as shown below, click the point and go "corner" option and enter the value 10.

Finally, Select the shape and go to fill and choose the second option that is the gradient, go below and choose your gradient of choice of your choice from the global gradients and make minor tweaks. 

You may play around with the gradient tool by changing its position left-right and reducing and increasing the gradient length.



Comments

Popular posts from this blog

Changing Instagram language to Arabic, Hebrew or Farsi

Instagram introduced a new update, with this users can now change their language preference to Arabic, Hebrew or Farsi. How to change language on Instagram To change the language you use in the Instagram app  Go to your profile and tap settings  Scroll down and tap Language Choose the language you'd like to use

Tutorial on designing a Music app UI using sketch for Mac

In this tutorial, I will be designing a music player app UI using Sketch for mac. The tutorial will cover essential shortcuts and tips for designing a better app interface. Before, jumping onto Sketch, I would strongly recommend everyone to start by sketching the wireframe of the app on a piece of paper. This will help you to organize the contents and the navigation and thereby reducing the decision making while working on Sketch. But one may decide to make minor tweaks while desingning on Sketch. Firstly open sketch and enter "A" to open the artboard options. From the inspector(right-hand sidebar) click iPhone 7. Now press "R" and make 3 rectangles side-by-side as shown in the below screenshot. Pick colors of your choice ( I have selected 3 colors, but you may choose to select more than 3 colors) Now, select rectangle from Insert from the top-left, and simply drag to make a rectangle or enter value 375 x 667 as width and height respecti...