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

Google Job search gets new features

Google has introduced new features to its existing job search tools used by millions of job seekers looking for a new job or a change in jobs. The new features make the job searching experience more efficient and access to key information that is essentially important for finding a new role. The new feature includes direct access to salary information for the job postings, improved location settings, job application choices and the ability to save individual jobs (to be rolled out in a couple of weeks) Refine your search by Salary Now, when you search for a job, the Google job search shows estimated salary ranges right alongside many jobs, based on the specific job title, location, and employers. This information is directly pulled out from job search engines like Glassdoor, Payscale, LinkedIn and more. Job Search by Location  Now you can click the "Location filter" and can see a range of distances that you are comfortable with or simply continu...