3D Icons & Shapes in Illustrator

October 15, 2009 in Illustrator by admin

3D Icons & Shapes using Illustrator

by Wendell Fernandes

We often see beautiful designs around nowadays. Many designers have the skills and knowledge to create amazing things using all the digital tools available and most explore all the creative facets. This is due to such an increase in technology which pushes us everyday to learn something new and fun to do. Today, I’ll be more than happy to show you a few basic elements that can potentially take this to a next level. I’ll be showing you a few different techniques on how to create 3D icons & Shapes using Illustrator.

Please find below the final result we are trying to achieve here. It’s a good practice to forget how the “final design” should look like, just because our main goal here is to fully comprehend this tool. We need to further expand our skills and “learn” what can be done. Let’s get to it!

We are looking at a sample of a “dummy” logo called: ESPO MARKETING. Notice we have a few important elements here. There is a modern “target” icon, we are also using a modern type of “arrow”. Also we can see a realistic “shadow” adding some depth, and finally we have some highlights used to add some “light” figurative effect.

EXAMPLE 1:

Logo-Illustrator-1-InstaTuts.com

To further explore this logo and elements we need to understand this icon in parts, and below is a breakdown of how things were added to it.

EXAMPLE 2:

Logo-Illustrator-4-InstaTuts.com

As we can see, we can create great shapes using this powerful tool. On the number “1”, we can see that we needed to create the basic shape, and thinking about the end result we can plan ahead.

The number 2 is the most crucial element we have. In this step we are forced to add the correct angle and basic “look & feel” to our icons. Specially, we are adding the correct coordinates to help you get the same result as we have here. I often catch myself writing down the coordinates on my “whiteboard” as I can forget, and later we’ll see how that applies, and why it’s so important.

Below is how we create this shape using our 3D tool (Effect > 3D > Extrude & Bevel):

Logo-Illustrator-3-InstaTuts.com

As you can see we have a few important elements here that will further expand our knowledge. The 3 numbers represent how the icon/object will be positioned, and this is crucial in creating icons as we will set the angle and style of each icon inside our icon family. We want our icons and shapes to be consistent to the overall design of the site/application.

The number shown as the “perspective” is the number representing how the icon will look in accordance with our x, and y grid and how “hard” that position will be. The “Extrude Depth” number represents how “tall” or “thick” you want your element to be, and finally the “Plastic Shading” gives the icon/object a glossy effect. I personally use this effect for all of our icons, but you are welcome to explore other options as you see fit.

Now we can start playing with our colors, transparency effects and gradients to get the style we want, and this is where you can really “add” to your work.

Prior to that you need to complete one step that is crucial and this is where I come back to what I was mentioning before in regards to “setting the icon family style”. We have to play with color from now on, and before we can change colors and add our own flavor, we need to “flatten” this object to something we can edit. See below for details.

Logo-Illustrator-5-InstaTuts.com

Notice that this shape has not yet been “expanded” or “flattened”. To do that, we need to go to our upper menu, and choose: Object > Expand Appearance. See example below:

Logo-Illustrator-7-InstaTuts.com

Here is our result after expanding the object:

Logo-Illustrator-8-InstaTuts.com

If you look at our previous sample, you notice they look a bit different, that is due to the fact that, each shape is not “really” selected. It also means we cannot edit any part of this shape. Now we can “ungroup” our shape after being expanded (to do this right click the logo and click “Ungroup.” Do this until “Ungroup” disappears), and play with, colors, gradients, transparency etc… let’s start adding some colors:

Logo-Illustrator-9-InstaTuts.com

We can start by adding some regular shape gradients they way we want. It’s important to notice that this goes with each designers creativity, and the style and coloration is based on our projects and requirements. After applying some gradients, it’s a good idea to make it shine. We do that by adding some highlights.

We use our same gradient, however we change our transparency from “normal” to “Lighten” which will help us with our “transparency”. We don’t want shapes overlapping each other!

See example below:

Logo-Illustrator-10-InstaTuts.com

Now we can start adding complementary items such as the arrow and the shadow.
For the shadow we applied 2 shapes on top of each other in the exact same position.
The reason for that is because we need extra “dark” effect, and using the “Multiply”
transparency effect, we can easily achieve that. See Below:

Logo-Illustrator-11-InstaTuts.com

After applying all the effects to this shape, here is what we get at the end:

Logo-Illustrator-12-InstaTuts.com

Now, to add the final touch we can add the logo “text” “ESPO MARKETING” and add some
light reflecting effect to the target shape “WITHOUT” the arrow on top. We will simply
duplicate the shape and place it underneath the main icon.

Logo-Illustrator-13-InstaTuts.com

Hope you have enjoyed this tutorial! See you next time!

Wendell

=====================================================

My name is Wendell Fernandes, Creative Director of Dellustrations.com, I am a Brazilian-born user interface and icon designer , I was also one of several designers who brought the new Monster.com live. In addition to Monster.com, I’ve also worked with clients like Dell, and DivX. My focus is bringing UI creativity in the industry and innovative solutions that make sense in today’s market. You can contact me by visiting Dellustrations.com.

=====================================================