So here it is, revised and even more detailed, the making of a 3d isometric vector icon with Illustrator.

I will try explaining this in the longest way.

So this one will not only be just a 3d shiny box icon tutorial, but also an article to give an idea about how to design isometric scale icons.

What is Isometric Anyways?

Isometric projection is a 3d method, being a form of ortographic projection; representing a 3 dimensional object in 2 dimensions.

In a bit simpler english; we can make 2d objects easily converted to 3d objects by adding equally measured perspectives. That’s what we will do to create our 3d vector icon =)

Here is what we will try to achieve:

Phase 1: Making the Square into a 3d Box with Isometric Projection

1- Okay. To do that, we will need a square first.

Open a new Illustrator document, preferably in cmyk color and draw a 100pt x 100pt square:

2- Next, we will need to duplicate that square 2 times to prepare the front left and front right sides of the box imitation:

3- Now we will rotate our top side isometrically to build the top side of the box.

To do that, let’s go to effect > 3d > rotate > select isometric top:

4- Ok now let’s do the same for the front left side with one difference; the rotation will be isometric left:

5- Same goes for the fron right side; rotating isometric right:

6- Now let’s  object > expand appearance them to make the 3d rotated sides more editable:

7- We can now put them all together, to form a box:

Since we are almost done with the basic shape, we can move along with the effects to apply on it.

In order to shorten the time I waste on the css and to modify the elements a bit easier, I defined some common base selectors to use and they exist almost on every css file of my previous projects and this site’s css as well.

Doing that, I reset the default values for common elements and selectors, and then I restyle and organize those elements individually, wherever they are needed.

Here are my favourite fixes and resets for my possible troubles:

• 1- Settings for Headings

  Because IE6 displays the font-size and margin/padding properties for headings different than other browsers, I define preliminary standard values for the heading properties:

  h1 {
  font-size:138.5%;
  }
  

  IE6 renders the font sizes for headings differently (mostly for the typefaces like Georgia, Trebuchet MS, etc), so they need to be standardized for all browsers:

  h1,h2,h3 {
  margin:1em 0;
  }
  
  h2 {
  font-size:123.1%;
  }
  h3 {
  font-size:108%;
  }
  h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  }
  

• 2-Hiding the Horizontal Rules

  As I sometimes divide content into divisions, it looks better and more organized by dividing with horizontal rules when site is viewed without stylesheet. And of course, I hide them inside css:

  hr {
  display:none;
  }
  

• 3- Removing the Link Outlines

  Especially with Firefox view, a links get bordered and outlined on focus and active states. It is annoying when it is not intented, so I deactivate the link outlines.

  a {
  outline: none;
  }
  

• 4- Preventing Linked Images Gain Borders

  Unstyled img elements gains borders when they are hyperlinked. I remove the possible image borders:

  img {
  outline: none;
  }
  

  However, as Gareth reminded me on his comment; removing outlines may reduce accessibility. Removing outlines and borders on focus or hover will theorically disable browsing using tab key.

  Unless you are not worried about this issue, you can use this hack.

• 5- Resetting Margin and Paddings on My Common Elements

  Mostly because IE renders margins and paddings ratherly different than other major standards based browsers, I reset the paddings and margins for my form, paragraph, and list elements.

  p, form, ul, ol, dt, dd {
  margin:0;
  padding:0;
  }
  

• 6- Clear Fix

  Almost in every project, I come to needing the float clearing divs or classes to attach. So I created a base class selector for clearing div and usually pick name from a comic hero. Mostly I name it spiderman/batman =)

  .batman:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }
  .batman {display:inline-block;}
  /* Hide from IE Mac */
  .batman {display:block;}
  /* End hide from IE Mac */
  

Of course some of you might think if all of these settings are necessary, as some of the techniques may be altered with other shortcut selectors. These are just my kind of solutions, and I hope they help on your projects too.

There are many more techniques about base css documents and resetting selectors like Yahoo’s Base CSS and Eric Meyer’s Reset CSS. Just take a loot at them and see how timesaving they are.