Rockstar Icon Designer - Kate McInnes [30]
Why View Points are Better than Perspective for most Icon Designs
As I mentioned earlier, view points for icons are different from perspective views. As you would have discovered during the last few tutorials, an object can change form depending on where it's located in relation to the vanishing point(s), viewing points.
View point vs. Perspective.
Why most small scale icons adopt the viewpoint theory is because perspective adds foreshortening to an image which isn't ideal for precise pixel rendering. As you know, pixels use the invisible grid on your computer screen to render very small dots of color that make up an image. The closer you zoom in, the larger the pixel squares will become. The reason why your screen can show clear images is the resolution. Each line and shape of an image is made up of millions of little pixel “lights,” but when it comes to icon rendering, the number of pixels you are required to use is significantly less. When a line is slightly askew to the horizontal, vertical and diagonal lines of the grid, the pixels will add a slightly transparent pixel to approximate the line. When this is done at a small scale where every pixel counts, you can end up with blurry lines that appear to be thicker than the lines that are rendering properly against the grid. Views are handy as you can create a three dimensional icon while still rendering the lines in a way that keeps them crisp.
In the case of Application style Mac OS icons, the rules of perspective simply cannot be used. If you look at the dock introduced with Mac OS X Leopard you will see that it's based on one-point perspective, but for icons to match this, they would have to be rendered in an almost limited number of views because the scale and location of an icon on the dock will change the viewing angle. Let's not forget that the doc can also be positioned to the left, right or bottom of the screen. If perspective was to be used with this style of icon, then the visual balance of the icons on the dock would be significantly disrupted.
Why perspective isn't used for desktop or dock style icons.
So, while perspective is a great skill to have when making medium to large scale custom icons, web graphics and detailed illustrations, there's no practical way it can be used to create a uniform viewing experience for desktop and Toolbar icons.
Flat View Icons
Flat View icons fall under a viewing category of their own, as they don't have any special instructions other than creating a design that is legible at a variety of scales and contrasts. Flat View icons should have very little to no lighting effects, and no drop shadow effects.
Tips
Using a grid will help you balance the designs
Try and use the Pen tool and Vector Shapes as often as you can, they are easy to edit if you need to and are scalable.
Keep the line weight and details consistent for each design, a complex design next to a simple one will disrupt the visual harmony of the icon set.
Tips to Create a Pixel Icon Set In a Flat View Style with Adobe Photoshop CS5
Let's begin with a super simple exercise in using Pathfinder options to make flat view pixel style icons. You will learn how to combine basic shapes to create a set of retro style pixel icons. I will guide you through the basics of this style beginning with blocking out the basic shape, tweaking the design using the snap to grid function and a pixel grid and then how to combine shapes and delete points to make a clean finished result. Finally I will share a scaling trick so you can save the icons at various sizes without having to redesign them.
For now, I'll be using Adobe Photoshop to demonstrate the PS vector tools which can sometimes be a bit trickier than Illustrators to use. In the next exercise