mirror of
https://review.haiku-os.org/haiku
synced 2025-01-23 06:47:22 +01:00
349 lines
34 KiB
HTML
349 lines
34 KiB
HTML
|
<?xml version="1.0" encoding="UTF-8"?>
|
|||
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../../../html-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:
|
|||
|
|
* mrNoisy
|
|||
|
|
*
|
|||
|
|
-->
|
|||
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|||
|
|
<meta http-equiv="Content-Style-Type" content="text/css" />
|
|||
|
|
<meta name="robots" content="all" />
|
|||
|
|
<title>Icon-O-Matic</title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../../../Haiku-doc.css" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div id="banner">
|
|||
|
|
<div><span>User guide</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="nav">
|
|||
|
|
<div class="inner">
|
|||
|
|
<ul class="lang-menu">
|
|||
|
|
<li class="now"><img src="../../../images/flags/ru.png" alt="" /> Русский</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="../../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="" />Svensk</a></li>
|
|||
|
|
<li><a href="../../jp/applications/icon-o-matic.html"><img src="../../../images/flags/jp.png" alt="" />日本語</a></li>
|
|||
|
|
<li><a href="../../en/applications/icon-o-matic.html"><img src="../../../images/flags/gb.png" alt="" />English</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<span>
|
|||
|
|
« <a href="expander.html">Expander</a>
|
|||
|
|
:: <a href="../applications.html#list-of-apps" class="uplink">Приложения</a>
|
|||
|
|
:: <a href="installer.html">Установщик</a> »
|
|||
|
|
</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="content">
|
|||
|
|
<div>
|
|||
|
|
|
|||
|
|
<table class="index" id="index" summary="index">
|
|||
|
|
<tr class="heading"><td>Индексация</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">Приложения (Applications)</span></td></tr>
|
|||
|
|
<tr><td>Расположение в Tracker:</td><td></td><td><span class="path">/boot/system/apps/Icon-O-Matic</span></td></tr>
|
|||
|
|
<tr><td>Настройки хранятся по адресу:</td><td></td><td><span class="path">~/config/settings/Icon-O-Matic</span></td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<p><br /></p>
|
|||
|
|
|
|||
|
|
<p>Перед тем как мы подойдем к созданию иконок в Icon-O-Matic, скажем несколько слов о иконках 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">Пиксельные иконки BeOS против векторных иконок Haiku</a></h2>
|
|||
|
|
<p>Вопреки традициям BeOS, в Haiku используются векторные иконки. Специальный формат векторных иконок Haiku (Haiku Vector Icon Format) (HVIF) был оптимизирован для небольших размеров файла и быстрой отрисовки. Это объясняет, почему наши иконки чаще всего <i>значительно</i> меньше чем иконки пиксельного или широко распространенного SVG-формата. Кроме того, в отличие от пиксельных иконок BeOS, иконки в Haiku не ограничены 8-битной палитрой (256 цветов).<br />
|
|||
|
|
Для примера, сравним эти иконки Terminal:</p>
|
|||
|
|
<table border="0" cellpadding="10">
|
|||
|
|
<tr align="center"><td><b>Пиксельные</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 байт<br />+ 256 байт</td><td> 7,192 байт</td><td> 768 байт</td></tr>
|
|||
|
|
</table>
|
|||
|
|
<p>Обратите внимание, что в BeOS используется 2 версии иконки: одна размером 16x16, а вторая 32x32, для четкого отображения в режиме списка (List) и в режиме Иконки (Icon View mode).</p>
|
|||
|
|
<p>Подобный трюк не нужен для векторных иконок. За счет повышения объема файла на несколько сот байт, векторные иконки масштабируются гораздо лучше, чем пиксельные (Замечание: BeOS позволял отображать иконки только двух размеров - 16x16 и 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>Пиксельные</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>Векторные</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">Иконки - это атрибуты</a></h2>
|
|||
|
|
<p>Иконки сохранены в виде атрибута файла, к которому относятся. Правда, это не значит, что каждый файл должен иметь такой атрибут, чтобы его иконка отобразилась в окне Tracker: файлы с данными наследуют свои иконки от своего типа файла. Чтобы глобально поменять иконку типа файла, вы можете воспользоваться панелью настроек <span class="app">Типы Файлов (FileTypes)</span>. А если хотите назначить особенную иконку определенному файлу, вам следует воспользоваться <span class="app">Дополнение Тип Файла (FileType Add-On)</span> на этом файле. Смотрите <a href="../filetypes.html">Типы файлов (Filetypes)</a> для дополнительной информации.</p>
|
|||
|
|
<div class="box-info">Будучи атрибутом, индивидуальная иконка для файла сможет сохраняться только в файловой системе, поддерживающей атрибуты. Так, если вы перемещаете файлы с вашего BFS-диска, упакуйте их в zip-архив, иначе иконки или другие атрибуты будут потеряны.</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">Создание иконок в Icon-O-Matic</a></h2>
|
|||
|
|
<p>Icon-O-Matic - это векторный редактор иконок для Haiku, который может сохранять ваши работы в формате HVIF, SVG или PNG. Иконка также может быть прикреплена как атрибут к существующему файлу или же экспортирована в виде ресурсного или файла исходного кода, используемых разработчиками. Оптимизация работы с HVIF отразилась на внутренней работе с ним.</p>
|
|||
|
|
<p>В отличие от обычных векторных графических редакторов, вы не будете иметь дело с отдельными объектами, которые включают такие специфические свойства, как контуры, цвет штриха, его ширину, цвет заливки и др. Здесь вы будете составлять ваши объекты ("формы" - "shapes") из общих контуров и цветов ("стилей" - "styles") и устанавливать для них некоторые свойства. Многократное использование одних и тех же элементов - секрет эффективности HVIF. Хотя это и накладывает некоторые ограничения на разработку иконки, преимущества все же существуют.<br />
|
|||
|
|
Например, при повторном использовании контуров, несколько объектов могут быть модифицированны одним движением. Представьте себе объект и его тень. Модификация их общих контуров поменяет не только сам объект, но и его тень (которая при этом может быть слегка растянута или сжата).</p>
|
|||
|
|
|
|||
|
|
<p>Приведем краткий обзор окна Icon-O-Matic:</p>
|
|||
|
|
<img src="../images/apps-images/i-o-m-overview.png" alt="i-o-m-overview.png" />
|
|||
|
|
|
|||
|
|
<p>Создание любого видимого объекта на канве требует наличия формы с контуром и стилем. Что удобно, меню <span class="menu">Форма (Shape)</span> позволит вам создать не только форму но и контуры и стили для нее. Для каждого вида объектов (контуры, формы, трансформеры и стили) существует специальный пункт меню, расположенный выше списка элементов, позволяющий совершать различные действия. Каждый элемент имеет набор свойст, которые устанавливаются в панели <span class="menu">Свойства (Properties)</span> view.</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">Контуры</a></h3>
|
|||
|
|
<p>Контур состоит из нескольких точек, соединенных между собой линиями и кривыми Бизье. Для добавления или изменения точек убедитесь, что необходимый контур выбран в списке контуров.</p>
|
|||
|
|
|
|||
|
|
<p>Обычный клик на канве создаст первую точку. Во время добавления точки вы определяете, будет ли результирующая линия прямой или кривой: нажатие и отпускание кнопки мыши создаст прямую линию, удерживание нажатой кнопки мыши - кривую Бизье. Разумеется, тип линии можно сменить позже.</p>
|
|||
|
|
|
|||
|
|
<img src="../../images/apps-images/i-o-m-path-ab.png" alt="i-o-m-path-ab" />
|
|||
|
|
|
|||
|
|
<p>Чтобы перейти от "A" к "B", вам необходимо изменить некоторые точки из угловых в точки кривых. Сделать это можно удерживая клавишу <span class="key">ALT</span> во время клика на точке и перемещении опорных вершин. Результатом чего будет : 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>The mouse pointer indicates the current mode:</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>You can invoke a context menu by right-clicking a point or a selection of points:</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>Selects all points of the current path.</td></tr>
|
|||
|
|
<tr><td><span class="menu">Transform</span></td><td><span class="key">T</span></td><td>Puts all selected points in a transformation box, so you can move, resize and rotate them together. It works just like with shapes, described a bit further down.</td></tr>
|
|||
|
|
<tr><td><span class="menu">Split</span></td><td></td><td>Splits selected points into two, one sitting on top of the other.</td></tr>
|
|||
|
|
<tr><td><span class="menu">Flip</span></td><td></td><td>Rotates selected points by 180°. Only has an effect on Bezier points.</td></tr>
|
|||
|
|
<tr><td><span class="menu">Remove</span></td><td><span class="key">DEL</span></td><td>Deletes selected points.</td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<h4><a id="i-o-m-path-menu" name="i-o-m-path-menu">Path Menu</a></h4>
|
|||
|
|
<p>The <span class="menu">Path</span> menu offers a few obvious entries to <span class="menu">Add Rectangle</span> and <span class="menu">Add Circle</span> or to <span class="menu">Duplicate</span> or <span class="menu">Remove</span> a path. Here are some that may need a bit more explaining:</p>
|
|||
|
|
|
|||
|
|
<table summary="Path menu" border="0" cellspacing="0" cellpadding="2">
|
|||
|
|
<tr><td><span class="menu">Reverse</span></td><td style="width:15px;"></td><td>If your path isn't "closed" (see Path Properties below), a click into the canvas always creates a new point, connecting it with the last one. "Reverse" will reverse this order and your new point will connect to original start point instead.</td></tr>
|
|||
|
|
<tr><td><span class="menu">Clean Up</span></td><td></td><td>Most useful with imported SVGs, this function will remove redundant points.</td></tr>
|
|||
|
|
<tr><td class="onelinetop"><span class="menu">Rotate Indices Right</span></td><td><span class="key">ALT</span> <span class="key">R</span></td><td>Practically, this rotates the opening of a path. It's best seen when using a not-closed path with a style and a shape with a stroke transformer. Now, if your path looks like a ⊂ it will rotate like this: ⊂ ∩ ⊃ ∪.</td></tr>
|
|||
|
|
<tr><td class="onelinetop"><span class="menu">Rotate Indices Left</span></td><td><span class="key">ALT</span> <span class="key">SHIFT</span> <span class="key">R</span></td><td>Does the same in the other direction.</td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<h4><a id="i-o-m-path-properties" name="i-o-m-path-properties">Path Properties</a></h4>
|
|||
|
|
<p><span class="menu">Properties</span> at the bottom left of the window offers all available settings of the currently selected object. A path only has two: a <span class="menu">Name</span> and if it's <span class="menu">Closed</span> or not.</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">Shape Properties</a></h4>
|
|||
|
|
<p>Besides a <span class="menu">Name</span>, the <span class="menu">Properties</span> view for a shape has these options:</p>
|
|||
|
|
|
|||
|
|
<table summary="Shape properties" border="0" cellspacing="0" cellpadding="2">
|
|||
|
|
<tr><td><span class="menu">Min LOD</span></td><td></td><td>Minimum Level of Detail</td></tr>
|
|||
|
|
<tr><td><span class="menu">Max LOD</span></td><td></td><td>Maximum Level of Detail</td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<h5><a id="i-o-m-shape-lod" name="i-o-m-shape-lod">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>See how there are no numbers in the 16px version of the BeVexed icon? That's done with the "Level of Detail" setting of their shapes.<br />
|
|||
|
|
With the LOD you control the visibility of a shape depending on its size. That way, you can leave away details of an icon that look good on a bigger icon, but maybe not so much on its smaller version.</p>
|
|||
|
|
<p>This is how it works: A LOD of 1.0 is defined as a 64px icon size. To get the LOD of a particular icon size you simply divide it by 64, e.g. a 16px icon has a LOD of 16/64 = 0.25. A shape won't be visible below its <span class="menu">Min LOD</span> and above its <span class="menu">Max LOD</span>.</p>
|
|||
|
|
<p>So, if you set a shape's <span class="menu">Min LOD</span> to 0.0 and the <span class="menu">Max LOD</span> to 0.5, this means that the shape will only be visible for icon sizes smaller or <i>equal</i> to 32px. If you wanted to exclude the 32px icon size, you'd have to stay below 0.5, say 0.49.</p>
|
|||
|
|
<p>The LOD is not only for leaving out detailing shapes, but also to e.g. change the stroke width at different sizes, if you feel that's needed. Simply duplicate a shape, make your changes and set both of their LOD settings to show either one or the other. Here lies the only source of potential confusion, when you unwittingly overlap LODs of shapes, and wonder why at some size both are visible...<br />
|
|||
|
|
For example, if Shape 1 were to be shown below 48px and Shape 2 from 48px upward (LOD: 48/64 = 0.75):</p>
|
|||
|
|
|
|||
|
|
<table summary="LOD values example" border="0" cellpadding="5">
|
|||
|
|
<tr align="center"><td></td><td colspan="2"><b>OK</b></td><td style="width:25px" rowspan="6"></td><td colspan="2"><b>Not OK!</b></td></tr>
|
|||
|
|
<tr style="background-color:#F1F1F1"><td rowspan="2" style="vertical-align:middle ; background-color:#FFFFFF"><b>Shape 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>Shape 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>A style can either be a solid color or some type of gradient.<br />
|
|||
|
|
Besides the predefined colors under <span class="menu">Swatches</span>, you can mix your own by clicking on the current color. Also, note the slider under the color spectrum which sets the alpha-channel (transparency).</p>
|
|||
|
|
<img src="../images/apps-images/i-o-m-gradients.png" alt="i-o-m-gradients" />
|
|||
|
|
<p>You quickly create a new style by mixing your color and simply drag&dropping it into the list of styles.</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">Style Menu</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">Style Properties</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">Transformer</a></h3>
|
|||
|
|
<p>A shape can have Transformers which change its appearance. The effects, however, are more subtle than a truck turning into a battle robot...</p>
|
|||
|
|
|
|||
|
|
<h4><a id="i-o-m-transformer-menu" name="i-o-m-transformer-menu">Transformer Add Menu</a></h4>
|
|||
|
|
<table summary=" Transformer Add menu" border="0" cellspacing="0" cellpadding="2">
|
|||
|
|
<tr><td><span class="menu">Contour</span></td><td></td><td>Adds an outline to a shape.</td></tr>
|
|||
|
|
<tr><td><span class="menu">Stroke</span></td><td></td><td>Strokes the path of a shape instead of filling it with a style.</td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
<p>Depending on the kind of Transformer, you'll get a different set of properties.</p>
|
|||
|
|
|
|||
|
|
<h4><a id="i-o-m-transformer-properties" name="i-o-m-transformer-properties">Transformer Properties</a></h4>
|
|||
|
|
<p>Besides a <span class="menu">Name</span> and the actual <span class="menu">Width</span> for the transformer, the <span class="menu">Properties</span> view has these (depending on its type slightly differing) options:</p>
|
|||
|
|
<table summary="Transformer properties" border="0" cellspacing="0" cellpadding="2">
|
|||
|
|
<tr><td><span class="menu">Caps</span></td><td style="width:15px;"></td><td><i>Stroke only</i>. Defines the end caps of a line: <span class="menu">Butt</span>, <span class="menu">Square</span> or <span class="menu">Round</span>.</td></tr>
|
|||
|
|
<tr><td><span class="menu">Detect Orient.</span></td><td></td><td><i>Contour only</i>. Determines if the contour is to the inside or outside the path.</td></tr>
|
|||
|
|
<tr><td><span class="menu">Joins</span></td><td></td><td>Defines how lines are joint at a point: <span class="menu">Miter</span>, <span class="menu">Round</span> or <span class="menu">Bevel</span>.</td></tr>
|
|||
|
|
<tr><td><span class="menu">Miter Limit</span></td><td></td><td>Only when the above <span class="menu">Joins</span> is set to "Miter" this setting influences the looks of the miter joint. </td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3>
|
|||
|
|
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
|||
|
|
<a id="i-o-m-save" name="i-o-m-save">Saving an icon</a></h3>
|
|||
|
|
<p>There's your usual menu bar at the top, <span class="menu">File</span>, <span class="menu">Edit</span>, <span class="menu">Options</span>. The usage is pretty much self-explaining, so we'll only look at how to save your work.</p>
|
|||
|
|
<p><span class="menu">File | Save As...</span> will save in a special Icon-O-Matic format that retains additional information like the names of paths, shapes and styles. These will be stripped from the actual icon once you export it to save space. It's a good idea to back-up your work like this, because without named objects everything's named "<path>/<shape>/<style>" which makes specific changes tedious.</p>
|
|||
|
|
|
|||
|
|
<p><span class="menu">File | Export As...</span> opens a familiar save panel with a file format dropdown menu at the bottom, offering these choices:</p>
|
|||
|
|
<table summary="file formats" border="0" cellspacing="0" cellpadding="2">
|
|||
|
|
<tr><td>HVIF</td><td style="width:15px;"></td><td>Haiku Vector Icon Format</td></tr>
|
|||
|
|
<tr><td>HVIF RDef</td><td></td><td>Saves as resource used by programmers</td></tr>
|
|||
|
|
<tr><td>HVIF Source Code</td><td></td><td>Saves as source code used by programmers</td></tr>
|
|||
|
|
<tr><td>SVG</td><td></td><td>Saves as SVG</td></tr>
|
|||
|
|
<tr><td>PNG</td><td></td><td>Saves as a 64px sized PNG</td></tr>
|
|||
|
|
<tr><td>PNG Set</td><td></td><td>Saves as 16, 32 and 64px sized PNGs</td></tr>
|
|||
|
|
<tr><td>BEOS:ICON Attribute</td><td></td><td>Choose a file and set its icon attribute directly</td></tr>
|
|||
|
|
<tr><td>META:ICON Attribute</td><td></td><td>Choose a file and attach the icon as mere meta data</td></tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<h3>
|
|||
|
|
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
|||
|
|
<a id="i-o-m-tips" name="i-o-m-tips">Tips & Tricks</a></h3>
|
|||
|
|
<p>A few things you should keep in mind when working with Icon-O-Matic and some general tips for its usage:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><p>Read the <a href="http://factory.haiku-os.org/documentation/icon_guidelines/">Icon Guidelines</a> to learn about important characteristics of Haiku icons, e.g. perspective, colors and shadows.</p></li>
|
|||
|
|
<li><p>You should always try to minimize your use of paths, those are the most expensive, file size wise. Re-use paths wherever possible and work with manipulated shapes and their transformers instead. Smart use of gradients can also save space.</p></li>
|
|||
|
|
<li><p>Wherever possible, you should activate Snap-to-Grid from the <span class="menu">Options</span> menu when editing paths. Path points that align with the 64x64 pixel grid use less storage space. You'll also get the crispest look if points are set on exact pixel borders. For example, it is important to align the most prominent outlines with the 16x16 grid.</p></li>
|
|||
|
|
<li><p>Check the preview to see if your icon still looks good in 16x16. You may want to use the <a href="#i-o-m-shape-lod">Level Of Detail</a> settings described in the Shapes section.</p></li>
|
|||
|
|
<li><p>There's an easy way to produce letters, even if Icon-O-Matic doesn't provide such a tool. Just enter the text in a text editor such as StyledEdit, adjust font type and style, and drag&drop or copy&paste the selected text into Icon-O-Matic. This will create the according paths and shapes.</p></li>
|
|||
|
|
<li><p>If you assign more than one path to a shape, their overlapping areas will cancel each other out. When one path is completely inside another, it practically creates a hole in the resulting shape.</p></li>
|
|||
|
|
<li><p>You can zoom in and out of the canvas with the mouse wheel. Panning is done either by click&drag with the middle mouse button or with a normal left-click&drag while holding <span class="key">SPACE</span>.</p></li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!--
|
|||
|
|
<h3>
|
|||
|
|
<a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
|
|||
|
|
<a id="i-o-m-workshops" name="i-o-m-workshops">Workshops</a></h3>
|
|||
|
|
<p>The above is of course quite theoretical. The best way to learn using Icon-O-Matic is by experimenting. To get you started and once more show the basics, have a look at these short clips:</p>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="">Paths</a></li>
|
|||
|
|
<li><a href="">Shapes</a></li>
|
|||
|
|
<li><a href="">Styles</a></li>
|
|||
|
|
<li><a href="">Transformers</a></li>
|
|||
|
|
<li><a href="">Optimizing icons</a></li>
|
|||
|
|
<li><a href=""></a></li>
|
|||
|
|
</ul>
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="nav">
|
|||
|
|
<div class="inner"><span>
|
|||
|
|
« <a href="expander.html">Expander</a>
|
|||
|
|
:: <a href="../applications.html#list-of-apps" class="uplink">Приложения</a>
|
|||
|
|
:: <a href="installer.html">Установщик</a> »
|
|||
|
|
</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|