Blog: Secrets from the Chef

Vector rendering: 3D graphics in icon and logo design

Andrew PushkinAuthor: Andrew Pushkin
10 November 2010

Over the past few years, the 3D graphics technologies have been developing at sky rocket speed. The calculation algorithms of photorealistic images, increase in the number of processor cores and the RAM volume (as well as the new GPU rendering technology) have made it possible to obtain high quality pictures while working from home. 3D has become a powerful tool of graphic design. There are a number of unarguable reasons for using the 3D approach with speed of operation being the most substantial.

You may ask a reasonable question: Is it possible to use 3D graphics in icon and logo design? The thing is that these areas of graphic design are traditionally vector-based. Beside the advantages of 3D approach (speed, ease of changing angles, correct perspective, etc.), it features a range of serious disadvantages, which make drawing icons solely in 3D practically impossible:

1. It is rather hard to match the colors and get “pure” colors. Often times we need to design icons in a preset color palette. The thing is that 3D graphics is intended to obtain photorealistic images. And the color of any real object depends on scattered ambient and direct light sources. So that even having set the right colors in the materials editor, we rarely get the needed color in the output.

This picture shows that even having defined the “pure” colors in the materials settings (colors and codes are shown below) we get “dirty” colors on the final render.

2. Impossible to match pixels.

It is clear from this image that neither vertical nor horizontal lines match the pixels. This creates the kind of fuzziness in the picture.

3. It hard to get a precise size of an object. Everybody understands that you can easily set the frame sizes during rendering. Try rendering a rectangle sized strictly at 127×84 pixels. Practically everything you need to do depends on rough estimates by sight.

As you can see even in 3ds max (one of the most powerful 3D rendering tools) you can set the size of the frame rather than individual objects.

4. Creating precise perspective requires a lot of effort. This idea appears controversial and causes confusion among people who do not work in 3D. You can create correct and natural perspective or a 2-point perspective. Although guidelines often define precise angles of construction and following them is a rather challenging task for a 3d modeler.

This picture shows the precise lines for building perspectives. Many icon drawing manuals (for example Windows XP) feature precise angles for building the perspective grid. Matching the angles during rendering is rather tough as you can see with the purse here (clearly the farther edge was never made completely vertical :) ).

5. Photorealism :) It is by far simpler to create a photorealistic image in 3D than vice versa. Losing the 3D aftertaste in icons is hard.

This picture contains two traffic cones — render to the left and icon to the right. For many images photorealism of a render would be preferable but in icons it is not always welcome and losing it is rather challenging.

There is also a bunch of strictly technical problems (not always clearly defined alpha-channel, weird white outlines in some Vray filters, difficulties in getting semitransparent shadows, etc.) And the last and the most important downside among all:

6. Impossibility of vector rendering

Resolving this last 6th problem instantly puts aside all other things. The modern rendering techniques are rather complex and work pixel-by-pixel for the most part. All the solutions that exist out there for getting a vector picture on the output are just mere analogs of tracers. And since we do not have a viable algorithm for tracing bitmap images — we can forget about vector rendering. And the main problem is the following: not a single tracing algorithm these days can build reasonable gradients. And the most advanced algorithms split an object into vector mesh and define filling for each cell. No gradients. This means that creating photorealistic vector images is far from being around the corner.

So how do we integrate 3D into icon design? Now we have just 3 main ways for doing it. Each of which deserves a separate article, and down below we just briefly touch upon each of them.

1. Direct tracing of images in AI (or in other external tracers apps). The only thing this method is good for is building the correct perspective and object’s shape. However, there are a couple of things to remember here. First, you need to separate the image from the background before tracing. Secondly, proper tracing requires rendering an object without reflections, flares or transparencies. The best solution here is to use NPR-render. Photorealism is the enemy of tracing.

Picture 2 features an image of a tractor. To the left is the render with reflections turned off, to the right — traced vector image in AI.

2. Outlining bitmap renders in AI (or superimposing vector shapes in PS). This is the most lo-tech but, unfortunately, the most efficient method. Essentially, it’s the only serious way to embed 3D into icon building. For this you need to render an image closely matching the required result including all the flares, reflections, and colors. Further designer will draw vector picture for the ready-to-go image.

The results of this process are shown in this picture: “naked” render to the left and vector icon traced against it to the right.

This approach gives good results in complex and large icons (for example during rendering machinery, especially wheeled J)

3. Programs and plug-ins for vector rendering. Today there are two main tools that exploit this direction. They are: Illustrate! and Swift 3D. I use both products in the shape of plug-ins and external renderers to 3ds max. I also use Mental Ray, the built-in 3ds max’s renderer, which is suitable for rendering edges and contours directly in EPS. Although all these directions are actively developing (from version to version Swift 3d becomes better and better), they are still far from the real vector rendering. So far all Swift3D can do is vector mesh with colors grouped by objects. It’s virtually impossible to keep working with it any further. The only option left for using it is two-color rendering, when an image is spilt into 2 main colors and each of them becomes a separate object with filling.

This picture shows the first gear rendered using a photorealistic visualize (bitmap image). The second – using Swift3D with two-color rendering (Cartoon Two Color Fill) in EPS format. Opening this file in AI gets you two objects: grayscale and black. The latter comes with one layer of superimposed gradient over the grayscale object in AI. As you can see, if you continue working with it, you can eventually get rather acceptable results.

Today we do not have any universal ways and each one of them is good for a particular situation. In conclusion I would like to stress that using 3D in icon design makes sense only in some select cases when the icon size does not exceed 128х128 pixels or without many details with complex shapes. And before a new revolutionary technology of vector rendering is unveiled, AI will remain the main tool for icon design :)

P.S. I use 3ds max, modo and mudbox. Probable in other editors things are a bit different but the general principals and problems are common for 3D approach in icon design in all applications. The ways of generating vector blanks, for instance in Rhinoceros features the ability to gain vectors by direct import from the program. But in essence it is the same as rendering in EPS format using Mental Ray.

Terms of Use

These materials can be used for any purposes with obligatory indication of the author.

Leave a comment

You can log in with your twitter or facebook accounts. After authorisation on one of this sites, you'll be able to leave comments here.

Connect with Facebook

If you have an OpenID (for example, use it to authorise.

Log in with your Turbomilk account or register a new one.