haiku/docs/userguide/fr/applications/icon-o-matic.html
2013-02-17 21:56:39 +01:00

358 lines
35 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?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:
* Loïc
* Vincent Duvert
* Humdinger
*
-->
<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>Guide de lutilisateur</span></div>
</div>
<div class="nav">
<div class="inner">
<ul class="lang-menu">
<li class="now"><img src="../../images/flags/fr.png" alt="" /> Français</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="../../es/applications/icon-o-matic.html"><img src="../../images/flags/es.png" alt="" />Español</a></li>
<li><a href="../../sv_SE/applications/icon-o-matic.html"><img src="../../images/flags/sv_SE.png" alt="" />Svenska</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="../../fi/applications/icon-o-matic.html"><img src="../../images/flags/fi.png" alt="" />Suomi</a></li>
<li><a href="../../sk/applications/icon-o-matic.html"><img src="../../images/flags/sk.png" alt="" />Slovenčina</a></li>
<li><a href="../../hu/applications/icon-o-matic.html"><img src="../../images/flags/hu.png" alt="" />Magyar</a></li>
<li><a href="../../pt_BR/applications/icon-o-matic.html"><img src="../../images/flags/pt_BR.png" alt="" />Português (Brazil)</a></li>
<li><a href="../../ca/applications/icon-o-matic.html"><img src="../../images/flags/ca.png" alt="" />Català</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>Index</td></tr>
<tr class="index"><td><a href="#bitmap-vector">Différences de format avec BeOS</a><br />
<a href="#icons-attributes">Les icônes sont des attributs</a><br />
<a href="#i-o-m">Créer des icônes avec Icon-O-Matic</a><br />
<a href="#i-o-m-path">Chemin (Path)</a><br />
<a href="#i-o-m-shape">Forme (Shape)</a><br />
<a href="#i-o-m-style">Style</a><br />
<a href="#i-o-m-transformer">Transformation (Transformer)</a><br />
<a href="#i-o-m-save">Enregistrer une icône</a><br />
<a href="#i-o-m-tips">Trucs et astuces</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">Applications</span></td></tr>
<tr><td>Localisation :</td><td></td><td><span class="path">/boot/system/apps/Icon-O-Matic</span></td></tr>
<tr><td>Réglages :</td><td></td><td><span class="path">~/config/settings/Icon-O-Matic</span></td></tr>
</table>
<p><br /></p>
<p>Avant de parler de la création dicônes à laide dIcon-O-Matic, voici quelques généralités sur les icônes de 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">Différences de format avec BeOS : Vectoriel contre matriciel</a></h2>
<p>Contrairement à BeOS, Haiku utilise des icônes vectorielles et non matricielles (bitmap). Un format spécial, le HVIF (Haiku Vector Icon Format, Format dIcône Vectoriel de Haiku), optimisé pour des tailles de fichiers réduites et un rendu rapide, a été spécifiquement développé pour cet usage. Cest pourquoi ces icônes sont <i>bien</i> plus économes en espace disque que les icônes matricielles ou vectorielles au format SVG utilisées par dautre systèmes. De plus, contrairement à BeOS, les icônes ne sont pas limités à une palette de couleurs 8 bits (256 couleurs).<br />
Prenez par exemple cette icône du Terminal :</p>
<table border="0" cellpadding="10">
<tr align="center"><td><b>Matriciel</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 octets<br />+ 256 octets</td><td>7 192 octets</td><td>768 octets</td></tr>
</table>
<p>Notez que BeOS utilisait deux versions de chaque icône, une en taille 16x16 et lautre en taille 32x32, pour assurer une bonne représentation des icônes en mode liste, notamment.</p>
<p>Cette astuce nest pas nécessaire avec les icônes vectoriels. En plus de prendre moins de place, ils peuvent être mis à léchelle sans perte de qualité, contrairement aux icônes matricielles. (Note : BeOS ne permettait laffichage quen 16x16 et 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>Matriciel</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>Vectoriel</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">Les icônes sont des attributs</a></h2>
<p>Les icône sont stockés dans des attributs de fichiers. Toutefois, cela ne signifie pas que chaque fichier doit avoir cet attribut pour apparaître avec une icône dans une fenêtre du Tracker : Les icônes des fichiers de données sont déterminés depuis leur type de fichier. Pour changer globalement licône dun type, vous pouvez utiliser les préférences <span class="app">FileTypes</span>. Si vous voulez seulement ajouter une icône spéciale à un fichier en particulier, vous pouvez utiliser <span class="app">lextension FileType</span>. Voyez le sujet <a href="../filetypes.html">types de fichiers</a> pour plus dinformations.</p>
<div class="box-info">Etant donné quil sagit dun attribut, le fichier doit être enregistré sur un système de fichier supportant les méta-données afin de pouvoir conserver son icône spécifique. Par conséquent, avant de transférer vos données depuis votre volume BFS, vous devriez les compresser pour ne pas perdre vos icônes personnalisées ou autres attributs.</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">Créer des icônes avec Icon-O-Matic</a></h2>
<p>Icon-O-Matic est léditeur dicônes de Haiku, et peut enregistrer votre travail aux formats HVIF, SVG ou PNG. Licône peut également être attachée comme attribut à un fichier existant ou exportée comme ressource ou fichier source pour être utilisée par les développeurs. Comme cette application a été spécifiquement conçue pour le format HVIF, son fonctionnement reflète les caractéristiques de ce format.</p>
<p>Contrairement à dautres programmes dédition vectorielle, vous ne travaillez pas sur des objets séparés tous dotés de leurs caractéristiques individuelles (forme, taille de trait, couleur…). À la place, vous assemblez vos objets (« formes ») à laide de « chemins » et couleurs (« styles ») partagés et de quelques propriétés. Cette réutilisation des éléments est un point clé de lefficacité de HVIF. Bien que cela impose quelques contraintes pour le dessinateur de licône, il y a également quelques avantages.<br />
Par exemple, en réutilisant un chemin, plusieurs objets peuvent être modifiés en même temps en manipulant juste celui-ci. Par exemple : un objet et son ombre.</p>
<p>Voici un aperçu de la fenêtre dIcon-O-Matic :</p>
<img src="../images/apps-images/i-o-m-overview.png" alt="i-o-m-overview.png" />
<p>Pour créer un objet visible sur le canevas, vous devez créer une forme (<em>shape</em>) à laide dun chemin (<em>path</em>) et dun style. Pour simplifier, vous pouvez créer un de ces éléments, deux, ou les trois à la fois à laide du menu <span class="menu">Shape</span>. Chaque type délément (chemin, forme, transformation, et style) possède un menu au dessus de sa liste déléments, offrant diverses commandes. Chaque élément possède certaines options qui peuvent se configurer dans la vue <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">Chemin (Path)</a></h3>
<p>Un chemin est constitué de plusieurs points reliés par des lignes ou des courbes de Bézier. Pour ajouter ou modifier des points, vérifiez dabord que le chemin est sélectionné dans la liste des chemins.</p>
<p>Cliquez sur le canevas pour placer le premier point. Lorsque vous ajouterez un point, vous pourrez choisir si la ligne sera droite ou courbe : un clic simple produira une ligne droite, un clic maintenu suivi dun déplacement de la souris permettra de déplacer les poignées (points de contrôle) de la courbe de Bézier. Bien sûr, vous pouvez aussi changer cela a posteriori.</p>
<img src="../../images/apps-images/i-o-m-path-ab.png" alt="i-o-m-path-ab" />
<p>Pour passer de « A » à « B », vous devez transformer certains points dextrémité de segment en extrémité de courbe. Ceci peut être réalisé en maintenant la touche <span class="key">ALT</span> enfoncée lors du clic sur un point et en déplaçant les poignées. Ceci donne une courbe de Bézier symétrique : La seconde poignée suit le mouvement de la première. Si vous voulez déplacer les poignées de manière indépendante, cliquez sur une des poignées à nouveau en maintenant <span class="key">ALT</span>. À linverse, vous pouvez passer de courbe de Bézier à segment en maintenant <span class="key">ALT</span> et en cliquant sur un point.</p>
<p>Pour déplacer un point, effectuez un glisser-déposer. Pour sélectionner plus dun point, maintenez <span class="key">MAJ</span> enfoncée et dessinez un rectangle de sélection. Les points sélectionnés sont signalés par une bordure rouge au lieu de noire.<br />
Pour insérer un point dans un chemin vous pouvez cliquer sur la ligne entre deux points.<br />
Les points sléectionnés peuvent être supprimés en tapant <span class="key">SUPPR</span> ou en cliquant sur nimporte quel point tout en maintenant enfoncée la touche <span class="key">CTRL</span>.</p>
<p>Le curseur de la souris indique le mode actuel :</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>Déplacer un/des point(s)</td>
<td>Insérer un point</td>
<td>Ajouter un point</td>
<td>Supprimer un point<br /><span class="key">CTRL</span></td>
<td>Segmen ↔ Bézier<br /><span class="key">ALT</span></td>
<td>Sélectionner des points<br /><span class="key">MAJ</span></td>
</tr>
</table>
<p>Vous pouvez obtenir un menu contextuel en effectuant un clic droit sur un point ou un groupe de points sélectionnés :</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>Sélectionne tous les points du chemin actuel.</td></tr>
<tr><td><span class="menu">Transform</span></td><td><span class="key">T</span></td><td>Place les points sélectionnés dans une boîte de transformation, afin que vous puissez les déplacer, redimensionner et tourner ensemble. Ceci fonctionne comme pour les formes, décrites plus loin.</td></tr>
<tr><td><span class="menu">Split</span></td><td></td><td>Duplique chaque points sélectionnés, en plaçant la copie au dessus de loriginal.</td></tr>
<tr><td><span class="menu">Flip</span></td><td></td><td>Effectue une rotation de 180° des points sélectionnés. A uniquement un effet sur les points des courbes de Bézier.</td></tr>
<tr><td><span class="menu">Remove</span></td><td><span class="key">Suppr</span></td><td>Supprime les points sélectionnés</td></tr>
</table>
<h4><a id="i-o-m-path-menu" name="i-o-m-path-menu">Le menu Path (Chemin)</a></h4>
<p>Le menu <span class="menu">Path</span> offre quelques options simples à comprendre, comme <span class="menu">Add Rectangle</span> (ajouter un rectangle), <span class="menu">Add Circle</span> (ajouter un cercle), <span class="menu">Duplicate</span> (dupliquer le chemin), <span class="menu">Remove</span> (supprimer le chemin). En voici quelques unes qui peuvent nécessiter une explication :</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>Si votre chemin nest pas « fermé » (voyez les Propriétés de chemin ci-dessous), un clic sur le canevas créera toujours un nouveau point, en le connectant au point précédent. « Reverse » inversera cet ordre, et votre nouveau point se connectera au point de départ.</td></tr>
<tr><td><span class="menu">Clean Up</span></td><td></td><td>Supprime les points redondants. Utile pour les fichiers SVG importés.</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>En pratique, ceci applique une rotation à louverture dun chemin. Cet effet se voit mieux avec un chemin ouvert auquel un style et une forme avec une transformation dépaisseur. En pratique, si votre chemin ressemble à un ⊂, il tournera comme ceci : ⊂ ∩ ⊃ .</td></tr>
<tr><td class="onelinetop"><span class="menu">Rotate Indices Left</span></td><td><span class="key">ALT</span> <span class="key">MAJ</span> <span class="key">R</span></td><td>La même chose dans lautre direction.</td></tr>
</table>
<h4><a id="i-o-m-path-properties" name="i-o-m-path-properties">Propriétés de chemin</a></h4>
<p>La zone <span class="menu">Properties</span> en bas à gauche de la fenêtre offre tous les réglages possible de lobjet sélectionné. Un chemin nen a que deux : <span class="menu">Name</span> (nom) et <span class="menu">Closed</span> (fermé).</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">Forme (Shape)</a></h3>
<p>Une forme regroupe un ou plusieurs chemins avec un style. En pratique, cest lobjet que vous verrez sur le canevas. Le regroupage est effectué à laide des cases à cocher au niveau des chemins et des styles : Sélectionnez simplement votre forme et cochez le(s) chemin(s) et le style désirés.</p>
<p>Une forme définit la manière dont un chemin et un style sont appliqués, cest à dire si lobjet est rempli ou juste un contour (ce qui est fait en utilisant une Transformation sur la forme, ce que nous verrons plus tard). Une forme peut être déplacée, tournée et redimensionnée sans toucher au chemin utilisé. De cette manière, vous pouvez réutiliser un chemin unique dans plusieurs formes similaires.</p>
<img src="../../images/apps-images/i-o-m-shape.png" alt="i-o-m-shape" />
<p>Quand une forme est sélectionnée dans la liste, un rectangle est dessiné autour delle. En fonction de lendroit où vous cliquez, la forme sera déplacée, redimensionnée, ou tournée autour de son centre, qui peut lui-même être déplacé. En maintenant <span class="key">MAJ</span> enfoncée, la direction sera bloquée lors dun déplacement, les angles seront contraints à 45° lors dune rotation, et les proportions seront conservées lors dun redimensionnement. Le curseur de la souris indique le mode actuel :</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>Déplacer</td>
<td>Redimensionner</td>
<td>Rotation</td>
<td>Déplacer le point<br /> de rotation</td>
</tr>
</table>
<p>Les formes sont placées lune sur lautre, sur leur propre calque en quelque sorte. Pour les réordonnez, effectuez des glisser-déposer dans leur liste.</p>
<h4><a id="i-o-m-shape-menu" name="i-o-m-path-menu">Menu Shape (Forme)</a></h4>
<p>Le menu <span class="menu">Shape</span> permet comme mentionné dajouter une forme vide (<span class="menu">Add Empty</span>), avec un chemin, style, chemin et style (<span class="menu">Add With Path/Style/Path&amp;Style</span>), de dupliquer (<span class="menu">Duplicate</span>) ou de supprimer (<span class="menu">Remove</span>) une forme. De plus, il contient :</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>Annule toutes les opérations (déplacement, redimensionnement, rotation) que vous avez appliqué à la forme.</td></tr>
<tr><td class="onelinetop"><span class="menu">Freeze Transformation</span></td><td></td><td>Lorsque vous transformez une forme, les chemins associés restent à leur position dorigine. Ceci peut être utile : Le chemin peut être utilisé par plus dune forme, ou peut-être que vous avez utilisé <span class="menu">Options | Snap to Grid</span> pour placer les points sur des bordures de pixels.<br />
Dans le cas contraire, « Freeze Transformation » appliquera la transformation de forme actuelle au chemin assigné. Une option future « Reset Transformation » permettra de revenir à ce nouvel état.</td></tr>
</table>
<h4><a id="i-o-m-shape-properties" name="i-o-m-shape-properties">Propriétés de formes</a></h4>
<p>En plus du nom (<span class="menu">Name</span>), la vue <span class="menu">Properties</span> offre ces options pour une forme :</p>
<table summary="Shape properties" border="0" cellspacing="0" cellpadding="2">
<tr><td><span class="menu">Min LOD</span></td><td></td><td>Niveau de détail minimum</td></tr>
<tr><td><span class="menu">Max LOD</span></td><td></td><td>Niveau de détail maximum</td></tr>
</table>
<h5><a id="i-o-m-shape-lod" name="i-o-m-shape-lod">Niveau de détail (Level of Detail, 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>Voyez-vous que la version 16x16 de licône BeVexed naffiche pas de chiffres ? Ceci est réalisé avec loption « Niveau de détail » de leurs formes.<br />
Grâce à ce réglage vous contrôlez la visibilité dune forme en fonction de sa taille. De cette manière, vous pouvez masquer les détails dune icône qui apparaissent bien en taille importante mais pas en petite taille.</p>
<p>Voici comment cela fonctionne : Un niveau de détail de 1.0 est défini à la taille 64x64. Pour obtenir le niveau de détail dune taille inférieure, divisez celle-ci par 64; par exemple, une icône 16x16 aura un niveau de détail de 16/64 = 0.25. Une forme ne sera pas visible en dessous de son <span class="menu">Min LOD</span> et au dessus de son <span class="menu">Max LOD</span>.</p>
<p>Ainsi, si vous réglez <span class="menu">Min LOD</span> à 0.0 et <span class="menu">Max LOD</span> à 0.5, la forme ne sera visible que pour de tailles dicône inférieures <i>ou égales</i> à 32 px. Si vous souhaitez exclure la taille 32 px, choisissez une valeur inférieure à 0.5, comme 0.49.</p>
<p>Le niveau de détail ne permet pas uniquement de supprimer des formes détailles, mais aussi par exemple de changer lépaisseur de trait suivant la taille, si vous pensez que cest nécessaire. Dupliquez simplement votre forme, effectuez vos changement et réglez leur valeurs LOD pour que lune ou lautre soit affichée. Voici une source de confusion potentielle, lorsque certaines valeurs LOD se recoupent et que vous vous demandez pourquoi les deux formes sont visibles à certaines tailles…<br /> Par exemple, si la Forme 1 devait être visible en dessous de 48 px et la Forme 2 à partir de 48 px (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>Pas OK !</b></td></tr>
<tr style="background-color:#F1F1F1"><td rowspan="2" style="vertical-align:middle ; background-color:#FFFFFF"><b>Forme 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>Forme 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">Style</a></h3>
<p>Un style peut être soit une couleur uniforme ou un dégradé dun certain type.<br />
En plus des couleurs prédéfinies dans la palette <span class="menu">Swatches</span>, vous pouvez créez vos propres mélanges en cliquant sur lindicateur de couleur actuel. Notez également la barre de défilement sous le spectre des couleurs qui permet de régler le canal alpha (transparence).</p>
<img src="../images/apps-images/i-o-m-gradients.png" alt="i-o-m-gradients" />
<p>Vous pouvez facilement créer un nouveau style en choisissant un couleur et en la glissant-déposant dans la liste des styles.</p>
<p>Si vous optez pour un dégradé, choisissez son type (<span class="menu">Linear</span> pour linéaire, <span class="menu">Radial</span> pour circulaire, <span class="menu">Diamond</span> pour carré, <span class="menu">Cone</span> pour conique) et choisir les couleurs de début et de fin. Ceci de fait en glissant-déposant des couleurs depuis la palette dans les indicateurs respectifs situés sous le dégradé.<br />
Vous pouvez bien sûr déplacer ces indicateurs pour changer lapparence du dégradé. Vous pouvez aussi insérer plus dindicateurs afin dajouter des couleurs en double-cliquant sur le dégradé. Tapez <span class="key">SUPPR</span> pour supprimer lindicateur sélectionné.</p>
<p>Vous pouvez déplacer, redimensionner et pivoter la boîte représentant le dégradé sur le canevas jusquà ce quelle vous convienne. Le fonctionnement est similaire à celui des formes.</p>
<h4><a id="i-o-m-style-menu" name="i-o-m-style-menu">Menu Style</a></h4>
<p>Le menu <span class="menu">Style</span> offre les options habituelles pour ajouter (<span class="menu">Add</span>), dupliquer (<span class="menu">Duplicate</span>) ou supprimer (<span class="menu">Remove</span>) un style, ou encore réinitialiser les tranformations (<span class="menu">Reset Transformation</span>).</p>
<h4><a id="i-o-m-style-properties" name="i-o-m-style-properties">Propriétés des styles</a></h4>
<p>La propriété <span class="menu">Name</span> (nom) est la seule disponible pour les styles.</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">Transformation (Transformer)</a></h3>
<p>Une forme peut utiliser des Transformations (<i>Transformers</i>) pour changer dapparence.</p>
<h4><a id="i-o-m-transformer-menu" name="i-o-m-transformer-menu">Menu dajout de transformations</a></h4>
<table summary=" Transformer Add menu" border="0" cellspacing="0" cellpadding="2">
<tr><td><span class="menu">Contour</span></td><td></td><td>Ajoute une bordure à une forme.</td></tr>
<tr><td><span class="menu">Stroke</span></td><td></td><td>Dessine le chemin dune forme au lieu de le remplir avec un style.</td></tr>
</table>
<p>Suivant la transformation que vous utilisez, vous pourrez définir différentes propriétés.</p>
<h4><a id="i-o-m-transformer-properties" name="i-o-m-transformer-properties">Propriétés des transformations</a></h4>
<p>En plus du nom (<span class="menu">Name</span>) et de la largeur (<span class="menu">Width</span>) utilisée par la transformation, la zone des propriétés permet de définir ces options (avec quelques variantes suivant la transformation) :</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>Seulement pour « Stroke »</i>. Définit la forme des extrémités de ligne : <span class="menu">Butt</span> (pointe), <span class="menu">Square</span> (carré) ou <span class="menu">Round</span> (arrondi).</td></tr>
<tr><td><span class="menu">Detect Orient.</span></td><td></td><td><i>Seulement pour « Contour »</i>. Détermine si la bordure est à lintérieur ou lextérieur du chemin.</td></tr>
<tr><td><span class="menu">Joins</span></td><td></td><td>Indique comment les lignes sont jointes à un point : <span class="menu">Miter</span> (en biseau), <span class="menu">Round</span> (arrondi) ou <span class="menu">Bevel</span> (pente).</td></tr>
<tr><td><span class="menu">Miter Limit</span></td><td></td><td>Seulement si loption <span class="menu">Joins</span> est définie à « Miter ». Permet de régler lapparence de la jointure en biseau.</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">Enregistrer une icône</a></h3>
<p>Les autres éléments de menu <span class="menu">File</span>, <span class="menu">Edit</span>, <span class="menu">Options</span> sont habituels. Nous allons donc nous intéresser aux spécificités de lenregistrement de votre travail.</p>
<p><span class="menu">File | Save As...</span> permet denregistrer dans le format spécial dIcon-O-Matic qui enregistre des informations supplémentaires comme le nom des chemins, des formes et des styles. Celles-ci seront éliminées lors de lenregistrement de licône finale pour gagner de la place. Il est donc préférable de sauvegarder votre travail à laide de cette option, car en labsence dobjets nommés tout les éléments seront nommés « &lt;path&gt;/&lt;shape&gt;/&lt;style&gt; » qui rendent difficiles les modifications.</p>
<p><span class="menu">File | Export As...</span> ouvre lhabituelle boîte de dialogue denregistrement, munie dun menu de format de fichier, contenant ces choix :</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>Enregistrement en tant que fichier ressource. Utile pour les programmeurs.</td></tr>
<tr><td>HVIF Source Code</td><td></td><td>Enregistrement en tant que fichier de code source. Utile pour les programmeurs.</td></tr>
<tr><td>SVG</td><td></td><td>Enregistrement au format SVG</td></tr>
<tr><td>PNG</td><td></td><td>Enregistrement au format PNG, taille 64x64</td></tr>
<tr><td>PNG Set</td><td></td><td>Enregistrement au format PNG, tailles 16x16, 32x32, 64x64</td></tr>
<tr><td>BEOS:ICON Attribute</td><td></td><td>Définir lattribut dicône du fichier sélectionné</td></tr>
<tr><td>META:ICON Attribute</td><td></td><td>Attacher licône à un fichier en tant que métadonnées</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">Trucs et astuces</a></h3>
<p>Voici quelques conseils que vous devriez avoir en tête lorsque vous travaillez avec Icon-O-Matic :</p>
<ul>
<li><p>Lisez les <a href="http://svn.haiku-os.org/haiku/haiku/trunk/docs/icon_guidelines/index.html">règles dicônes [en]</a> pour connaître les principales caractéristiques des icônes de Haiku, comme leur perspective, couleurs, et ombres.</p></li>
<li><p>Essayez de minimiser lutilisation des chemins, ce sont les éléments les plus coûteux en terme de taille de fichier. Réutilisez-les chaque fois que possible et travaillez avec des formes modifiées et/ou transformées. Lutilisation astucieuse des dégradés peut également permettre de conserver de lespace.</p></li>
<li><p>Chaque fois que possible, vous devriez activer le réglage <i>Snap-to-Grid</i> (aligner sur la grille) du menu <span class="menu">Options</span> lorsque vous travaillez sur des chemins. Les points dun chemin alignés sur la grille de 64x64 pixels utilisent moins despace de stockage. Vous obtiendrez aussi un meilleur rendu si ces points sont alignés sur des bordures de pixels. Par exemple, les bordures les plus importantes de votre icône devraient être alignées avec la grille 16x16.</p></li>
<li><p>Vérifiez la prévisualisation pour vous assurez que votre icône est correctement rendue en taille 16x16. Vous aurez peut-être besoin dutiliser le réglage de <a href="#i-o-m-shape-lod">niveau de détail</a> décrit dans la partie sur les formes.</p></li>
<li><p>Il existe une manière simple de produire des lettres, même si Icon-O-Matic ne fournit pas cette fonction. Entrez votre texte dans un éditeur comme StyledEdit, ajustez la taille et le style de police et glissez-déposer ou copiez-coller le texte sélectionné dans Icon-O-Matic. Les chemins et formes correspondant au texte seront automatiquement créés.</p></li>
<li><p>Si vous utilisez plus dun chemin pour une forme, leur parties communes sannuleront entre elles. Si lun des chemins est complètement inclus dans lautres, il créera un trou dans la forme résultante.</p></li>
<li><p>Vous pouvez agrandir et rétrécir le canevas en utilisant la molette de souris. Le déplacement peut ensuite se faire soit par cliquer-glisser à laide du bouton du milieu de la souris, ou par un clic gauche effectué en maintenant la touche <span class="key">ESPACE</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>