 |
|
How to create a Vista-styled star icon?February 14th 2007 |
This is tutorial teaches you how to create a star-shaped icon with Windows Vista formats in
RealWorld Icon Editor. The tutorial makes use of parameterized 3D models and references to components
(new features introduced in version 2006.2) and demonstrates them on simple examples.
This guide is intended for people with basic knowledge about RealWorld Icon Editor. It is recommended
to read the tutorials embedded in the application first. You should also know the basic technical
information about icons and about icons in Windows Vista.
Why use parameterized 3D models
The following picture shows five example icons created from a single parameterized 3D model by just
selecting different values for parameters. All other settings (camera, lights, renderer) remained
the same.
 If you follow the steps exactly, you will create these icons (and more).
The star shape
Star is a very simple symmetric shape. We will create a corner of a start only once and then reference it four times.
Let's get started:
- Create new document using the "New parametric Unicorn3D Object" template.
- Then insert a new "Rectangular surface" from toolbar.
- Set its color to yellow and right-click on item "Asymmetric surface in both direction"
and select "Symmetric surface in U direction" from context menu as shown on the left screenshot. The shape we are trying to create is
symmetric and we will use of this property to simplify the task.
 Create a new parameterized Unicorn3D document, insert a rectangular surface and enable symmetry.
|
|
 Position control points in 3D space with the help of a 3D grid.
|
-
Set grid to 0.1 units (from toolbar) and position the control points according to the right screenshot above. Note that the surface remains
symmetrical. You may need to rotate the model to set Z coordinates for the inner points. Alternatively, you may
use the "Transform Points" operation from toolbar, or overwrite the coordinates in the tree view (Document Structure panel).
Creating references to components
Referencing a component creates a duplicate, but all changes to the original component are
also visible on the duplicate. We will create four references to the previously created component
- Right-click on the name of the inserted component (it is called "Unnamed Component" by default - consider giving it a better name)
and click on "Create Reference to Component" from context menu. Repeat it three more times to create four total references.
 References are easily created from a component's context menu.
- Find the "Transformation" items of the four new components and modify their rotation angles in the tree view
to 72, 144, -144 and -72 degrees respectively (360/5 = 72 degrees).
How to do it: Each component has an associated transformation that can be used to position it in 3D space.
The final transformation can consist of up to 16 simple transformations (translations, rotations, scales, and shears).
By default, each component has a rotation and a translation (these two can be controlled by control points from 3D view).
The rotation transformation has four numbers: the first three define direction of rotation axis, the fourth one
is a rotation angle in range -180 to 180 degrees.
In our case: Since the rotation axis is by default parallel to Z axis, it is enough to set the angle. You can do it, by
selecting the rotation item and by typing ",,,72" and hitting Enter. The three commas indicate that the first 3 number will not be changed.
Adding parameters
A "How to make a star" tutorial could end here, since the star is ready and conversion to icon is a trivial
task in RealWorld Icon Editor (save file, click "Render to Image", then "Create Icon from Snapshot", twice OK and you are done).
But adding parameters to the 3D model will make it much more flexible...
In this tutorial, we will add five parameters at once. In reality, you will most likely
add the parameters to your models one by one when the need arises.
- Locate the root item and right-click on it - then add two vector variables and three floating
point variables from the context menu. Set subtype of the vector variables to "Color" from their context menu.
- Set names and current values of the variables according to the left screenshot.

Set subtype of 'diffuse' and 'specular' parameters from context menu. |
|

Parameters can be also added/removed from toolbar. |
The final step is to replace selected constants with expressions. To parameterize a number right-click on an item and select "Parameterize n-th number" from context menu.
A new item appears under the parameterized item and that item accepts expressions instead of constant values.
Number 1-4 on the item's icon indicated which of the parent's number is controlled by that expression.
- Parameterize the control points as demonstrated on the right screenshot. The expressions
use height, width, and arc parameters. Height controls the plasticity of the star by setting
the height of the central part of the shape. Width and arc control the shape of the corners.
- Parameterize material properties of the surface. Use diffuse and specular parameters
and parameterize "RGBA" and "Specular" items under "Material" item. Set the expressions to "diffuse.r",
"diffuse.g", "diffuse.b", "specular.r", "specular.g", and "specular.b".
The parameterized 3D model is finished - save it as "star.u3d". If you have skipped some of the steps, you can download
reference star.u3d at the and of this article. It will be needed in the next step.
Creating an icon
Click "Render to Image" command in "Operation" menu or in toolbar. A new window appears.
This window allows you to define snapshots with selected parameters, light, camera positions, etc.
When creating icons with 256x256 image (e.g. Vista icons), it is recommended to increase the
size of the rendered image to 1024x1024 pixels or more. Larger images will produce smoother,
non-pixelated icons, but the rendering time will be longer.
Set whatever parameter values you like and then click "Create Icon from Snapshot" command
from "Operation" menu or toolbar.
 Set parameters using the "Model Parameters" panel in the lower right corner.
Click OK twice (modify the values in the dialogs if you like) and your new icon opens in
a new window. If you wish to add images in 8-bit and 4-bit color depths, use "Make Pre-XP Formats" command
in "Icon" menu or in toolbar. You may also add a projected shadow to your icon using the appropriate drawing tool.
Once you are happy with your icon, just save it and close the window...and create many more using different parameters!
 An example star icon in all standard resolutions.
Resources
Summary
This tutorial demonstrated the power of parameterized 3D models on a very simple example. Parameters
allow designers to fine-tune icons more quickly, reuse 3D models more easily in multiple projects or even
create simple animations.
Recent Comments
|
Display all comments.
on August 19th 2007
on January 26th 2008
on February 9th 2008
10/10
on April 20th 2008
on June 2nd 2008
on July 20th 2008
on July 20th 2008
on July 20th 2008
on November 19th 2008
on October 11th 2009