Creating an icon from 3D model

Not logged in.

Articles

speaker icon

Free Online Icon Maker

Icon Shortcut Maker

Bookmark this page

	Del.icio.us
	Digg it
	StumbleUpon
	Yahoo MyWeb
	Furl it

Find quality web sites in our directory of Graphics Resources

Tutorials, App Developer, Research, Online Services, Web Design

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.

Create new Unicorn3D document by selecting the 'New Unicorn3D document' prototype and clicking the 'Create' button.

Components are added to Unicorn3D documents by clicking 'Insert component' toolbar button or 'Document' menu command.

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.

Torus was added to the 3D model using 'Insert component' command. 3D view can be rotated using right mouse button and zoomed using mouse wheel.

Modify torus matrial in the tree view and set the inner an outer radius using control points or overwrite values in tree view.

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.

To create the central part of a speaker, insert new component - a 'Surface of revolution'.

Change the material color to the same color as in the previous step and drag the control points to adjust the surface shape.

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.

Select one of the control points in 3D view and the corresponding item will be highlighted in tree view. Click on the toolbar button named 'Insert knot...'.

Set the color of material to 0.2, 0.2, 0.2 and move the control points to proper positions in 3D view or type the exact value in tree view.

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.

Locate the 'Degree' item in the tree view. Right click on it and select '2 (quadric)' from the pop-up menu.

Insert three knots at positions 0.25, 0.5, and 0.75. In this case, the multiplicity will remain at 1 and therefore there will be no visible edges in the curve.

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.

Position the control points according to the screenshot and modify material color of this shape to 0.2, 0.2, 0.6.

The position of the speaker edge is wrong and needs to be fixed. We will move it up by applying translation.

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.

There are many ways to configure camera. One of them is to rotate and zoom the 3D view and then clicking 'Camera from 3D view' button. Alternativelly, the camera properties may be entered manually in tree view.

After the lights are added, some of their properties are controlled by control points in 3D view. Others are only configured from tree view.

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.

Adjust the image size to 512x512 to get better results, create an icon by clicking a toolbar button, and then OK twice.

The icon was generated, the only thing left is to save it.

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.