The caret is a small red and blue cross. The caret always shows the location of the last mouse click—when you click the left mouse button, the caret appears where the cursor is pointed. Unlike the cursor, the caret shows the effects of grids and gravity (described in “Constraints: Gravity (Object) Snap and Grid Snap”).

The Transformation Pin indicates the point from which an object is scaled or sheared and around which an object is rotated. It is a blue and white cross, larger than the caret. It can be dropped anywhere to affect a transform.

A vertex is a selectable point, created when the mouse is clicked in the IconSmith window while the <Ctrl> key is held down.

A path is one or more line segments between vertices. Paths can be open or closed, filled or unfilled.

To draw a path with IconSmith:

This process creates a line segment. To add more line segments connected to the first, repeat steps 2 and 3 as many times as necessary. To create a disconnected line segment, repeat from step 1.

In IconSmith, you can fill a closed path (one in which the beginning and end points meet) with a color. To draw a filled shape, make sure that you have selected a fill color from the Palette menu, and proceed to draw. When you finish creating the closed path, the shape is filled with the current fill color. You can change the fill color of a path by selecting the path and then selecting a new fill color.

Fill does not work properly with concave closed paths, nor with paths in which the beginning point does not meet the end point. See “Concave Polygons”.

To delete any path or vertex, select it and press the <Back Space> key, or use “Delete” in the IconSmith popup menu.

Icons created by Silicon Graphics are drawn in the same isometric view, which provides an illusion of 3-D, even though the polygons composing the icons are 2-D. If you draw icons facing the screen at right angles, they look 2-D. To generate a 3-D effect, draw “horizontal” lines so that they move up 1 unit in the y-axis for every 2 units they extend along the true x-axis. See Figure 12-6.

Figure 12-6. 3-D Icon Axes

Use the same projection that the original icon set uses. Icons tilted in the wrong direction look off-balance, and destroy the 3-D appearance. For your convenience, IconSmith provides an isometric grid. By following the diagonals of this grid, as shown, you can create an icon that fits in exactly with other isometric icons in the Desktop. You can count along these diagonal grid dots, to help measure, align, or center pieces of your icon.

Desktop icons can be displayed in many sizes. It is easier to draw an icon that looks good small, but you might consider the details that appear when a user enlarges your icon.

IconSmith includes two features useful in designing your icon for display at all sizes, the Preview box and the slider on the right side of the drawing area.

You can import design elements such as circles into your badge. Importing elements where possible saves you work and makes it easy to include common design elements in all the icons for one application.

To import an existing icon or icon element, click the Import button. This brings up the Import Icon or Set Template window. Use the “Import to Icon Editing Layer” area to specify the icon file you want.

Generic and sample material can be found in the /usr/lib/filetype/iconlib directory. For example, to import a sample circle, type in the filename:

/usr/lib/filetype/iconlib/sample.circle.fti

Other icons can be found in:

All icons are potential sources for design elements. However, if you are designing a unique set of executable or document badges, you should make use of templates as described in “Templates” and “Icon Design and Composition Conventions”.

You can use templates for tracing or to help you design your icons. You can import a template so that you can see it in the IconSmith drawing window, without saving or displaying as part of the design. This is most useful for getting position information while you are designing a unique badge to use in conjunction with the generic executable and document icons.

You cannot move or change an icon template in IconSmith.

To display a template, click the Import button. In the Import Icon or Set Template window, type the name of the template icon file you want in the area labeled “Set Template Layer.” Note that three template images are available from buttons in this window. These template images are the most often used, and they are discussed in “Icon Design and Composition Conventions”.

When you use the mouse to select an area with objects in it, you might include only some vertices of some objects. When you toggle Partial on, objects partially selected are highlighted. When you toggle Partial off, partially selected objects are ignored.

In compositions with many objects, you can use “Deselect Part Paths” to make selection easier. When selecting the objects in the drawing area, you can also select adjacent objects, then deselect what you don't want. Hold the <Shift> key down and click one vertex of each object you don't want. This deselects the vertex, which makes the object partially selected. Then you can use “Deselect Part Paths” from the IconSmith popup menu to deselect the entire object.

“Select Next” allows you to select a vertex that is covered by another vertex. When two or more trajectories each have a vertex at a common location, such as two triangles with a coincident edge, the “Select Next” operator is useful for selecting a trajectory other than the top one. “Select Next” is also useful in images with tiled parts, where most vertices share a location.

Select a shared vertex by clicking its location. That vertex is highlighted in yellow and green (and the red and blue caret appears at that spot). The other vertices of the trajectory selected are highlighted in white to indicate the trajectory to which the selected vertex belongs. Now each time you choose “Select Next” from the IconSmith menu, you step through all the other vertices of all the other trajectories which have a vertex at that point.

You can select all vertices in the main IconSmith window drawing area using the “Select All” option in the IconSmith popup menu. You can select all vertices in an area by holding down the left mouse button and sweeping out a box to surround the desired area.

The Scale button changes the size of an object without changing its shape.

The buttons marked Scale X and Scale Y limit scaling transformations to either horizontal or vertical, respectively. Unlike the Scale button, the Scale XY button allows you to stretch your object both horizontally and vertically.

Using the Rotate button, you can rotate a selected object around the Transform Pin.

The Shear Y transformation transforms rectangles into parallelograms with one pair of sides parallel to the y axis. The Shear Y button is useful for transforming art that is drawn in a face-on view to an isometric view.

Note that strictly speaking, the Shear Y transformation performs two transformations: shear in y and scale in x.

To change the grid behavior, use the buttons in the “Grid Constraints” portion of the Constraints window. In the main IconSmith window, the Snap button under the heading “Grid” lets you turn on or off the grid setting you've made using the Constraints window. The Show button lets you display or hide the grid.

The following setting choices are available for the grid in the Constraints window:

The controls in the “Gravity Constraints” portion of the Constraints window control how gravity snap behaves. In the main IconSmith window, the Snap button under the “Gravity” heading lets you turn on or off the influence of gravity on objects.

Many icons share common components. One example is the “magic carpet” component used as a background component by most executable files; individual applications can add unique badges.

Rather than redrawing the common “generic” component in each individual icon, you can instead draw only the unique badges, and then use the ICON directive in the FTR file to combine the badge with the generic component. “Getting the Icon Picture: The ICON Rule” in Chapter 13 describes how to do this. An advantage to this approach is that you don't have to create separate icons to identify open or closed states. You can simply create the unique badge and then set up the FTR file to include either the generic open component or the generic closed component as appropriate.

While designing your icon, you can import the appropriate generic component as a template using the “Set Template Layer” of the “Import or Set Template” window; this helps you achieve the correct icon placement and perspective. When you import a component into the template layer, the component is displayed in the drawing area, but not saved as part of the icon. When you are finished, you can save your icon in a .fti file, and combine it with the generic component in the FTR file.

If you import a generic component using the “Icon Editing Layer” section of the “Import or Set Template” window, the component becomes part of your icon. In general, you shouldn't do this. Instead, you should draw only the badge. Then in your FTR file, you use the ICON rule to display the appropriate generic component before displaying your badge. (See “Getting the Icon Picture: The ICON Rule” for information on the ICON rule.)

The blue boundary box in the IconSmith drawing area indicates the area of your design that draws in the Desktop and is sensitive to mouse input. You must confine your icon to the area within this boundary. You can display or hide the box by using the Show button under Bounds in the main IconSmith window.

You can select or change the color of any outlined or filled object by using the features in the Selection Properties window. To bring up this window, click the Palette button. The currently selected outline and fill colors are displayed under the “Current Colors” heading.

There are two palettes in the Selection Properties window: one for the outline color, and another for the fill color. The outline color palette consists of the first 16 entries in the IRIS color map. The fill color palette gives you 128 colors created by dithering between the color values of the first 16 colormap entries.

In addition to the colors on these palette, there are three special colors available that you should use extensively when drawing your icon. The Desktop changes these colors to provide visual feedback when users select, locate, drag, and otherwise interact with your icon. Theese colors and their uses are:

Select outline and fill colors displayed in the palettes by clicking them. If you want subsequent objects to use your color selections, click “Apply to Pen.” If you current objects to be updated with colors already in your pen, click an existing object with the left mouse button, and then select “Get from Pen” from the Selection Properties window. The object will get the outline and fill colors currently assigned to the pen.

For more information on the use of color in designing icons, refer to “Icon Colors” in Chapter 2 of the Indigo Magic User Interface Guidelines.

Here is a trick for drawing a circle using lines:

Circles and other shapes can be time-consuming to create. Another way of adding circles to your icon is to import a circle from another icon or from the icon parts library. See “Sharing Design Elements” for more information.

To create an oval, stretch the circle you have already drawn.

You can now assemble the parts to make a simple icon, as shown in Figure 12-13.

Figure 12-13. A Simple, Circular 2-D Icon

The circular icon created above is not a good central icon design because it is not isometric. The circle looks awkward in the context of isometric icons. Here are two ways to make the same design in isometric space.

Import Existing Object

If another icon contains the shape you need, recycle it.

1. Click the Import button.

2. Import the icon file /usr/lib/filetype/iconlib/sample.big.3circles.fti. You should now have the design shown in Figure 12-14 in your IconSmith drawing area.

   Figure 12-14. Imported Circles

   
   
   

3. Delete all parts of this icon except the lower right circle.

Using either method, you can create an isometric circle, shown in Figure 12-15. Starting with the isometric circle, you can easily create isometric ovals, using the procedure in “Drawing an Oval”.

Figure 12-15. Finished Isometric Circle

The final, isometric version of the icon is shown in Figure 12-16.

Figure 12-16. Simple, Isometric 2-D Icon