インデックス
BeOS ビットマップアイコン vs. Haiku ベクターアイコン
アイコンは属性
Icon-O-Matic でアイコンを作成する
パス
シェイプ
スタイル
Transformer
アイコンを保存する
Tips & Tricks

icon-o-matic-icon_64.pngIcon-O-Matic

Deskbar:Applications
場所:/boot/system/apps/Icon-O-Matic
設定ファイル:~/config/settings/Icon-O-Matic


Icon-O-Matic を使った実際のアイコン作成の前に、少し Haiku アイコンの一般的な話をします。

index BeOS ビットマップアイコン vs. Haiku ベクターアイコン

BeOS とは違い、Haiku はビットマップアイコンではなくベクターアイコンを採用しています。Haiku Vector Icon Format (HVIF) はファイルサイズの最適化と高速なレンダリングを目的に開発されたので、たいていの場合、Haiku のアイコンはビットマップや一般的な SVG 形式よりも非常に小さなサイズになります。また、Haiku のアイコンは BeOS のビットマップアイコンとは異なり、色が 8 ビット (256 色) に限られていません。
たとえば、ターミナルのアイコンを例にすると、

ビットマップアイコンSVGHVIF
i-o-m-terminal-bitmap32 i-o-m-terminal-bitmap16terminal-icon_32terminal-icon_32
1,024 byte
+ 256 byte
7,192 byte 768 byte

BeOS のビットマップアイコンはリストやアイコン表示モードでもきれいに見えるように 16x16 と 32x32 の 2 種類のサイズが用意されています。

ベクターアイコンでは、このトリックは必要ありません。ベクターアイコンはたった数百バイトの容量で、ビットマップよりもきれいに拡大縮小できます。

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 アイコンは属性

アイコンはファイルの属性として設定されます。しかしそれは、Tracker ウィンドウでアイコンが表示されるために、すべてのファイルがこの属性を持つ必要があることを意味しません。たとえば、データファイルはファイルタイプからアイコンを継承します。ファイルタイプ全体に対するアイコンを設定するには、FileTypes プリファレンスを使用してください。また、個々のファイルに特別なアイコンを設定するには、FileType アドオンを使用してください。詳しくはファイルタイプのトピックを見てください。

属性であるため、ファイルの個々のアイコンはメタデータの格納をサポートしているファイルシステムでしか保存できません。そのため、ファイルを BFS パーティションから移動させるときにアイコンなどの属性を失わないように、zip での圧縮を検討ください。

index Icon-O-Matic でアイコンを作成する

Icon-O-Matic は Haiku のアイコンエディタで、HVIF、SVG、PNG 形式での保存をサポートしています。アイコンは、既存のファイルに属性として直接添付することも、開発者が使用するリソースやソースファイルとしてエクスポートすることもできます。このアプリケーションは HVIF 形式に最適化されているので、その内部仕様を編集できます。

ほかの一般的なベクターグラフィックソフトとは異なり、パスや輪郭線の幅、塗りの色などを個々に処理しません。正確に言えば、オブジェクト ("シェイプ") を共有パスと色 ("スタイル") から組み立てて、いくらかのプロパティを設定します。この要素を再利用する仕組みはHVIF の効率性を高めています。それは、アイコンデザインにいくつかの制約を課しますが、少し利点もあります。
たとえば、パスの再利用により、1 つのパスの操作でいくつかのオブジェクトをまとめて変更できます。オブジェクトとその影のことを考えましょう。共有パスを変更すると、オブジェクト自身が変化し、また、その (おそらく、すこし歪んだ / 平行移動した) 影も自動的に変化します。

下の画像が、Icon-O-Matic のウィンドウの概観です。

i-o-m-overview.png

キャンバスに可視のオブジェクトを作るには、パスとスタイルを持ったシェイプを選ぶ必要があります。都合の良いことに、1 つ、2 つ、3 つすべてのシェイプを同時にシェイプ (Shape) メニューから作成できます。あらゆる種類のオブジェクト (パス、シェイプ、Transformer およびスタイル) は、その要素のリストの上にメニューを持っています。すべての要素は、プロパティメニューで設定されるできるいくつかのオプションを備えています。

index パス

パスは直線かベジェ曲線で繋がったいくつかの点から構成されています。点の追加や変更を行うには、パスがパスリストで選択されていることを確認ください。

単純にキャンバスでクリックすると最初の点が決まります。点を設定している間、生成される線を直線になるか曲線になるかを決定します。単にクリックして離すと直線を生成し、マウスボタンを押してマウスを動かすと、ベジェ曲線用のハンドルが引き出されます。もちろん、あとから同様にすべて変更できます。

i-o-m-path-ab

A から B へ変更するには、いくつかの点を頂点 (corner-points) から曲線ポイント (curve-points) へ変換する必要があります。それは、ALT を押しながら点をクリックし、ハンドルを引き出すことでできます。この結果、対象的なベジェ曲線となります。ハンドルは、組のハンドルの動きに追従します。もしハンドルを別々に動かす必要があれば、ベジェハンドルをクリックして、ALT を押しながらドラッグします。逆に、曲線ポイントを頂点に戻すには、ALT を押しながら点をクリックしてください。

点の移動は、単にクリックして、ドラッグするだけです。複数の点を選択するには、SHIFT を押しながら四角形を書きます。選択された点は通常の黒色の代わりに赤枠で囲まれます。
パスに点を追加するには、2 点間の線上をクリックします。また、選択された点は、 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

ひとつの点か選択された点を右クリックするとコンテキストメニューが表示されます。

すべて選択 (Select all)ALT A現在のパスの点をすべて選択。
変更する (Transform) ALT T選択された点がすべてトランスフォームボックスでまとめられて、移動、リサイズ、回転を一気に行えます。ちょうど後で説明されるシェイプのような働きをします。
分割 (Split)点が同じ座標に位置するように 2 つに分ける。
反転 (Flip)選択された点を 180° 回転。ベジェ曲線上の点のみで有効。
削除 (Remove)DEL選択された点を削除。

パスのメニュー

パスのメニューには四角形を追加 (Add rectangle)円を追加 (Add circle)複製 (Duplicate)削除 (Remove) などの明快な項目がたくさんあるので、説明が必要なものだけ紹介します。

反転 (Reverse)パスが「閉じていない」場合 (パスのプロパティを参照)、キャンバスをクリックすると点が作られて最後に作られた点と繋げられるが、「反転」を押すと、作った点が最初の点と繋げられるようになる。
クリーンアップ
(Clean up)
冗長な点を削除する機能で、SVG を開くときに有用。
インデックスを正回転
(Rotate indices right)
ALT R実際に、これはパスの開いた部分を回転します。パスが、スタイルと、ストローク transformer を持つシェイプを備えているとき、一番よく判るでしょう。たとえば、パスが⊂のような形をしていたなら、次のように回転します ⊂ ∩ ⊃ ∪
インデックスを逆回転
(Rotate indices left)
ALT SHIFT R上と同じ事を逆順で行う。

パスのプロパティ

ウィンドウ下部のプロパティメニューで現在選択されているオブジェクトの設定ができます。パスは以下の 2 つのみの設定を持ちます。名前 (Name)、および閉じている (Closed) かどうかです。

index シェイプ

シェイプは 1 つ以上のスタイルを持つパスの寄せ集めです。事実上、それは実際にユーザーがキャンバス上で見るオブジェクトです。グルーピングは、パスとスタイルの前にあるチェックボックスで行います。シェイプを選択して、希望するパスとスタイルをチェックするだけです。

シェイプは、パスやスタイルがどのように適用されるかを定義します。たとえば、オブジェクトを塗りつぶすのか輪郭線だけ色を塗るのか (これにはシェイプ上の Transformer が使われますが、詳しくは後述)。また、シェイプは、使用済みパスを操作することなく移動、回転やリサイズができます。そのようにして、1 つのパスを再利用して、異なった、しかし関連したシェイプを得られます。

i-o-m-shape

シェイプがリストから選択されると、シェイプの周りに四角形が現れます。その四角形を掴んだところに応じて、シェイプは移動、リサイズ、または中央の点 (この点を移動させることもできます) を中心に回転します。SHIFT を押しながら操作すると、移動方向が固定され、回転が 45 度単位に制限され、またリサイズ時に縦横比を変えません。
パスの場合と同様に、マウスポインターで現在のモードが表示されます。

i-o-m- move-shape i-o-m-pointer-resize i-o-m-pointer-rotate i-o-m-pointer-move-rotation
移動 拡大 回転 回転の中心を移動させる

シェイプは互いに重なり合っています。可能ならばそれぞれ自身のレイヤー上にあります。重ね順を変更するには、リストで項目をドラッグ&ドロップして異なる場所へドロップしてください。

シェイプのメニュー

シェイプのメニューには空のシェイプを追加するパスとともに追加スタイルと共に追加パスとスタイルつきで追加複製削除のほかに、このような項目があります。

変形をリセット (Reset transformation)シェイプに対して行ったすべての移動、リサイズ、回転を元に戻す。
変形を維持する (Freeze transformation)シェイプを変形させたときに、それに割り当てられたパスは元々の場所から動きません。これは意図したことかもしれません。たぶん複数のシェイプがそのパスを使っているなら、おそらく意図的にオプション | グリッドに沿う (Options | Snap to grid) を使って、正確なピクセル境界に点を打つでしょう。
そうでなければ、「変形を維持する (Freeze transformation)」が現在のシェイプの変形を割り当てられたパスに適用するでしょう。その後の「変形をリセット (Reset Transformation)」は、この新しい状態へ戻ります。

シェイプのプロパティ

名前のほかにプロパティには以下のような設定があります。

Min LODLevel of Detail の最小値
Max LODLevel of Detail の最大値
Level of Detail (LOD)
16x1632x3264x64
i-o-m-lod-icon_16 i-o-m-lod-icon_32 i-o-m-lod-icon_64

BeVexed のアイコンを見てもらうと、16px バージョンには数字が書かれていないのがわかるはずです。これは「Level of Detail」によって設定されています。
LOD によって、アイコンをサイズにあわせて見えやすくできます。大きなアイコンは遠くからでもはっきり見えるように、小さなアイコンは識別しやすいようにできます。

LOD 1.0 は 64px サイズのアイコンを意味します。LOD はアイコンのサイズを 64px で割った数で表されます。たとえば、16px サイズのアイコンの LOD は 16/64 = 0.25 となります。LOD が Min LOD より小さいときや、Max LOD より大きいときにシェイプを表示させないように設定できます。

Min LOD を 0.0 に、Max LOD を 0.5 に設定したとすると、そのシェイプはアイコンサイズが 32px より小さいか等しい時にのみ表示されます。32px の時に表示したくないならば、Max LOD を 0.49 にする必要があります。

LOD はシェイプの表示 / 非表示を切り替えるだけでなく、必要と感じるならサイズによって輪郭線の幅を変えるなどということもできます。シェイプをコピーして、一部だけ変更してそれぞれに異なる LOD を指定すればいいのです。ここに潜在的な混乱の元があります。無意識のうちに LOD を重複させると、なぜあるサイズではどちらも見えてしまうのか悩みます…
たとえば、Shape 1 は 48px 未満のサイズの時に、Shape 2 は 48px 以上のサイズで表示されます (LOD: 48/64 = 0.75)。

OKNot OK!
Shape 1Min LOD0.00Min LOD0.00
Max LOD0.74Max LOD0.75
Shape 2Min LOD0.75Min LOD0.75
Max LOD4.00Max LOD4.00

index スタイル

スタイルは、ベタ塗りか数種類のグラデーションとなります。
見本 (Swatches) の下にある色のほかに、現在の色をクリックして、色を混ぜて独自の色を作り出せます。また、色スライダーの下にアルファチャンネル (透明度) を設定するスライダーがあることに注意ください。

i-o-m-gradients

色を混ぜてスタイルのリストにドラッグ&ドロップすれば、素早く新しいスタイルを作れます。

グラデーションを使用するなら、種類をライナー (Linear)ラジアル (Radial)ダイアモンド (Diamond)コニカル (Cone) から選び、開始色と終了色を選んでください。色を見本からグラデーションへドラッグ&ドロップすることで選択できます。
もちろん、インジケーターを移動させてグラデーションを好きなように変化させられます。また、グラデーションをダブルクリックするとインジケーターを追加して色を追加できます。DEL を押すとインジケーターを消せます。

キャンバス上でグラデーションの適応範囲を表すボックスの移動、リサイズ、回転ができます。これはシェイプと同じように動作します。

スタイルのメニュー

スタイルのメニューには追加複製削除変形をリセットの、いつもの項目があります。

スタイルのプロパティ

スタイルのプロパティ名前だけです。

index Transformer

シェイプは、その見た目を変化させる Transformer を持てます。しかし、その効果は、トラックが戦闘ロボットに変形するよりもかすかなものですが…

Transformer のメニュー

コンター (Contour)シェイプにアウトラインを追加。
ストローク (Stroke)シェイプ全体にスタイルを適用させるのではなく、パスの部分のみに適用させるように変更。

それぞれの Transformer に対し、異なるプロパティセットが用意されています。

Transformer のプロパティ

プロパティには名前のほかに、以下のような項目があります。

頂点 (Caps)ストロークのみ。線の終端の形状を ButtSquareRound から選択できます。
向きを検出する (Detect orient)コンターのみ。Transformer を作用させる場所をパスの内側にするか外側するか、選択できます。
結合 (Joins)線の接続部の形を MiterRoundBevel から選択できます:
マイターリミット (Miter limit)上記の結合を "Miter" に設定している時のみ、接続部の見た目を設定できます。

index アイコンを保存する

トップにあるメニューバーにはファイル (File)編集 (Edit)オプション (Options) の項目があります。使い方はほとんど自明なので、保存方法についてのみ説明します。

ファイル | 別名で保存... (File | Save as...) を使用すると、パスやシェイプやスタイルなどの追加情報を含んだ Icon-O-Matic フォーマットで保存されます。追加情報は実際のアイコンとして使用する際に削除されます。「パス/シェイプ/スタイル」という名前で変更ごとにファイルを保存するよりは、この形式で保存したほうがバックアップに向いているでしょう。

ファイル | 別形式でエクスポート... (File | Export as...) を押すと保存パネルが開きます。下側のポップアップメニューで以下の選択肢から保存形式を選べます。

HVIFHaiku Vector Icon Format として保存
HVIF RDefリソースファイルとして保存 (開発者向け)
HVIF ソースコードソースコードとして保存 (開発者向け)
SVGSVG として保存
PNG64px のサイズの SVG として保存
PNG セット (PNG set)16, 32, 64px のサイズの SVG として保存
BEOS:ICON 属性ファイルを選択し、直接アイコン属性を設定
META:ICON 属性ファイルを選択し、メタデータとしてアイコンを添付

index Tips & Tricks

Icon-O-Matic を使う上でのいくつかの注意点とヒント: