« ファイル解凍 :: アプリケーション :: インストーラー »
インデックス
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 の内部仕様を編集できます。

ほかの一般的なベクトルグラフィックソフトとは異なり、パスや輪郭線の幅、塗りの色などを個々に調整する必要はありません。リストからオブジェクト (シェイプ) や色 (スタイル) を選択して、プロパティを設定することで描画できます。このパーツの再利用を行う仕組みはデザインに制約が課しますが、HVIF の効率性を高めています。
たとえば、パスを再利用することでいくつかのオブジェクトを一つのパスからまとめて変更することができます。パスを変更するだけでオブジェクトの影も自動的に調整される、といったことも可能になります。

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

i-o-m-overview.png

キャンバスにオブジェクトを作るには、シェイプメニューからシェイプとパスとスタイルを選ぶ必要があります。すべてのオブジェクト(パス, シェイプ, スタイル, Transformer)の要素のリストがそれぞれ用意されていて、プロパティメニューから要素のオプションを設定できます。

index パス

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

キャンバスでクリックをすると最初の点が決まります。パスを作っていくときに、クリックで点を追加していくと直線で、クリックしたままドラッグするようにマウスを動かしていくと曲線で点が結ばれていきます。当然、あとから直線と曲線を変更することもできます。

i-o-m-path-ab

「A」の状態から「B」へ変更するには、直線を曲線へと変更させる必要があります。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

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

すべて選択ALT A現在のパスのすべての点を選択します。
変更するALT T選択された点がすべてトランスフォームボックスでまとめられて、移動、サイズ変更、回転を一気に行うことができます。ちょうど後で説明されるシェイプのような働きをします。
分割点が同じ座標に位置するように 2 つに分けられます。
反転選択された点が 180° 回転します。直線では変化が起こりません。
削除DEL選択された点を削除します

パスのメニュー

パスのメニューには四角形を追加・円を追加・複製・削除などの明快なエントリがたくさんあるので、説明が必要なものだけ紹介します。

反転パスが「閉じていない」場合(パスのプロパティを参照)、キャンバスをクリックすると点が作られて最後に作られた点と繋げられます。ですが、「反転」を押すと、作った点が最初の点と繋げられるようになります。
クリーンアップ冗長な点を削除する機能で、SVGを開くときに有用です。
インデックスを順に辿るALT R閉じていないパスの線で結ばれていない部分が順に移って行きます。たとえば、パスが⊂のような形をしていたなら、形は次のように移っていきます: ⊂ ∩ ⊃ ∪
インデックスを逆順に辿るALT SHIFT R上と同じ事を逆順で行います。

パスのプロパティ

ウィンドウの下部にあるプロパティメニューで現在選択されているオブジェクトの設定を行えます。パスは次の 2 つの設定ができます:名前, 閉じている

index シェイプ

シェイプはいくつかのパスとスタイルの集合として、キャンバスではオブジェクトのように表されます。パスとスタイルのグルーピングは、シェイプを選択した状態で、それぞれのリストのチェックボックスから設定できます。

シェイプは、パスやスタイルがどのように適応されるか、たとえば、塗りつぶすのか輪郭線だけ色を塗るのか (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
移動 拡大 回転 回転の中心を移動させる

シェイプのレイヤーを分けることも可能です。重ね順を変更するには、リストでエントリをドラッグアンドドロップしてください。

シェイプのメニュー

シェイプのメニューには空のシェイプを追加する・パスとともに追加・スタイルと共に追加・パスとスタイルつきで追加・複製・削除といったものの他にこのようなエントリがあります。

変形をリセットシェイプに対するすべての移動、サイズ変更、回転を元に戻します。
変形を維持するシェイプを変形させたときに、パスはもともとの場所から動きません。もし、パスを2つ以上つかっているなら、オプション | グリッドに沿うを正確に点をうつために使っていることでしょう。
「変形を維持する」を使うと、「変形をリセット」してもその時点までしか戻らなくなります。

シェイプのプロパティ

名前の他にプロパティにはこんな設定があります。

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 スタイル

スタイルはある一つの色か数種類の色によるグラデーションとして表されます。
見本の下にある色の他に、現在の色をクリックすることで色をあわせて作り出すことができます。また、色のスライダーの下にアルファチャンネル (透明度) のスライダーがあります。

i-o-m-gradients

色をスタイルのリストにドラッグ＆ドロップすることで、簡単に色を混ぜて新しいスタイルをつくることができます。

グラデーションを使用するなら、タイプをライナー・ラジアル・ダイアモンド・コニカルから選び、始まりと終わりの色を選んでください。見本から色をグラデーションへドラッグ＆ドロップすることで選択できます。
もちろん、インジケーターを移動させてグラデーションをあなたの好きなように変化させることができます。また、色を追加するために、グラデーションをダブルクリックすることでインジケーターを追加できます。DEL を押すことでインジケーターを消せます。

キャンバスでグラデーションの適応範囲を表すボックスをシェイプと同じように動かしたり、サイズ変更したり、回転させたりできます。

スタイルのメニュー

スタイルのメニューには追加・複製・削除・変形をリセットといったエントリがあります。

スタイルのプロパティ

スタイルのプロパティは名前のみです。

index Transformer

Transformer を使うとシェイプの見た目を変化させることができます。トラックが戦闘ロボットになるような、そんな劇的な効果があるわけではないですが....

Transformer のメニュー

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

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

Transformer のプロパティ

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

頂点ストロークのみ。線の終端の形状を次のうちから選択できます: Butt・Square・Round
向きを検出するコンターのみ。Transformer を作用させる場所をパスの内側にするか外側するか、選択できます。
結合線の接続部の形を次のうちから選択できます: Miter, Round or Bevel.
マイターリミット上の結合を"Miter"に設定している時のみ、接続部の見た目を設定できます。

index アイコンを保存する

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

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

ファイル | 別形式でエクスポート...を押すと保存パネルが開きます。真ん中のポップアップメニューで保存形式を以下の選択肢から選ぶことができます。

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

index Tips & Tricks

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

« ファイル解凍 :: アプリケーション :: インストーラー »