DesignED – Drawing Simple Spherical Icons

Today I’m starting a new weekly column called ‘DesignED’ where I’ll show you tutorials — from the simple to the involved — of basic designs, illustrations, websites and more.

A while back, I wrote a post about the original designs of top websites. With that, seeing as there is no way for a feature image to exist for such an article, I had to make one for it. I illustrated a cliché globe icon — and that’s exactly what I’m going to show you how to make.

In this tutorial, I’m using Sketch 2 to draw the icon. If you don’t have it, try it out by downloading the latest trial version and follow along the tutorial to get hands-on with it. Naturally, I generalised this tutorial to make it work for Photoshop users as well. If not, hit a comment below and I might be able to help you.

Video Summary:

Step 1:

The first step is to draw a circle with a simple radial gradient. Make it start from dark, slightly saturated blue on the bottom, a midpoint of slightly brighter blue, leading up to the top with bright, slightly desaturated light blue. This’ll give the circle some lighting and shading, making the illusion of depth.

Step 2:

Next, is to draw a slightly smaller circle, and fill it with a soft-light gradient of white. Make sure the gradient is pure white, leading to another pure white endpoint — but this time make it fully translucent. This circle will give the main circle some shine, making the sphere look more spherical. Note that I based this shine off of Dan Eden’s globe icon on Dribbble. I think it’s a good thing to look at other artist’s works and learn from them.

Step 3:

After that, draw another circle. Make sure it’s not too big or too small. As long as it fits in between the first and second circle you’ve drawn. Fill it with the same gradient as the last circle, give it an Overlay blending mode, and place some Gaussian Blur of about 5 pixels. This added circle will give the sphere some glow, making the icon less flat and more shiny.

If you’re thinking of making this sphere a globe, you’ll need to draw the continents on top of the sphere. Of course, you’d want to draw the continents yourself, but an easier way is to get a picture of the globe, trace over the continents’ shapes and paste it over the sphere.

Step 4:

Fill the continents’ shapes with a matching color to give the icon some consistency. You can use another color, but make sure the colors you pick match the blue of your sphere. The best way to do that is to pick a color from the sphere, and keep the saturation amount consistent as you adjust the hue.

You can also add a subtle gradient on top of the continents’ shapes so that it gives the sphere more depth. Don’t forget that you can move it around between the layers to play around with the lighting.

And there you go. The icon can be resized (if you’re using Sketch 2, the sphere will be vector) to any size and can be exported to your liking. If  you have some suggestions to make, or things I’ve done wrong (we’re all learning in this one too, don’t forget!) leave some comments below. Alternatively, if you’d like to see something explained, hit up The Industry on Twitter or leave a comment below.

So, that’s it for this week. Tune in to DesignED every Wednesday for your weekly dose of tutorials and demonstrations.

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions