How to make a speaker icon from 3D model? September 27th 2005

This is a detailed tutorial on making an icon of a speaker in RealWorld Icon Editor. It covers all neccessary steps, including creating a rough 3D model of a speaker, preparing a scene for rendering, and generating icon.

This guide is intended for people with basic knowledge about RealWorld Icon Editor. It is recommended to go through the embedded application tutorials first.

If you follow the steps exactly,
you will create this icon.

Why should you bother making a 3D model?

There are three basic icon creation methods:

Creating icons directly

Icons are created by manipulating pixels one by one, or by using a simple drawing tool such as line, floodfill, circle, etc. Changes are immediately applied, that means an already drawn shape cannot be easily modified. This method is suitable when creating simple icons, but it is used very rarely by professional icon designers.

Creating icons from vector images

A vector image consists from basic geometrical shapes (lines, ellipses, text, etc.) with applied effects. The shapes remain independent entities and author can modify their properties at any time. This method offers greater flexibility and allows finetuning the icons by modifying parts of the vector image. There are no problems rendering a vector drawing to a raster image of any resolution/size.

Creating icons from 3D objects

The advantages of vector images apply also to 3D models - they can be scaled and their parts can be adjusted at any time. Additionally, lighting, perspective transformations, and viewpoint can be changed freely. Of course, creating a 3D model requires more knowledge and adequate software.

...so, why should you bother creating a 3D model? To put it straight, it saves time...

Step 1: Think about the goal

When creating 3D models for icons, focus on simplicity. There is no point in having accurate and detailed 3D model, because icons are small and the details would not be visible anyway. Our model will be as simple as possible and will be made of four parts as shown on follwing picture.

The models of a speaker consists of four simple parts - four surfaces of revolution.

Step 2: Creating the 3D model

Creating the speaker model is a matter of few minutes. Launch RealWolrd Icon Editor and create new document using "New Unicorn3D document" prototype. The new document is empty.

Let's start with the easiest part - the edge of the speaker. Insert new torus by clicking on the 'Insert Component' toolbar button and selecting 'Torus'. Rotate your view using your right mouse button (press the right mouse button in 3D view and move the mouse; release the mouse button when finished).

Adjust the object's size and the material color according to the picture. If you want to create exactly the same speaker as on the picture, you can copy the numbers from the screenshot and type them in the tree view. Click on the screenshot to view it in full size.

Next, we will create the central part of the speaker. Insert a 'Surface of Revolution', change the material (same as above) and move the control points or copy the coordinates manually. It is a good habit to name the parts of a 3D model, click the 'Unnamed Component' item in the tree and change the text.

Tip: click on an object in 3D view and its control points appear; use mouse wheel to zoom in and out in 3D view.

Now, we will create the main part of the speaker. Insert another surface of revolution. Then click it in 3D view (its control points appear) and click on one of the control points (the tree view is synchronized). Click on the 'Insert knot...' toolbar button (a dialog appears). In the dialog, set knot multiplicity to 3 and press OK. Inserting knots into a NURBS curve increases the number of control points and allows us to create more complex surfaces.

Change the material (to 0.2, 0.2, 0.2) and move the control points to mimic the screenshot.

The last part of the speaker is also creted from a surface of revolution. Insert one more and set its degree to 2. To set a degree, expand the tree and locate the degree item. Right-click on it an select 2 from the popup menu. Then insert knots at positions 0.25, 0.5 and 0.75. Leave the multiplicity of these knots at 1.

After the knots are inserted, move the control points to proper positions and set material color of this part to 0.2, 0.2, 0.6.

Finally, fix the position of the speaker's edge by moving it up. Expand the Transformation node of the first component and modify the second number in the second sub-item.

The 3D model of speaker is complete. Save it before continuing.

Step 3: Rendering the 3D scene and creating icon

In this step, we will prepare our 3D model for rendering into image. We will set camera position and rotation, create lights, and set properties of rendering device and attributes of the resulting image. These settings will be saved into a separate file.

Use right mouse button to rotate the object in 3D view. When you are happy with the angle, click the 'Camera from 3D view' button and the current setting will be used for rendering. If you want the exact angle as in our speaker icon, enter the values in the tree view manually.

Right click on 'Lights' item in the tree view and add an ambient light. Then add two more directional lights. Finally, set properties of these lights to match the lights on the right screenshot.

The icon is generated from an image. If this image is big enough, the generated icon has smooth edges. Change the size of image from 256x256 to 512x512 to improve the icon's quality. Then click the 'Create Icon' button in toolbar or in 'Document' menu. Click OK twice and your icon is complete.

Resources

• Unicorn3D model of speaker icon: speaker.u3d
• Rendered Image document of speaker icon: speaker.r3i
• The speaker icon itself: speaker.ico
• RealWorld Icon Editor

Conclusion

Creating icons from 3D models has both pros and cons. At this point, you should be well aware of them. The biggest con is the fact, that it requires more knowledge and experience than the other methods. It takes some practising until you are able to create a 3D model suitable for an icon.

On the other hand, there are many positives. Icons look realistic and it is easy to change lighting, camera, colors or shapes. The flexibility is the key issue here. Your work is not lost if you decide, you would like to look on the object from another angle.

Another important issue for professional designers is the fact, that all icons have similar, non-obtrusive style and are suitable for long-term usage.

Recent Comments