docs/userguide/zh_CN/applications/icon-o-matic.html

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
   4 <head>
   5 <!--
   6  *
   7  * Copyright 2009-2013, Haiku. All rights reserved.
   8  * Distributed under the terms of the MIT License.
   9  *
  10  * Authors:
  11  *              Humdinger <humdingerb@gmail.com>
  12  * Translators:
  13  *              Pengphei Han
  14  *              dgy18787
  15  *              Humdinger
  16  *
  17 -->
  18         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  19         <meta http-equiv="Content-Style-Type" content="text/css" />
  20         <meta name="robots" content="all" />
  21         <title>图标套件</title>
  22         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  23         <link rel="stylesheet" type="text/css" href="../../Haiku-doc.css" />
  24 </head>
  25 <body>
  26
  27 <div id="banner">
  28 <div><span>User guide</span></div>
  29 </div>
  30
  31 <div class="nav">
  32 <div class="inner">
  33 <ul class="lang-menu">
  34 <li class="now"><img src="../../images/flags/zh_CN.png" alt="" />  中文 ［中文］</li>
  35 <li><a href="../../ca/applications/icon-o-matic.html"><img src="../../images/flags/ca.png" alt="" />Català</a></li>
  36 <li><a href="../../de/applications/icon-o-matic.html"><img src="../../images/flags/de.png" alt="" />Deutsch</a></li>
  37 <li><a href="../../en/applications/icon-o-matic.html"><img src="../../images/flags/gb.png" alt="" />English</a></li>
  38 <li><a href="../../es/applications/icon-o-matic.html"><img src="../../images/flags/es.png" alt="" />Español</a></li>
  39 <li><a href="../../fr/applications/icon-o-matic.html"><img src="../../images/flags/fr.png" alt="" />Français</a></li>
  40 <li><a href="../../it/applications/icon-o-matic.html"><img src="../../images/flags/it.png" alt="" />Italiano</a></li>
  41 <li><a href="../../hu/applications/icon-o-matic.html"><img src="../../images/flags/hu.png" alt="" />Magyar</a></li>
  42 <li><a href="../../pl/applications/icon-o-matic.html"><img src="../../images/flags/pl.png" alt="" />Polski</a></li>
  43 <li><a href="../../pt_PT/applications/icon-o-matic.html"><img src="../../images/flags/pt_PT.png" alt="" />Português</a></li>
  44 <li><a href="../../pt_BR/applications/icon-o-matic.html"><img src="../../images/flags/pt_BR.png" alt="" />Português (Brazil)</a></li>
  45 <li><a href="../../ro/applications/icon-o-matic.html"><img src="../../images/flags/ro.png" alt="" />Română</a></li>
  46 <li><a href="../../sk/applications/icon-o-matic.html"><img src="../../images/flags/sk.png" alt="" />Slovenčina</a></li>
  47 <li><a href="../../fi/applications/icon-o-matic.html"><img src="../../images/flags/fi.png" alt="" />Suomi</a></li>
  48 <li><a href="../../sv_SE/applications/icon-o-matic.html"><img src="../../images/flags/sv_SE.png" alt="" />Svenska</a></li>
  49 <li><a href="../../ru/applications/icon-o-matic.html"><img src="../../images/flags/ru.png" alt="" />Русский</a></li>
  50 <li><a href="../../uk/applications/icon-o-matic.html"><img src="../../images/flags/uk.png" alt="" />Українська</a></li>
  51 <li><a href="../../jp/applications/icon-o-matic.html"><img src="../../images/flags/jp.png" alt="" />日本語</a></li>
  52 </ul>
  53 <span>
  54  «  <a href="haikudepot.html">HaikuDepot</a>
  55 ::  <a href="../applications.html#list-of-apps" class="uplink">应用程序
  56 </a>
  57 ::  <a href="installer.html">Installer</a>  »
  58 </span></div>
  59 </div>
  60
  61 <div id="content">
  62 <div>
  63
  64 <table class="index" id="index" summary="index">
  65 <tr class="heading"><td>索引</td></tr>
  66 <tr class="index"><td><a href="#bitmap-vector">BeOS 位图图标 VS Haiku 矢量图标</a><br />
  67                 <a href="#icons-attributes">图标属性</a><br />
  68                 <a href="#i-o-m">创建图标</a><br />
  69                   <a href="#i-o-m-path">路径</a><br />
  70                   <a href="#i-o-m-shape">模型</a><br />
  71                   <a href="#i-o-m-style">样式</a><br />
  72                   <a href="#i-o-m-transformer">变形</a><br />
  73                   <a href="#i-o-m-save">保存图标</a><br />
  74                   <a href="#i-o-m-tips">提示与技巧</a></td></tr>
  75 </table>
  76
  77 <h2><img src="../../images/apps-images/icon-o-matic-icon_64.png" alt="icon-o-matic-icon_64.png" width="64" height="64" />图标套件</h2>
  78
  79 <table summary="layout" border="0" cellspacing="0" cellpadding="2">
  80 <tr><td>桌面栏：</td><td style="width:15px;"></td><td><span class="menu">应用程序</span></td></tr>
  81 <tr><td>位置：</td><td></td><td><span class="path">/boot/system/apps/Icon-O-Matic</span></td></tr>
  82 <tr><td>设置：</td><td></td><td><span class="path">~/config/settings/Icon-O-Matic</span></td></tr>
  83 </table>
  84
  85 <p><br /></p>
  86
  87 <p>在正式开始使用图标套件创建图标之前，我们需要了解一些有关 Haiku 图标的基本信息。</p>
  88
  89 <h2>
  90 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
  91 <a id="bitmap-vector" name="bitmap-vector">位图图标 VS 矢量图标</a></h2>
  92 <p>与 BeOS 不同，Haiku 使用矢量图标而非点阵图标。Haiku 项目已经开发了一种特殊的矢量图标格式（HVIF），并且对文件大小和快速渲染做了充分的优化。这就是我们的大部分图标所占的空间要比点阵图标和常用的 SVG 格式图标小 <i>非常多</i> 的原因。同时，和 BeOS 的点阵图标不同，Haiku 图标并没有限制于 8 位的调色板（256 色）。<br />
  93 以下面的终端图标为例：</p>
  94 <table border="0" cellpadding="10">
  95         <tr align="center"><td><b>点阵图标</b></td><td><b>SVG</b></td><td><b>HVIF</b></td></tr>
  96         <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>
  97         <tr align="center"><td>1,024 字节<br />+ 256 字节</td><td> 7,192 字节</td><td> 768 字节</td></tr>
  98 </table>
  99 <p>注意，BeOS 使用l两种图标尺寸，16x16 和 32x32，分别为了在列表和图标视图模式获得良好的视觉效果。</p>
 100 <p>矢量图标则无需这种技巧。它们除了仅需使用几百字节的空间，而且缩放效果也要比点阵图标好很多。（注意：BeOS 仅提供了16x16 和 32x32 两种图标。）</p>
 101 <table border="0" cellpadding="10">
 102         <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>
 103         <tr align="center"><td><b>点阵图标</b></td>
 104                 <td><img src="../../images/apps-images/i-o-m-bitmap16.png" alt="i-o-m-bitmap16" width="16" height="16" /></td>
 105                 <td><img src="../../images/apps-images/i-o-m-bitmap32.png" alt="i-o-m-bitmap32" width="32" height="32" /></td>
 106                 <td><img src="../../images/apps-images/i-o-m-bitmap64.png" alt="i-o-m-bitmap64" width="64" height="64" /></td>
 107                 <td><img src="../../images/apps-images/i-o-m-bitmap128.png" alt="i-o-m-bitmap128" width="128" height="128" /></td></tr>
 108         <tr align="center"><td><b>矢量图标</b></td>
 109                 <td><img src="../../images/apps-images/i-o-m-vector16.png" alt="i-o-m-vector16" width="16" height="16" /></td>
 110                 <td><img src="../../images/apps-images/i-o-m-vector32.png" alt="i-o-m-vector32" width="32" height="32" /></td>
 111                 <td><img src="../../images/apps-images/i-o-m-vector64.png" alt="i-o-m-vector64" width="64" height="64" /></td>
 112                 <td><img src="../../images/apps-images/i-o-m-vector128.png" alt="i-o-m-vector128" width="128" height="128" /></td></tr>
 113
 114 </table>
 115
 116 <h2>
 117 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
 118 <a id="icons-attributes" name="icons-attributes">图标属性</a></h2>
 119 <p>图标保存为相应文件的属性。但是，这也并不意味着，每个文件都必须具有该属性，并在文件浏览器窗口中显示为图标：数据文件从其文件类型继承图标。您可以使用 <span class="app">文件类型</span> 首选项全局修改文件类型的图标。如果您只希望为单个文件添加图标，您可以使用其中的 <span class="app">文件类型附加组件</span>。更多信息请查阅 <a href="../filetypes.html">文件类型</a>。</p>
 120 <div class="box-info">图标作为属性之一，只有支持元数据的文件系统才可以保留文件的单独图标。因此，如果您需要从 BFS 卷发送文件，请考虑将它们打包，这样可以保留它们的图标和其他属性。</div>
 121
 122 <h2>
 123 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
 124 <a id="i-o-m" name="i-o-m">创建图标</a></h2>
 125 <p>图标套件是 Haiku 的图标编辑工具，它允许您将作品保存成为 HVIF，SVG 或者 PNG 格式。图标也可以直接用作某个文件的属性，或者导出为开发者可以使用的资源或源文件。因为应用程序可以剪裁为优化的 HVIF 格式，它的用法也反映了该格式的内部结构。</p>
 126 <p>不同于普通的矢量绘图软件，你不会面对包括着众多属性（如路径、笔画粗细、笔画和填充色等等）的单独的对象。 你要把你共享路径（“模型”）、颜色（“样式”）的对象组合起来，并给他们设置特定的属性。这种元素重复的方法就是HVIF图标高效率的秘诀之一。 尽管这可能让图标设计者受到一定限制, 但这样的方法也有一些优点。<br />
 127
 128 比如，通过重复使用路径，几个对象可以通过修改这一个路径而同时改变。比如一个对象和它的阴影，修改他们共享的路径就会让对象本身和它的阴影（可能会发生轻微的畸变）同时改变。</p>
 129
 130 <p>下面是 图标套件 窗口的预览截图：</p>
 131 <img src="../images/apps-images/i-o-m-overview.png" alt="i-o-m-overview.png" />
 132
 133 <p>要在绘图区创建一个可见对象，你需要创建一个拥有路径和样式（颜色）的模型。你可以很容易地从<span class="menu">模型</span> 菜单中创建一个、两个甚至更多模型。 每类对象 (路径，模型，变换和样式) 在其元素对象列表上都有一个菜单, 其中提供了多种命令。 每个元素在 <span class="menu">属性</span> 视图中都有可以进行设置的特定选项。 </p>
 134
 135
 136 <h3>
 137 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
 138 <a id="i-o-m-path" name="i-o-m-path">路径</a></h3>
 139 <p>路径有多个点组成，这些点通过直线或贝塞尔曲线链接。为了在某个路径上添加或修改点，该路径必须处在选中的路径列表中。</p>
 140
 141 <p>点击绘图区域将会创建首个点。在创建首个点时，您可以决定线条为直线或者曲线：简单的点击和释放将会创建直线，按下鼠标按键并且拖动鼠标将会画出贝赛尔曲线。当然，您也可以之后进行修改。</p>
 142
 143 <img src="../../images/apps-images/i-o-m-path-ab.png" alt="i-o-m-path-ab" />
 144
 145 <p>为了将 A 中的图形修改为 B 中的样式，你需要把一些边角点转换成曲线点。在点击该点后，按下 <span class="key">ALT</span> 键同时拖拽该点即可完成该操作。 该操作可以画出匀称的贝塞尔曲线：点与点之间将随着彼此的移动而改动。如果你只需要移动单个点，则只需要在拖拽时按下 <span class="key">ALT</span> 键。<br />
 146 反之亦然，把曲线点转换成边角点，则按下 <span class="key">ALT</span> 键，然后点击相应点。</p>
 147
 148 <p>移动点时，只需要点击该点并拖拽即可。要选中多个点，则需要按下 <span class="key">SHIFT</span> 键并用鼠标圈出所要选定的区域。选中的点将显示为红色边框而不是通常的黑色。<br />
 149 在路径中插入点，您点击两点之间的连接线。<br />
 150 按下 <span class="key">DEL</span> 键，或在点击相应点时按下 <span class="key">CTRL</span> 键将会删除选中点。 </p>
 151
 152 <p>鼠标指针指示栏了当前模式：</p>
 153 <table summary="Mouse pointer states, Path" border="0" cellpadding="10">
 154         <tr align="center">
 155                 <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>
 156                 <td><img src="../../images/apps-images/i-o-m-pointer-insert.png" alt="i-o-m-pointer-insert" width="16" height="16" /></td>
 157                 <td><img src="../../images/apps-images/i-o-m-pointer-add.png" alt="i-o-m-pointer-add" width="16" height="16" /></td>
 158                 <td><img src="../../images/apps-images/i-o-m-pointer-delete.png" alt="i-o-m-pointer-delete" width="16" height="16" /></td>
 159                 <td><img src="../../images/apps-images/i-o-m-pointer-bezier.png" alt="i-o-m-pointer-bezier" width="16" height="16" /></td>
 160                 <td><img src="../../images/apps-images/i-o-m-pointer-select.png" alt="i-o-m-pointer-select" width="16" height="16" /></td>
 161         </tr>
 162         <tr align="center">
 163                 <td>移动点</td>
 164                 <td>插入点</td>
 165                 <td>添加点</td>
 166                 <td>删除点 <br /><span class="key">CTRL</span></td>
 167                 <td>平滑曲线<br /><span class="key">ALT</span></td>
 168                 <td>选择点<br /><span class="key">SHIFT</span></td>
 169         </tr>
 170 </table>
 171 <p>您可以通过右键点击某个点或选中点打开一个上下文菜单：</p>
 172 <table summary="Path context" border="0" cellspacing="0" cellpadding="2">
 173 <tr><td class="onelinetop"><span class="menu">全选</span></td><td style="width:70px"><span class="key">ALT</span> <span class="key">A</span></td><td>选中当前路径中的所有点。</td></tr>
 174 <tr><td><span class="menu">压缩</span></td><td><span class="key">T</span></td><td>将所有选中点放置于转换框，这样您可以集中对它们进行移动，自定义大小和旋转。它和模型的运行相似，它将会在下面的内容中讲到。</td></tr>
 175 <tr><td><span class="menu">分割</span></td><td></td><td>将选中点分割为二，两者重叠放置。</td></tr>
 176 <tr><td><span class="menu">翻转</span></td><td></td><td>将选中点旋转 180°。仅对贝塞尔曲线点有效。 </td></tr>
 177 <tr><td><span class="menu">删除</span></td><td><span class="key">DEL</span></td><td>删除选中点。</td></tr>
 178 </table>
 179
 180 <h4><a id="i-o-m-path-menu" name="i-o-m-path-menu">路径菜单</a></h4>
 181 <p><span class="menu">路径</span> 菜单提供了几个选项以 <span class="menu">添加矩形</span> 和 <span class="menu">添加圆形</span> 或 <span class="menu">复制</span> 和 <span class="menu">移除</span> 路径。下面将对某些内容加以详述：</p>
 182
 183 <table summary="Path menu" border="0" cellspacing="0" cellpadding="2">
 184 <tr><td><span class="menu">撤销</span></td><td style="width:15px;"></td><td>如果你的路径不是“闭合的” (参见下述的路径属性)，点击绘图区将总是创建新点，并且将其与最后一个点连接。“反向”将会和顺序相反，您的新点将会链接到原始的起始点。</td></tr>
 185 <tr><td><span class="menu">清除</span></td><td></td><td>对于导入的 SVG 图像非常有用，该功能将移除多余点。</td></tr>
 186 <tr><td class="onelinetop"><span class="menu">顺时针旋转</span></td><td><span class="key">ALT</span> <span class="key">R</span></td><td>实际上，该功能用于旋转路径的开口。在使用具有类型和描边变换的模型的非闭合路径时最为明显。如果您的路径为 ⊂ ，那么旋转后的结果为：⊂ ∩ ⊃ ∪。</td></tr>
 187 <tr><td class="onelinetop"><span class="menu">逆时针旋转</span></td><td><span class="key">ALT</span> <span class="key">SHIFT</span> <span class="key">R</span></td><td>功能同“顺时针旋转”，但方向相反。</td></tr>
 188 </table>
 189
 190 <h4><a id="i-o-m-path-properties" name="i-o-m-path-properties">路径属性</a></h4>
 191 <p>窗口左下角的<span class="menu">属性</span> 提供了当前选中对象的所有可用设置。路径只有两个设置：<span class="menu">名称</span> 和路径是否 <span class="menu">闭合</span> 。</p>
 192
 193
 194 <h3>
 195 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
 196 <a id="i-o-m-shape" name="i-o-m-shape">模型</a></h3>
 197 <p>一个模型组将具有同一样式的路径组织在一起。实际上，它是您可以在绘图区看到的确切对象。编组可以通过路径和样式前的复选框完成：只要选择模型，标出希望的路径和样式即可。</p>
 198 <p>模型定义了路径和样式应用的方法，例如，如果某个对象进行了填充或者描边（这可以通过模型转换来完成，我们之后将进行介绍）。并且，在不改变所用路径的情况下，可以移动，翻转或者自定义模型大小。通过这种方式，您可以复用单个路径来获取相关但不同的模型。</p>
 199
 200 <img src="../../images/apps-images/i-o-m-shape.png" alt="i-o-m-shape" />
 201
 202 <p>当从列表中选择模型时，其周围将会显示出矩形边框。根据您所选取点的不同，模型将会以其中心为基准进行移动，定义大小及翻转，当然中心本身也会移动。在移动，限制翻转角度为 45° 角，定义大小时限制长宽比时，按下 <span class="key">SHIFT</span> 键将会锁定方位。鼠标指针将会指示当前模式：</p>
 203 <table summary="Mouse pointer states, Shape" border="0" cellpadding="10">
 204         <tr align="center">
 205                 <td><img src="../../images/apps-images/i-o-m-pointer-move-shape.png" alt="i-o-m- move-shape" width="16" height="16" /></td>
 206                 <td><img src="../../images/apps-images/i-o-m-pointer-resize.png" alt="i-o-m-pointer-resize" width="16" height="16" /></td>
 207                 <td><img src="../../images/apps-images/i-o-m-pointer-rotate.png" alt="i-o-m-pointer-rotate" width="16" height="16" /></td>
 208                 <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>
 209         </tr>
 210         <tr align="center">
 211                 <td>移动</td>
 212                 <td>定义大小</td>
 213                 <td>旋转</td>
 214                 <td>移动<br />旋转点</td>
 215         </tr>
 216 </table>
 217
 218 <p>模型出于所有其他图形内容之上，如果您愿意，你可以将所有的图形都处在独自的层。如果希望重新进行排序，您可以将它们拖动到列表中的其他位置。</p>
 219
 220 <h4><a id="i-o-m-shape-menu" name="i-o-m-path-menu">模型菜单</a></h4>
 221 <p><span class="menu">模型</span> 菜单提供上文提到的功能 <span class="menu">添加具有路径/样式/路径和样式的空模型</span>，以及 <span class="menu">复制</span> 或 <span class="menu">移除</span> 模型。除此还有以下功能：</p>
 222 <table summary="Shape menu" border="0" cellspacing="0" cellpadding="2">
 223 <tr><td><span class="menu">重置转换</span></td><td style="width:15px;"></td><td>撤销所有应用于模型的移动，定义大小和翻转转换等操作。</td></tr>
 224 <tr><td class="onelinetop"><span class="menu">冻结转换</span></td><td></td><td>当您变换模型时，其指定路径将保持原位。这可能是有意的；可能多个模型使用那个路径，可能您希望使用 <span class="menu">选项 | Snap to Grid</span> 在像素边界上精确地绘制点。<br />
 225 不然，“冻结变形”将应用当前模型变形到指定路径。而“重置变形”将返回到该新状态。</td></tr>
 226 </table>
 227
 228 <h4><a id="i-o-m-shape-properties" name="i-o-m-shape-properties">模型属性</a></h4>
 229 <p>除了<span class="menu">名称</span>，模型的<span class="menu">属性</span>视图还有以下选项：</p>
 230
 231 <table summary="Shape properties" border="0" cellspacing="0" cellpadding="2">
 232 <tr><td><span class="menu">Min LOD</span></td><td></td><td>最小细节级别</td></tr>
 233 <tr><td><span class="menu">Max LOD</span></td><td></td><td>最大细节级别</td></tr>
 234 </table>
 235
 236 <h5><a id="i-o-m-shape-lod" name="i-o-m-shape-lod">细节级别（LOD）</a></h5>
 237 <table summary="LOD example" border="0" cellpadding="10">
 238         <tr align="center"><td><b>16x16</b></td><td><b>32x32</b></td><td><b>64x64</b></td></tr>
 239         <tr align="center">
 240                 <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>
 241                 <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>
 242                 <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>
 243 </table>
 244 <p>看看为什么 16 像素的 BeVexed 图标上面没有数字？这可以通过模型的 “细节级别” 来完成。<br />
 245 利用 LOD，您可以根据模型尺寸来控制其可见性。这样，您就可以忽略那些在大图标中有很好感官，但在小图标中不很重要的细节。</p>
 246 <p>工作原理：1.0 的细节级别定义为 64 像素的图标尺寸。为了获取某个特别图标尺寸的细节级别，您只需要将其除以 64 即可得到，如，16 像素的细节级别为 16/64 = 0.25。细节级别小于 <span class="menu">Min LOD</span> 和大于 <span class="menu">Max LOD</span> 的模型将是不可见的。</p>
 247 <p>因此，如果您设置模型的 <span class="menu">Min LOD</span> 和 <span class="menu">Max LOD</span> 分别为 0.0 和 0.5 ，那么这也就意味着只有图标尺寸小于或者 <i>等于</i> 32 像素的模型才是可见的。如果您希望排除 32 位像素的图标尺寸，那么您必须使其小于 0.5，比如 0.49。 </p>
 248 <p>细节级别不仅可用于忽略细节模型，并且如果有需要您可以修改描边宽度为其他尺寸。简单的复制模型，做出修改，并且设置它们的细节级别以显示其中之一。当您无意重叠了模型细节级别，并且奇怪为什么某个尺寸都是可见时，下面就是这些潜在问题的来源...<br />
 249 例如，如果模型 1 在小于 48 像素时显示，而模型 2 在大于 48 像素时显示（LOD：48/64 = 0.75）： </p>
 250
 251 <table summary="LOD values example" border="0" cellpadding="5">
 252 <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>
 253 <tr style="background-color:#F1F1F1"><td rowspan="2" style="vertical-align:middle ; background-color:#FFFFFF"><b>模型 1</b></td><td>Min LOD</td><td>0.00</td><td>Min LOD</td><td>0.00</td></tr>
 254 <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>
 255 <tr><td colspan="6"></td></tr>
 256 <tr style="background-color:#F8F8F8"><td rowspan="2" style="vertical-align:middle ; background-color:#FFFFFF"><b>模型 2</b></td><td>Min LOD</td><td>0.75</td><td>Min LOD</td><td>0.75</td></tr>
 257 <tr style="background-color:#F8F8F8"><td>Max LOD</td><td>4.00</td><td>Max LOD</td><td>4.00</td></tr>
 258 </table>
 259
 260
 261 <h3>
 262 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
 263 <a id="i-o-m-style" name="i-o-m-style">样式</a></h3>
 264 <p>样式可以设置为纯色或一些渐变色。<br />
 265 除了 <span class="menu">调色板</span> 中的预设颜色，您可以通过点击当前颜色来创建新的颜色。并且需要注意，色谱下的滑块可用于设置色板（透明板）。</p>
 266 <img src="../images/apps-images/i-o-m-gradients.png" alt="i-o-m-gradients" />
 267 <p>您可以通过混合颜色创建新的样式，并且很容易地将其拖拽到样式列表。</p>
 268 <p>如果你需要定义渐变色，则需要指定渐变色的类型 （<span class="menu">线性</span>，<span class="menu">射线</span>，<span class="menu">菱形</span>，<span class="menu">锥向</span>）并定义起始色和终止色。这可以通过将颜色从调色板拖拽至渐变色相应的色彩指示区来完成。<br />
 269 当然，您也可以通过移动这些指示区根据个人爱好来改变渐变色的样式。您也可以通过双击渐变色来插入多个指示区添加多种颜色。按下 <span class="key">DEL</span> 将会删除选中指示区。</p>
 270 <p>您可以在绘图区移动，自定义大小或者翻转渐变色的表示框直到满足需要。这也同样适用于模型。</p>
 271
 272 <h4><a id="i-o-m-style-menu" name="i-o-m-style-menu">样式菜单</a></h4>
 273 <p><span class="menu">样式</span> 菜单提供了常用的 <span class="menu">添加</span>，<span class="menu">复制</span> 和 <span class="menu">删除</span> 样式，还有 <span class="menu">重置变换</span> 等操作。</p>
 274
 275 <h4><a id="i-o-m-style-properties" name="i-o-m-style-properties">样式属性</a></h4>
 276 <p><span class="menu">名称</span> 是样式仅有的<span class="menu">属性</span>。</p>
 277
 278
 279 <h3>
 280 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
 281 <a id="i-o-m-transformer" name="i-o-m-transformer">变形</a></h3>
 282 <p>模型可以通过转换来修改其外观。然而，其效果不仅精细，而且还有变形金刚般的魔力...</p>
 283
 284 <h4><a id="i-o-m-transformer-menu" name="i-o-m-transformer-menu">变形添加菜单</a></h4>
 285 <table summary=" Transformer Add menu" border="0" cellspacing="0" cellpadding="2">
 286 <tr><td><span class="menu">轮廓</span></td><td></td><td>为模型添加轮廓线。</td></tr>
 287 <tr><td><span class="menu">描边</span></td><td></td><td>为模型路径描边而不是填充为某种样式。</td></tr>
 288 </table>
 289
 290 <p>根据变形种类的不同，您所取得的属性也不相同。</p>
 291
 292 <h4><a id="i-o-m-transformer-properties" name="i-o-m-transformer-properties">变形属性</a></h4>
 293 <p>除了变形的 <span class="menu">名称</span> 和实际 <span class="menu">宽度</span> ，<span class="menu">属性</span> 视图具有以下（根据其类别有些微变化）选项：</p>
 294 <table summary="Transformer properties" border="0" cellspacing="0" cellpadding="2">
 295 <tr><td><span class="menu">端点形式</span></td><td style="width:15px;"></td><td><i>仅适用于描边</i>。定义线条的结束端点：<span class="menu">楔形</span>，<span class="menu">方形</span> 或 <span class="menu">圆形</span>。</td></tr>
 296 <tr><td><span class="menu">检测方向</span></td><td></td><td><i>仅适用于轮廓</i>。决定轮廓位于路径之外或之内。 </td></tr>
 297 <tr><td><span class="menu">连接形式</span></td><td></td><td>定义线与线连接方式：<span class="menu">斜线</span>，<span class="menu">圆弧</span> 或 <span class="menu">倒角</span>。</td></tr>
 298 <tr><td><span class="menu">联接限制</span></td><td></td><td>仅当上述的 <span class="menu">连接形式</span> 设置为 “斜线” 时，该设置才会作用于斜线连接的外观。  </td></tr>
 299 </table>
 300
 301
 302 <h3>
 303 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
 304 <a id="i-o-m-save" name="i-o-m-save">保存图标</a></h3>
 305 <p>窗口顶部是常见的菜单栏，<span class="menu">文件</span>，<span class="menu">编辑</span>，<span class="menu">选项</span> 等。它们的用法都非常容易理解，因此我们只需要了解如何保存您的作品。</p>
 306 <p><span class="menu">文件 | 保存为...</span> 将会保存为特别的图标套件格式，它将保持附加信息，如路径名称，模型和样式。如果您希望到处以节省空间，这些信息都将会从图表中移除。但是使用这种方式备份您的作品比较好，因为如果没有对象的名称，所有的内容都将会命名为 “&lt;path&gt;/&lt;shape&gt;/&lt;style&gt;” ，这样将使修改非常繁杂。</p>
 307
 308 <p><span class="menu">文件 | 导出为...</span> 打开一个类似的文件保存面板，其底部有一个文件格式的弹出菜单，提供了如下选择：</p>
 309 <table summary="file formats" border="0" cellspacing="0" cellpadding="2">
 310 <tr><td>HVIF</td><td style="width:15px;"></td><td>Haiku 矢量图标格式</td></tr>
 311 <tr><td>HVIF RDef</td><td></td><td>保存为程序员使用的资源</td></tr>
 312 <tr><td>HVIF Source Code</td><td></td><td>保存为程序员使用的源代码。</td></tr>
 313 <tr><td>SVG</td><td></td><td>保存为 SVG</td></tr>
 314 <tr><td>PNG</td><td></td><td>保存为 64 像素 PNG</td></tr>
 315 <tr><td>PNG Set</td><td></td><td>保存为 16，32 和 64 像素 PNG</td></tr>
 316 <tr><td>BEOS:ICON Attribute</td><td></td><td>选择文件并直接设置其图标属性</td></tr>
 317 <tr><td>META:ICON Attribute</td><td></td><td>选择文件并将鼠标附加为元数据</td></tr>
 318 </table>
 319
 320
 321 <h3>
 322 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
 323 <a id="i-o-m-tips" name="i-o-m-tips">提示与技巧</a></h3>
 324 <p>在使用图标套件时，您需要注意一些东西，还有一些常用的使用提示：</p>
 325 <ul>
 326 <li><p>阅读 <a href="https://www.haiku-os.org/development/icon-guidelines">图标指南</a>，学习 Haiku 图标的重要特性，如，透视，色彩，以及阴影。 </p></li>
 327 <li><p>您需要尽量少的使用路径，因为它们非常占用空间。尽量多的重用路径，并且精巧的处理模型及其变体。合理利用渐变色也可以节省空间。</p></li>
 328 <li><p>如果有需要，在编辑路径时可以从 <span class="menu">选项</span> 菜单中启用对齐到网格。对齐到 64x64 网格的点会占用更少的储存空间。如果点都精确地定位于像素边界，您的作品将会获得最清爽的观感。例如，将最突出的轮廓对齐到 16x16 网格非常必要。</p></li>
 329 <li><p>检查预览，查看是否您的图标在 16x16 模式下有好的观感。您可能需要使用模型那一节中所描述到的 <a href="#i-o-m-shape-lod">细节级别</a> 设置。</p></li>
 330 <li><p>尽管图标套件不提供文字处理工具，但仍有简单的方法用以创建字符。只要在文本编辑器中输入字符，如 StyledEdit，调整字体的类型和样式，然后将其拖拽或者复制粘贴到图标套件中即可。这样将会创建相应的路径和模型。</p></li>
 331 <li><p>如果您为单个模型定义了多个路径，它们的重叠区域将会互相抵消。当某个路径完全位于其他路径中时，它将在该模型中创建一个空洞。</p></li>
 332 <li><p>您可以使用鼠标转轮缩放绘图区域。镜头移动可以通过鼠标中键拖拽或按下 <span class="key">SPACE</span> 时拖拽鼠标左键完成。</p></li>
 333 </ul>
 334
 335
 336 <!--
 337 <h3>
 338 <a href="#"><img src="../../images/up.png" style="border:none;float:right" alt="index" /></a>
 339 <a id="i-o-m-workshops" name="i-o-m-workshops">Workshops</a></h3>
 340 <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>
 341 <ul>
 342 <li><a href="">Paths</a></li>
 343 <li><a href="">Shapes</a></li>
 344 <li><a href="">Styles</a></li>
 345 <li><a href="">Transformers</a></li>
 346 <li><a href="">Optimizing icons</a></li>
 347 <li><a href=""></a></li>
 348 </ul>
 349 -->
 350
 351 </div>
 352 </div>
 353
 354 <div class="nav">
 355 <div class="inner"><span>
 356 «  <a href="haikudepot.html">HaikuDepot</a>
 357 ::  <a href="../applications.html#list-of-apps" class="uplink">应用程序
 358 </a>
 359 ::  <a href="installer.html">Installer</a>  »
 360 </span></div>
 361 </div>
 362
 363 </body>
 364 </html>