How to Draw Globe Icon Using Photoshop

How to Draw Globe Icon Using Photoshop
  • 2 December 2010
  • Tutorials
  • This post was written exclusively for PV.M Garage by Mohammad Jeprie
  • Comments (37)»

In this tutorial, we will draw a nice globe icon using Photoshop. The globe is made from a simple glossy 3D ball with a modified continent map on in.

Step 1: Create a 3D Ball

Our first step is creating a 3D ball. Let’s start by creating a new file with size 512×512 px. Draw a circle on its center. You can see any color you want, it doesn’t matter. We will change it using layer styles.

Drawing World Icon in Photoshop

Step 2

Double click layer shape to open Layer Style dialog box. Add Inner Shadow, Outer Glow, Inner Glow, and Gradient Overlay.

Drawing World Icon in Photoshop

Drawing World Icon in Photoshop

Drawing World Icon in Photoshop

Drawing World Icon in Photoshop

Step 3

I believe we will have this result.

Drawing World Icon in Photoshop

Step 4

Ctrl-click circle shape to create selection based on its shape. Create new layer and paint lower part of the ball with black. Use a very big and soft brush, hardness: 0%.

Drawing World Icon in Photoshop

Step 5

Create new layer and draw a radial gradient from white to transparent.

Drawing World Icon in Photoshop

Step 6

Create an elliptical shape, reduce its Fill to 0%. Add layer style Gradient Overlay from white to transparent and set its blend mode to Screen. This will add a highlight to the ball.

Drawing World Icon in Photoshop

Drawing World Icon in Photoshop

Drawing World Icon in Photoshop

Drawing World Icon in Photoshop

Step 7: Adding World Map

We’re done with the 3D ball. Now, we need to add the continent map. Drawing this manually takes more time and skill. So, we’ll use a nice free vector stock from Vector Open Stock. You can download the stock from Vecteezy. Open the file in Illustrator. We will use vector map from bottom right artwork.

Drawing World Icon in Photoshop

Step 8

Double click shape. Select the dots shape and delete it. This will left us with the map only.

Drawing World Icon in Photoshop

Step 9

Select the continent maps and hit Ctrl + C to copy it.

Drawing World Icon in Photoshop

Step 10

Paste the vector map to Photoshop (Ctrl + V). Click Add Adjustment Layer icon and select Solid Color. Use #005d2c for its color. Copy path from our first circle and paste it onto the map. Select Intersect from option bar.

Drawing World Icon in Photoshop

Step 11

Add Gradient Overlay with this settings.

Drawing World Icon in Photoshop

Step 12

Let’s duplicate continent map layer shape. Change its color to lighter green. Select all continents path, without selecting the circle path, and move it 5 pixel up and 5 pixels left. Next, select circle path only and resize it to 101%. This will add extra tickness to the continent and make it not so flat.

Drawing World Icon in Photoshop

Step 13

This is our globe so far. There’s something wrong with its perspective. If you notice the emboss effect on the continents, it seems flat.

Drawing World Icon in Photoshop

Step 14

Activate lower continent map. Select some of the points using Direct Selection Tool and move them until we have correct perspective. You can see the difference before and after moving some of the points.

Drawing World Icon in Photoshop

Drawing World Icon in Photoshop

Step 15

Activate topmost continent map and add layer style Gradient Overlay.

Drawing World Icon in Photoshop
Drawing World Icon in Photoshop

Step 16

Ctrl-click its thumbnail layer and create new layer.

Drawing World Icon in Photoshop

Step 17

Paint outer part of the selection with black. Use big and soft brush (Hardness: 0%)with low opacity (20%).

Drawing World Icon in Photoshop

Step 18

Let’s add more highlight onto the map. Create an elliptical selection. Add new layer. Fill selection with white to transparent gradient. Deselect and give it a Gaussian Blur (Filter > Blur > Gaussian Blur) with big radius.

Drawing World Icon in Photoshop

Drawing World Icon in Photoshop

Step 19: Draw Shadow

Create new layer and place underneath all layers. Draw an elliptical selection. Create new layer, fill selection with black. Deselect. Soften it by adding Gaussian Blur (Filter > Blur > Gaussian Blur).

Drawing World Icon in Photoshop

Step 20: Draw Background

Activate Background layer. Draw a radial gradient from white to #c7c7c7.

Drawing World Icon in Photoshop

Step 21

Duplicate layer by pressing Ctrl + J. hit Ctrl + T and transform layer. See picture below for reference.

Drawing World Icon in Photoshop

Final Result

Here’s our final result. I hope you like it.

Drawing World Icon in Photoshop

Author: Mohammad Jeprie

Mohammad Jeprie is a writer from Indonesia. He loves to share his design skill by writing tutorial in various blog. When he is not too busy, he shares free design resources in PSDfreemium. Don't forget to say hi to him in Twitter.

website design and development

37 Comments

  1. dHaNy

    Nice tips Jeprie..
    very easy to practise, thanx a lot..

  2. Benoît Bouré

    Thanks!!
    This tutorial helped me in my work.

  3. Tutorial Lounge

    beautiful design you done in this tutorial.

  4. white

    i will try it today.

  5. web development

    i was wanted to draw them on photoshop and your step by step leading help me so much and i would like to thanks you on your brilliant work which is great to see and its very useful information for me and everyone

  6. rodolfo

    Muy buen tutorial justo lo que necesitaba felicitaciones

  7. Audrie Renaker

    Hey igw2zodz6ywb4mrc5kly, very interesting post, it really got me thinking. kmhyhwzxbu srqnjdj4xl Thank you. 3fuiowhob9
    hayifqyyri

  8. ice melt salt

    Thank you so much for giving everyone an extraordinarily splendid opportunity to check tips from this web site. It is usually very enjoyable and as well , jam-packed with amusement for me personally and my office co-workers to visit your site at minimum thrice in one week to see the latest items you will have. And of course, we are always fascinated considering the tremendous secrets you give. Some 3 facts in this post are easily the most efficient we have had.

  9. Prishtine

    I couldn’t have asked for a much better blog. You are always at hand to offer excellent suggestions, going directly to the point for straightforward understanding of your subscribers. You’re really a terrific expert in this area. Thanks for remaining there visitors like me. Pristina Weather

  10. laptop i5

    Wow, wonderful blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is excellent, let alone the content!

  11. farmville cheats

    Once again great post! Really enjoying reading your stuff here today! Glad I found your blog online:)

  12. zero friction marketing

    I couldn’t have asked for a much better blog. You are always at hand to present excellent guidance, going instantly to the point for straightforward understanding of your visitors. You’re truly a terrific specialist in this area. Many thanks for being there for an individual like me.

  13. zero friction marketing

    I am unable to thank you sufficiently for the articles on your web site. I know you placed a lot of time and energy into these and truly hope you know how much I enjoy it. I hope I am able to do something identical for another individual one of these days.

  14. Article Directory

    Would it be possible to PM me and tell me few more thinks about this. I am really a fan of your blog.

  15. Free Articles

    Would it be possible to PM me and tell me few more thinks about this. I am really a fan of your blog.

  16. scrapebox

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  17. ivf implantation tips

    no matter what you are saying, you got it

  18. high pr dofollow blog list

    Thank you for taking the time to write this!

  19. do electronic cigarettes help to quit smoking

    Ha ha… I was just online around and took a glimpse at these remarks. I can’t believe that there’s still this much fascination. Thanks for writing about this.

  20. adult social networking

    Whats up very cool blog!! Guy .. Excellent .. Wonderful .. I will bookmark your blog and take the feeds also…I’m happy to search out numerous helpful info right here within the post, we’d like develop extra techniques on this regard, thank you for sharing. . . . . .

  21. band saw wheels

    This particular blog is definitely cool as well as diverting. I have chosen many handy things out of this amazing blog. I’d love to come back every once in a while. Thanks a bunch!

  22. erasmusfestival.org

    I don’t agree with most people here; I found this post strong-communities.org I couldn’t stop until , although it wasn’t just what I had been trying to find, was indeed a very good read though todoneapp.com. I will instantly take your feed to stay in touch of future updates. This is a great point right there. I made a investigation on the topic and found most people will agree with your article. http://www.ludomancer.com Any way I’ll be subscribing to your feed and I wish you post again soon.

  23. hydroxycut pro series

    Audio started playing as soon as I opened this internet site, so frustrating!

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US