Creating an icon from 3D model
Creating an icon from 3D model
RealWorld Graphics logo    
Not logged in.  
IndexSoftwareGraphicsArticlesDiscussMore...

What is a ...
How to make a ...
favicon
speaker icon
icon from image
composed icon
3D text
hi-res star icon
More about ...
Video guide on...
Free Online Icon Maker
Icon Shortcut Maker
Search this site using Google

Bookmark this page

del.icio.us iconDel.icio.us
Digg iconDigg it
StumbleUpon iconStumbleUpon
Yahoo MyWeb iconYahoo MyWeb
Furl iconFurl it

Find quality web sites in our directory of Graphics Resources

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

Select background

I wish there were ...

Is the speed of this web adequate?

   

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.

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

 

Empty Unicorn3D document
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 added to 3D model
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.

 

Change torus matrial and radius
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.

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

 

Modify shape by dragging control points
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.

Insert knots and control points
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...'.

 

Create speaker shape
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.

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

 

Insert knots into the final part
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.

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

 

Set positions of speaker parts
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.

Configure camera position and direction
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.

 

Configure lights
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.

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

 

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

Resources

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

Unknown author (2005-12-22): I think its awesome

Unknown author (2006-06-28): lol, u should gift that program to people, its very cool

Unknown author (2006-11-15): Nice tutorial=)

Unknown author (2006-11-20): verry nice

Unknown author (2007-02-07): I wonder if it does software rendering, or exports the image rendered by the video card (in other words, does my exported image depend on my video hardware)...

Vlasta (2007-02-07): Well, by default it uses a software ray-tracer for rendering, but you can switch to OpenGL driver. Then it would depend on your graphics driver. Still, when rendering to memory, the video card is usually not used anyway.

Unknown author (2007-12-26): Well, this morning I noticed the advanced options of a folder. I could actually change my icon. WoW. They were a few template ones. Actually a lot, but only a few nice ones. Then I saw the browse button. HEY, i can get more icons on my pc. But looking for them is hard... Going through my entire pc to find something i like (I didn't know anything about icons, not even the extention.)

I surfed the web for "creating icons"and found out rather fast, just change the .bmp to .ico and use it.

Worked... Nice, but the quality was very disappointing.

Then I went on surfing... "creating 3d icons" and ended up here Wow... looks a lot better!

However? How about 3d, moving icons?

Anyways, this website is added to my fav's THANKS FOR ALL THE HELP

I am surfing on...
(The things you can learn in 1 day ;)....)

[OMG]Kevinicons (2008-02-08): Its hard!

Add comment

Note: Comments not related to this page or using offensive language will be deleted.

Please login or register before adding comments.


Copyright © 2005-2007 RealWorld Graphics. Contact: info@rw-designer.com.