360 lines
36 KiB
HTML
360 lines
36 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-2013, Haiku. All rights reserved.
|
||
* Distributed under the terms of the MIT License.
|
||
*
|
||
* Authors:
|
||
* Humdinger <humdingerb@gmail.com>
|
||
* Translators:
|
||
* hiromu1996
|
||
* log-1
|
||
* mt
|
||
*
|
||
-->
|
||
<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/jp.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="../../ru/applications/icon-o-matic.html"><img src="../../images/flags/ru.png" alt="" />Русский</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="" />Svenska</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="../../fi/applications/icon-o-matic.html"><img src="../../images/flags/fi.png" alt="" />Suomi</a></li>
|
||
<li><a href="../../sk/applications/icon-o-matic.html"><img src="../../images/flags/sk.png" alt="" />Slovenčina</a></li>
|
||
<li><a href="../../hu/applications/icon-o-matic.html"><img src="../../images/flags/hu.png" alt="" />Magyar</a></li>
|
||
<li><a href="../../pt_BR/applications/icon-o-matic.html"><img src="../../images/flags/pt_BR.png" alt="" />Português (Brazil)</a></li>
|
||
<li><a href="../../ca/applications/icon-o-matic.html"><img src="../../images/flags/ca.png" alt="" />Català</a></li>
|
||
<li><a href="../../pl/applications/icon-o-matic.html"><img src="../../images/flags/pl.png" alt="" />Polski</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="haikudepot.html">HaikuDepot</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 ビットマップアイコン vs. 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">Transformer</a><br />
|
||
<a href="#i-o-m-save">アイコンを保存する</a><br />
|
||
<a href="#i-o-m-tips">Tips & Tricks</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>位置:</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 ビットマップアイコン vs. Haiku ベクターアイコン</a></h2>
|
||
<p>BeOS とは違い、Haiku はビットマップアイコンではなくベクターアイコンを採用しています。Haiku Vector Icon Format (HVIF) はファイルサイズの最適化と高速なレンダリングを目的に開発されたので、たいていの場合、Haiku のアイコンはビットマップや一般的な SVG 形式よりも<i>非常に</i>小さなサイズになります。また、Haiku のアイコンは BeOS のビットマップアイコンとは異なり、色が 8 ビット (256 色) に限られていません。<br />
|
||
たとえば、ターミナルのアイコンを例にすると、</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 byte<br />+ 256 byte</td><td> 7,192 byte </td><td> 768 byte </td></tr>
|
||
</table>
|
||
<p>BeOS のビットマップアイコンはリストやアイコン表示モードでもきれいに見えるように 16x16 と 32x32 の 2 種類のサイズが用意されています。</p>
|
||
<p>ベクターアイコンでは、このような仕組みは必要ありません。ベクターアイコンはたった数百バイトの容量で、ビットマップよりもきれいに拡大縮小できます。</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 アドオン</span>を使用してください。詳しくは<a href="../filetypes.html">ファイルタイプ</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 形式に最適化されているので、HVIF の内部仕様を編集できます。</p>
|
||
<p>ほかの一般的なベクターグラフィックソフトとは異なり、パスや輪郭線の幅、塗りの色などを個々に調整する必要はありません。リストからオブジェクト (シェイプ) や色 (スタイル) を選択して、プロパティを設定することで描画できます。このパーツの再利用を行う仕組みはデザインに制約を課しますが、HVIF の効率性を高めています。<br />
|
||
たとえば、パスを再利用するば、いくつかのオブジェクトを 1 つのパスからまとめて変更できます。パスを変更するだけでオブジェクトの影も自動的に調整される、といったこともできるようになります。</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">シェイプ</span>メニューからシェイプとパスとスタイルを選ぶ必要があります。すべてのオブジェクト (パス、シェイプ、Transformer およびスタイル) の要素のリストがそれぞれ用意されていて、<span class="menu">プロパティ</span>メニューから要素のオプションを設定できます。</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">パス</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> を押しながらハンドルを動かして調整します。逆に、直線に戻すには、<span class="key">ALT</span> を押しながら点をクリックしてください。</p>
|
||
|
||
<p>ドラッグ＆ドロップで点を移動できます。<span class="key">SHIFT</span> を押しながら四角形を書くようにして複数の点を選択することもできます。選択された点は赤い枠で囲まれます。<br />
|
||
パスに点を追加するには、2 点間の線上をクリックします。また、パスから点を削除するには <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">ALT</span> <span class="key">T</span></td><td>選択された点がすべてトランスフォームボックスでまとめられて、移動、サイズ変更、回転を一気に行えます。ちょうど後で説明されるシェイプのような働きをします。</td></tr>
|
||
<tr><td><span class="menu">分割 (Split)</span></td><td></td><td>点が同じ座標に位置するように 2 つに分けます。</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">パスのメニュー</a></h4>
|
||
<p><span class="menu">パス</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>パスが「閉じていない」場合 (パスのプロパティを参照)、キャンバスをクリックすると点が作られて最後に作られた点と繋げられますが、「反転」を押すと、作った点が最初の点と繋げられるようになります。</td></tr>
|
||
<tr><td><span class="menu">クリーンアップ<br />(Clean up)</span></td><td></td><td>冗長な点を削除する機能で、SVG を開くときに有用です。</td></tr>
|
||
<tr><td class="onelinetop"><span class="menu">インデックスを順に辿る<br />(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">インデックスを逆順に辿る<br />(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">プロパティ</span>メニューで現在選択されているオブジェクトの設定を行えます。パスは、<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">シェイプ</a></h3>
|
||
<p>シェイプはいくつかのパスとスタイルの集合として、キャンバスではオブジェクトのように表されます。パスとスタイルのグルーピングは、シェイプを選択した状態で、それぞれのリストのチェックボックスから設定できます。</p>
|
||
<p>シェイプは、パスやスタイルがどのように適用されるか、たとえば、塗りつぶすのか輪郭線だけ色を塗るのか (Transformer が使われますが、詳しくは後述) などを決めていくことで形作られます。また、シェイプを使うと、パスを操作することなく回転やサイズ変更などができるようになります (1 つのパスだけを操作することもできます)。</p>
|
||
|
||
<img src="../../images/apps-images/i-o-m-shape.png" alt="i-o-m-shape" />
|
||
|
||
<p>シェイプがリストから選択されると、シェイプの周りに四角形が現れます。その四角形を操作することで移動やサイズ変更、真ん中の点 (この点を移動させることもできます) を中心に回転させるなどを行えます。<span class="key">SHIFT</span> を押しながら操作することで、移動の方向を限定したり、サイズ変更の際に縦横比を変えないようにしたり、回転の際に 45度単位で回転するようにしたりできます。
|
||
<br />
|
||
マウスポインターで現在のモードが表されます。</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>移動</td>
|
||
<td>拡大</td>
|
||
<td>回転</td>
|
||
<td>回転の中心を移動させる</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<p>シェイプのレイヤーを分けることも可能です。重ね順を変更するには、リストで項目をドラッグ＆ドロップしてください。</p>
|
||
|
||
<h4><a id="i-o-m-shape-menu" name="i-o-m-path-menu">シェイプのメニュー</a></h4>
|
||
<p><span class="menu">シェイプ</span>のメニューには<span class="menu">空のシェイプを追加する</span>、<span class="menu">パスとともに追加</span>、<span class="menu">スタイルと共に追加</span>、<span class="menu">パスとスタイルつきで追加</span>、<span class="menu">複製</span>、<span class="menu">削除</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">名前</span>のほかに<span class="menu">プロパティ</span>にはこんな設定があります。</p>
|
||
|
||
<table summary="Shape properties" border="0" cellspacing="0" cellpadding="2">
|
||
<tr><td><span class="menu">Min LOD</span></td><td></td><td>Level of Detail の最小値</td></tr>
|
||
<tr><td><span class="menu">Max LOD</span></td><td></td><td>Level of Detail の最大値</td></tr>
|
||
</table>
|
||
|
||
<h5><a id="i-o-m-shape-lod" name="i-o-m-shape-lod">Level of Detail (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>BeVexed のアイコンを見てもらうと、16px のバージョンには数字が書かれていないのがわかるはずです。これは「Level of Detail」によって設定されています。<br />
|
||
LOD を使用することで、アイコンをサイズにあわせて見えやすくできます。大きなアイコンは遠くからでもはっきり見えるように、小さなアイコンは識別しやすいようにすることができます。</p>
|
||
<p>LOD 1.0 は 64px のサイズのアイコンを意味します。LOD はアイコンのサイズを 64px で割った数で表されます。たとえば、16px のサイズのアイコンの LOD は 16/64 = 0.25 となります。LOD が <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 に設定したとすると、そのシェイプはアイコンサイズが 32px より小さいか<i>等しい</i>時にのみ表示されます。32px の時に表示したくないならば、<span class="menu">Max LOD</span> を 0.49 にする必要があります。</p>
|
||
<p>LOD はシェイプの表示 / 非表示を切り替えるだけでなく、サイズによって輪郭線の幅を変えるなどということもできます。同じシェイプをコピーして、一部だけ変更してそれぞれに異なる LOD を指定すればいいのです。無意識のうちに LOD が重複するように設定してしまわないように注意してください。<br />
|
||
たとえば、以下の例では Shape 1 は 48px より小さいサイズの時に、Shape 2 は 48px 以上のサイズで表示されます (LOD: 48/64 = 0.75)。</p>
|
||
|
||
<table summary="LOD values example" border="0" cellpadding="5">
|
||
<tr align="center"><td></td><td colspan="2"><b>OK</b></td><td style="width:25px" rowspan="6"></td><td colspan="2"><b>Not OK!</b></td></tr>
|
||
<tr style="background-color:#F1F1F1"><td rowspan="2" style="vertical-align:middle ; background-color:#FFFFFF"><b>Shape 1</b></td><td>Min LOD</td><td>0.00</td><td>Min LOD</td><td>0.00</td></tr>
|
||
<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>
|
||
<tr><td colspan="6"></td></tr>
|
||
<tr style="background-color:#F8F8F8"><td rowspan="2" style="vertical-align:middle ; background-color:#FFFFFF"><b>Shape 2</b></td><td>Min LOD</td><td>0.75</td><td>Min LOD</td><td>0.75</td></tr>
|
||
<tr style="background-color:#F8F8F8"><td>Max LOD</td><td>4.00</td><td>Max LOD</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>スタイルはある 1 つの色か数種類の色によるグラデーションとして表されます。<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> から選び、始まりと終わりの色を選んでください。<span class="menu">見本</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">スタイル</span>のメニューには<span class="menu">追加</span>、<span class="menu">複製</span>、<span class="menu">削除</span>、<span class="menu">変形をリセット</span>といった項目があります。</p>
|
||
|
||
<h4><a id="i-o-m-style-properties" name="i-o-m-style-properties">スタイルのプロパティ</a></h4>
|
||
<p>スタイルの<span class="menu">プロパティ</span>は<span class="menu">名前</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>Transformer を使うとシェイプの見た目を変化させることができます。トラックが戦闘ロボットになるような、そんな劇的な効果があるわけではないですが....</p>
|
||
|
||
<h4><a id="i-o-m-transformer-menu" name="i-o-m-transformer-menu">Transformer のメニュー</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>それぞれの Transformer に対し、異なるプロパティセットが用意されています。</p>
|
||
|
||
<h4><a id="i-o-m-transformer-properties" name="i-o-m-transformer-properties">Transformer のプロパティ</a></h4>
|
||
<p><span class="menu">プロパティ</span>には<span class="menu">名前</span>や<span class="menu">幅</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>、<span class="menu">Round</span> から選択できます。 </td></tr>
|
||
<tr><td><span class="menu">向きを検出する (Detect orient)</span></td><td></td><td><i>コンターのみ</i>。Transformer を作用させる場所をパスの内側にするか外側するか、選択できます。</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">結合</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 フォーマットで保存されます。追加情報は実際のアイコンとして使用する際に削除されます。「パス/シェイプ/スタイル」という名前で変更ごとにファイルを保存するよりは、この形式で保存したほうがバックアップに向いているでしょう。</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 Vector Icon Format として保存します</td></tr>
|
||
<tr><td>HVIF RDef</td><td></td><td>リソースファイルとして保存します (開発者向け)</td></tr>
|
||
<tr><td>HVIF ソースコード</td><td></td><td>ソースコードとして保存します (開発者向け)</td></tr>
|
||
<tr><td>SVG</td><td></td><td>SVG として保存します</td></tr>
|
||
<tr><td>PNG</td><td></td><td>64px のサイズの SVG として保存します</td></tr>
|
||
<tr><td>PNG セット (PNG set)</td><td></td><td>16, 32, 64px のサイズの SVG として保存します</td></tr>
|
||
<tr><td>BEOS:ICON 属性</td><td></td><td>ファイルを選択し、直接アイコンを設定します</td></tr>
|
||
<tr><td>META:ICON 属性</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">Tips & Tricks</a></h3>
|
||
<p>Icon-O-Matic を使う上でのいくつかの注意点とヒント:</p>
|
||
<ul>
|
||
<li><p>Haiku のアイコンに関する重要な特徴 (展望や色、影など) について学ぶには、<a href="http://svn.haiku-os.org/haiku/haiku/trunk/docs/icon_guidelines/index.html">Icon Guidelines</a> を読んでください。</p></li>
|
||
<li><p>ファイルサイズを小さくするために、できるだけパスの使用を少なくしてください。また、できるだけパスを再利用して、シェイプや Transformer で調整するようにしてください。グラデーションを賢く使用することも重要です。</p></li>
|
||
<li><p>パスを編集するときは、できるだけ<span class="menu">オプション (Options)</span> メニューからグリッドに沿う (Snap-to-Grid) を使用してください。<span class="menu">64x64</span> で点を配置するとファイルサイズが小さくなります。点を細かく配置するときにはこのモードを使用するといいでしょう。また、点をだいたいの位置に配置して形作っていくときには <span class="menu">16x16</span> のモードを使用するといいでしょう。</p></li>
|
||
<li><p>16x16 のサイズでもきちんと表示されるかチェックしておいてください。細かく設定するにはシェイプの <a href="#i-o-m-shape-lod">Level Of Detail</a> の設定を使うかもしれません。</p></li>
|
||
<li><p>Icon-O-Matic ではテキストボックスの機能はありませんが、簡単にテキストを表示させることができます。StyleEdit のようなテキストエディターを使ってフォントタイプとスタイルを設定し、Icon-O-Matic にドラッグ＆ドロップまたはコピー＆ペーストすればいいのです。文字の形のパスとシェイプが自動で作られます。</p></li>
|
||
<li><p>1 つのシェイプにいくつかのパスが含まれるとき、パスの重なっている部分は相殺されます。また、あるパスが別のパスの内部に完全に入っている場合は、その部分が穴になります。</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="haikudepot.html">HaikuDepot</a>
|
||
:: <a href="../applications.html#list-of-apps" class="uplink">アプリケーション</a>
|
||
:: <a href="installer.html">インストーラー</a> »
|
||
</span></div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|