Basic shape

Reminisce about your favorite hand drawings, the comics that you read, the paintings that you admired, they were all beautiful and perfect, weren’t they? But what we should know about them is that they were all depicted from basic shapes like circle, rectangle, triangle, square, and oval, etc. To be able to create masterpieces, a painter should master basic objects first.

For icons, particularly for its usability, simplicity is required. Because of that, we need to use a single object that captures the icon’s action or represents the control, and the object should be a basic and primitive shape. When it comes to light and dark, every object in the world is generally displayed or shown as basic shapes as cube or rectangular prism, cylinder, cone, sphere, etc. If you can’t get to an accurate depiction of a real shape of icon, then basic shape is what you need to get a good hold of first.

Practice in basic shape, however, requires you to put aside your mouse for a while and pick some drawing tools that you like to use, simply a pencil and small pieces of paper. Take them in and draw a few simple shapes like squares, cones, and spheres.

You can save your time by drawing your objects in a small size (probably in a thumbnail). This also helps you avoid annoying lines as well as unnecessary details that may occur in your mind during your drawing. Meanwhile, you should focus on how to make your objects fit inside a piece of paper. This is very important to do as working on icons, each icon has a limited room inside a square, regardless of big or small versions.

It would be better if you could deliver objects as expected. Any requirement here is not that strict. You can make it up to your drawing weakness by using the Illustrator’s Pen tool.

Whenever you can’t depict the light of an object you drew in paper, put your drawing on a scanner or use your digital camera to take a picture of it, then open the file in Illustrator and try to refine its outline and add color to it.

Before drawing an object in paper, use your mind to “picture” the basic shapes of the object. For instance, a pen should be pictured from a cylinder, a keyboard or monitor from a rectangular, a mouse from a half of oval.

Perspective in general

If any shape you draw looks askew or plane and gives no sense of depth, then perspective is one of the demanding factors you need to grasp. You might be asking why we didn’t speak up this matter earlier. Personally we think, without practice in drawing by hand, you hardly realize your own weak points, from which you will find ways to overcome. Actually, you can find something joyful from hand drawing, like leave hold of the computer and spend some time to mess with pencils and papers; your hand that holds the pencil will get full of pencil grime, and you throw lots of paper into the trashcan. Would that bring an enjoyable feeling to you rather than everyday holding the mouse or grip pen to do vectors? Furthermore, hand drawing helps you enhance your light perception and art sense to a certain degree.

In practical perspective techniques, depth and distance are the key elements that need to be exposed to view. These elements are of vital importance for painters and house/interior/product designers, and for us if we want to get rid of the most primary mistakes as working with vector objects. There must have been some perspective lessons available in basic drawing guides that you might have read, but if you still can’t get over such issues in your drawing then the only thing is you. What is left to do to develop this skill is practice and experience.

Simply put, perspective allows you to represent an actual object in an attempt to deceive its depth, since perspective drawing is the technique we take on to represent 3D images on a 2D plane. Perspective is not a natural rule. It’s an artificial or “fake” technique to deceive the eye, and it’s not ever a dime trick. The well-known perspective techniques that have been used at the present day were found and developed hundreds of years ago. This can be seen through myriads of classic masterpieces passed down to the posterity.

Back to our childhood, most of the pictures we first draw normally look flat and funny, and we draw each sole picture presenting the people or objects very close to our heart like dad and mom or house and animals, etc. As time goes on and we grow up, we start to be conscious of a sense of space and distance, using such big elements as houses or mountains and hills in order to create depth and dimension in the paintings. This might happen naturally to us without being taught, therefore the depth and dimension in those paintings could be illustrated in some quite casual way.

In order to make perspective really fruitful to us, it requires that we should know how to use perspective as a means to define and measure the space, depth, dimension and distance of an object. To instantly see what a perspective is, look at the picture below that shows the horizon line and several straight lines starting off from one point. Note that these straight lines are parallel in reality.

One-point perspective under horizon line

Two-point perspective over horizon line

There are three typical types of perspective:

1. One-point perspective
2. Two-point perspective
3. Three-point perspective

Thanks to a bunch of articles and topics on perspective and how to draw in perspective in the net, there’s no need for us to present them all here. Anyway, this and this are good resources for you to refer to first.

Perspective in Icon Design

Up to now, you might feel a bit downcast for having to read too much about this perspective thing. How come so problematic? What is more important in this section?

We ourselves used to ask and feel that way. But learning from our effort and experience, this must be more extensive. Bringing perspective into icon drawing has already been a “tacit” and common rule for proficient iconographers.

With one of the three typical perspectives listed above, we think that you could make out an icon that looks OK. However, being an iconographer, any icon we create must look not only nice, but sharp, clear and crisp. If an application uses icons that look blunt and dull, the application will degrade itself. So don’t let your handiwork go wrong caused by the perspective mistakes.

As our icon is illustrated in a perspective, it must be affected by declination lines. That means the icon is generally made up of lines oriented at a 25 degree angle or bigger. There’s nothing to worry about if the icon is in vector format, but when you export it to a PNG image, especially in smaller sizes, the pixelation should occur in the image file. (That is, the edges of the icon will appear jagged).

There’s a very small chance that this problem could be fixed, even if we have to spend hours to retouch them in Photoshop. So, first things first, it’s necessary to sketch out your concept on paper in order to avoid any slanting line happened to your icon.

Before now, we used to draw many icons with diverse perspectives, and we kept thinking that once you felt confident and sure about perspective techniques and lighting, any icon you made would be fine looking and useful, but that was wrong. After a while, we thoroughly checked them out and took a close look at a significant number of icons shared or distributed on the web, we found out some impacts, and strong and weak points in using these types of perspective.

So, following is our own important round-up related to perspective in icon design, including advantages and disadvantages of each perspective.

Icon in one-point perspective (also known as “straight-on icon”)

How can we know if it’s a straight-on icon? It’s very easy to find them thanks to their popular appearance in everyday softwares or websites. Let’s take our favorite freebie “Milky” for a demo:

Milky iconset in one-point perspective

Advantages:

• Easy to implement concepts.
• Suitable to small-sized icons that could be in high sharpness.
• Simple in design.
• Much less perspective concerns than the other perspectives’.
• Easy to create icons that look user-friendly and have a maximum size inside a square.
• Unnecessary to redesign at 16 x16 pixels.
• Easy to pack an iconset in this same perspective.

Disadvantages:

• Hard to create large-sized icons that have few details. (Common sizes for icons in one-point perspective are 48×48, 32×32, 24×24, 16×16 pixels).
• Hard to introduce space and distance to icons.
• Hard to catch the attention of users due to the very simple look.

Icon in two-point perspective

You can easily find many of them on your desktop (Windows) or on the Finder (MAC OS), or look at the demo picture of our freebie Shine below.

Shine iconset in two-point perspective

With a feature that allows to show many details of an object, two-point perspective is used to illustrate an icon by these aspects:

Advantages:

• Icons in this perspective are being loved the most.
• Icon size is nearly infinite.
• All known techniques like lighting, shadow, texturing can be utilized for this kind of icon.
• Pleasing look, depth-senses and space-senses will be showed up before the users’ eyes.

Disadvantages:

• It’s not easy to implement concepts.
• It requires experience in perspective.
• It’s not sharp for small icons to be in this perspective (24×24 or 16×16 icons will need to be redesigned).
• It’s hard to create an iconset of the same perspective (due to the viewing angle).
• It’s not easy to represent small-sized icons in toolbars.

Icon in three-point perspective

Are you kidding? Yeah. In fact, we was wondering who in the world did use this three-point perspective to draw standard icons. This kind of perspective is just about worthless for drawing icons as we have to represent small-sized objects. Besides, you definitely encounter the pixelation issue caused by three-point perspective.

Okay! That’s all about the perspective in icon design we could tell. We know that there must be some errors or unclear points in our explanation for this topic, partly because of our English usage. Please feel free to leave your comments for this article. Your suggestions, opinions and questions regarding this topic are welcomed at any time. Thank you for your reading.

Today, we happily announce that another freebie baby just came into our community. Let’s check how it looks like.

Named as “iCandies” and inspired by MAC OS X and iPhone, this baby was born with a view to taking part in the world of modern and fashionable interfaces, embellishing your social media projects with a sleek and geeky style. Whether you are the Apple’s fan or not, this baby should be still a good choice for its contemporary appearance.

The freebie baby carries 60 icons in it. All the icons are taken shape in Round Rectangle and delivered in sizes: 64×64, 48×48, and 32×32 pixels. The formats are EPS 10 and AI.

You can use the set for any of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. Please link to this article if you want to spread the word.

• View icon preview
• Download the set
• Read the relevant post in Smashing Magazine

Please kindly leave some comments about “iCandies” as well as how you used it. Your opinions are highly appreciated.

These days are our happy days in life and work as we are celebrating the IconEden’s 2nd birthday. In addition to some big deals and giveaways event, we also release freebies for the community, and not only at the moment but in the time to come. Keep informed!

$99 All-in-one icon bundle

We have received a lot of emails asking if we could offer an all-in-one bundle like we did last Christmas. So the bundle is up again for those who missed it. At only $99, you will get over 2,000 icons in 17 different sets from our catalog. Grab it while it’s hot, this bundle is only available for a limited time!

Daily small contests on Twitter

We will run a small “Tweet and Win” contest on Twitter from September 1 to September 30. You should follow us today!

Weekly freebies

Two years ago, we made an iconset called “Milky” for fun and released them weekly on Min Tran’s blog. Happily, it has been one of the most popular free iconsets ever. We received a lot of encouragements and compliments from the community. This success led us to start IconEden as a dedicated icon design studio. We think it would be great to make another great set like Milky. We already finished some icons for this set and they look as cool as Milky’s. Further details will be announced soon. Stay tuned!

So folks, take time to celebrate with us. Thank you.

On a month basis, we release one or two new iconsets for you guys, and a new pack called “Elements” just came out today. Let’s see what we got this time.

The new iconset “Elements” comes in just like an assorted cookies box, containing 1,758 handcrafted icons packed with 8 categories: Communication, Computer, Database and Medicine, Traveling and Sports, Multimedia and Shopping.

Delivered in 2 styles (Glossy and Lite) with 3 colors (Blue, Green, Kiwi) for each style, “Elements” is aimed to give you endless possibilities for use in your corporate or personal projects. All the icons in Elements are exported in 4 sizes: 24×24, 32×32, 48×48, and 64×64 pixels, and provided in various standard formats: Vector EPS 8, SGV 1.0, ICO, ICNS, PNG, TIF.

Last but not least, the assorted Elements pack with 1,758 handcrafted icons will be right in your hands at only $19. What else do you expect? Check it out here and add it to your cart while you can.

After putting on the new suits for Frexy and Min Tran’s Journal one month ago, today we are once again so happy to present to you with brand new clothing for IconEden’s Blog – a total redesign. This is also a part of activities to celebrate the 2nd birthday of IconEden. Wow, pretty much of great events happening in these two months at Frexy, as the Frexy’s 5th birthday has just passed, and we had some exciting moments in a week-long celebration.

The redesign this time did not take much time as we had thought. In fact, it took one week and a half to have it all from inspirations, ideas to final design versions and crafting. Honestly, we had have a demand to revamp the blog from the middle of the year, but major business projects highly occupied our time, until this moment when the IconEden’s 2nd birthday is coming near (Sep 22 to be exact).

The blog initially was just a piece attached to the site IconEden to do the job as a “spokesman”, which only announces anything important related to IconEden like new policies, new releases or freebies. It was a mere company blog. But since when the blog welcomed more articles in terms of guides or tutorials, we figured out that the blog should serve as our playground.

So, the redesign is also a urge to improve the blog itself to make it become more prominent and attractive. We want it to be spiffier and more friendly, not only for readers to pleasantly read and easily respond but for us to really feel inspired to fill the blog with more great resources than it has had in the past few months.

We would be happy to receive your suggestions, opinions and bug reports regarding this new blog theme. We are willing to welcome any contributions and suggestions or questions for any of our guide articles and we will respond to you as soon as we can.

Hoping you like this new theme as much as we do!

So, how is an perspective-based icon like? In what way does an icon depict light, shadow and material? In this topic, which has two parts, we are going to share a few basic points of drawing or painting – the very basics of fine art and how to apply them into our icons. We will do that through the following tutorial that show you how to draw a paint bucket icon, which is the first part of the article. In the next part, we will share with you some tips and know-hows that we learned and are applying into our products.

This part follows up the tutorial series “Icon Design Made Simple”.

Part 1: How to draw a Paint Bucket icon

The easiest-to-recognize picture is one paint bucket with a paint dripping down to the ground. Take a look around all your applications you can see this icon appear pretty much.

Finished paint bucket icon

We are going to draw a paint bucket from the basic shape of cylinder. Why not choose other shapes? Supposedly it was made from the frustum of a pyramid, there would be slanting lines occurring in the object, and as a result the icon would look dim in such a small size as 16 x 16 pixels, which is the most popular icon size taken use in many applications.

Okay, let’s get to it.

Step 1

Let’s draw two identical ellipses in Illustrator.

Fig 1

Notes

A round cylinder, theoretically, is made up from one rectangle with two ellipses. Yet in life, if a metal bucket was made from the cylinder shape, it would look unsafe with a feeling that the user’s hand might be cut or injured. Therefore, product designers always create a round and smooth surfaces near at intersect of the rectangle and ellipses, making the product look safe to use.

We will bring this practice into our icon design.

Step 2

Try to illustrate the intersecting surfaces or the highlighted areas in this icon, then create a cylinder by using the Rectangle tool to draw a rectangle.

Fig 2

Step 3

Use the Divide Pathfinder to divide the paths, and clean up the outline. Next, insert a strap into the bucket.

Fig 3

Step 4

Spin the bucket to a 45-degree angle. Add a dripping paint to represent the action.

Fig 4

Step 5

Turn the bucket back to its initial standing position.

Fig 5

Step 6

Put the dripping paint into a group and hide this group in order to work with the bucket only.

Fig 6

Step 7

Apply a metal gradient to the bucket. Add color to the plastic strap.

Fig 7

Step 8

Now, start messing with lighting. Highlighting some areas, bit by bit, will make the bucket look more round and deep. What to do is add more paths and drag gray-to-black gradient across them, and then use the Make Opacity Mask command to dissolve those additional paths into the main paths (the bucket body).

Fig 8a

Fig 8b

Fig 8c

Step 9

Put those paths into a group and make a duplicate, then reversely rotate the duplicate group (Scale > Uniform 100 & -100% > Copy).

In the Layer palette, locate the ellipse path that depicts the hollow for the bucket and move the duplicate group below the ellipse path.

Select both the ellipse path and the duplicate group, right-click on the artboard and select the “Make Clipping Mask” command. You will see the result as shown in Fig 9.

Fig 9

Step 10

Draw one or two more paths to represent a reflection since the bucket is too glossy. Choose Screen mode or Multilayer and adjust the transparency of the new paths.

Fig 10

Step 11

You can now unhide the group of the dripping paint and add any color you want to it.

Fig 11a

Fig 11b

Step 12

Continue to represent another reflection that shows interactions among the bucket, the strap and their color. To do that, draw some more paths on the bucket and add the same color of the strap to them, and then adjust their transparency until the desired result is achieved.

Fig 12

Finish

To finish off, create a shadow to make the icon look more consistent. You’re done.

Fig 13. Finished paint bucket icon

Part 2: Perspective in icon design

Let’s take the paint bucket icon we just made. This icon is based on one-point perspective. So how can we know or see in what perspective an icon is drawn? How many perspectives are our icons really based on? What are the strong and weak points in taking each perspective into icon design? Please stay tuned for the next part in a couple of days. Read Part 2 here.

You know what? Two new icon packs of this month were just rolled out today. The first set, called Tiny, is a small icon pack containing over 300 icons designed in size 16×16 pixels only. These mini-pixel icons are visually awesome for your CMSs, blogs and websites, especially useful for styling lists or navigation bars or toolbars or menus.

Tiny icon set

“Tiny” is currently up with 223 icons, and the rest will be updated later soon to make a total of over 300 icons. Once you purchase this set for now, you will sure have its additions for free. Concurrently, you will also have a Social Network icon pack as a bonus. Just check it up here.

Lite Plus is the second set coming out as a follow-up subset of the “Lite” collection, which has so far been one of the most beloved sets. All the icons in this “add-on” set have the same quality, perspective and sizes as its “Father” set. The only difference is that this time the pack is formatted in EPS 10, instead of SVG and EPS 8. Go check the preview image.

Lite Plus

Incidentally we would like to inform you that we decided to drop price of the “Lite” collection (with a total of 8 subsets so far) to $99. A fantastic price reduction, isn’t it? Take it now!

This part 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 20 minutes or a little more

What we’re supposed to achieve

Complete Network icon

Step 1

Make a duplicate of the Globe icon and then delete the paths that creates the continent.

Fig 1

Step 2

Draw an ellipse as shown in Fig 2.

Fig 2

Step 3

Use the commands “Copy” (Ctrl/Command+C) and “Paste in front (Ctrl/Command+F) to make one more same ellipse, and then modify the new ellipse until you got the result as shown in Fig 3.

Fig 3

Step 4

Select both ellipses. Use the Divide command from the Pathfinder palette to split them into separate paths. Delete unused paths and keep the “crescent” path only.

Fig 4

Step 5

Select the “crescent” path. Choose the white-to-black gradient (set in radial mode) and drag the gradient over the path until you got the result as shown in Fig 5.

Fig 5

Step 6

Go to the Transparent palette and change from “Normal” to “Screen” mode, then drag the gradient once again on the “crescent” path to have a more pleasing result.

Fig 6

Step 7

Duplicate the “crescent” path using the “Copy” and “Paste in front” commands. Next, edit the duplicate using the Scale/Rotate tools until you got the result as shown in Fig 7.

Fig 7

Put all these paths into a group.

Step 8

Draw one small circle in any size of your choice. This circle path should have the same properties we’ve done in Step 6.

Fig 8

Step 9

Select the circle path and choose the white-to-black gradient (set in radial mode). In doing so, the circle will display the white on the inside and the black on the outside. Change its opacity to 100%.

Fig 9

Step 10

Make the circle a little bigger using the Scale tool.

Fig 10

Step 11

Duplicate the circle using the “Copy” and “Paste in front” commands, and then move the duplicate to the position where the light spots the intersect.

Fig 11

Step 12

Change the size of the light spots around to give a “far and close” spectacle, and change the bright to give depth to the space. Put them all into one group.

Fig 12

Step 13

This icon is initially crafted in 128×128 pixels. Now let’s use the Scale tool to reproduce smaller ones or duplicates in smaller sizes.

Fig 13

Step 14

Go to the View menu and choose Pixel Preview to check pixelation problem. If any, you have to re-edit the icon so that it looks sharp before exporting to image files.

Fig 14

In Fig 14, the icons look blurry due to pixelation problem. So we have to do some adjustments to them, discard a few details, and make the contrast higher in smaller sizes. And the final result should be like this.

Fig 15. The complete Network icons

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 icon to like “Wow, it’s not as hard as it seems!”.

This part 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:

1. Material: The globe icon we’re about to create is masked in plastic or glass, sometimes in paint-covered metal that is very glossy.
2. 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).

And, 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 hour. 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 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 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

Note

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 of 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 bit 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

We are pleased to inform you that there are other 2 new icon sets coming out – iTravel and Simplicity. This is the first sets we’ve released in this year 2010 after several past months of getting busy with major custom icon projects for our customers.

iTravel, as its name says, is an unique set that absolutely suits your tourist projects or business. Delivered in multiple popular sizes and presented in common formats, iTravel is meant to be in use at ease and fit in any project that suits you.

iTravel icon set

While Simplicity, provided in EPS/SVG vector format which is ideal to be scaled to any custom sizes while the quality is still intact, is designed to create a simple looking set that can fit into every project. Hoping that Simplicity will give your project a clean and prominent feel.

Simplicity icon set

Brought to you at the incredibly affordable price, these two new icon sets should not be missed if you see them meet your design demands.