mirror of
https://review.haiku-os.org/haiku
synced 2025-02-08 22:58:18 +01:00
71b14067a1
git-svn-id: file:///srv/svn/repos/haiku/haiku/trunk@36308 a95241bf-73f2-0310-859d-f6bbb57e9c96
351 lines
32 KiB
HTML
351 lines
32 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
|
||
<head>
|
||
<!--
|
||
*
|
||
* Copyright 2009, Haiku. All rights reserved.
|
||
* Distributed under the terms of the MIT License.
|
||
*
|
||
* Authors:
|
||
* Humdinger <humdingerb@gmail.com>
|
||
* Translators:
|
||
* CapitanPico
|
||
*
|
||
-->
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||
<meta http-equiv="Content-Style-Type" content="text/css" />
|
||
<meta name="robots" content="all" />
|
||
<title>Icon-O-Matic</title>
|
||
<link rel="stylesheet" type="text/css" href="../../Haiku-doc.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<div id="banner">
|
||
<div><span>User guide</span></div>
|
||
</div>
|
||
|
||
<div class="nav">
|
||
<div class="inner">
|
||
<ul class="lang-menu">
|
||
<li class="now"><img src="../../images/flags/es.png" alt="" /> Español</li>
|
||
<li><a href="../../fr/applications/icon-o-matic.html"><img src="../../images/flags/fr.png" alt="" />Français</a></li>
|
||
<li><a href="../../de/applications/icon-o-matic.html"><img src="../../images/flags/de.png" alt="" />Deutsch</a></li>
|
||
<li><a href="../../it/applications/icon-o-matic.html"><img src="../../images/flags/it.png" alt="" />Italiano</a></li>
|
||
<li><a href="../../ru/applications/icon-o-matic.html"><img src="../../images/flags/ru.png" alt="" />Русский</a></li>
|
||
<li><a href="../../sv_SE/applications/icon-o-matic.html"><img src="../../images/flags/sv_SE.png" alt="" />Svensk</a></li>
|
||
<li><a href="../../jp/applications/icon-o-matic.html"><img src="../../images/flags/jp.png" alt="" />日本語</a></li>
|
||
<li><a href="../../uk/applications/icon-o-matic.html"><img src="../../images/flags/uk.png" alt="" />Українська</a></li>
|
||
<li><a href="../../en/applications/icon-o-matic.html"><img src="../../images/flags/gb.png" alt="" />English</a></li>
|
||
</ul>
|
||
<span>
|
||
« <a href="expander.html">Expander</a>
|
||
:: <a href="../applications.html#list-of-apps" class="uplink">Applications</a>
|
||
:: <a href="installer.html">Installer</a> »
|
||
</span></div>
|
||
</div>
|
||
|
||
<div id="content">
|
||
<div>
|
||
|
||
<table class="index" id="index" summary="index">
|
||
<tr class="heading"><td>Índice</td></tr>
|
||
<tr class="index"><td><a href="#bitmap-vector">BeOS bitmap vs. Haiku vector icons</a><br />
|
||
<a href="#icons-attributes">Icons are attributes</a><br />
|
||
<a href="#i-o-m">Creating icons with Icon-O-Matic</a><br />
|
||
<a href="#i-o-m-path">Path</a><br />
|
||
<a href="#i-o-m-shape">Shape</a><br />
|
||
<a href="#i-o-m-style">Style</a><br />
|
||
<a href="#i-o-m-transformer">Transformer</a><br />
|
||
<a href="#i-o-m-save">Saving an icon</a><br />
|
||
<a href="#i-o-m-tips">Tips & Tricks</a></td></tr>
|
||
</table>
|
||
|
||
<h2><img src="../../images/apps-images/icon-o-matic-icon_64.png" alt="icon-o-matic-icon_64.png" width="64" height="64" />Icon-O-Matic</h2>
|
||
|
||
<table summary="layout" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td>Deskbar:</td><td style="width:15px;"></td><td><span class="menu">Aplicaciones</span></td></tr>
|
||
<tr><td>Ubicación:</td><td></td><td><span class="path">/boot/system/apps/Icon-O-Matic</span></td></tr>
|
||
<tr><td>Configuración:</td><td></td><td><span class="path">~/config/settings/Icon-O-Matic</span></td></tr>
|
||
</table>
|
||
|
||
<p><br /></p>
|
||
|
||
<p>Antes de adentrarnos en la creación de iconos con Icon-O-Matic, comencemos con una introducción general sobre los iconos en Haiku.</p>
|
||
|
||
<h2>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="bitmap-vector" name="bitmap-vector">Los mapas de bits de BeOS frente a los iconos vectoriales de Haiku</a></h2>
|
||
<p>En contraposición a BeOS, Haiku usa iconos vectoriales en lugar de iconos de mapas de bits. Se ha desarrollado un formato especial para este tipo de iconos: HVIF (Haiku Vector Icon Format); que está altamente optimizado para archivos de poco tamaño y rápido servicio. Esa es la razón de por qué la mayor parte de nuestros iconos <i>much</i> ocupan menos espacio que un mapa de bits o el ampliamente usado formato SVG. Además, a diferencia de los iconos de BeOS, Haiku no tiene la limitación de 8 bits (256 colores),
|
||
<br />
|
||
Tomemos este icono de Terminal, por ejemplo:</p>
|
||
<table border="0" cellpadding="10">
|
||
<tr align="center"><td><b>Bitmap (Mapa de Bits)</b></td><td><b>SVG</b></td><td><b>HVIF</b></td></tr>
|
||
<tr align="center"><td><img src="../../images/apps-images/i-o-m-terminal-bitmap32.png" alt="i-o-m-terminal-bitmap32" width="32" height="32" /> <img src="../../images/apps-images/i-o-m-terminal-bitmap16.png" alt="i-o-m-terminal-bitmap16" width="16" height="16" /></td><td style="width:100px"><img src="../../images/apps-images/terminal-icon_32.png" alt="terminal-icon_32" width="32" height="32" /></td><td><img src="../../images/apps-images/terminal-icon_32.png" alt="terminal-icon_32" width="32" height="32" /></td></tr>
|
||
<tr align="center"><td>1,024 bytes<br />+ 256 bytes</td><td> 7,192 bytes</td><td> 768 bytes</td></tr>
|
||
</table>
|
||
<p>Fíjese en que BeOS usa dos versiones de cada icono, una de 16x16 y otra de 32x32, para conseguir buenos efectos visuales tanto en el modo de visión Listado, como en el de Vista de Iconos.</p>
|
||
<p>Este ingenioso truco no es necesario con los iconos vectoriales. Además de ocupar menos espacio en disco, los iconos vectoriales también se amplían mucho mejor que los maspas de bits. (Nota: BeOS ofrecía sólo una visualización de 16x16 y 32x32.)</p>
|
||
<table border="0" cellpadding="10">
|
||
<tr align="center"><td> </td><td><b>16x16</b></td><td><b>32x32</b></td><td><b>64x64</b></td><td><b>128x128</b></td></tr>
|
||
<tr align="center"><td><b>Bitmap (Mapa de Bits)</b></td>
|
||
<td><img src="../../images/apps-images/i-o-m-bitmap16.png" alt="i-o-m-bitmap16" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-bitmap32.png" alt="i-o-m-bitmap32" width="32" height="32" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-bitmap64.png" alt="i-o-m-bitmap64" width="64" height="64" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-bitmap128.png" alt="i-o-m-bitmap128" width="128" height="128" /></td></tr>
|
||
<tr align="center"><td><b>Vector</b></td>
|
||
<td><img src="../../images/apps-images/i-o-m-vector16.png" alt="i-o-m-vector16" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-vector32.png" alt="i-o-m-vector32" width="32" height="32" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-vector64.png" alt="i-o-m-vector64" width="64" height="64" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-vector128.png" alt="i-o-m-vector128" width="128" height="128" /></td></tr>
|
||
|
||
</table>
|
||
|
||
<h2>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="icons-attributes" name="icons-attributes">Los iconos son atributos</a></h2>
|
||
<p>Los iconos se almacenan como un atributo de su archivo correspondiente. Sin embargo, eso no significa que cada archivo tenga que tener este atributro para ser mostrado con icono en una ventana del Tracker: Los archivos de datos reciben su icono según su tipo. Para cambiar cambiar los iconos asociados a cada tipo de archivo se puede hacer desde las preferencias de <span class="app">FileTypes</span>(Tipos de Archivo). Si sólo quiere añadir un icono especial a un archivo en concreto, se puede hacer a través de <span class="app">FileType Add-On</span> simplemente. Lea la información de <a href="../filetypes.html">Filetypes (Tipos de Archivo)</a> para más información.</p>
|
||
<div class="box-info">Al ser un atributo, sólo en sistemas de archivos que soporten "metadata" se puede mantener el icono incdividual de un archivo. Por lo tanto, si saca archivos de su volumen BFS, considere la opción de comprimirlos para no perder sus iconos u otros atributos.</div>
|
||
|
||
<h2>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="i-o-m" name="i-o-m">Creación de iconos con Icon-O-Matic</a></h2>
|
||
<p>Icon-O-Matic es el editor de iconos de Haiku que puede exportar el resultado tanto en HVIF, como en SVG y PNG. El icono también puede ser directamente enlazado a un archivo existente o exportado como un archivo de fuente de un programa usado por desarrolladores. Como la aplicación se ha hecho a medida del formato optimizado HVIF, su utilización da muestras del trabajo interno de este formato.</p>
|
||
<p>Other than your normal vector graphics software, you don't deal with separate objects that each include all their specific properties like path, stroke width, stroke and fill color etc. Rather, you assemble your objects ("shapes") from shared paths and colors ("styles") and set certain properties. This re-using of elements is one secret of HVIF's efficiency. Although that imposes some constraints on the icon designer, there are a few advantages, too.<br />
|
||
For example, by re-using a path, several objects can be modified together by manipulating this one path. Think of an object and its shadow. Modifying their shared path will change the object itself and automatically its (maybe slightly distorted/translated) shadow.</p>
|
||
|
||
<p>Aquí se muestra una visión general de la ventana de Icon-O-Matic:</p>
|
||
<img src="../images/apps-images/i-o-m-overview.png" alt="i-o-m-overview.png" />
|
||
|
||
<p>Para crear cualquier objeto visible en el área de trabajo, se necesita una de las ya mencionadas formas con una ruta y un estilo. Según interese, se pueden crear una, dos, o tres juntas desde el menú <span class="menu">Forma</span>. Cada tipo de objeto (Rutas, Formas,Transformadores y Estlios) tiene un menú sobre u lista de elementos, ofreciendo diversas órdenes. Cada elemento tiene un determinado número de opciones que se configuran desde <span class="menu">Propiedades</span>.</p>
|
||
|
||
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="i-o-m-path" name="i-o-m-path">Rutas</a></h3>
|
||
<p>Se llama ruta a un conjunto de puntos interconectados con líneas o curvas Bezier. Para añadir o cambiar puntos, asegúrese de que la ruta deseada está seleccionada en la lista de rutas.</p>
|
||
|
||
<p>Con sólo clicar en el área de trabajo se establece un punto inicial. Mientras se coloca un punto se decide si la línea resultante será recta o curva: un simple click y soltar produce una línea recta, manteniendo presionado el botón del ratón y moviendo el cursor se delimita una línea Beizer curva. Evidentemente, es poible cambiar después los tipos de líneas.</p>
|
||
|
||
<img src="../../images/apps-images/i-o-m-path-ab.png" alt="i-o-m-path-ab" />
|
||
|
||
<p>To get from "A" to "B", you have to transform some points from corner-points to curve-points. That's done by holding <span class="key">ALT</span> while clicking on a point and dragging out the handles. This results in a symmetrical Bezier: the second handle follows the movement of the other. If you need to move the handles independently, again click&drag on a Bezier handle while holding <span class="key">ALT</span>.<br />
|
||
Vice versa, to go from Bezier to a corner-point, hold <span class="key">ALT</span> and click on a point.</p>
|
||
|
||
<p>Para amover un punto, simplemente se coge con el cursor y se suelta en su nueva ubicación. Para sleccionar más de un punto mantenga pulsado <span class="key">SHIFT</span> y marque un rectángulo de selección. Los puntos seleccionados están marcados por un borde rojo en vez del negro habitual.<br />
|
||
Para insertar un punto dentro de una ruta se clica en la línea de unión entre dos puntos.<br />
|
||
Los puntos seleccionados son eliminados al presionar <span class="key">DEL</span> o al clicar sobre cualquier punto mientras se deja pulsada la tecla <span class="key">CTRL</span>.</p>
|
||
|
||
<p>El puntero del ratón indica el modo actual:</p>
|
||
<table summary="Mouse pointer states, Path" border="0" cellpadding="10">
|
||
<tr align="center">
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-move-path.png" alt="i-o-m-pointer-move-path" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-insert.png" alt="i-o-m-pointer-insert" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-add.png" alt="i-o-m-pointer-add" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-delete.png" alt="i-o-m-pointer-delete" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-bezier.png" alt="i-o-m-pointer-bezier" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-select.png" alt="i-o-m-pointer-select" width="16" height="16" /></td>
|
||
</tr>
|
||
<tr align="center">
|
||
<td>Mover punto(s)</td>
|
||
<td>Insertar punto</td>
|
||
<td>Añadir punto</td>
|
||
<td>Borrar punto<br /><span class="key">CTRL</span></td>
|
||
<td>Esquina↔Bezier<br /><span class="key">ALT</span></td>
|
||
<td>Seleccionar punto<br /><span class="key">SHIFT</span></td>
|
||
</tr>
|
||
</table>
|
||
<p>Se puede solicitar un menú contextual clicando con el botón derecho sobre un punto o una elección de puntos:</p>
|
||
<table summary="Path context" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td class="onelinetop"><span class="menu">Seleccionar todo</span></td><td style="width:70px"><span class="key">ALT</span> <span class="key">A</span></td><td>Selecciona todos los puntos de la ruta actual.</td></tr>
|
||
<tr><td><span class="menu">Transformar</span></td><td><span class="key">T</span></td><td>Pone todos los puntos seleccionados en una caja de transformación, pudiendo moverlos, redimensionarlos y rotarlos todos a la vez. Funciona igualmente con formas, como se describe un poco más abajo.</td></tr>
|
||
<tr><td><span class="menu">Dividir</span></td><td></td><td>Divide los puntos seleccionados en dos, uno sobre otro.</td></tr>
|
||
<tr><td><span class="menu">Voltear</span></td><td></td><td>Rota los puntos seleccionados 180°. Sólo tiene efecto en los puntos del tipo Bezier.</td></tr>
|
||
<tr><td><span class="menu">Eliminar</span></td><td><span class="key">DEL</span></td><td>Elimina los puntos seleccionados</td></tr>
|
||
</table>
|
||
|
||
<h4><a id="i-o-m-path-menu" name="i-o-m-path-menu">Menú Ruta</a></h4>
|
||
<p>El menú <span class="menu">Ruta</span> ofrece unas pocas opciones básicas a <span class="menu">Añadir Rectángulo</span> y <span class="menu">Añadir Círculo</span> o a <span class="menu">Duplicar</span> o <span class="menu">Eliminar</span> una ruta. Aquí están algunos casos que pueden necesitar algo más de explicación:</p>
|
||
|
||
<table summary="Path menu" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Reverse</span></td><td style="width:15px;"></td><td>If your path isn't "closed" (see Path Properties below), a click into the canvas always creates a new point, connecting it with the last one. "Reverse" will reverse this order and your new point will connect to original start point instead.</td></tr>
|
||
<tr><td><span class="menu">Clean Up</span></td><td></td><td>Most useful with imported SVGs, this function will remove redundant points.</td></tr>
|
||
<tr><td class="onelinetop"><span class="menu">Rotate Indices Right</span></td><td><span class="key">ALT</span> <span class="key">R</span></td><td>Practically, this rotates the opening of a path. It's best seen when using a not-closed path with a style and a shape with a stroke transformer. Now, if your path looks like a ⊂ it will rotate like this: ⊂ ∩ ⊃ ∪.</td></tr>
|
||
<tr><td class="onelinetop"><span class="menu">Rotate Indices Left</span></td><td><span class="key">ALT</span> <span class="key">SHIFT</span> <span class="key">R</span></td><td>Does the same in the other direction.</td></tr>
|
||
</table>
|
||
|
||
<h4><a id="i-o-m-path-properties" name="i-o-m-path-properties">Propiedades de Ruta</a></h4>
|
||
<p><span class="menu">Propiedades</span>, en la zona inferior izquierda de la ventana, ofrece todas las herramientas disponibles para el objeto seleccionado en ese momento. Una ruta sólo tiene dos: un <span class="menu">Nobre</span> y si está <span class="menu">Cerrada</span> o no.</p>
|
||
|
||
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="i-o-m-shape" name="i-o-m-shape">Ruta</a></h3>
|
||
<p>Una forma agrupa juntas una o más rutas con un estilo. A efectos prácticos, es el objeto que se verá en el área de trabajo. La agrupación se hace mediante los recuadros de selección frente a rutas y estilos: Simplemente seleccione y marque la ruta y el estilo deseados.</p>
|
||
<p>A shape defines how a path and style is applied, e.g. if the object is filled or only stroked (which is done by using Transformers on the shape, we'll get to that later). Also, a shape can be moved, rotated or resized without touching the used path. That way, you can re-use a single path and get different, but related, shapes.</p>
|
||
|
||
<img src="../../images/apps-images/i-o-m-shape.png" alt="i-o-m-shape" />
|
||
|
||
<p>Cuando se selecciona una forma de la lista, se dibuja un rectángulo a su alredeor. En función de dónde se seleccione, la forma es movida, redimensionada o girada alrededor de un punto en su centro, e cual puede ser movido. Manteniendo pulsado <span class="key">SHIFT</span> se fija la dirección al ser movida, limitando la rotación a 45 grados y restringiendo la proporción cuando se redimensiona. El estado del puntero indica, de nuevo, el modo de trabajo actual:</p>
|
||
<table summary="Mouse pointer states, Shape" border="0" cellpadding="10">
|
||
<tr align="center">
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-move-shape.png" alt="i-o-m- move-shape" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-resize.png" alt="i-o-m-pointer-resize" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-rotate.png" alt="i-o-m-pointer-rotate" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-pointer-move-path.png" alt="i-o-m-pointer-move-rotation" width="16" height="16" /></td>
|
||
</tr>
|
||
<tr align="center">
|
||
<td>Mover</td>
|
||
<td>Redimensionar</td>
|
||
<td>Rotar</td>
|
||
<td>Mover<br />centro de rotación</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<p>Shapes lie on top of each other, each is on its own layer, if you will. To reorder them you drag&drop their entry to a different position in the list.</p>
|
||
|
||
<h4><a id="i-o-m-shape-menu" name="i-o-m-path-menu">Menú Forma</a></h4>
|
||
<p>El menú <span class="menu">Shape</span> ofrece las opciones anteriormente mencionadas de <span class="menu">Añadir Vacía, Con Ruta/Estilo/Ruta&Estilo</span> y <span class="menu">Duplicar</span> o <span class="menu">Eliminar </span>una forma. Entoces hay:</p>
|
||
<table summary="Shape menu" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Reset Transformation</span></td><td style="width:15px;"></td><td>Reverts all the move, resize and rotate transformations you have applied to the shape.</td></tr>
|
||
<tr><td class="onelinetop"><span class="menu">Freeze Transformation</span></td><td></td><td>When you transform a shape, its assigned path(s) stay in their original position. This may be intended; maybe more than one shape is using that path, maybe you intentionally used <span class="menu">Options | Snap to Grid</span> to set the points at precise pixel borders.<br />
|
||
If not, "Freeze Transformation" will apply the current shape transformation to the assigned path(s). A future "Reset Transformation" will then return to this new state.</td></tr>
|
||
</table>
|
||
|
||
<h4><a id="i-o-m-shape-properties" name="i-o-m-shape-properties">Shape Properties</a></h4>
|
||
<p>Besides a <span class="menu">Name</span>, the <span class="menu">Properties</span> view for a shape has these options:</p>
|
||
|
||
<table summary="Shape properties" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Min LOD</span></td><td></td><td>Minimum Level of Detail</td></tr>
|
||
<tr><td><span class="menu">Max LOD</span></td><td></td><td>Maximum Level of Detail</td></tr>
|
||
</table>
|
||
|
||
<h5><a id="i-o-m-shape-lod" name="i-o-m-shape-lod">Nivel de Detalle</a></h5>
|
||
<table summary="LOD example" border="0" cellpadding="10">
|
||
<tr align="center"><td><b>16x16</b></td><td><b>32x32</b></td><td><b>64x64</b></td></tr>
|
||
<tr align="center">
|
||
<td><img src="../../images/apps-images/i-o-m-lod-icon_16.png" alt="i-o-m-lod-icon_16" width="16" height="16" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-lod-icon_32.png" alt="i-o-m-lod-icon_32" width="32" height="32" /></td>
|
||
<td><img src="../../images/apps-images/i-o-m-lod-icon_64.png" alt="i-o-m-lod-icon_64" width="64" height="64" /></td></tr>
|
||
</table>
|
||
<p>See how there are no numbers in the 16px version of the BeVexed icon? That's done with the "Level of Detail" setting of their shapes.<br />
|
||
With the LOD you control the visibility of a shape depending on its size. That way, you can leave away details of an icon that look good on a bigger icon, but maybe not so much on its smaller version.</p>
|
||
<p>This is how it works: A LOD of 1.0 is defined as a 64px icon size. To get the LOD of a particular icon size you simply divide it by 64, e.g. a 16px icon has a LOD of 16/64 = 0.25. A shape won't be visible below its <span class="menu">Min LOD</span> and above its <span class="menu">Max LOD</span>.</p>
|
||
<p>So, if you set a shape's <span class="menu">Min LOD</span> to 0.0 and the <span class="menu">Max LOD</span> to 0.5, this means that the shape will only be visible for icon sizes smaller or <i>equal</i> to 32px. If you wanted to exclude the 32px icon size, you'd have to stay below 0.5, say 0.49.</p>
|
||
<p>The LOD is not only for leaving out detailing shapes, but also to e.g. change the stroke width at different sizes, if you feel that's needed. Simply duplicate a shape, make your changes and set both of their LOD settings to show either one or the other. Here lies the only source of potential confusion, when you unwittingly overlap LODs of shapes, and wonder why at some size both are visible...<br />
|
||
For example, if Shape 1 were to be shown below 48px and Shape 2 from 48px upward (LOD: 48/64 = 0.75):</p>
|
||
|
||
<table summary="LOD values example" border="0" cellpadding="5">
|
||
<tr align="center"><td></td><td colspan="2"><b>OK</b></td><td style="width:25px" rowspan="6"></td><td colspan="2"><b>Not OK!</b></td></tr>
|
||
<tr style="background-color:#F1F1F1"><td rowspan="2" style="vertical-align:middle ; background-color:#FFFFFF"><b>Forma 1</b></td><td>Min LOD</td><td>0.00</td><td>Min LOD</td><td>0.00</td></tr>
|
||
<tr style="background-color:#F1F1F1"><td>Max LOD</td><td><span style="background-color:#33FF33">0.74</span></td><td>Max LOD</td><td><span style="background-color:#FF9977">0.75</span></td></tr>
|
||
<tr><td colspan="6"></td></tr>
|
||
<tr style="background-color:#F8F8F8"><td rowspan="2" style="vertical-align:middle ; background-color:#FFFFFF"><b>Forma 2</b></td><td>Min LOD</td><td>0.75</td><td>Min LOD</td><td>0.75</td></tr>
|
||
<tr style="background-color:#F8F8F8"><td>Max LOD</td><td>4.00</td><td>Max LOD</td><td>4.00</td></tr>
|
||
</table>
|
||
|
||
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="i-o-m-style" name="i-o-m-style">Estilo</a></h3>
|
||
<p>Un estilo puede ser un color sólido o algún tipo de gradiente.<br />
|
||
Además de los colores predefinidos bajo <span class="menu">Swatches</span>, se pueden mezclar colores propios clicando sobre el color actual. Fíjese, además en el control deslizante bajo el espectro de colores, el cual establece el nivel de transparencia.</p>
|
||
<img src="../images/apps-images/i-o-m-gradients.png" alt="i-o-m-gradients" />
|
||
<p>De forma rápida se crea un nuevo estilo mezclando su color y simplemente arrastrando & soltándolo en la lista de estilos.</p>
|
||
<p>If you go for a gradient, you set the type (<span class="menu">Linear</span>, <span class="menu">Radial</span>, <span class="menu">Diamond</span>, <span class="menu">Cone</span>) and then define the start and end colors. This is done with a drag&drop from a color bucket into the respective color indicator under the gradient.<br />
|
||
Of course you can move these indicators to change the gradient to your liking. You can also insert more indicators to add more colors by double-clicking into the gradient. Pressing <span class="key">DEL</span> removes the selected indicator.</p>
|
||
<p>You can move, resize and rotate the representing box of a gradient on the canvas until it fits your needs. This works just like with shapes.</p>
|
||
|
||
<h4><a id="i-o-m-style-menu" name="i-o-m-style-menu">Menú Estilo</a></h4>
|
||
<p>The <span class="menu">Style</span> menu offers the usual entries to <span class="menu">Add</span>, <span class="menu">Duplicate</span> or <span class="menu">Remove</span> a style and to <span class="menu">Reset Transformation</span>.</p>
|
||
|
||
<h4><a id="i-o-m-style-properties" name="i-o-m-style-properties">Propiedades de Estilo</a></h4>
|
||
<p>El <span class="menu">Nombre</span> es la única <span class="menu">Propiedad</span> de un estilo.</p>
|
||
|
||
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="i-o-m-transformer" name="i-o-m-transformer">Transformer</a></h3>
|
||
<p>A shape can have Transformers which change its appearance. The effects, however, are more subtle than a truck turning into a battle robot...</p>
|
||
|
||
<h4><a id="i-o-m-transformer-menu" name="i-o-m-transformer-menu">Transformer Add Menu</a></h4>
|
||
<table summary=" Transformer Add menu" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Contour</span></td><td></td><td>Adds an outline to a shape.</td></tr>
|
||
<tr><td><span class="menu">Stroke</span></td><td></td><td>Strokes the path of a shape instead of filling it with a style.</td></tr>
|
||
</table>
|
||
|
||
<p>Depending on the kind of Transformer, you'll get a different set of properties.</p>
|
||
|
||
<h4><a id="i-o-m-transformer-properties" name="i-o-m-transformer-properties">Transformer Properties</a></h4>
|
||
<p>Besides a <span class="menu">Name</span> and the actual <span class="menu">Width</span> for the transformer, the <span class="menu">Properties</span> view has these (depending on its type slightly differing) options:</p>
|
||
<table summary="Transformer properties" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Caps</span></td><td style="width:15px;"></td><td><i>Stroke only</i>. Defines the end caps of a line: <span class="menu">Butt</span>, <span class="menu">Square</span> or <span class="menu">Round</span>.</td></tr>
|
||
<tr><td><span class="menu">Detect Orient.</span></td><td></td><td><i>Contour only</i>. Determines if the contour is to the inside or outside the path.</td></tr>
|
||
<tr><td><span class="menu">Joins</span></td><td></td><td>Defines how lines are joint at a point: <span class="menu">Miter</span>, <span class="menu">Round</span> or <span class="menu">Bevel</span>.</td></tr>
|
||
<tr><td><span class="menu">Miter Limit</span></td><td></td><td>Only when the above <span class="menu">Joins</span> is set to "Miter" this setting influences the looks of the miter joint. </td></tr>
|
||
</table>
|
||
|
||
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="i-o-m-save" name="i-o-m-save">Guardar un icono</a></h3>
|
||
<p>There's your usual menu bar at the top, <span class="menu">File</span>, <span class="menu">Edit</span>, <span class="menu">Options</span>. The usage is pretty much self-explaining, so we'll only look at how to save your work.</p>
|
||
<p><span class="menu">File | Save As...</span> will save in a special Icon-O-Matic format that retains additional information like the names of paths, shapes and styles. These will be stripped from the actual icon once you export it to save space. It's a good idea to back-up your work like this, because without named objects everything's named "<path>/<shape>/<style>" which makes specific changes tedious.</p>
|
||
|
||
<p><span class="menu">File | Export As...</span> opens a familiar save panel with a file format dropdown menu at the bottom, offering these choices:</p>
|
||
<table summary="file formats" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td>HVIF</td><td style="width:15px;"></td><td>Haiku Vector Icon Format</td></tr>
|
||
<tr><td>HVIF RDef</td><td></td><td>Saves as resource used by programmers</td></tr>
|
||
<tr><td>HVIF Source Code</td><td></td><td>Saves as source code used by programmers</td></tr>
|
||
<tr><td>SVG</td><td></td><td>Saves as SVG</td></tr>
|
||
<tr><td>PNG</td><td></td><td>Saves as a 64px sized PNG</td></tr>
|
||
<tr><td>PNG Set</td><td></td><td>Saves as 16, 32 and 64px sized PNGs</td></tr>
|
||
<tr><td>BEOS:ICON Attribute</td><td></td><td>Choose a file and set its icon attribute directly</td></tr>
|
||
<tr><td>META:ICON Attribute</td><td></td><td>Choose a file and attach the icon as mere meta data</td></tr>
|
||
</table>
|
||
|
||
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="i-o-m-tips" name="i-o-m-tips">Consejos y Trucos</a></h3>
|
||
<p>A few things you should keep in mind when working with Icon-O-Matic and some general tips for its usage:</p>
|
||
<ul>
|
||
<li><p>Read the <a href="http://factory.haiku-os.org/documentation/icon_guidelines/">Icon Guidelines</a> to learn about important characteristics of Haiku icons, e.g. perspective, colors and shadows.</p></li>
|
||
<li><p>You should always try to minimize your use of paths, those are the most expensive, file size wise. Re-use paths wherever possible and work with manipulated shapes and their transformers instead. Smart use of gradients can also save space.</p></li>
|
||
<li><p>Wherever possible, you should activate Snap-to-Grid from the <span class="menu">Options</span> menu when editing paths. Path points that align with the 64x64 pixel grid use less storage space. You'll also get the crispest look if points are set on exact pixel borders. For example, it is important to align the most prominent outlines with the 16x16 grid.</p></li>
|
||
<li><p>Check the preview to see if your icon still looks good in 16x16. You may want to use the <a href="#i-o-m-shape-lod">Level Of Detail</a> settings described in the Shapes section.</p></li>
|
||
<li><p>There's an easy way to produce letters, even if Icon-O-Matic doesn't provide such a tool. Just enter the text in a text editor such as StyledEdit, adjust font type and style, and drag&drop or copy&paste the selected text into Icon-O-Matic. This will create the according paths and shapes.</p></li>
|
||
<li><p>If you assign more than one path to a shape, their overlapping areas will cancel each other out. When one path is completely inside another, it practically creates a hole in the resulting shape.</p></li>
|
||
<li><p>You can zoom in and out of the canvas with the mouse wheel. Panning is done either by click&drag with the middle mouse button or with a normal left-click&drag while holding <span class="key">SPACE</span>.</p></li>
|
||
</ul>
|
||
|
||
|
||
<!--
|
||
<h3>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="i-o-m-workshops" name="i-o-m-workshops">Workshops</a></h3>
|
||
<p>The above is of course quite theoretical. The best way to learn using Icon-O-Matic is by experimenting. To get you started and once more show the basics, have a look at these short clips:</p>
|
||
<ul>
|
||
<li><a href="">Paths</a></li>
|
||
<li><a href="">Shapes</a></li>
|
||
<li><a href="">Styles</a></li>
|
||
<li><a href="">Transformers</a></li>
|
||
<li><a href="">Optimizing icons</a></li>
|
||
<li><a href=""></a></li>
|
||
</ul>
|
||
-->
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="nav">
|
||
<div class="inner"><span>
|
||
« <a href="expander.html">Expander</a>
|
||
:: <a href="../applications.html#list-of-apps" class="uplink">Applications</a>
|
||
:: <a href="installer.html">Installer</a> »
|
||
</span></div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|