ad5e743e2b
git-svn-id: file:///srv/svn/repos/haiku/haiku/trunk@37435 a95241bf-73f2-0310-859d-f6bbb57e9c96
353 lines
46 KiB
HTML
353 lines
46 KiB
HTML
<?xml version="1.0" encoding="UTF-8"?>
|
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
|
||
<head>
|
||
<!--
|
||
*
|
||
* Copyright 2009, Haiku. All rights reserved.
|
||
* Distributed under the terms of the MIT License.
|
||
*
|
||
* Authors:
|
||
* Humdinger <humdingerb@gmail.com>
|
||
* Translators:
|
||
* mrNoisy
|
||
* Diver
|
||
*
|
||
-->
|
||
<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>Руководство пользователя</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="../../uk/applications/icon-o-matic.html"><img src="../../images/flags/uk.png" alt="" />Українська</a></li>
|
||
<li><a href="../../zh_CN/applications/icon-o-matic.html"><img src="../../images/flags/zh_CN.png" alt="" /> 中文 ［中文］</a></li>
|
||
<li><a href="../../pt_PT/applications/icon-o-matic.html"><img src="../../images/flags/pt_PT.png" alt="" />Português</a></li>
|
||
<li><a href="../../en/applications/icon-o-matic.html"><img src="../../images/flags/gb.png" alt="" />English</a></li>
|
||
</ul>
|
||
<span>
|
||
« <a href="expander.html">Expander</a>
|
||
:: <a href="../applications.html#list-of-apps" class="uplink">Приложения</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 против векторных иконок Haiku</a><br />
|
||
<a href="#icons-attributes">Иконки - это атрибуты</a><br />
|
||
<a href="#i-o-m">Создание иконок в Icon-O-Matic</a><br />
|
||
<a href="#i-o-m-path">Контуры</a><br />
|
||
<a href="#i-o-m-shape">Форма</a><br />
|
||
<a href="#i-o-m-style">Стиль</a><br />
|
||
<a href="#i-o-m-transformer">Трансформаторы</a><br />
|
||
<a href="#i-o-m-save">Сохранение иконки</a><br />
|
||
<a href="#i-o-m-tips">Полезные советы</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">Контур (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> во время клика на точке и перемещении опорных вершин. Результатом чего будет: вторая вершина переместится вместе с первой. Если потребуется перемещать опорные вершины независимо, снова кликните и протяните по опорной точке линии Безье, удерживая зажатой клавишу <span class="key">ALT</span>.<br />
|
||
И наоборот, для преобразования в угловую точку удерживайте нажатой клавишу <span class="key">ALT</span> и кликните на нужной точке.</p>
|
||
|
||
<p>Для перемещения точки просто кликните по ней и передвиньте. Для выделения более чем одной точки удерживайте клавишу <span class="key">SHIFT</span>, создавая прямоугольную область выделения. Отмеченные точки выделяются красной обводкой.<br />
|
||
Чтобы вставить точку в контур, кликните по линии, соединяющей две соседние точки.<br />
|
||
Выбранные точки удаляются при нажатии <span class="key">DEL</span> или кликом при удерживании клавиши <span class="key">CTRL</span>.</p>
|
||
|
||
<p>Текущий режим отображается указателем мыши:</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>Перемещение точек</td>
|
||
<td>Вставка точки</td>
|
||
<td>Добавление точки</td>
|
||
<td>Удаление точки<br /><span class="key">CTRL</span></td>
|
||
<td>Прямая↔Кривая Безье<br /><span class="key">ALT</span></td>
|
||
<td>Выделение точек<br /><span class="key">SHIFT</span></td>
|
||
</tr>
|
||
</table>
|
||
<p>Вызов контекстного меню производится кликом правой кнопки мыши на точке или группе выбранных точек:</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>Выделяет все точки текущего контура.</td></tr>
|
||
<tr><td><span class="menu">Трансформация (Transform)</span></td><td><span class="key">T</span></td><td>Помещает все выбранные точки в окно трансформации, в котором вы можете перемещать, масштабировать и вращать их все вместе. Принцип действия подобен принципу действия форм, описанному ниже.</td></tr>
|
||
<tr><td><span class="menu">Разделить (Split)</span></td><td></td><td>Разделяет выделенную точку на две, одна находится поверх другой.</td></tr>
|
||
<tr><td><span class="menu">Перевернуть (Flip)</span></td><td></td><td>Вращает выбранные точки на 180°. Имеет эффект только для точек кривых Безье.</td></tr>
|
||
<tr><td><span class="menu">Удалить (Remove)</span></td><td><span class="key">DEL</span></td><td>Удаляет выбранные точки.</td></tr>
|
||
</table>
|
||
|
||
<h4><a id="i-o-m-path-menu" name="i-o-m-path-menu">Меню Контуры (Path)</a></h4>
|
||
<p>Меню <span class="menu">Контуры (Path)</span> содержит несколько простых элементов, таких как <span class="menu">Добавить прямоугольник (Add Rectangle)</span> и <span class="menu">Добавить круг (Add Circle)</span>, <span class="menu">Дублировать (Duplicate)</span> и <span class="menu">Удалить (Remove)</span> путь. Приведем ниже еще несколько, для которых может понадобиться объяснение:</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>Если контур не замкнут (смотрите Свойства Контуров ниже), клик на канве всегда присоединяет новую точку к последней добавленной. "Обратить" ("Reverse") изменит этот порядок, и новая точка будет присоединена к начальной точке.</td></tr>
|
||
<tr><td><span class="menu">Оптимизировать (Clean Up)</span></td><td></td><td>Наиболее полезна для импортированных изображений SVG. Эта функция удалит избыточные точки.</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>Фактически, эта функция меняет точку начала контура. Ее действие заметнее всего на незамкнутых контурах со стилем и форме с трансформированным штрихом. Если в данный момент путь имеет следующий вид ⊂, эта функция будет менять начало контура в следующем порядке: ⊂ ∩ ⊃ ∪.</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>Производит те же действия, но в обратном порядке.</td></tr>
|
||
</table>
|
||
|
||
<h4><a id="i-o-m-path-properties" name="i-o-m-path-properties">Свойства контура</a></h4>
|
||
<p><span class="menu">Свойства (Properties)</span> в верхней левой части окна позволяет настроить все доступные параметры выбранного в данный момент объекта. Контур имеет только 2 параметра: <span class="menu">Имя (Name)</span> и <span class="menu">Замкнут (Closed)</span> ли он или нет.</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>Форма группирует между собой один или несколько контуров со стилем. Практически, это объект, который вы видите на канве. Группировка производится флажками, находящимися перед контурами стилями в списке: просто выберите вашу форму и отметьте желаемый контур (или контуры) и стиль.</p>
|
||
<p>Форма определяет каким образом контур и стиль будут применены. Например, объект может быть закрашен или только оконтурен (соответствующие настройки производятся с использованием трансформаторов (Transformers) над формами, о них мы поговорим позже). Кроме того, форма может быть перемещена, повернута и масштабирована без затрагивания использованного контура. Таким образом, вы можете многократно использовать один контур и получать различные, но и связанные формы.</p>
|
||
|
||
<img src="../../images/apps-images/i-o-m-shape.png" alt="i-o-m-shape" />
|
||
|
||
<p>Когда форма выбрана в списке, на канве вокруг нее отображается прямоугольник. В зависимости от того, где именно вы его захватите, форма будет перемещена, масштабирована либо повернута вокруг точки, находящейся в центре прямоугольника, которая так же может быть перемещена. Удерживание нажатой клавиши <span class="key">SHIFT</span> заблокирует направление во время перемещения, ограничит шаг вращения 45° и сохранит соотношение сторон при масштабировании. Как и ранее, указатель мыши отображает текущий режим работы:</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 />точку вращения</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<p>Формы лежат друг на друге, каждая - в своем слое, если хотите. Для их реорганизации перетащите нужную форму в другое место в списке.</p>
|
||
|
||
<h4><a id="i-o-m-shape-menu" name="i-o-m-path-menu">Меню Форма (Shape)</a></h4>
|
||
<p>Помимо упомянутых ниже возможностей, меню <span class="menu">Форма (Shape)</span> позволяет <span class="menu">Добавить пустую (Add Empty), С Контуром/Стилем/Контуром и стилем (With Path/Style/Path&Style)</span>, а так же <span class="menu">Дублировать (Duplicate)</span> или <span class="menu">Удалить (Remove)</span> форму. Приведем оставшиеся:</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>Отменяет все перемещения, изменения масштаба и вращения, примененные к форме.</td></tr>
|
||
<tr><td class="onelinetop"><span class="menu">Применить изменения (Freeze Transformation)</span></td><td></td><td>Когда вы изменяете форму, контур, связанный с ней остается в прежнем месте. Возможно, этот контур используется где-либо еще, более чем в одной фигуре, возможно он просто нужен вам в таком начальном виде или вы использовали пункт меню <span class="menu">Свойства | Выровнять по сетке (Options | Snap to Grid)</span> для выравнивания точек по пиксельным границам.<br />
|
||
Если это не так, "Применить изменения" ("Freeze Transformation") отнесет текущие изменения формы на связанный контур. Применение "Сбросить изменения" ("Reset Transformation") будет отменять все изменения к этому сотоянию.</td></tr>
|
||
</table>
|
||
|
||
<h4><a id="i-o-m-shape-properties" name="i-o-m-shape-properties">Свойства формы</a></h4>
|
||
<p>Кроме <span class="menu">Имени (Name)</span>, меню <span class="menu">Свойства (Prioperties)</span> для формы имеет следующие опции:</p>
|
||
|
||
<table summary="Shape properties" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Минимальный УД (Min LOD)</span></td><td></td><td>Минимальный уровень детализации</td></tr>
|
||
<tr><td><span class="menu">Максимальный УД (Max LOD)</span></td><td></td><td>Максимальный уровень детализации</td></tr>
|
||
</table>
|
||
|
||
<h5><a id="i-o-m-shape-lod" name="i-o-m-shape-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>Заметили, что на 16px иконке BeVexed нет номеров? Это сделано с помощью свойства "Уровень детализации" ("Level of Detail") для формы с номерами.<br />
|
||
УД позволяет контролировать видимость формы, в зависимости от ее размера. Таким образом, вы можете убрать детали, которые хорошо смотрятся на большой версии иконки, и портят вид маленькой версии.</p>
|
||
<p>Как это работает: УД 1.0 определен как иконка размером 64px. Чтобы полудить УД для других размеров, просто поделите этот размер на 64, т.е. 16px иконка имеет УД 16/64 = 0.25. Форма не будет видна, если значение ниже <span class="menu">Минимального УД (Min LOD)</span> и выше <span class="menu">Максимального УД (Max LOD)</span>.</p>
|
||
<p>Так, если вы установите для формы <span class="menu">Минимальный УД (Min LOD)</span> равный 0.0 и <span class="menu">Максимальный УД (Max LOD)</span> равный 0.5, то это значит, что форма размером меньшим либо <i>равным</i> 32px видны не будут. Если необходимо исключить размер 32px, выберите значение меньшее чем 0.5, скажем, 0.49.</p>
|
||
<p>УД используется не только для отображения форм, но и, например, для смены толщины штриха, если вам это нужно. Просто продублируйте форму, сделайте изменения, установите соотвествующие значения УД так, чтобы одновременно отображалась только одна форма. Здесь кроется возможная путаница, когда вы невольно перекрываете УД форм, и размышляете о том, почему при некоторых размерах обе формы остаются видимыми...<br />
|
||
Например, если Форма 1 должна была быть видима при размере меньшем 48px и Форма 2 - при размере большем 48px (УД: 48/64 = 0.75):</p>
|
||
|
||
<table summary="LOD values example" border="0" cellpadding="5">
|
||
<tr align="center"><td></td><td colspan="2"><b>Верно</b></td><td style="width:25px" rowspan="6"></td><td colspan="2"><b>Не верно!</b></td></tr>
|
||
<tr style="background-color:#F1F1F1"><td rowspan="2" style="vertical-align:middle ; background-color:#FFFFFF"><b>Форма 1</b></td><td>Минимальный УД</td><td>0.00</td><td>Минимальный УД</td><td>0.00</td></tr>
|
||
<tr style="background-color:#F1F1F1"><td>Максимальный УД</td><td><span style="background-color:#33FF33">0.74</span></td><td>Максимальный УД</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>Форма 2</b></td><td>Минимальный УД</td><td>0.75</td><td>Минимальный УД</td><td>0.75</td></tr>
|
||
<tr style="background-color:#F8F8F8"><td>Максимальный УД</td><td>4.00</td><td>Максимальный УД</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">Стиль</a></h3>
|
||
<p>Стилем может являться как просто цвет, так и градиент.<br />
|
||
Помимо предопределенных цветов в <span class="menu">Палитре (Swatches)</span>, вы можете выбрать нужный, кликнув по необходимому оттенку в спектре. Обратите внимание на слайдер, находящийся ниже спектра, который устанавливает уровень альфа-канала (прозрачности).</p>
|
||
<img src="../images/apps-images/i-o-m-gradients.png" alt="i-o-m-gradients" />
|
||
<p>Перетащите выбранный цвет в список стилей - будет создан новый стиль.</p>
|
||
<p>Если вы создаете градиент, установите его тип (<span class="menu">Линейный (Linear)</span>, <span class="menu">Радиальный (Radial)</span>, <span class="menu">Ромбовидный (Diamond)</span>, <span class="menu">Конусный (Cone)</span>), а после этого определите начальные и конечные цвета. Сделать это можно, перетащив нужный цвет в соответствующий индикатор цвета под градиентом.<br />
|
||
Разумеется, вы можете перемещать эти индикаторы для изменения вида градиется как посчитаете нужным. Чтобы добавить больше цветов - добавьте индикатор, дважды кликнув по градиенту. Нажатие клавиши <span class="key">DEL</span> удалит выбранный индикатор.</p>
|
||
<p>Вы можете перемещать, масштабировать и вращать бокс представления градиента на канве по вашему усмотрению. Его действие подобно действию боксу представления формы.</p>
|
||
|
||
<h4><a id="i-o-m-style-menu" name="i-o-m-style-menu">Меню Стиль</a></h4>
|
||
<p>Меню <span class="menu">Стиль (Style)</span> позволяет <span class="menu">Добавить (Add)</span>, <span class="menu">Дублировать (Duplicate)</span> или <span class="menu">Удалить (Remove)</span> стиль и <span class="menu">Сбросить изменения (Reset Transformation)</span>.</p>
|
||
|
||
<h4><a id="i-o-m-style-properties" name="i-o-m-style-properties">Свойства стиля</a></h4>
|
||
<p><span class="menu">Имя (Name)</span> - единственный пункт в меню <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-transformer" name="i-o-m-transformer">Трансформаторы (Transformer)</a></h3>
|
||
<p>Трансформаторы (Transformers) могут изменять внешний вид форм. Однако, эффект от их применения несколько тоньше, чем превращение грузовика в боевого робота.</p>
|
||
|
||
<h4><a id="i-o-m-transformer-menu" name="i-o-m-transformer-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>Добавляет обводку к форме.</td></tr>
|
||
<tr><td><span class="menu">Штрих (Stroke)</span></td><td></td><td>Штрихует контур фигуры, вместо закрашивания его стилем.</td></tr>
|
||
</table>
|
||
|
||
<p>В зависимости от вида транформатора, вы получите различные наборы свойств.</p>
|
||
|
||
<h4><a id="i-o-m-transformer-properties" name="i-o-m-transformer-properties">Свойства трансформатора</a></h4>
|
||
<p>Кроме пункта <span class="menu">Имя (Name)</span> и текущей <span class="menu">Ширины (Width)</span> для трансформаторов, в меню <span class="menu">Свойства (Properties)</span> имеются следующие пункты (в зависимости от типа трансформатора могут слегка различаться):</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>Только для штриха</i>. Определяет форму конца линий: <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>Только для обводки</i>. Определяет расположение обводки - внутри или снаружи контура.</td></tr>
|
||
<tr><td><span class="menu">Соединение (Joins)</span></td><td></td><td>Опрелеляет вид соединения линии и точки: <span class="menu">Клин (Miter)</span>, <span class="menu">Округлость (Round)</span> или <span class="menu">Скос (Bevel)</span>.</td></tr>
|
||
<tr><td><span class="menu">Допуск клина (Miter Limit)</span></td><td></td><td>Только когда вид <span class="menu">Соединения (Joins) </span> установлен как "Клин" ("Miter"), определяет вид соединения клина.</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">Сохранение иконки</a></h3>
|
||
<p>Сверху окна расположено привычные вам пункты меню: <span class="menu">Файл (File)</span>, <span class="menu">Правка (Edit)</span>, <span class="menu">Параметры (Options)</span>. Их назначение говорит само за себя, поэтому рассмотрим лишь способ сохранения вашей работы.</p>
|
||
<p><span class="menu">Файл | Сохранить как... (File | Save As...)</span> сохранит файл в специальном формате Icon-O-Matic, который позволяет хранить такую информацию как имена контуров, форм и стилей. Сохранять иконку в таком формате очень удобно - таким образом вы создаете резервную копию своей работы Эти данные удаляются для экономии пространства, когда вы экспортируете иконку. А работать с объектами названными "<path>/<shape>/<style>" довольно утомительно.</p>
|
||
|
||
<p><span class="menu">Файл | Экспортировать как... (File | Export As...)</span> открывает диалог сохранения файла с меню, позволяющим выбрать следующие типы:</p>
|
||
<table summary="file formats" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td>HVIF</td><td style="width:15px;"></td><td>Векторный формат иконок Haiku (Haiku Vector Icon Format)</td></tr>
|
||
<tr><td>HVIF RDef</td><td></td><td>Сохраняет ресурс, используемый программистами</td></tr>
|
||
<tr><td>HVIF Source Code</td><td></td><td>Сохраняет в виде файла с исходным кодом, используемом программистами</td></tr>
|
||
<tr><td>SVG</td><td></td><td>Сохраняет в формате SVG</td></tr>
|
||
<tr><td>PNG</td><td></td><td>Сохраняет PNG размером 64x64px</td></tr>
|
||
<tr><td>Набор PNG (PNG Set)</td><td></td><td>Сохраняет 16, 32 и 64px PNG</td></tr>
|
||
<tr><td>BEOS:ICON Attribute</td><td></td><td>Выберите файл для назначения ему иконки</td></tr>
|
||
<tr><td>META:ICON Attribute</td><td></td><td>Выберите файл для назначения иконки в виде метаданных</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">Полезные советы</a></h3>
|
||
<p>Есть несколько вещей, которые вы должны помнить при работе с Icon-O-Matic и несколько советов, относящихся к ним:</p>
|
||
<ul>
|
||
<li><p>Прочтите статью <a href="http://factory.haiku-os.org/documentation/icon_guidelines/">Icon Guidelines</a>, чтобы изучить важные концепции иконок Haiku, такие как перспектива, цвета и тени.</p></li>
|
||
<li><p>Всегда старайтесь минимизировать использование контуров - они наиболее накладны в отношении объема данных. Многократно используйте одни и те же контуры - где это только возможно, а так же манипулируйте формами, а не трансформаторами. Мудрое применение градиентов так же поможет сохранить объем.</p></li>
|
||
<li><p>Где это возможно, включите режим привязки к сетке из меню <span class="menu">Опции (Options)</span>, когда редактируете контуры. Точки контуров, выровненные по 64x64 сетке требует меньше пространства. Для получения наиболее четкого изображения, установите точки по границам пикселей. Например, важно выровнять наиболее выраженные элементы по сетке 16x16.</p></li>
|
||
<li><p>Проверяйте по предварительному просмотру, выглядит ли ваша иконка хорошо в размере 16x16. Возможно, вам понадобиться использовать <a href="#i-o-m-shape-lod">Уровень детализации (Level Of Detail)</a>, описанный в разделе, посвященном формам.</p></li>
|
||
<li><p>Есть простой способ создания букв, несмотря на то, что в Icon-O-Matic этого не предусмотрено. Просто введите текст в любом текстовом редакторе, например, в StyledEdit, выберите шрифт и стиль и просто перетащите (или скопируйте и вставьте) его в Icon-O-Matic. Это создаст соответствующие контуры и формы.</p></li>
|
||
<li><p>Когда вы назначаете более одного контура для формы, их пересекающиеся зоны взаимоисключат друг друга. Когда один контур перекрывает другой - он практически создает дыру в результирующей форме.</p></li>
|
||
<li><p>Вы можете увеличивать и уменьшать масштаб канвы, прокручивая колесо мыши. Парнорамирование осуществляется нажатием и протягиванием средней кнопкой мыши, либо левой с удерживаемой клавишей <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>
|