<!-- $XConsortium: ch13.sgm /main/9 1996/09/08 19:44:33 rws $ -->
<!-- (c) Copyright 1995 Digital Equipment Corporation. -->
<!-- (c) Copyright 1995 Hewlett-Packard Company. -->
<!-- (c) Copyright 1995 International Business Machines Corp. -->
<!-- (c) Copyright 1995 Sun Microsystems, Inc. -->
<!-- (c) Copyright 1995 Novell, Inc. -->
<!-- (c) Copyright 1995 FUJITSU LIMITED. -->
<!-- (c) Copyright 1995 Hitachi. -->
<chapter id="UG.IconE.div.1">
<title id="UG.IconE.mkr.1">Using Icon Editor</title>
<para>Icon Editor is a tool for creating both
bitmap and pixmap image files
for use as icons or backdrops.
</para>
<informaltable id="UG.IconE.itbl.1" frame="All">
<tgroup cols="1">
<colspec colname="1" colwidth="4.0 in">
<tbody>
<row rowsep="1">
<entry><para><!--Original XRef content: 'Basic Drawing Tasks272'--><xref role="JumpText"
linkend="UG.IconE.mkr.4"></para></entry></row>
<row rowsep="1">
<entry><para><!--Original XRef content: 'Saving Icon Files275'--><xref role="JumpText"
linkend="UG.IconE.mkr.8"></para></entry></row>
<row rowsep="1">
<entry><para><!--Original XRef content: 'Color Usage277'--><xref role="JumpText"
linkend="UG.IconE.mkr.12"></para></entry></row>
<row rowsep="1">
<entry><para><!--Original XRef content: 'Advanced Drawing Tasks278'--><xref
role="JumpText" linkend="UG.IconE.mkr.13"></para></entry></row></tbody></tgroup>
</informaltable>
<para id="UG.IconE.mkr.2">Icon Editor enables you to create and edit images
in two formats:</para>
<table id="UG.IconE.tbl.1" frame="Topbot">
<title>Icon Formats</title>
<tgroup cols="3" colsep="0" rowsep="0">
<colspec colwidth="1.49in">
<colspec colwidth="2.86in">
<colspec colwidth="1.34in">
<thead>
<row><entry align="left" valign="bottom"><para><literal>Format</literal></para></entry>
<entry align="left" valign="bottom"><para><literal>Description</literal></para></entry>
<entry align="left" valign="bottom"><para><literal>File Name</literal></para></entry>
</row></thead>
<tbody>
<row>
<entry align="left" valign="top"><para>X pixmap (XPM)</para></entry>
<entry align="left" valign="top"><para>Multicolor images that include static
and dynamic colors</para></entry>
<entry align="left" valign="top"><para><filename>*.pm</filename></para></entry>
</row>
<row>
<entry align="left" valign="top"><para>X bitmap (XBM)</para></entry>
<entry align="left" valign="top"><para>Two-color images limited to a foreground
and background color (used for black and white icons)</para></entry>
<entry align="left" valign="top"><para><filename>*.bm</filename></para></entry>
</row></tbody></tgroup></table>
<figure>
<title>Icon Editor main window</title>
<graphic id="UG.IconE.grph.1" entityref="UG.IconE.fig.1"></graphic>
</figure>
<para>You create images by selecting drawing tools and colors, and using them
in the work area. As you draw, Icon Editor displays an actual-size copy of
your icon in both formats. You need to consider the two-color version of
the icon even if you are drawing an image for use on color systems, because
icons may revert to two colors if there are not enough free colors available
on the workspace.</para>
<para>For information on designing icons, read the Visual Design chapter in
the <emphasis>Style Guide and Checklist</emphasis>.</para>
<sect1 id="UG.IconE.div.2" role="Procedure">
<title id="UG.IconE.mkr.3">To Start Icon Editor</title>
<orderedlist><listitem><para>Open the Personal Applications subpanel and click
the Icon Editor control.<indexterm><primary>starting</primary><secondary>Icon Editor</secondary></indexterm><indexterm><primary>Icon Editor</primary>
<secondary>starting</secondary></indexterm></para>
</listitem></orderedlist>
<graphic id="UG.IconE.igrph.1" entityref="UG.IconE.fig.2"></graphic>
<para>Icon Editor starts with an empty drawing work area.<indexterm><primary>Icon Editor</primary><secondary>control</secondary></indexterm><indexterm>
<primary>Front Panel</primary><secondary>Icon Editor control</secondary></indexterm></para>
<sect2 id="UG.IconE.div.3">
<title>Other Ways to Start Icon Editor</title>
<para>You can also start Icon Editor and have it load an icon into the work
area in one of the following ways:<indexterm><primary>opening</primary>
<secondary>icon</secondary></indexterm><indexterm><primary>Icon Editor</primary>
<secondary>opening icon for editing</secondary></indexterm></para>
<itemizedlist remap="Bullet1"><listitem><para>In a File Manager view, locate
the icon file and double-click on it to open it. (The default action for
pixmap and bitmap files runs Icon Editor and loads the file.)<indexterm>
<primary>Icon Editor</primary><secondary>starting from File Manager</secondary>
</indexterm><indexterm><primary>File Manager</primary><secondary>starting
Icon Editor from</secondary></indexterm></para>
</listitem><listitem><para>Drop an icon file on the Icon Editor control in
the Personal Applications subpanel.<indexterm><primary>dropping</primary>
<secondary>icon file</secondary></indexterm></para>
</listitem><listitem><para>Click the Application Manager control in the Front
Panel, then open Desktop_Apps and double-click on Icon Editor.<indexterm>
<primary>Icon Editor</primary><secondary>starting from Application Manager</secondary></indexterm><indexterm><primary>Application Manager</primary>
<secondary>starting Icon Editor from</secondary></indexterm></para>
</listitem><listitem><para>Type the following command in a Terminal window:<indexterm>
<primary>Terminal</primary><secondary>starting Icon Editor from</secondary>
</indexterm><indexterm><primary>Icon Editor</primary><secondary>starting
from Terminal</secondary></indexterm></para>
<programlisting>dticon -f <symbol role="Variable">filename</symbol> &amp;</programlisting>
</listitem></itemizedlist>
</sect2>
</sect1>
<sect1 id="UG.IconE.div.4">
<title id="UG.IconE.mkr.4">Basic Drawing Tasks</title>
<para>This section describes how to create and edit an icon and how to use
the Icon Editor drawing tools.</para>
<sect2 id="UG.IconE.div.5" role="Procedure">
<title>To Open an Existing Icon</title>
<indexterm><primary>icons</primary><secondary>opening existing</secondary></indexterm>
<orderedlist><listitem><para>Choose Open from the File menu.</para>
<para>If you have unsaved changes, Icon Editor warns you that your changes
will be lost by loading another icon. Click Cancel to cancel the Open command.
Click OK if you don't want to save your changes.</para>
</listitem><listitem><para>Type the name of the file you want to load in the
Enter file name field, or select the icon file you want to load from the
Files section of the Open File dialog box.</para>
</listitem><listitem><para>Click Open.</para>
</listitem></orderedlist>
<note>
<para>When you load a file, the Output Format (in the Options menu) is automatically
set to the format of the file you load.</para>
</note>
<para>You can also open an existing icon by double-clicking the icon file
in File Manager.</para>
</sect2>
<sect2 id="UG.IconE.div.6" role="Procedure">
<title>To Start a New Icon</title>
<indexterm><primary>Icon Editor</primary><secondary>starting a new icon</secondary></indexterm>
<indexterm><primary>starting</primary><secondary>new icon</secondary></indexterm>
<orderedlist><listitem><para>Choose New from the File menu.</para>
<para>If you have unsaved changes, Icon Editor warns you that your changes
will be lost by starting a new icon. Click Cancel to cancel the New command
or click OK if you don't want to save your changes.</para>
</listitem></orderedlist>
<para>Icon Editor clears the work area and resizes it to the default size
(32x32).</para>
<para>If you have an icon already loaded, you can choose Clear Icon from the
Edit menu to start a new icon with the same size and name as the previously
loaded icon.</para>
</sect2>
<sect2 id="UG.IconE.div.7" role="Procedure">
<title>To Clear an Icon</title>
<orderedlist><listitem><para>Save your current icon, if necessary.</para>
</listitem><listitem><para>Choose Clear Icon from the Edit menu.</para>
</listitem></orderedlist>
<para>The entire icon drawing work area is cleared.<indexterm><primary>icons</primary><secondary>clearing loaded</secondary></indexterm></para>
</sect2>
<sect2 id="UG.IconE.div.8" role="Procedure">
<title>To Draw an Image</title>
<indexterm><primary>drawing icon image</primary></indexterm>
<indexterm><primary>icons</primary><secondary>drawing image</secondary></indexterm>
<orderedlist><listitem><para>Select one of the drawing tools (listed in <!--Original
XRef content: 'Table&numsp;13&hyphen;2 on page&numsp;274'--><xref role="CodeOrFigOrTabAndPNum"
linkend="UG.IconE.mkr.6">).</para>
</listitem><listitem><para>Select a color (static color, static gray, or a
dynamic color).</para>
</listitem><listitem><para>Begin drawing with the tool you've selected.</para>
<para>More details on drawing with each tool are provided below.</para>
</listitem></orderedlist>
</sect2>
<sect2 id="UG.IconE.div.9">
<title>Drawing Tools</title>
<para>The drawing tools area of Icon Editor is shown in <!--Original XRef
content: 'Figure&numsp;13&hyphen;2'--><xref role="CodeOrFigureOrTable" linkend="UG.IconE.mkr.5">.<indexterm>
<primary>Icon Editor</primary><secondary>drawing tools &lt;$startrange></secondary></indexterm><indexterm><primary>drawing tools
for Icon Editor &lt;$startrange></primary></indexterm></para>
<figure>
<title id="UG.IconE.mkr.5">Icon Editor drawing tools</title>
<graphic id="UG.IconE.grph.2" entityref="UG.IconE.fig.3"></graphic>
</figure>
<variablelist role="LabList">
<varlistentry><term></term>
<listitem>
<para><?X-setsize 9.0 pt></para>
<table id="UG.IconE.tbl.2" frame="Topbot">
<title id="UG.IconE.mkr.6">Using the Drawing Tools</title>
<tgroup cols="3" colsep="0" rowsep="0">
<colspec colwidth="1.42in">
<colspec colwidth="1.82in">
<colspec colwidth="2.90in">
<thead>
<row><entry align="left" valign="bottom"><para><literal>Tool</literal></para></entry>
<entry align="left" valign="bottom"><para><literal>Purpose</literal></para></entry>
<entry align="left" valign="bottom"><para><literal>Action</literal></para></entry>
</row></thead>
<tbody>
<row>
<entry align="left" valign="top"><para>Pencil</para></entry>
<entry align="left" valign="top"><para>For drawing freehand lines and individual
pixels.</para></entry>
<entry align="left" valign="top"><para>Press and hold to draw freehand lines.
</para></entry></row>
<row>
<entry align="left" valign="top"><para>Line</para></entry>
<entry align="left" valign="top"><para>For drawing straight lines.</para></entry>
<entry align="left" valign="top"><para>Press and hold to stretch the line.
Release to draw the line.</para></entry></row>
<row>
<entry align="left" valign="top"><para>Rectangle</para></entry>
<entry align="left" valign="top"><para>For drawing solid or outlined rectangles.
</para></entry>
<entry align="left" valign="top"><para>Press and hold to stretch the outline
of the rectangle. Release to draw the rectangle.</para></entry></row>
<row>
<entry align="left" valign="top"><para>Circle</para></entry>
<entry align="left" valign="top"><para>For drawing solid or outlined circles.
</para></entry>
<entry align="left" valign="top"><para>Point to where you want the center
of the circle, press and hold, drag to the desired size, and release.
</para></entry></row>
<row>
<entry align="left" valign="top"><para>Eraser</para></entry>
<entry align="left" valign="top"><para>For erasing large areas of the image.
</para></entry>
<entry align="left" valign="top"><para>Press and hold; then drag over the
area to erase.</para><para>To erase individual pixels, select the Pencil
tool and the Transparent color.</para></entry></row>
<row>
<entry align="left" valign="top"><para>Flood</para></entry>
<entry align="left" valign="top"><para>For flooding a region of one color
with the selected color.</para></entry>
<entry align="left" valign="top"><para>Click any pixel within the region to
be flooded. The selected pixel and all adjacent pixels of the same color
are recolored with the selected color. The filled region extends in all
directions, bounded only by pixels of a different color.</para></entry>
</row>
<row>
<entry align="left" valign="top"><para>Open Polygon</para></entry>
<entry align="left" valign="top"><para>For drawing connected straight lines.
</para></entry>
<entry align="left" valign="top"><para>Click the starting point; then click
for each segment.</para><para>Double-click to end the last segment.</para></entry>
</row>
<row>
<entry align="left" valign="top"><para>Closed Polygon</para></entry>
<entry align="left" valign="top"><para>For drawing connected straight lines,
where the first line and last line are connected to form a closed polygon.
</para></entry>
<entry align="left" valign="top"><para>Click the starting point; then click
for each segment.</para><para>Double-click to end the last segment.</para></entry>
</row>
<row>
<entry align="left" valign="top"><para>Ellipse</para></entry>
<entry align="left" valign="top"><para>For drawing solid or outlined ovals.
</para></entry>
<entry align="left" valign="top"><para>Press and hold, drag to the desired
size and shape, and release.</para></entry></row>
<row>
<entry align="left" valign="top"><para>Selection</para></entry>
<entry align="left" valign="top"><para>For selecting an area to work on.
Several commands in the Edit menu require an area to be selected.</para></entry>
<entry align="left" valign="top"><para>Point to the corner pixel of the region
to be selected, press and hold, drag to the desired region, and release.
</para></entry></row>
<row>
<entry align="left" valign="top"><para>Fill Solids</para></entry>
<entry align="left" valign="top"><para>For changing the rectangle, circle,
ellipse, and closed polygon tools to draw filled in shapes instead of outlines.<indexterm><primary>Icon Editor</primary><secondary>drawing tools</secondary></indexterm><indexterm><primary>drawing tools for Icon Editor</primary></indexterm>
</para></entry>
<entry align="left" valign="top"><para>Select the check box to automatically
draw filled-in shapes. Deselect the check box to return the tools to drawing
outlines.</para></entry></row></tbody></tgroup></table>
<para id="UG.IconE.mkr.7"></para>
</listitem>
</varlistentry>
</variablelist>
</sect2>
<sect2 id="UG.IconE.div.10" role="Procedure">
<title>To Undo a Drawing Operation</title>
<indexterm><primary>drawing icon image</primary><secondary>undo</secondary></indexterm>
<orderedlist><listitem><para>Choose Undo from the Edit menu.</para>
</listitem></orderedlist>
<para>Only the single, most recent change can be undone.</para>
</sect2>
</sect1>
<sect1 id="UG.IconE.div.11">
<title id="UG.IconE.mkr.8">Saving Icon Files</title>
<para id="UG.IconE.mkr.9">When saving icon files, you must use the appropriate
file-name suffix. There are two suffixes appended to the base name of the
icon, one for size and one for format. Many icon names are in these general
forms:<indexterm><primary>names</primary><secondary>for icon files &lt;$startrange></secondary></indexterm><indexterm>
<primary>icons</primary><secondary>naming &lt;$startrange></secondary></indexterm></para>
<programlisting>basename.size.format

basename.format</programlisting>
<para>The <symbol role="Variable">basename</symbol> is the image name used
to reference the image.</para>
<para><symbol role="Variable">size</symbol> is a single letter indicating
the standard size of the icon: <command>l</command> for large (48x48 pixels), <command>m</command> for medium (32x32), <command>s</command> for small (24x24), or <command>t</command> for tiny (16x16). ( <!--Original XRef content: 'See
&xd2;Icon Size Conventions&xd3; on page&numsp;276.'--><xref role="SeeHeadingAndPage"
linkend="UG.IconE.mkr.10">) If your icon is not a standard size, you can
omit this letter.</para>
<para><symbol role="Variable">format</symbol> is <command>pm</command> for
X pixmaps (the color icon format) or <command>bm</command> for X bitmaps (the
monochrome icon format).</para>
<para>If you save an icon in XBM format that has transparent color in it,
an icon mask file is also saved. The icon mask file is named
<symbol role="Variable">basename.size</symbol><filename>_m</filename><symbol role="Variable">.format</symbol>.
If you move the icon you saved to another folder, you must also
move the mask file.</para>
<para>For example, suppose you specify an icon named <command>mail</command>
for a file type you've written. If you have a color display and have set
the File Manager preferences to use tiny icons, the assumed icon name is
<filename>mail.t.pm</filename>. If it had transparent color and you saved it in XBM
format, two files would be created: <command>mail.t.bm</command> and
<filename>mail.t_m.bm</filename>.<indexterm><primary>names</primary><secondary>for
icon files &lt;$endrange></secondary>
</indexterm><indexterm><primary>icons</primary><secondary>naming &lt;$endrange></secondary></indexterm></para>
<sect2 id="UG.IconE.div.12">
<title id="UG.IconE.mkr.10">Icon Size Conventions</title>
<para><!--Original
XRef content: 'Table&numsp;13&hyphen;3'--><xref role="TableNumber" linkend="UG.IconE.mkr.11">
lists the recommended sizes&mdash;in pixels, width x height&mdash;for creating
new icons for use in CDE. Icons can be up to 256x256.</para>
<indexterm><primary>icons</primary><secondary>size conventions for</secondary></indexterm>
<indexterm><primary>sizes of icons</primary></indexterm>
<table id="UG.IconE.tbl.3">
<title id="UG.IconE.mkr.11">Icon Size Recommendations</title>
<tgroup cols="4" colsep="0" rowsep="0">
<?PubTbl tgroup dispwid="5.78in">
<colspec colwidth="259*">
<colspec colwidth="69*">
<colspec colwidth="79*">
<colspec colwidth="69*">
<thead>
<row><entry align="left" valign="bottom"><para><literal>Resolution</literal></para></entry>
<entry align="left" valign="bottom"><para><literal>High</literal></para></entry>
<entry align="left" valign="bottom"><para><literal>Medium</literal></para></entry>
<entry align="left" valign="bottom"><para><literal>Low</literal></para></entry>
</row></thead>
<tbody>
<row>
<entry align="left" valign="top"><para><literal>File Manager (Large)</literal></para></entry>
<entry align="left" valign="top"><para>32x32</para></entry>
<entry align="left" valign="top"><para>32x32</para></entry>
<entry align="left" valign="top"><para>32x32</para></entry></row>
<row>
<entry align="left" valign="top"><para><literal>File Manager (Small)</literal></para></entry>
<entry align="left" valign="top"><para>16x16</para></entry>
<entry align="left" valign="top"><para>16x16</para></entry>
<entry align="left" valign="top"><para>16x16</para></entry></row>
<row>
<entry align="left" valign="top"><para><literal>Application Manager (Large)</literal></para></entry>
<entry align="left" valign="top"><para>32x32</para></entry>
<entry align="left" valign="top"><para>32x32</para></entry>
<entry align="left" valign="top"><para>32x32</para></entry></row>
<row>
<entry align="left" valign="top"><para><literal>Application Manager (Small)</literal></para></entry>
<entry align="left" valign="top"><para>16x16</para></entry>
<entry align="left" valign="top"><para>16x16</para></entry>
<entry align="left" valign="top"><para>16x16</para></entry></row>
<row>
<entry align="left" valign="top"><para><literal>Front Panel</literal></para></entry>
<entry align="left" valign="top"><para>48x48</para></entry>
<entry align="left" valign="top"><para>48x48</para></entry>
<entry align="left" valign="top"><para>32x32</para></entry></row>
<row>
<entry align="left" valign="top"><para><literal>Front Panel subpanels</literal></para></entry>
<entry align="left" valign="top"><para>32x32</para></entry>
<entry align="left" valign="top"><para>32x32</para></entry>
<entry align="left" valign="top"><para>16x16</para></entry></row>
<row>
<entry align="left" valign="top"><para><literal>Minimized windows</literal></para></entry>
<entry align="left" valign="top"><para>48x48</para></entry>
<entry align="left" valign="top"><para>48x48</para></entry>
<entry align="left" valign="top"><para>32x32</para></entry></row>
<row>
<entry align="left" valign="top"><para><literal>Workspace</literal></para></entry>
<entry align="left" valign="top"><para>32x32</para></entry>
<entry align="left" valign="top"><para>32x32</para></entry>
<entry align="left" valign="top"><para>32x32</para></entry></row></tbody>
</tgroup></table>
</sect2>
<sect2 id="UG.IconE.div.13" role="Procedure">
<title>To Save the Icon</title>
<indexterm><primary>Icon Editor</primary><secondary>saving icon</secondary></indexterm>
<indexterm><primary>icons</primary><secondary>saving</secondary></indexterm>
<indexterm><primary>saving</primary><secondary>icons</secondary></indexterm>
<orderedlist><listitem><para>Choose an output format from the Options menu:<indexterm>
<primary>icons</primary><secondary>output format</secondary></indexterm></para>
<itemizedlist remap="Bullet2"><listitem><para>XBM for two-color X bitmap format
</para>
</listitem><listitem><para>XPM for multicolor X pixmap format (the default)
</para>
</listitem></itemizedlist>
</listitem><listitem><para>Choose Save from the File menu.</para>
<para>If the icon is unnamed or you choose Save As, Icon Editor prompts you
for a file name. Type the name and then click Save.</para>
</listitem></orderedlist>
<note>
<para>If you save an icon in XBM format that has transparent color in it,
an icon mask file is also saved. The icon mask file is named
<symbol role="Variable">basename.size</symbol><filename>_m</filename><symbol role="Variable">.format</symbol>.
If you move the icon you saved to another folder, you must also
move the mask file.</para>
</note>
</sect2>
<sect2 id="UG.IconE.div.14" role="Procedure">
<title>To Save the Icon with a New Name</title>
<indexterm><primary>Icon Editor</primary><secondary>saving icon with new name</secondary></indexterm>
<indexterm><primary>icons</primary><secondary>saving with new name</secondary></indexterm>
<indexterm><primary>saving</primary><secondary>icons with new name</secondary></indexterm>
<orderedlist><listitem><para>Choose Save As from the File menu.</para>
</listitem><listitem><para>Type (or select) the file name under which you
want to save the icon file.</para>
</listitem><listitem><para>Click Save.</para>
<para>If the file already exists, you will need to click OK in the warning
dialog box to overwrite the existing file.</para>
</listitem></orderedlist>
</sect2>
</sect1>
<sect1 id="UG.IconE.div.15">
<title id="UG.IconE.mkr.12">Color Usage</title>
<para>Icons in the desktop use a palette of 22 colors:</para>
<indexterm><primary>icons</primary><secondary>color usage for</secondary></indexterm>
<indexterm><primary>color</primary><secondary>for icons</secondary></indexterm>
<itemizedlist remap="Bullet1"><listitem><para>Eight static grays</para>
</listitem><listitem><para>Eight static colors: red, blue, green, cyan, magenta,
yellow, black, and white</para>
</listitem><listitem><para>Five dynamic colors: Foreground, Background, TopShadow,
BottomShadow, and Select</para>
</listitem><listitem><para>A transparent &ldquo;color&rdquo; that allows
the background to show through</para>
</listitem></itemizedlist>
<para>These colors are the default colors in Icon Editor. This set of colors
provides a reasonable palette with which to create icons. This limited palette
was chosen to maximize the attractiveness and readability of icons without
using an unnecessary number of colors.</para>
<para>The dynamic colors represent the colors used to display the application
on which your icon will appear. If your icon appears in File Manager, File
Manager determines what the background color is. Dynamic colors are useful
for icons that you want to change color as different color palettes are selected
in Style Manager. Dynamic colors are also useful if the icon will be used
in more than one place and you want it to use the colors of the application
where it appears.<indexterm><primary>dynamic colors for icons</primary>
</indexterm></para>
<para>TopShadow and BottomShadow can be used for drawing a shadow under your
icon. You can use these colors to make the icon appear to be etched into
the surface. This is only recommended for Front Panel style icons.<indexterm>
<primary>TopShadow</primary></indexterm><indexterm><primary>BottomShadow</primary></indexterm></para>
<para>The transparent color is useful for creating icons that have the illusion
of being nonrectangular, since it allows the color behind the icon to show
through. If your icon does not fill the entire bounding box, you should fill
the unused area with the transparent color.<indexterm><primary>icons</primary>
<secondary>color usage for &lt;$endrange></secondary></indexterm><indexterm><primary>color</primary><secondary>for icons &lt;$endrange></secondary>
</indexterm></para>
</sect1>
<sect1 id="UG.IconE.div.16">
<title id="UG.IconE.mkr.13">Advanced Drawing Tasks</title>
<para>After you become familiar with the basic drawing facilities in Icon
Editor, you may want to try some more advanced operations. Many of these
operations require you to first <symbol role="Variable">select</symbol> an
area of the icon. This is done using the Selection tool (next to the eraser).
</para>
<para>When an area of the icon is selected, you can:</para>
<itemizedlist remap="Bullet1"><listitem><para>Cut, copy or move it</para>
</listitem><listitem><para>Resize (scale) it</para>
</listitem><listitem><para>Flip it (horizontally or vertically)</para>
</listitem><listitem><para>Rotate it (right or left)</para>
</listitem></itemizedlist>
<sect2 id="UG.IconE.div.17" role="Procedure">
<title>To Select an Area of the Icon</title>
<indexterm><primary>selecting</primary><secondary>an area of an icon</secondary></indexterm>
<indexterm><primary>icons</primary><secondary>selecting an area of</secondary></indexterm>
<orderedlist><listitem><para>Click the Selection tool (next to the eraser).
</para>
</listitem><listitem><para>Drag a box around the area you want to select.
</para>
<para>When an area is selected, a box flashes around the selected area.</para>
</listitem></orderedlist>
</sect2>
<sect2 id="UG.IconE.div.18" role="Procedure">
<title>To Cut a Region of the Icon</title>
<indexterm><primary>cutting a region of an icon</primary></indexterm>
<indexterm><primary>icons</primary><secondary>cutting a region of</secondary></indexterm>
<orderedlist><listitem><para>Select the area of the icon you want to cut using
the Selection tool.</para>
</listitem><listitem><para>Choose Cut from the Edit menu.</para>
</listitem></orderedlist>
<para>When you cut a portion of an icon, the exposed area becomes <emphasis>transparent</emphasis> (that is, filled in with the Transparent color).
</para>
<para>Note that after cutting a region, you can paste it back into the icon
by choosing Paste from the Edit menu.</para>
</sect2>
<sect2 id="UG.IconE.div.19" role="Procedure">
<title>To Copy a Region of the Icon</title>
<indexterm><primary>copying</primary><secondary>a region of an icon</secondary></indexterm>
<indexterm><primary>icons</primary><secondary>copying a region of</secondary></indexterm>
<orderedlist><listitem><para>Select the area of the icon you want to copy
using the Selection tool.</para>
</listitem><listitem><para>Choose Copy from the Edit menu.</para>
</listitem><listitem><para>Choose Paste from the Edit menu.</para>
</listitem><listitem><para>Position the outline where you want to paste the
copy, and then click.</para>
</listitem></orderedlist>
<para>You may repeat steps 3 and 4 as many times as you like to paste multiple
copies of the region you copied.</para>
</sect2>
<sect2 id="UG.IconE.div.20" role="Procedure">
<title>To Move a Region of the Icon</title>
<indexterm><primary>moving</primary><secondary>a region of an icon</secondary></indexterm>
<indexterm><primary>icons</primary><secondary>moving a region of</secondary></indexterm>
<orderedlist>
<listitem><para>Select the area of the icon you want to move
using the Selection tool.</para>
</listitem><listitem><para>Choose Cut from the Edit menu.</para>
</listitem><listitem><para>Choose Paste from the Edit menu.</para>
</listitem><listitem><para>Position the outline where you want to paste the
copy, and then click.</para>
</listitem></orderedlist>
<para>You may repeat steps 3 and 4 as many times as you like to paste multiple
copies of the region you cut.</para>
</sect2>
<sect2 id="UG.IconE.div.21" role="Procedure">
<title>To Rotate Part of the Icon</title>
<indexterm><primary>rotating part of an icon</primary></indexterm>
<indexterm><primary>icons</primary><secondary>rotating part of</secondary></indexterm>
<orderedlist><listitem><para>Select the area of the icon you want to rotate
using the Selection tool.</para>
</listitem><listitem><para>Choose Rotate then Left or Rotate then Right from
the Edit menu.</para>
</listitem><listitem><para>Position the outline where you want to paste the
rotated area, and then click.</para>
</listitem></orderedlist>
</sect2>
<sect2 id="UG.IconE.div.22" role="Procedure">
<title>To Flip (Mirror) Part of the Icon</title>
<para>Flipping an area creates a pixel-for-pixel mirror image of the selected
area.</para>
<orderedlist><listitem><para><indexterm><primary>flipping part of an icon</primary></indexterm><indexterm><primary>icons</primary><secondary>flipping
part of</secondary></indexterm>Select the area of the icon you want to flip
using the Selection tool.</para>
</listitem><listitem><para>Choose Flip then Vertical or Flip then Horizontal
from the Edit menu.</para>
</listitem></orderedlist>
</sect2>
<sect2 id="UG.IconE.div.23">
<title>Resizing Icons</title>
<para>You can resize the entire icon or a region of the icon.</para>
<sect3 id="UG.IconE.div.24" role="Procedure">
<title>To Resize the Current Icon</title>
<orderedlist><listitem><para>Choose Resize Icon from the Edit menu.</para>
<para>Icon Editor displays a dialog box that prompts for the new size.</para>
</listitem><listitem><para>Edit the current width and height to specify the
new size.</para>
</listitem><listitem><para>Click OK.<indexterm><primary>resizing</primary>
<secondary>icons</secondary></indexterm><indexterm><primary>icons</primary>
<secondary>resizing</secondary></indexterm></para>
</listitem></orderedlist>
<note>
<para>If you make the icon smaller, the right and bottom edges are clipped
off. If you make the icon larger, the existing image remains in the upper
left of the icon.</para>
</note>
</sect3>
<sect3 id="UG.IconE.div.25" role="Procedure">
<title>To Resize (Scale) a Region of the Icon</title>
<indexterm><primary>resizing</primary><secondary>a region of an icon</secondary></indexterm>
<indexterm><primary>icons</primary><secondary>resizing a region of</secondary></indexterm>
<orderedlist><listitem><para>Select the area of the icon you want to resize
using the Selection tool.</para>
</listitem><listitem><para>Choose Scale from the Edit menu.</para>
</listitem><listitem><para>Drag a box that defines the size and shape that
you want the scaled image to be.</para>
<para>The size of the box is shown in the upper right area. <emphasis>This
determines how the selected portion of the image will be scaled; it does</emphasis> <symbol role="Variable">not</symbol> <emphasis>determine where
to place the results</emphasis>.</para>
</listitem><listitem><para>Position the outline where you want to paste the
scaled copy, and then click.</para>
</listitem></orderedlist>
</sect3>
</sect2>
<sect2 id="UG.IconE.div.26">
<title>Hotspots</title>
<para>Bitmap images (XBM format) can be used as special mouse pointer shapes.
A hotspot marks a single pixel within the image that is the true <symbol role="Variable">point</symbol> of the mouse pointer.</para>
<sect3 id="UG.IconE.div.27" role="Procedure">
<title>To Add a Hotspot</title>
<indexterm><primary>hotspot in an icon</primary></indexterm>
<indexterm><primary>icons</primary><secondary>hotspot</secondary></indexterm>
<para>You can only have one hotspot in an icon.</para>
<orderedlist><listitem><para>Choose Add Hotspot from the Edit menu.</para>
</listitem><listitem><para>Click the pixel where you want the hotspot.</para>
</listitem></orderedlist>
</sect3>
<sect3 id="UG.IconE.div.28" role="Procedure">
<title>To Delete a Hotspot</title>
<indexterm><primary>hotspot in an icon</primary></indexterm>
<indexterm><primary>icons</primary><secondary>hotspot</secondary></indexterm>
<orderedlist><listitem><para>Choose Delete Hotspot from the Edit menu.</para>
</listitem></orderedlist>
</sect3>
</sect2>
<sect2 id="UG.IconE.div.29">
<title>Screen Captures</title>
<para>You can copy any area from any part of the screen into the Icon Editor.
You can copy (&ldquo;grab&rdquo;) a text or graphic that is displayed
and load it into the Icon Editor work area.</para>
<sect3 id="UG.IconE.div.30" role="Procedure">
<title>To Capture (Grab) a Region of the Display</title>
<indexterm><primary>capturing region of display</primary></indexterm>
<indexterm><primary>grabbing</primary><secondary>region of display</secondary></indexterm>
<indexterm><primary>display</primary><secondary>capturing region of</secondary></indexterm>
<orderedlist><listitem><para>Save your current icon, if necessary.</para>
</listitem><listitem><para>Choose Grab Screen Image from the Edit menu.</para>
</listitem><listitem><para>Drag a box around the portion of the workspace
you want to capture (press mouse button 1, drag, and release).</para>
</listitem></orderedlist>
<note>
<para>Capturing a region of the display could cause the icon to use up some
of the available colors on the desktop.</para>
</note>
</sect3>
</sect2>
<sect2 id="UG.IconE.div.31">
<title>Modifying the View of an Icon</title>
<para>You can change the view of an icon in the Icon Editor work area by changing
the magnification or using a grid.</para>
<sect3 id="UG.IconE.div.32" role="Procedure">
<title>To Hide the Grid</title>
<indexterm><primary>grid</primary><secondary>in Icon Editor</secondary></indexterm>
<indexterm><primary>Icon Editor</primary><secondary>hiding grid in</secondary></indexterm>
<indexterm><primary>hiding</primary><secondary>Icon Editor grid</secondary></indexterm>
<indexterm><primary>grabbing</primary><secondary>region of display</secondary></indexterm>
<indexterm><primary>display</primary><secondary>capturing region of</secondary></indexterm>
<orderedlist><listitem><para>Choose Visible Grid from the Options menu.</para>
<para>This will hide the grid. Choose Visible Grid from the Options menu
again to display the grid. The grid is displayed by default.</para>
</listitem></orderedlist>
</sect3>
<sect3 id="ug.icone.div.33" role="Procedure">
<title>To Change the Magnification of an Icon</title>
<indexterm><primary>capturing region of display</primary></indexterm>
<indexterm><primary>grabbing</primary><secondary>region of display</secondary></indexterm>
<indexterm><primary>display</primary><secondary>capturing region of</secondary></indexterm>
<orderedlist><listitem><para>Choose Magnification from the Options menu.</para>
</listitem><listitem><para>Choose the Magnification level you want from the
submenu.<indexterm><primary>icons</primary><secondary>changing magnification
of</secondary></indexterm><indexterm><primary>magnification of icons</primary>
</indexterm></para>
</listitem></orderedlist>
</sect3>
</sect2>
</sect1>
</chapter>
<!--fickle 1.14 mif-to-docbook 1.7 01/02/96 10:57:19-->
<?Pub *0000052204>
