the blog of

IconEden’s blog

Vu Tran August 25th, 2010

Perspective in Icon Design – Part 1: Draw a Paint Bucket icon

Perspective in Icon Design – Part 1: Draw a Paint Bucket icon

Not a few people could have been confused about how to use gradients in a sensible way and how to depict light, and why deal with these matters. These are the most common mistakes for those who begin to learn drawing without knowledge of fine art. Normally, they face to perspective problems and don’t know how to draw icons that represent actual objects.

So, how is a perspective-based icon like? In what way does an icon depict light, shadow and material? In this 2-part topic, 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.

Vu Tran July 19th, 2010

How to create a glossy Network icon 1

How to create a glossy Network icon

Following up the advanced guide to creating a Globe icon that looks vivid and realistic, today we’re going to continue making another icon that gives the same natural feel as depicted from the Globe icon. We’re going to create a Network icon. But we got to tell you this first – we don’t need to create a brand-new one from the start like the Globe icon, helping us avoid wasting time in such complexity as changing the icon’s colors and color tones. Instead, we’re going to make a variation of it, which means we will re-use the Globe icon to edit its color and contrast level for a better version. That also means you have already had the finished Globe icon. If not, please make one based on the guide here before coming into the creation of a Network icon.

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

Vu Tran July 8th, 2010

How to create a vivid globe icon 1

How to create a vivid globe icon

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“.)

Vu Tran June 11th, 2010

How to Create a Simple Stroke Dashboard Icon

What is a stroke icon? Simple to say, it’s an icon that’s made up of strokes filled with only one color. Why stroke icons? This kind of icon is useful and suitable for a graphic user interface on which everything needs to look as simple as possible, friendly, easy to recognize and especially consistent with the neighbor elements (like text, for instance). Let’s take this navigation bar below for a demo.

Stroke icons on a navigation bar

As you see, all the icons on the navigation bar have a simple appearance and the same one color with the text alongside. This helps the navigation bar look gentle and easy to comprehend.

So, is it hard to draw a stroke icon? Totally, no! In fact, it takes several effortless steps and some of the Illustrator’s basic tools then you can freely have as many simple and fast-made icons as you want. Just take the following guide and you’ll see how easy to create one.

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

Vu Tran June 4th, 2010

Illustrator’s Tools and Palettes Used Most for Icon Creation

Initially, we didn’t intend to post this part, which is out of our unpublished book on icon creation, simply because we had thought that everything about this topic has been provided in the Adobe’s Help files as well as available anywhere on the Net. However, we thought twice and saw that it wouldn’t be superfluous at all if we shared and pinpointed what utensils needed most and particularly served for our making of icons. But above all, we also believed that this tutorial-meaning part could be useful for those who begin to take part in this icon-design area and might give some certain tips to all of you who care out there.

So, in this part, we’d like to show you around some basic tools and palettes in Adobe Illustrator and what we need to use for drawing our icons, including some nice stuffs from the Tools panel like the Pen tool, the Selection tool, the Scale tool to several inevitable sets in the floating palettes like Colors palette, Layers palette, Swatches palette. For each and every of these utensils, we will also provide you with what they aim for and how to deal with them.

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