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.

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 a cylinder. Why don’t we choose other shapes? Supposedly, it was made from the frustum of a pyramid, there would be slanting lines occurring in the object. 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

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 surface 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 a 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 rotate the duplicate group to be reversed (Scale > Uniform 100 & -100% > Copy).

In the Layer palette, locate the ellipse path that depicts the hollow for the bucket, and then 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.

This post follows up the tutorial series “Icon Design Made Simple“. Followings are the parts of the series:

1. How to Create a Simple Button Icon in Adobe Illustrator
2. Adobe Illustrator’s Tools and Palettes Used Most for Icon Creation
3. How to Create a Simple Stroke Dashboard Icon in Adobe Illustrator
4. How to create a realistic globe icon
5. How to create a glossy Network icon
6. Perspective in Icon Design – Part 1: Draw a Paint Bucket icon
7. Perspective in Icon Design – Part 2: Know-hows
8. Lighting in Icon Design (revisited)
9. Material, Coloration and Gradient in Icon Design (revisited)

P.S. You might as well read our first-ever guide “Drawing A Pencil Icon” already published on Smashing Magazine. (Again, many thanks to SM guys for this opportunity).

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.