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.

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

• RealWorld Icon Editor downloads page.
• Parameterized 3D model: star.u3d (RWIE 2006.2 needed)
• Rendered image with 5 snapshots: star.r3i (RWIE 2006.2 needed)
• The example icon: star.ico

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