How to create a vivid globe icon 1

After going over some of our basic and beginner guides such as How to Create a Simple Button Icon and How to Create a Simple Stroke Dashboard Icon, today we’re going to take another higher level of our icon design – creating something that it takes a bit more complicated steps but is worth trying because you will have a beautiful outcome.

What do you think about it? It’s hard to create that kind of icon, isn’t it? Yes, maybe if we don’t know where to start and in what way we should follow in order to turn the creation of such an icon to like “Wow, it’s not as hard as it seems!”.

(This post follows up the tutorial series “Icon Design Made Simple“.)

Tutorial facts

• Application: Adobe Illustrator
• Tools: Most of the tools and palettes are in requisition, especially played around as much as Pen tool, Selection tool, Ellipse tool and palettes of Layer, Pathfinder, Transparency, and Blending mode and Gradient.
• Level: Advanced
• Finish time: About 45 minutes or more

What we need

To get into drawing a globe icon as shown in Fig 1, it’s required to understand about lighting and material. You can refer to this article in case you don’t get what we’re talking about. Besides, after reading through this guide, you might as well search on the internet for the similar icons other designers out there created. There are several samples that became standard (like the icons in Mac OS or Windows), which you can also pick up to create one of your own.

So, here are two first things you need to know:

Material: The globe icon we’re about to create is masked in plastic or glass, sometimes in paint-covered metal that is very glossy.

Light source: *Coming directly from above – this direction of light is to depict reflected light that is silhouetted over the globe (frequently seen on glass objects); *Coming from above and being lop-sided – this specular light is to depict the glossiness of the globe (normally seen in plastic or glossy paint-covered metal).

What characteristics does the globe have? It’s simply a satellite-snapped picture that we can see on the internet, or it’s a terrestrial globe that is usually presented in geography school hours. The globe consists of 2 different colored areas – one is in green or green to brown-yellow (hill or mountain areas), and the other is in the sea blue.

Are you ready? Here we go.

1. Basic outline

First, download the image below that shows the basic outline of the globe. Create a new document and drag the file into the artboard, and then lock this layer. Create a new layer and use it to draw the outline.

Fig 2. Basic outline of the globe icon

The sphere-shape portion includes three main paths of round shapes. The smallest round path inside will play the role of specular light, and the semi-circle path will be used for the reflected light. The continent portion has to show the two ground pieces, but it will be outlined in a clean and tidy way and has no detail about uneven surface, so that the icon will look simpler.

1.1. The sphere portion

1. Use the Ellipse tool to draw a circle path of 64×64 pixels. Set its color to none and stroke weight to 0.1 pt.

Fig 3

2. Use the Scale tool or the Path Offset command to make a duplicate that’s smaller than the first circle path.

Fig 4

3. Select the duplicate path and then make one more duplicate, by using the “Copy” and “Paste in front” commands.

4. Use the Direct Selection tool to move the bottom anchor point and change the length of control handle until you get the result as shown below.

Fig 5

In doing so, when dividing the 2 paths created in Step 2 and Step 4, we should have the reflected light.

5. Draw another circle as shown in Fig 6 below to create the specular-light area.

Fig 6

6. Go back to the circle path created in Step 4 and make it bigger by using the Direct Selection tool to drag the path. The purpose is to prepare well for the following step of dividing paths. If you skip this step, you will get lots of tiny paths after the dividing step is done.

Fig 7

7. Select the paths created in Step 2 and Step 6, and then use the Divide option in the Path palette.

Fig 8

8. Ungroup the group just created by the Divide option and delete useless paths. You only need to maintain the reflection path and the circle path that’s similar to the one created in Step 4.

Fig 9

9. Put all the remaining paths into a group. Now you got the basic outline of the sphere shape.

1.2. The continent portion

You can create the continent outline like ours or choose a viewing angle of your own to make it different. You may also trace directly from some images from the internet, but you need to bring in its main figure only.

Scatter some islands to make the globe look more real and prominent. As working on this portion, we use the Pen tools to draw, and the Select Direction tool to edit. Note that the best way to master the Pen tools is picking up a very complicated image and trace it.

After the continent portion is done, put all of its paths into a group and hide this group.

Fig 10

2. Styling the sphere and the continent

2.1. Add color to the sphere

1. Select all the paths of the sphere, and fill a gray gradient (in radical mode) to it. While dragging the gray gradient over the sphere, make sure that the brightest area of the gradient should be in the center of the specular path.

Fig 11

2. Select the semi-circle path and drag the gradient over it to create the reflected light.

3. Select all and set their stroke weight to none.

4. Go to Edit > Colors > Adjust Color Balance and change the color to blue.

Fig 12

5. Make a little change to the color in the Gradient palette in order to obtain a nicer blue. The value of the main blue is Red 35, Green 70, Blue 159.

Fig 13

6. Fill the gradient you just created into the paths.

7. Change the direction and color level of the gradient until you got the result as shown in Fig 14.

Fig 14

8. Set the specular path’s opacity to 70 so that its pale color gets darker (thanks to the color of the lower path).

Fig 15

2.2. Add color to the continent

We will take the blue gradient created above to color the continent.

1. Select the group of the continent paths and fill the blue gradient to it.

Fig 16

2. Change the angle and direction of the gradient until you got the result as shown in Fig 17. Next, set the stroke weight to none, and then ungroup this group.

Fig 17

3. We wanted the continent have a thickness so that it would look more prominent. Select all the continent paths and use the Offset Path command to make duplicates.

Fig 18

4. Change the boldness of the gradient in each path to obtain the result as shown in Fig 21.

Fig 19

Fig 20

Fig 21

Up to this step, we saw that the continent portion was not yet thick enough. So we decided to add a little more thickness to it by using effects.

5. Select the continent path on the right of the globe and go to the Effect menu > Stylize > Drop Shadow… In Fig 22 is the Drop Shadow dialog box with several options for us to change.

Fig 22

Now set the X Offset to -1, the Y Offset to 0.5px, and Blur to 0.5px. Tick “Preview” to see the change. The path now looks a pretty bluish black. That’s because the drop shadow is in black. So, change the shadow color to dark blue and choose the Multiply mode so that the icon will look clearer. Tick “Preview” and it looks fine. Hit OK to finish this path off.

Fig 23

Do the same way to the other paths but set the X Offset to a positive value. Then, go to the Effect menu > Document Raster Effects Settings and set High Resolution (300ppi).

3. Icon perfection

1. Select the specular path and use the “Copy” and “Paste in front” commands to create a duplicate.

2. In the Layer palette, select the duplicate path and position it in the top of the other layers.

Fig 24

3. In the Transparency palette, change the Blending mode to Screen.

Fig 25

4. Oops, the color is not quite apposite. Try with a gray gradient and set its opacity to 37. OK, now it looks fine.

Fig 26

5. The path as selected in Fig 26 above looked a bit dark. That’s why I decided to make a duplicate using the commands: “Copy” (Ctrl/Command+C) and “Paste in front” (Ctrl/Command+F), and then move the duplicate path upwards and position it under the screen path (at Step 4).

Fig 27

6. Change the Blending mode to Screen and set the duplicate path’s opacity to 25.

7. It’s almost done. However, to achieve the result as shown in Fig 28, you have to refine the color of each path.

Fig 28

8. Switch to Pixel Preview to check the outcome before exporting.

9. Choose and copy one proper drop shadow created in a previous icon and place it under the complete globe icon, and then put all the paths into a group.

The complete "Globe" icon

4. Icon Sizes

1. Select the icon and scale it at 75% using the Scale tool. Click Copy.
2. Select the 64×64 icon and scale it at 50%. Click Copy.
3. Select the 32×32 icon and scale it at 75%.

We now have a globe icon designed with 4 different sizes. Besides, there’s no troublesome pixelation at all, so we don’t have to worry about fixing anything more.

Fig 29

Here is another globe icon that looks quite different to the one above.

Fig 30. Another globe icon in different color

and the following is what it’s made of:

Fig 31. The green globe icon's components

As a perfectionist, not only have we wanted our products to be as perfect as possible, we have also wanted to improve the quality of each and every article published on this blog. Any suggestions or contributions to this article are highly appreciated. We appreciate your time.