<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 ocupan <i>mucho</i> 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),
<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>
<p>Los iconos se almacenan como un atributo de su archivo correspondiente. Sin embargo, eso no significa que cada archivo tenga que tener este atributo 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 <spanclass="app">Tipos de archivo</span>(Tipos de archivo). Si sólo quiere añadir un icono especial a un archivo en concreto, se puede hacer a través del <spanclass="app">agregado Tipos de archivo</span> simplemente. Lea la información de <ahref="../filetypes.html">Tipos de archivo</a> para más información.</p>
<divclass="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>
<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>A diferencia del software de gráficos de vectores normales, no tiene que lidiar con objetos separados, cada uno con sus propiedades específicas como la ruta, el ancho del trazo, color y relleno del trazo, etc. En su lugar, se ensamblan los objetos ("figuras") a partir de rutas y colores compartidos ("estilos") y se seleccionan ciertas propiedades. Este reuso de elementos es un secreto de la eficiencia de HVIF. Aunque eso imponga algunas restricciones en el diseñador de iconos, hay unas cuantas ventajas también.<br/>
Por ejemplo, al reutilizar una ruta, pueden modificarse bastantes objetos juntos al manipula una ruta dada. Piense en un objeto y su sombra. Al modificar su ruta compartida se cambiará el objeto mismo y automáticamente su (tal vez ligeramente distorsionada o desplazada) sombra.</p>
<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ú <spanclass="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 <spanclass="menu">Propiedades</span>.</p>
<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 dar clic 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: con un simple clic y soltar se produce una línea recta; manteniendo presionado el botón del ratón y moviendo el cursor se delimita una línea Bezier curva. Evidentemente, es posible cambiar después los tipos de líneas.</p>
<p>Para cambiar de "A" a "B", tiene que transformar algunos puntos de esquinas a puntos curva. Eso se hace manteniendo presionado <spanclass="key">ALT</span> mientras se da clic en un punto y moviendo los puntos de las manecilla. Esto resulta en un Bezier simétrico: la segunda manecilla sigue el movimiento de la otra. Si necesita moverlas independientemente, de nuevo de clic y arrastre sobre una manecilla Bezier mientras sostenga la tecla <spanclass="key">ALT</span>.<br/>
De manera similar, para cambiar de Bezier a un punto de esquina, mantenga <spanclass="key">ALT</span> y haga clic sobre un punto.</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 <spanclass="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 <spanclass="key">DEL</span> o al clicar sobre cualquier punto mientras se deja pulsada la tecla <spanclass="key">CTRL</span>.</p>
<tr><tdclass="onelinetop"><spanclass="menu">Select all</span></td><tdstyle="width:70px"><spanclass="key">ALT</span><spanclass="key">A</span></td><td>(Seleccionar todo) Selecciona todos los puntos de la ruta actual.</td></tr>
<tr><td><spanclass="menu">Transform</span></td><td><spanclass="key">T</span></td><td>(Transformar) 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><spanclass="menu">Split</span></td><td></td><td>(Separar) Divide los puntos seleccionados en dos, uno sobre otro.</td></tr>
<tr><td><spanclass="menu">Flip</span></td><td></td><td>(Voltear) Rota los puntos seleccionados 180°. Sólo tiene efecto en los puntos del tipo Bezier.</td></tr>
<tr><td><spanclass="menu">Remove</span></td><td><spanclass="key">Supr</span></td><td>(Remover) Elimina los puntos seleccionados</td></tr>
<p>El menú <spanclass="menu">Ruta</span> ofrece unas cuantas opciones obvias para <spanclass="menu">Add Rectangle</span> (Añadir Rectángulo) y <spanclass="menu">Add Circle</span> (Añadir Círculo) o para <spanclass="menu">Duplicate</span> (duplicar) o <spanclass="menu">Remove</span> (Eliminar) una ruta. Aquí están algunos casos que pueden necesitar algo más de explicación:</p>
<tr><td><spanclass="menu">Reverse</span></td><tdstyle="width:15px;"></td><td>(Reversa) Si la ruta no está "cerrada" (vea Propiedades de ruta, más abajo), un clic dentro del lienzo siempre crea un nuevo punto, conectándolo con el últimmo. "Reverse" siempre revertirá ese orden y el nuevo punto se conectará siempre en su lugar al punto de inicio original.</td></tr>
<tr><td><spanclass="menu">Clean Up</span></td><td></td><td>(Limpiar) Útil mayormente con SVGs importados, esta función removerá puntos redundantes.</td></tr>
<tr><tdclass="onelinetop"><spanclass="menu">Rotate Indices Right</span></td><td><spanclass="key">ALT</span><spanclass="key">R</span></td><td>(Rotar índices a la derecha) En la práctica, esto rota la apertura de una ruta. Se ve mejor cuando se usa una ruta sin cerrar con un estilo y una forma con un transformador de trazo. Ahora, si la ruta luce como una ⊂ se rotará así: ⊂ ∩ ⊃ ∪ (en el sentido de las manecillas del reloj).</td></tr>
<tr><tdclass="onelinetop"><spanclass="menu">Rotate Indices Left</span></td><td><spanclass="key">ALT</span><spanclass="key">MAYÚSCULAS</span><spanclass="key">R</span></td><td>(Rotar índices a la izquierda) Hace lo mismo en la otra dirección (en el sentido contrario a las manecillas del reloj).</td></tr>
<p><spanclass="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 <spanclass="menu">Nobre</span> y si está <spanclass="menu">Cerrada</span> o no.</p>
<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>Una forma define cómo una ruta y estilo se aplican, p. ej., si el objeto se llena o sólo se delinea (lo cual se realiza al usar Transformadores en la figura, llegaremos allí después). También, una forma se puede mover, rotar o retamañar sin tocar la ruta usada. De esa manera, se puede reusar una ruta única y tener diferentes, pero relacionadas, figuras.</p>
<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 <spanclass="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>
<p>Las figuras descansan encima de la otra, cada una en su propia capa, si lo desea. Para reordenarlas, se arrastra y suelta su entrada en una posición diferente en la lista.</p>
<p>El menú <spanclass="menu">Shape</span> ofrece las opciones anteriormente mencionadas de <spanclass="menu">Añadir Vacía, Con Ruta/Estilo/Ruta&Estilo</span> y <spanclass="menu">Duplicar</span> o <spanclass="menu">Eliminar </span>una forma. Entoces hay:</p>
<tr><td><spanclass="menu">Reset Transformation</span></td><tdstyle="width:15px;"></td><td>(Restablecer transformación) Revierte todos los movimientos, retamañados y transformaciones que se hayan aplicado a la forma.</td></tr>
<tr><tdclass="onelinetop"><spanclass="menu">Freeze Transformation</span></td><td></td><td>(Congelar transformación) Cuando se transforma una figura, su(s) ruta(s) asignada(s) permanecen en su posición original. Esto puede intentarse; tal vez más de una forma se use en esa ruta, tal vez intencionalmente se use <spanclass="menu">Options | Snap to Grid</span> (Opciones | Gradilla) para seleccionar los puntos en bordes de pixel precisos.<br/>
Si no, "Freeze Transformation" aplicará la forma de transformación actual a la(s) ruta(s) asignada(s). Un restablecimiento de transformación futuro con "Reset Transformation" regresará la figura a este nuevo estado.</td></tr>
<h4><aid="i-o-m-shape-properties"name="i-o-m-shape-properties">Propiedades de la figura</a></h4>
<p>Además del <spanclass="menu">Name</span> (nombre), la vista de <spanclass="menu">Properties</span> (propiedades) para una forma tiene estas opciones:</p>
<p>Vea cómo no hay números en la versión de 16px del icono de BeVexed? Esto se hace con la configuración de "Nivel de detalle" de sus formas.<br/>
Con el LOD se controla la visibilidad de una forma dependiendo su tamaño. De esta manera, puede olvidarse de los detalles de un icono que luzcan bien en un icono más grande, pero tal vez no tanto en su versión más pequeña.</p>
<p>Así es como funciona: Un LOD de 1.0 se define como un tamaño de icono de 64px. Para obtener el LOD de un tamaño de icono particular simplemente se divide entre 64, p. ej., un icono de 16px tiene un nivel de detalle de 16/64 = 0.25. Una figura no será visible debajo de su <spanclass="menu">Min LOD</span> ni por encima de su <spanclass="menu">Max LOD</span>.</p>
<p>Así que, si selecciona un <spanclass="menu">Min LOD</span> de alguna figura en 0.0 y el <spanclass="menu">Max LOD</span> en 0.5, esto significa que la forma sólo será visible para iconos de tamaños más pequeños o <i>iguales</i> a 32px. Si desea excluir el tamaño de icono de 32px, tiene que permanecer el valor debajo de 0.5, digamos 0.49.</p>
<p>El LOD no es sólo para quitar figuras detalladas, sino también, p. ej., para cambiar el ancho de línea en diferentes tamaños, si siente que se necesite. Simplemente duplique la forma, haga sus cambios y seleccione las configuraciones de ambos LOD para mostrar tanto uno u otro. Aquí yace la única fuente de confusión potencial, cuando involuntariamente se traslapan LODs de figuras y se pregunta por qué en algún tamaño ambas son visibles...<br/>
Por ejemplo, si la Figura 1 tuviera que mostrarse debajo de 48px y la figura 2 desde 48px hacia arriba (LOD: 48/64 = 0.75):</p>
Además de los colores predefinidos bajo <spanclass="menu">Swatches</span>, se pueden mezclar colores propios haciendo clic sobre el color actual. Note, además, el control deslizante bajo el espectro de colores, el cual establece el nivel de transparencia.</p>
<p>De forma rápida se crea un nuevo estilo mezclando su color y simplemente arrastrar y soltar en la lista de estilos.</p>
<p>Si opta por un gradiente, seleccione el tipo (<spanclass="menu">Linear</span>, <spanclass="menu">Radial</span>, <spanclass="menu">Diamond</span> (diamante), <spanclass="menu">Cone</span>) (cono) y luego defina los colores inicial y final. Esto se hace con un arrastrar y colocar desde un espacio de color dentro del indicador de color respectivo debajo del gradiente.<br/>
Por supuesto, puede mover estos indicadores para cambiar el gradiente a su gusto. Puede también insertar más indicadores para agregar más colores dando doble clic dentro del gradiente. Al presionar <spanclass="key">Supr</span> se remueve el indicador seleccionado.</p>
<p>Se puede mover, retamañar y rotar la caja representante de un gradiente en el lienzo hasta que se ajuste a sus necesidades. Esto funciona igual que con las figuras.</p>
<p>El menú <spanclass="menu">Style</span> (estilo) ofrece las entradas usuales para <spanclass="menu">Add</span> (agregar), <spanclass="menu">Duplicate</span> (duplicar) o <spanclass="menu">Remove</span> (remover) un estilo y para <spanclass="menu">Reset Transformation</span> (restablecer la transformación).</p>
<p>Una figura puede tener Transformadores los cuales cambien su apariencia. Los efectos, no obstante, son más sutiles que un camión transformándose en un robot de batalla...</p>
<h4><aid="i-o-m-transformer-properties"name="i-o-m-transformer-properties">Propiedades de Transformador</a></h4>
<p>Además de un nombre <spanclass="menu">Name</span> y el ancho <spanclass="menu">Width</span> real para el transformador, la vista <spanclass="menu">Properties</span> (propiedades) tiene estas opciones (dependiendo de su ligeramente diferente tipo):</p>
<tr><td><spanclass="menu">Caps</span></td><tdstyle="width:15px;"></td><td>(Tapas) <i>Sólo en Trazo</i>. Define cómo tapar los finales de una línea: <spanclass="menu">Butt</span> (base), <spanclass="menu">Square</span> (cuadrado) o <spanclass="menu">Round</span> (redondeado).</td></tr>
<tr><td><spanclass="menu">Detect Orient.</span></td><td></td><td>(Detectar contorno) <i>Sólo en Contorno</i>. Determina si el contorno está en el lado interior o exterior de la ruta.</td></tr>
<tr><td><spanclass="menu">Joints</span></td><td></td><td>(Juntas) Define cómo las líneas se juntan en un punto: <spanclass="menu">Miter</span> (inglete), <spanclass="menu">Round</span> (redondeado) o <spanclass="menu">Bevel</span> (biselado).</td></tr>
<tr><td><spanclass="menu">Miter Limit</span></td><td></td><td>Sólo cuando la selección <spanclass="menu">Joins</span> está en "Miter" (inglete) esta selección influencia cómo luce la junta de inglete. </td></tr>
<p>Allí está la barra de menú usual hasta arriba, <spanclass="menu">File</span> (Archivo), <spanclass="menu">Edit</span> (Edición), <spanclass="menu">Options</span> (Opciones). El uso es muy autoexplicativo, así que sólo veremos cómo guardar su trabajo.</p>
<p><spanclass="menu">File | Save As...</span> (Archivo | Guardar como) guardará en un formato especial de Icon-O-Matic que retiene información adicional como los nombres de rutas, figuras y estilos. Estos se retirarán del icono una vez que se exporte al espacio de trabajo. Es buena idea respaldar el trabajo así, porque sin los objetos nombrados todo se llama "<path>/<shape>/<style>" lo cual hace los cambios específicos tedioso.</p>
<p><spanclass="menu">File | Export As...</span> (Archivo | Exportar como) abre un familiar cuadro de diálogo guardar con un menú desplegable de formatos de archivo hasta abajo, ofreciendo estas alternativas:</p>
<li><p>Lea la <ahref="http://svn.haiku-os.org/haiku/haiku/trunk/docs/icon_guidelines/index.html">Guías de iconos</a> para saber acerca de características importantes de iconos de Haiku, p. ej., perspectiva, colores y sombras.</p></li>
<li><p>Se debería intentar siempre minimizar el uso de rutas, pues son más pesadas en tamaño de archivo. Reutilice rutas siempre que sea posible y trabaje con figuras manipuladas y sus transformadores en su lugar. El buen uso de gradientes también puede ahorrar espacio.</p></li>
<li><p>Cuando sea posible, se debería activar Snap-to-Grid (alinear a la gradilla) del menú <spanclass="menu">Options</span> (opciones) cuando se editen rutas. Los puntos de ruta que se alinean con la gradilla de 64x64 pixeles usan menos espacio de almacenamiento. También se obtiene la vista más limpia si se seleccionan en bordes de pixel exactos. Por ejemplo, es importante alinear las líneas más prominentes con la gradilla de 16x16.</p></li>
<li><p>Verifique la previsualización para ver si su icono se ve bien incluso en 16x16. También sería bueno ver la configuración de <ahref="#i-o-m-shape-lod">Nivel de detalle</a> descrito en la sección Figuras.</p></li>
<li><p>Hay una manera fácil de producir letras, incluso si Icon-O-Matic no provea tal herramienta. Sólo ingrese texto en un editor de texto como StyledEdit, ajuste el tipo de letra y estilo, y arrastre y coloque o copie y pegue el texto seleccionado en Icon-O-Matic. Esto creará las rutas y formas acordes.</p></li>
<li><p>Si se asigna más de una ruta a una figura, sus áreas traslapadas se cancelarán mutuamente. Cuando una ruta esté completamente dentro de otra, prácticamente crea un agujero en la figura resultante.</p></li>
<li><p>Se puede acercar y alejar del lienzo de trabajo con la rueda del ratón. Desplazarse se realiza arrastrando con el botón medio del ratón o con un arrastre con el botón izquierdo del ratón mientras se presione la <spanclass="key">Barra espaciadora</span>.</p></li>
<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>
