ad5e743e2b
git-svn-id: file:///srv/svn/repos/haiku/haiku/trunk@37435 a95241bf-73f2-0310-859d-f6bbb57e9c96
354 lines
34 KiB
HTML
354 lines
34 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
|
||
* miguel~1.mx
|
||
*
|
||
-->
|
||
<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>Guía del usuario</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="../../zh_CN/applications/icon-o-matic.html"><img src="../../images/flags/zh_CN.png" alt="" /> 中文 ［中文］</a></li>
|
||
<li><a href="../../pt_PT/applications/icon-o-matic.html"><img src="../../images/flags/pt_PT.png" alt="" />Português</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">Aplicaciones</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">Los mapas de bits de BeOS frente a los iconos vectoriales de Haiku</a><br />
|
||
<a href="#icons-attributes">Los iconos son atributos</a><br />
|
||
<a href="#i-o-m">Crear iconos con Icon-O-Matic</a><br />
|
||
<a href="#i-o-m-path">Rutas</a><br />
|
||
<a href="#i-o-m-shape">Forma</a><br />
|
||
<a href="#i-o-m-style">Estilo</a><br />
|
||
<a href="#i-o-m-transformer">Transformador</a><br />
|
||
<a href="#i-o-m-save">Guardar un icono</a><br />
|
||
<a href="#i-o-m-tips">Consejos y trucos</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 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),
|
||
<br />
|
||
Tomemos este icono de Terminal, por ejemplo:</p>
|
||
<table border="0" cellpadding="10">
|
||
<tr align="center"><td><b>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>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 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 <span class="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 <span class="app">agregado Tipos de archivo</span> simplemente. Lea la información de <a href="../filetypes.html">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">Crear 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>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>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 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>
|
||
|
||
<img src="../../images/apps-images/i-o-m-path-ab.png" alt="i-o-m-path-ab" />
|
||
|
||
<p>Para cambiar de "A" a "B", tiene que transformar algunos puntos de esquinas a puntos curva. Eso se hace manteniendo presionado <span class="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 <span class="key">ALT</span>.<br />
|
||
De manera similar, para cambiar de Bezier a un punto de esquina, mantenga <span class="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 <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">Select all</span></td><td style="width:70px"><span class="key">ALT</span> <span class="key">A</span></td><td>(Seleccionar todo) Selecciona todos los puntos de la ruta actual.</td></tr>
|
||
<tr><td><span class="menu">Transform</span></td><td><span class="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><span class="menu">Split</span></td><td></td><td>(Separar) Divide los puntos seleccionados en dos, uno sobre otro.</td></tr>
|
||
<tr><td><span class="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><span class="menu">Remove</span></td><td><span class="key">Supr</span></td><td>(Remover) 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 cuantas opciones obvias para <span class="menu">Add Rectangle</span> (Añadir Rectángulo) y <span class="menu">Add Circle</span> (Añadir Círculo) o para <span class="menu">Duplicate</span> (duplicar) o <span class="menu">Remove</span> (Eliminar) 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>(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><span class="menu">Clean Up</span></td><td></td><td>(Limpiar) Útil mayormente con SVGs importados, esta función removerá puntos redundantes.</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>(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><td class="onelinetop"><span class="menu">Rotate Indices Left</span></td><td><span class="key">ALT</span> <span class="key">MAYÚSCULAS</span> <span class="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>
|
||
</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>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>
|
||
|
||
<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>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>
|
||
|
||
<h4><a id="i-o-m-shape-menu" name="i-o-m-path-menu">Menú Figuras</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>(Restablecer transformación) Revierte todos los movimientos, retamañados y transformaciones que se hayan aplicado a la forma.</td></tr>
|
||
<tr><td class="onelinetop"><span class="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 <span class="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>
|
||
</table>
|
||
|
||
<h4><a id="i-o-m-shape-properties" name="i-o-m-shape-properties">Propiedades de la figura</a></h4>
|
||
<p>Además del <span class="menu">Name</span> (nombre), la vista de <span class="menu">Properties</span> (propiedades) para una forma tiene estas opciones:</p>
|
||
|
||
<table summary="Shape properties" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Min LOD</span></td><td></td><td>Nivel mínimo de detalle</td></tr>
|
||
<tr><td><span class="menu">Max LOD</span></td><td></td><td>Nivel máximo de detalle</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>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 <span class="menu">Min LOD</span> ni por encima de su <span class="menu">Max LOD</span>.</p>
|
||
<p>Así que, si selecciona un <span class="menu">Min LOD</span> de alguna figura en 0.0 y el <span class="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>
|
||
|
||
<table summary="LOD values example" border="0" cellpadding="5">
|
||
<tr align="center"><td></td><td colspan="2"><b>Bien</b></td><td style="width:25px" rowspan="6"></td><td colspan="2"><b>¡Mal!</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 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>
|
||
<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 arrastrar y soltar en la lista de estilos.</p>
|
||
<p>Si opta por un gradiente, seleccione el tipo (<span class="menu">Linear</span>, <span class="menu">Radial</span>, <span class="menu">Diamond</span> (diamante), <span class="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 <span class="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>
|
||
|
||
<h4><a id="i-o-m-style-menu" name="i-o-m-style-menu">Menú Estilo</a></h4>
|
||
<p>El menú <span class="menu">Style</span> (estilo) ofrece las entradas usuales para <span class="menu">Add</span> (agregar), <span class="menu">Duplicate</span> (duplicar) o <span class="menu">Remove</span> (remover) un estilo y para <span class="menu">Reset Transformation</span> (restablecer la transformación).</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">Transformador</a></h3>
|
||
<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><a id="i-o-m-transformer-menu" name="i-o-m-transformer-menu">Menú agregar Transformador</a></h4>
|
||
<table summary=" Transformer Add menu" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Contour</span></td><td></td><td>(Contorno) Agrega una línea exterior a una figura.</td></tr>
|
||
<tr><td><span class="menu">Stroke</span></td><td></td><td>(Trazo) Traza la ruta de una figura en lugar de rellenarla con un estilo.</td></tr>
|
||
</table>
|
||
|
||
<p>Dependiendo la clase de Transformador, obtendrá una selección diferente de propiedades.</p>
|
||
|
||
<h4><a id="i-o-m-transformer-properties" name="i-o-m-transformer-properties">Propiedades de Transformador</a></h4>
|
||
<p>Además de un nombre <span class="menu">Name</span> y el ancho <span class="menu">Width</span> real para el transformador, la vista <span class="menu">Properties</span> (propiedades) tiene estas opciones (dependiendo de su ligeramente diferente tipo):</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>(Tapas) <i>Sólo en Trazo</i>. Define cómo tapar los finales de una línea: <span class="menu">Butt</span> (base), <span class="menu">Square</span> (cuadrado) o <span class="menu">Round</span> (redondeado).</td></tr>
|
||
<tr><td><span class="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><span class="menu">Joints</span></td><td></td><td>(Juntas) Define cómo las líneas se juntan en un punto: <span class="menu">Miter</span> (inglete), <span class="menu">Round</span> (redondeado) o <span class="menu">Bevel</span> (biselado).</td></tr>
|
||
<tr><td><span class="menu">Miter Limit</span></td><td></td><td>Sólo cuando la selección <span class="menu">Joins</span> está en "Miter" (inglete) esta selección influencia cómo luce la junta de inglete. </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>Allí está la barra de menú usual hasta arriba, <span class="menu">File</span> (Archivo), <span class="menu">Edit</span> (Edición), <span class="menu">Options</span> (Opciones). El uso es muy autoexplicativo, así que sólo veremos cómo guardar su trabajo.</p>
|
||
<p><span class="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><span class="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>
|
||
<table summary="file formats" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td>HVIF</td><td style="width:15px;"></td><td>Formato de icono vectorial de Haiku</td></tr>
|
||
<tr><td>HVIF RDef</td><td></td><td>Se guarda como recurso utilizado por programadores</td></tr>
|
||
<tr><td>HVIF Source Code</td><td></td><td>Se guarda como código fuente utilizado por programadores</td></tr>
|
||
<tr><td>SVG</td><td></td><td>Se guarda como SVG</td></tr>
|
||
<tr><td>PNG</td><td></td><td>Se guarda como un PNG de 64px de tamaño</td></tr>
|
||
<tr><td>PNG Set</td><td></td><td>Se guarda como PNGs de 16, 32 y 64px</td></tr>
|
||
<tr><td>BEOS:ICON Attribute</td><td></td><td>Elige un archivo y selecciona su atributo icono directamente</td></tr>
|
||
<tr><td>META:ICON Attribute</td><td></td><td>Elige un archivo y adjunta el icono como mera metainformación</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>Se deben tomar en cuenta unas cuantas cosas cuando se trabaja con Icon-O-Matic y algunos consejos generales para su uso:</p>
|
||
<ul>
|
||
<li><p>Lea la <a href="http://factory.haiku-os.org/documentation/icon_guidelines/">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ú <span class="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 <a href="#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 <span class="key">Barra espaciadora</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">Aplicaciones</a>
|
||
:: <a href="installer.html">Installer</a> »
|
||
</span></div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|