索引
BeOS 位图图标 VS Haiku 矢量图标
图标属性
创建图标
路径
模型
样式
变形
保存图标
提示与技巧

icon-o-matic-icon_64.png图标套件

桌面栏:应用程序
位置:/boot/system/apps/Icon-O-Matic
设置:~/config/settings/Icon-O-Matic


在正式开始使用图标套件创建图标之前,我们需要了解一些有关 Haiku 图标的基本信息。

index 位图图标 VS 矢量图标

与 BeOS 不同,Haiku 使用矢量图标而非点阵图标。Haiku 项目已经开发了一种特殊的矢量图标格式(HVIF),并且对文件大小和快速渲染做了充分的优化。这就是我们的大部分图标所占的空间要比点阵图标和常用的 SVG 格式图标小 非常多 的原因。同时,和 BeOS 的点阵图标不同,Haiku 图标并没有限制于 8 位的调色板(256 色)。
以下面的终端图标为例:

点阵图标SVGHVIF
i-o-m-terminal-bitmap32 i-o-m-terminal-bitmap16terminal-icon_32terminal-icon_32
1,024 字节
+ 256 字节
7,192 字节 768 字节

注意,BeOS 使用l两种图标尺寸,16x16 和 32x32,分别为了在列表和图标视图模式获得良好的视觉效果。

矢量图标则无需这种技巧。它们除了仅需使用几百字节的空间,而且缩放效果也要比点阵图标好很多。(注意:BeOS 仅提供了16x16 和 32x32 两种图标。)

16x1632x3264x64128x128
点阵图标 i-o-m-bitmap16 i-o-m-bitmap32 i-o-m-bitmap64 i-o-m-bitmap128
矢量图标 i-o-m-vector16 i-o-m-vector32 i-o-m-vector64 i-o-m-vector128

index 图标属性

图标保存为相应文件的属性。但是,这也并不意味着,每个文件都必须具有该属性,并在文件浏览器窗口中显示为图标:数据文件从其文件类型继承图标。您可以使用 文件类型 首选项全局修改文件类型的图标。如果您只希望为单个文件添加图标,您可以使用其中的 文件类型附加组件。更多信息请查阅 文件类型

图标作为属性之一,只有支持元数据的文件系统才可以保留文件的单独图标。因此,如果您需要从 BFS 卷发送文件,请考虑将它们打包,这样可以保留它们的图标和其他属性。

index 创建图标

图标套件是 Haiku 的图标编辑工具,它允许您将作品保存成为 HVIF,SVG 或者 PNG 格式。图标也可以直接用作某个文件的属性,或者导出为开发者可以使用的资源或源文件。因为应用程序可以剪裁为优化的 HVIF 格式,它的用法也反映了该格式的内部结构。

不同于普通的矢量绘图软件,你不会面对包括着众多属性(如路径、笔画粗细、笔画和填充色等等)的单独的对象。 你要把你共享路径(“模型”)、颜色(“样式”)的对象组合起来,并给他们设置特定的属性。这种元素重复的方法就是HVIF图标高效率的秘诀之一。 尽管这可能让图标设计者受到一定限制, 但这样的方法也有一些优点。
比如,通过重复使用路径,几个对象可以通过修改这一个路径而同时改变。比如一个对象和它的阴影,修改他们共享的路径就会让对象本身和它的阴影(可能会发生轻微的畸变)同时改变。

下面是 图标套件 窗口的预览截图:

i-o-m-overview.png

要在绘图区创建一个可见对象,你需要创建一个拥有路径和样式(颜色)的模型。你可以很容易地从模型 菜单中创建一个、两个甚至更多模型。 每类对象 (路径,模型,变换和样式) 在其元素对象列表上都有一个菜单, 其中提供了多种命令。 每个元素在 属性 视图中都有可以进行设置的特定选项。

index 路径

路径有多个点组成,这些点通过直线或贝塞尔曲线链接。为了在某个路径上添加或修改点,该路径必须处在选中的路径列表中。

点击绘图区域将会创建首个点。在创建首个点时,您可以决定线条为直线或者曲线:简单的点击和释放将会创建直线,按下鼠标按键并且拖动鼠标将会画出贝赛尔曲线。当然,您也可以之后进行修改。

i-o-m-path-ab

为了将 A 中的图形修改为 B 中的样式,你需要把一些边角点转换成曲线点。在点击该点后,按下 ALT 键同时拖拽该点即可完成该操作。 该操作可以画出匀称的贝塞尔曲线:点与点之间将随着彼此的移动而改动。如果你只需要移动单个点,则只需要在拖拽时按下 ALT 键。
反之亦然,把曲线点转换成边角点,则按下 ALT 键,然后点击相应点。

移动点时,只需要点击该点并拖拽即可。要选中多个点,则需要按下 SHIFT 键并用鼠标圈出所要选定的区域。选中的点将显示为红色边框而不是通常的黑色。
在路径中插入点,您点击两点之间的连接线。
按下 DEL 键,或在点击相应点时按下 CTRL 键将会删除选中点。

鼠标指针指示栏了当前模式:

i-o-m-pointer-move-path i-o-m-pointer-insert i-o-m-pointer-add i-o-m-pointer-delete i-o-m-pointer-bezier i-o-m-pointer-select
移动点 插入点 添加点 删除点
CTRL
平滑曲线
ALT
选择点
SHIFT

您可以通过右键点击某个点或选中点打开一个上下文菜单:

全选ALT A选中当前路径中的所有点。
压缩T将所有选中点放置于转换框,这样您可以集中对它们进行移动,自定义大小和旋转。它和模型的运行相似,它将会在下面的内容中讲到。
分割将选中点分割为二,两者重叠放置。
翻转将选中点旋转 180°。仅对贝塞尔曲线点有效。
删除DEL删除选中点。

路径菜单

路径 菜单提供了几个选项以 添加矩形添加圆形复制移除 路径。下面将对某些内容加以详述:

撤销如果你的路径不是“闭合的” (参见下述的路径属性),点击绘图区将总是创建新点,并且将其与最后一个点连接。“反向”将会和顺序相反,您的新点将会链接到原始的起始点。
清除对于导入的 SVG 图像非常有用,该功能将移除多余点。
顺时针旋转ALT R实际上,该功能用于旋转路径的开口。在使用具有类型和描边变换的模型的非闭合路径时最为明显。如果您的路径为 ⊂ ,那么旋转后的结果为:⊂ ∩ ⊃ ∪。
逆时针旋转ALT SHIFT R功能同“顺时针旋转”,但方向相反。

路径属性

窗口左下角的属性 提供了当前选中对象的所有可用设置。路径只有两个设置:名称 和路径是否 闭合

index 模型

一个模型组将具有同一样式的路径组织在一起。实际上,它是您可以在绘图区看到的确切对象。编组可以通过路径和样式前的复选框完成:只要选择模型,标出希望的路径和样式即可。

模型定义了路径和样式应用的方法,例如,如果某个对象进行了填充或者描边(这可以通过模型转换来完成,我们之后将进行介绍)。并且,在不改变所用路径的情况下,可以移动,翻转或者自定义模型大小。通过这种方式,您可以复用单个路径来获取相关但不同的模型。

i-o-m-shape

当从列表中选择模型时,其周围将会显示出矩形边框。根据您所选取点的不同,模型将会以其中心为基准进行移动,定义大小及翻转,当然中心本身也会移动。在移动,限制翻转角度为 45° 角,定义大小时限制长宽比时,按下 SHIFT 键将会锁定方位。鼠标指针将会指示当前模式:

i-o-m- move-shape i-o-m-pointer-resize i-o-m-pointer-rotate i-o-m-pointer-move-rotation
移动 定义大小 旋转 移动
旋转点

模型出于所有其他图形内容之上,如果您愿意,你可以将所有的图形都处在独自的层。如果希望重新进行排序,您可以将它们拖动到列表中的其他位置。

模型菜单

模型 菜单提供上文提到的功能 添加具有路径/样式/路径和样式的空模型,以及 复制移除 模型。除此还有以下功能:

重置转换撤销所有应用于模型的移动,定义大小和翻转转换等操作。
冻结转换当您变换模型时,其指定路径将保持原位。这可能是有意的;可能多个模型使用那个路径,可能您希望使用 选项 | Snap to Grid 在像素边界上精确地绘制点。
不然,“冻结变形”将应用当前模型变形到指定路径。而“重置变形”将返回到该新状态。

模型属性

除了名称,模型的属性视图还有以下选项:

Min LOD最小细节级别
Max LOD最大细节级别
细节级别(LOD)
16x1632x3264x64
i-o-m-lod-icon_16 i-o-m-lod-icon_32 i-o-m-lod-icon_64

看看为什么 16 像素的 BeVexed 图标上面没有数字?这可以通过模型的 “细节级别” 来完成。
利用 LOD,您可以根据模型尺寸来控制其可见性。这样,您就可以忽略那些在大图标中有很好感官,但在小图标中不很重要的细节。

工作原理:1.0 的细节级别定义为 64 像素的图标尺寸。为了获取某个特别图标尺寸的细节级别,您只需要将其除以 64 即可得到,如,16 像素的细节级别为 16/64 = 0.25。细节级别小于 Min LOD 和大于 Max LOD 的模型将是不可见的。

因此,如果您设置模型的 Min LODMax LOD 分别为 0.0 和 0.5 ,那么这也就意味着只有图标尺寸小于或者 等于 32 像素的模型才是可见的。如果您希望排除 32 位像素的图标尺寸,那么您必须使其小于 0.5,比如 0.49。

细节级别不仅可用于忽略细节模型,并且如果有需要您可以修改描边宽度为其他尺寸。简单的复制模型,做出修改,并且设置它们的细节级别以显示其中之一。当您无意重叠了模型细节级别,并且奇怪为什么某个尺寸都是可见时,下面就是这些潜在问题的来源...
例如,如果模型 1 在小于 48 像素时显示,而模型 2 在大于 48 像素时显示(LOD:48/64 = 0.75):

合适不合适!
模型 1Min LOD0.00Min LOD0.00
Max LOD0.74Max LOD0.75
模型 2Min LOD0.75Min LOD0.75
Max LOD4.00Max LOD4.00

index 样式

样式可以设置为纯色或一些渐变色。
除了 调色板 中的预设颜色,您可以通过点击当前颜色来创建新的颜色。并且需要注意,色谱下的滑块可用于设置色板(透明板)。

i-o-m-gradients

您可以通过混合颜色创建新的样式,并且很容易地将其拖拽到样式列表。

如果你需要定义渐变色,则需要指定渐变色的类型 (线性射线菱形锥向)并定义起始色和终止色。这可以通过将颜色从调色板拖拽至渐变色相应的色彩指示区来完成。
当然,您也可以通过移动这些指示区根据个人爱好来改变渐变色的样式。您也可以通过双击渐变色来插入多个指示区添加多种颜色。按下 DEL 将会删除选中指示区。

您可以在绘图区移动,自定义大小或者翻转渐变色的表示框直到满足需要。这也同样适用于模型。

样式菜单

样式 菜单提供了常用的 添加复制删除 样式,还有 重置变换 等操作。

样式属性

名称 是样式仅有的属性

index 变形

模型可以通过转换来修改其外观。然而,其效果不仅精细,而且还有变形金刚般的魔力...

变形添加菜单

轮廓为模型添加轮廓线。
描边为模型路径描边而不是填充为某种样式。

根据变形种类的不同,您所取得的属性也不相同。

变形属性

除了变形的 名称 和实际 宽度属性 视图具有以下(根据其类别有些微变化)选项:

端点形式仅适用于描边。定义线条的结束端点:楔形方形圆形
检测方向仅适用于轮廓。决定轮廓位于路径之外或之内。
连接形式定义线与线连接方式:斜线圆弧倒角
联接限制仅当上述的 连接形式 设置为 “斜线” 时,该设置才会作用于斜线连接的外观。

index 保存图标

窗口顶部是常见的菜单栏,文件编辑选项 等。它们的用法都非常容易理解,因此我们只需要了解如何保存您的作品。

文件 | 保存为... 将会保存为特别的图标套件格式,它将保持附加信息,如路径名称,模型和样式。如果您希望到处以节省空间,这些信息都将会从图表中移除。但是使用这种方式备份您的作品比较好,因为如果没有对象的名称,所有的内容都将会命名为 “<path>/<shape>/<style>” ,这样将使修改非常繁杂。

文件 | 导出为... 打开一个类似的文件保存面板,其底部有一个文件格式的弹出菜单,提供了如下选择:

HVIFHaiku 矢量图标格式
HVIF RDef保存为程序员使用的资源
HVIF Source Code保存为程序员使用的源代码。
SVG保存为 SVG
PNG保存为 64 像素 PNG
PNG Set保存为 16,32 和 64 像素 PNG
BEOS:ICON Attribute选择文件并直接设置其图标属性
META:ICON Attribute选择文件并将鼠标附加为元数据

index 提示与技巧

在使用图标套件时,您需要注意一些东西,还有一些常用的使用提示: