Making Icons in Sketch is Fun

I spent an hour on a Sketch tutorial and next, I was churning out polished app icons. It’s so easy to get started.

Param Aggarwal
Feb 23, 2016 · 3 min read

Designing icons is challenging, because there is very little space. They are so tiny. You can’t explain in words and you can’t draw a picture. It has to be something one can quickly associate with.

But an app icon, in contrast to a simple icon, allows the use of colour and gradients. There is much room for creativity and expression. Sketch is generally so well praised in the circles, that I decided it was time to explore it! I found this tutorial by Sebastien Gabriel.

He teaches the basics of the vector tools available in Sketch in a highly practical manner. I spent a few minutes skimming through and then fired up a trial version of Sketch that I found here: http://www.sketchapp.com

I deligently followed the steps, trying to be faithful to the tutorial, because I really liked the icon he makes in the tutorial. I wanted to make sure I am able to reproduce the same — and I succeeded!

Image for post
Image for post
Made in Sketch by following Sebastien’s tutorial.

It is hard to explain the joy of seeing something beautiful, and feeling that you could never make something like it — but then going ahead and actually making it.

Following the steps in the tutorial exactly as mentioned allowed me to gain this confidence. It was time to go exploring myself. I started tweaking the different values like the colour gradients and the vector shapes — and arrived at this icon, which looks very different, but has elements of the original icon.

Image for post
Image for post
Made in Sketch, by tweaking shapes and colours in the original icon.

Again, a large boost of confidence. This is something truly unique and I absolutely loved it. Though it has elements of the original icon, it is also sufficiently unique.

But after the initial excitement subsided, I realized that there were too many shadows for my taste. How can I reduce this to it’s very essence?

Image for post
Image for post
Simplified version of the variant above.

With that thought, I started removing as many shadows and superficial elements I could and ended up with this icon. My confidence was re-filled — I could do this.

I felt I was ready to start from scratch on an icon. I opened up my phone and looked at the icons on the home screen. The McDonalds app caught my eye. The ® logo on the icon seemed out of place for an app icon — which other company puts it there? So I decided this would be the first icon I try to replicate.

Image for post
Image for post
The McDonalds app icon.

I downloaded an image of the logo and traced it with Sketch’s bezier curves. As I moved around the control points, I discovered that there is actually a pattern to how the curves are made. I now have a lot of respect for the designer of these iconic golden arches.

I also realized how great it is that they were able to use the first letter of their name and call it the golden arches.

Here is my final icon!

Image for post
Image for post

I am delighted by Sketch, and I highly recommend anyone with a creative bent to give it a shot. Just start with the tutorial above.


If you enjoyed this post, please hit Recommend!

UX in India

Thoughts and writings by Indian UXers/Design Thinkers.

Param Aggarwal

Written by

Software guy. When you try to tell computers what to do, you eventually learn about human nature as well. (http://paramaggarwal.com)

UX in India

Thoughts and writings by Indian UXers/Design Thinkers. Occasional reviews, journeys and analysis about using Indian websites, apps and services.

Param Aggarwal

Written by

Software guy. When you try to tell computers what to do, you eventually learn about human nature as well. (http://paramaggarwal.com)

UX in India

Thoughts and writings by Indian UXers/Design Thinkers. Occasional reviews, journeys and analysis about using Indian websites, apps and services.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store