368 lines
32 KiB
HTML
368 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="it" xml:lang="it">
|
||
<head>
|
||
<!--
|
||
*
|
||
* Copyright 2009-2013, Haiku. All rights reserved.
|
||
* Distributed under the terms of the MIT License.
|
||
*
|
||
* Authors:
|
||
* Humdinger <humdingerb@gmail.com>
|
||
* Translators:
|
||
* Barrett
|
||
* Francesco Franchina
|
||
* Humdinger
|
||
* Gabriele
|
||
*
|
||
-->
|
||
<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>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<link rel="stylesheet" type="text/css" href="../../Haiku-doc.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<div id="banner">
|
||
<div><span>Guida dell'utente</span></div>
|
||
</div>
|
||
|
||
<div class="nav">
|
||
<div class="inner">
|
||
<ul class="lang-menu">
|
||
<li class="now">Italiano <span class="dropdown-caret">▼</span></li>
|
||
<li><a href="../../id/applications/icon-o-matic.html">Bahasa Indonesia</a></li>
|
||
<li><a href="../../ca/applications/icon-o-matic.html">Català</a></li>
|
||
<li><a href="../../de/applications/icon-o-matic.html">Deutsch</a></li>
|
||
<li><a href="../../en/applications/icon-o-matic.html">English</a></li>
|
||
<li><a href="../../es/applications/icon-o-matic.html">Español</a></li>
|
||
<li><a href="../../eo/applications/icon-o-matic.html">Esperanto</a></li>
|
||
<li><a href="../../fr/applications/icon-o-matic.html">Français</a></li>
|
||
<li><a href="../../fur/applications/icon-o-matic.html">Furlan</a></li>
|
||
<li><a href="../../hu/applications/icon-o-matic.html">Magyar</a></li>
|
||
<li><a href="../../pl/applications/icon-o-matic.html">Polski</a></li>
|
||
<li><a href="../../pt_PT/applications/icon-o-matic.html">Português</a></li>
|
||
<li><a href="../../pt_BR/applications/icon-o-matic.html">Português (Brazil)</a></li>
|
||
<li><a href="../../ro/applications/icon-o-matic.html">Română</a></li>
|
||
<li><a href="../../sk/applications/icon-o-matic.html">Slovenčina</a></li>
|
||
<li><a href="../../fi/applications/icon-o-matic.html">Suomi</a></li>
|
||
<li><a href="../../sv_SE/applications/icon-o-matic.html">Svenska</a></li>
|
||
<li><a href="../../tr/applications/icon-o-matic.html">Türkçe</a></li>
|
||
<li><a href="../../zh_CN/applications/icon-o-matic.html"> 中文 ［中文］</a></li>
|
||
<li><a href="../../ru/applications/icon-o-matic.html">Русский</a></li>
|
||
<li><a href="../../uk/applications/icon-o-matic.html">Українська</a></li>
|
||
<li><a href="../../jp/applications/icon-o-matic.html">日本語</a></li>
|
||
</ul>
|
||
<span>
|
||
« <a href="haikudepot.html">HaikuDepot</a>
|
||
:: <a href="../applications.html#list-of-apps" class="uplink">Applicazioni</a>
|
||
:: <a href="installer.html">Il programma di installazione</a> »
|
||
</span></div>
|
||
</div>
|
||
|
||
<div id="content">
|
||
<div>
|
||
<div class="box-info">La traduzione di questa pagina non è stata ancora completata. Finché non lo sarà, le parti non tradotte saranno visualizzate in inglese.</div>
|
||
|
||
<table class="index" id="index" summary="index">
|
||
<tr class="heading"><td>Indice</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">Applicazioni</span></td></tr>
|
||
<tr><td>Percorso:</td><td></td><td><span class="path">/boot/system/apps/Icon-O-Matic</span></td></tr>
|
||
<tr><td>Impostazioni:</td><td></td><td><span class="path">~/config/settings/Icon-O-Matic</span></td></tr>
|
||
</table>
|
||
|
||
<p><br /></p>
|
||
|
||
<p>Prima di passare alla effettiva creazione di icone in Icon-O-Matic, ecco un paio di parole sulle icone di Haiku in generale.</p>
|
||
|
||
<h2>
|
||
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
||
<a id="bitmap-vector" name="bitmap-vector">Le bitmap di BeOS vs. le icone vettoriali di Haiku</a></h2>
|
||
<p>Contrariamente a BeOS, Haiku utilizza icone vettoriali al posto delle icone bitmap. È stato sviluppato uno speciale Formato di Icone Vettoriali per Haiku (HVIF) che è altamente ottimizzato per file di piccole dimensioni e per un rendering veloce. Ecco perché la maggior parte delle nostre icone sono <i>molto</i> più piccole di una bitmap o del più ampiamente usato formato SVG. Inoltre, a differenza delle icone bitmap di BeOS, Haiku non si limita a una tavolozza 8 bit (256 colori).<br />
|
||
Prendete questa icona del terminale, ad esempio:</p>
|
||
<table border="0" cellpadding="10">
|
||
<tr align="center"><td><b>Bitmap</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 byte<br />+ 256 byte</td><td> 7,192 byte </td><td> 768 byte </td></tr>
|
||
</table>
|
||
<p>Notare che BeOS ha usato due versioni della stessa icona, una di 16x16 e l'altra di 32x32, per ottenere buone visualizzazioni in modalità lista e in modalità visuale icone.</p>
|
||
<p>Questo trucco non è necessario con icone vettoriali. Oltre ad occupare solo poche centinaia di byte in un file, le icone vettoriali scalano molto meglio di quelle bitmap. (Nota: BeOS offre solo una visualizzazione 16x16 e una 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</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">Le icone sono attributi</a></h2>
|
||
<p>Le icone sono archiviate come un attributo con i loro file. Tuttavia, ciò non significa che ogni file deve avere questo attributo per apparire con un'icona in una finestra del Tracker: i file di dati ereditano la loro icona dal loro tipo di file. Per cambiare globalmente l'icona del tipo di file utilizzazre le preferenze dei <span class="app">FileType</span>. Se si vuole aggiungere soltanto un'icona speciale per un singolo file, si utilizza invece il <span class="app">FileType Add-On</span> su di essa. Vedere il documento <a href="../filetypes.html">Filetypes</a> per maggiori informazioni.</p>
|
||
<div class="box-info">Essendo un attributo, ne consegue che solo i filesystem che supportano i metadati possono conservare singola icona di un file. Quindi, se si spostano i file da un volume BFS, si consigli di comprimerli in modo da non perdere gli attributi delle icone o di altro tipo.</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">Creare icone con Icon-O-Matic</a></h2>
|
||
<p>Icon-O-Matic è l'editor di icone di Haiku che può salvare il fle come HVIF, SVG o PNG. L'icona può anche essere collegata direttamente come attributo a un file esistente o esportata come file di risorse o come sorgente utilizzato dagli sviluppatori. Dato che l'applicazione è stata ottimizzata su misura per il formato HVIF, il suo uso riflette il funzionamento interno di questo 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>Ecco una rapida panoramica della finestra di Icon-O-Matic:</p>
|
||
<img src="../images/apps-images/i-o-m-overview.png" alt="i-o-m-overview.png" />
|
||
|
||
<p>Per creare qualsiasi oggetto visibile nella finestra di disegno, è necessaria una forma con un percorso e uno stile. È possibile crearli comodamente tutti insieme o anche uno per volta dal menù <span class="menu">Shape</span>. Ogni tipo di oggetto (Percorso, Forma, Transformatore, e Stile) ha un menù sopra la propria lista degli elementi, che offrono vari comandi. Ogni elemento ha alcune opzioni che vengono impostate dal menù <span class="menu">Properties</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">Percorso</a></h3>
|
||
<p>Un percorso è costituito da diversi punti che sono collegati con linee e curve di Bezier. Per aggiungere o modificare i punti, assicurarsi che il percorso sia selezionato nella lista dei percorsi.</p>
|
||
|
||
<p>Basta cliccare sulla finestra di disegno per posizionare il primo punto. Nell'atto di posizionare un punto, si decide se la linea risultante sarà dritta o curva: basta cliccare una volta e rilasciare per una linea retta, oppure tenere premuto il tasto del mouse e muoverlo per trascinare le maniglie di una curva di Bezier. Naturalmente, sarà possibile effettuare modifiche in seguito.</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>To move a point, simply click & drag it. To select more than one point, hold down <span class="key">SHIFT</span> and draw a selection rectangle. Selected points are marked with a red border instead of the usual black.<br />
|
||
To insert a point into a path you click on the connecting line between two points.<br />
|
||
Selected points are deleted by pressing <span class="key">DEL</span> or by clicking on any point while holding <span class="key">CTRL</span>.</p>
|
||
|
||
<p>Il puntatore del mouse indica le seguenti modalità:</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>Move point(s)</td>
|
||
<td>Insert point</td>
|
||
<td>Add point</td>
|
||
<td>Delete point<br /><span class="key">CTRL</span></td>
|
||
<td>Corner↔Bezier<br /><span class="key">ALT</span></td>
|
||
<td>Select points<br /><span class="key">SHIFT</span></td>
|
||
</tr>
|
||
</table>
|
||
<p>È possibile richiamare un menu contestuale cliccando col tasto destro su un punto o una selezione di punti:</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>Seleziona tutti i punti del percorso corrente.</td></tr>
|
||
<tr><td><span class="menu">Transform</span></td><td><span class="key">T</span></td><td>Pone tutti i punti selezionati in una casella di trasformazione in modo da poterli muovere, ridimensionare o ruotare contemporaneamente. Funziona come per le forme, descritte più avanti.</td></tr>
|
||
<tr><td><span class="menu">Split</span></td><td></td><td>Divide i punti selezionati in due, uno sopra all'altro.</td></tr>
|
||
<tr><td><span class="menu">Flip</span></td><td></td><td>Ruota i punti selezionati di 180°. Applicabile solamente ai punti Bezier.</td></tr>
|
||
<tr><td><span class="menu">Remove</span></td><td><span class="key">DEL</span></td><td>Elimina i punti selezionati.</td></tr>
|
||
</table>
|
||
|
||
<h4><a id="i-o-m-path-menu" name="i-o-m-path-menu">Menù percorso</a></h4>
|
||
<p>Il menù <span class="menu">Path</span> offre poche ovvie voci per <span class="menu">Add Rectangle</span> e <span class="menu">Add Circle</span> o per <span class="menu">Duplicate</span> o <span class="menu">Remove</span> un percorso. Qui di seguito sono riportate quelle voci che potrebbero necessitare di qualche spiegazione in più:</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>Fa la stessa cosa nell'altra direzione.</td></tr>
|
||
</table>
|
||
|
||
<h4><a id="i-o-m-path-properties" name="i-o-m-path-properties">Proprietà del percorso</a></h4>
|
||
<p>Le <span class="menu">Properties</span> in basso a sinistra della finestra mostrano tutte le impostazioni disponibili per gli oggetti correntemente selezionati. Un percorso ne ha solo due: un <span class="menu">Name</span> e se è <span class="menu">Closed</span> o meno.</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">Shape</a></h3>
|
||
<p>A shape groups together one or more paths with a style. Practically, it's the object that you'll actually see on the canvas. The grouping is done with the checkboxes in front of the paths and styles: Just select your shape and tick off the desired path(s) and a style.</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>When a shape is selected from the list, a rectangle is drawn around it. Depending on where exactly you grab it, the shape is moved, resized or rotated around a point in its center, which itself can be moved. Holding <span class="key">SHIFT</span> will lock direction when moving, limit rotating to 45° angles and restrict the aspect ratio while resizing. The mouse pointer again indicates the current mode:</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>Move</td>
|
||
<td>Resize</td>
|
||
<td>Rotate</td>
|
||
<td>Move<br />rotation point</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">Shape Menu</a></h4>
|
||
<p>The <span class="menu">Shape</span> menu offers the before mentioned possibility to <span class="menu">Add empty, with path/style/path & style</span> and to <span class="menu">Duplicate</span> or <span class="menu">Remove</span> a shape. Then, there is:</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">Proprietà delle forme</a></h4>
|
||
<p>Accanto al <span class="menu">Name</span>, la visuale <span class="menu">Properties</span> per le forme ha le seguenti opzioni:</p>
|
||
|
||
<table summary="Shape properties" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Min LOD</span></td><td></td><td>Livello minimo di dettaglio</td></tr>
|
||
<tr><td><span class="menu">Max LOD</span></td><td></td><td>Livello massimo di dettaglio</td></tr>
|
||
</table>
|
||
|
||
<h5><a id="i-o-m-shape-lod" name="i-o-m-shape-lod">Livello di Dettaglio (LOD)</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>Non 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">Stile</a></h3>
|
||
<p>Uno stile può essere dato un colore pieno oppure da alcuni tipi di gradiente. <br />
|
||
Oltre ai colori predefiniti sotto <span class="menu">Swatches</span>, è possibile crearne di propri facendo clic sul colore corrente. Inoltre, si faccia caso al cursore sotto lo spettro di colori, questo serve per impostare il canale alfa (trasparenza).</p>
|
||
<img src="../images/apps-images/i-o-m-gradients.png" alt="i-o-m-gradients" />
|
||
<p>È possibile creare rapidamente un nuovo stile semplicemente mescolando il colore e trascinandolo all'interno della lista degli stili.</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">Menu Stile</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">Proprietà dello Stile</a></h4>
|
||
<p>The <span class="menu">Name</span> is the only <span class="menu">Properties</span> of a style.</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">Trasformatori</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 joined 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">Salvare un'icona</a></h3>
|
||
<p>Anche qui in alto c'è la solita barra con <span class="menu">File</span>, <span class="menu">Edit</span>, <span class="menu">Options</span>. L'utilizzo è piuttosto intuitivo, pertanto si presterà attenzione soltanto a come salvare un lavoro.</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 pop-up 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>Salva come risorsa utilizzata dai programmatori</td></tr>
|
||
<tr><td>Codice sorgente HVIF</td><td></td><td>Salva come codice sorgente utilizzato dai programmatori</td></tr>
|
||
<tr><td>SVG</td><td></td><td>Salva come SVG</td></tr>
|
||
<tr><td>PNG</td><td></td><td>Salva come PNG di 64px di dimensioni</td></tr>
|
||
<tr><td>Set di PNG</td><td></td><td>Salva come PNG di 16, 32 e 64px di dimensioni</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">Consigli e trucchetti</a></h3>
|
||
<p>Di seguito alcune cose che bisognerebbe tenere a mente quando si lavora con Icon-O-Matic e alcuni consigli per il suo utilizzo:</p>
|
||
<ul>
|
||
<li><p>Read the <a href="https://www.haiku-os.org/development/icon-guidelines">Icon Guidelines</a> to learn about important characteristics of Haiku icons, e.g. perspective, shadows and the <a href="https://www.haiku-os.org/files/downloads/2007-03-20_haiku-color-palette.png">Haiku color palette</a>.</p></li>
|
||
<li><p>Bisognerebbe sempre tentare di non abusare dell'utilizzo dei percorsi che risultano essere piuttosto costosi in termini di dimensione dei file. Riutilizzare i percorsi ove possibile e lavorare con forme manipolate o con i loro trasformatori. Si può risparmiare spazio con un uso adeguato dei gradienti.</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>Controllare l'anteprima per verificare che l'icona 16x16 si veda ancora bene. Volendo, è possibile utilizzare le impostazioni del <a href="#i-o-m-shape-lod">Livello di dettaglio</a> descritte nella sezione delle Forme.</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="haikudepot.html">HaikuDepot</a>
|
||
:: <a href="../applications.html#list-of-apps" class="uplink">Applicazioni</a>
|
||
:: <a href="installer.html">Il programma di installazione</a> »
|
||
</span></div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|