294 lines
22 KiB
HTML
294 lines
22 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||
<html>
|
||
<head>
|
||
<title>
|
||
Tux Paint 用のスタンプを作成する方法 </title>
|
||
<meta http-equiv="Content-Type"
|
||
content="text/html; charset=utf-8">
|
||
</head>
|
||
<body bgcolor="#FFFFFF"
|
||
text="#000000"
|
||
link="#0000FF"
|
||
vlink="#FF0000"
|
||
alink="#FF00FF">
|
||
<center>
|
||
<h1>
|
||
<img src="../../html/images/tuxpaint-title.png"
|
||
width="205"
|
||
height="210"
|
||
alt="Tux Paint"><br>
|
||
バージョン 0.9.28 スタンプ作成の詳細について </h1>
|
||
|
||
<p>
|
||
Copyright © 2006-2021 by Albert Cahalan ほか; "AUTHORS" 参照.<br>
|
||
<a href="http://www.tuxpaint.org/">http://www.tuxpaint.org/</a>
|
||
</p>
|
||
|
||
<p>
|
||
2021年8月29日 </p>
|
||
</center>
|
||
|
||
<hr size="2"
|
||
noshade>
|
||
|
||
<table border="2"
|
||
cellspacing="0"
|
||
cellpadding="2"
|
||
summary="目次">
|
||
<tr>
|
||
<th>
|
||
目次 </th>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>
|
||
<ul>
|
||
<li>
|
||
<a href="#about">この解説について</a>
|
||
</li>
|
||
<li>
|
||
<a href="#choice">使用する画像の選択</a>
|
||
</li>
|
||
<li>
|
||
<a href="#prepare_mask">マスクの設定</a>
|
||
</li>
|
||
<li>
|
||
<a href="#replace_fringe">縁取りと不要なピクセルの除去</a>
|
||
</li>
|
||
<li>
|
||
<a href="#save">Tux Paint 用の画像の保存</a>
|
||
</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<hr size="2"
|
||
noshade>
|
||
|
||
<hr size="2"
|
||
noshade>
|
||
|
||
<h2>
|
||
<a name="about" id="about">
|
||
この解説について </a>
|
||
</h2>
|
||
|
||
<blockquote>
|
||
<p>
|
||
この解説では、デジカメ写真などのJPEG画像をもとに、PNG形式で、高いクォリティの Tux Paint 用スタンプを作成したいという場合を想定しています。クォリティにこだわらなければ、もっと簡単で早い方法もあります。 </p>
|
||
|
||
<p>
|
||
扱う対象としては、通常の透明ではないものを前提としており、半透明のもの（火、動く扇風機の羽根、風船）や発光するもの（火、電球、太陽）を扱うには、専用のソフトウェアを使用するのが最適です。背景が完全なベタ塗りの画像も、専用のソフトを使うのが良いですが、以下のようにしても問題はありません。 </p>
|
||
</blockquote>
|
||
|
||
<hr size="2"
|
||
noshade>
|
||
|
||
<h2>
|
||
<a name="choice" id="choice">
|
||
使用する画像の選択 </a>
|
||
</h2>
|
||
|
||
<blockquote>
|
||
<h3>
|
||
著作権 </h3>
|
||
|
||
<blockquote>
|
||
<p>
|
||
タックスペイントの開発者に作品を提供して公式プロジェクトへの採用を検討してもらいたい場合や、タックスペイントに独自の画像を同梱して配布したい場合には、タックスペイントが採用しているライセンスである GNU 一般公衆利用許諾 と互換性があるライセンスの画像を用いる必要があります。 </p>
|
||
|
||
<p>
|
||
米国政府が制作した画像はパブリックドメインですが、米国政府がウェブ上でパプリックドメイン以外の画像を使用していることもあるので注意が必要です。<a href="http://images.google.com/">Googleの画像検索</a>で、<code>site:gov</code> または<code>site:mil</code> のいずれかを指定すると、適切な画像が多数表示されます。（注：*.mil のサイトには、軍事関係以外のコンテンツも含まれています！） </p>
|
||
|
||
<p>
|
||
自分自身で作成した画像は、<a href="https://creativecommons.org/publicdomain/zero/1.0/">クリエイティブ・コモンズ CC0</a>といったパブリックドメインあるいは適切なライセンスである旨を明示すれば、そのように位置づけることができます。（法的なアドバイスが必要だと感じたら、弁護士に相談してください） </p>
|
||
|
||
<p>
|
||
個人的に使用する場合は、合法的に修正して使用できる画像であれば問題ありません。 </p>
|
||
</blockquote>
|
||
|
||
<h3>
|
||
画像の大きさと向き </h3>
|
||
|
||
<blockquote>
|
||
<p>
|
||
使いやすい向きの画像が必要で、遠近感のあるものは禁物です。被写体を隅の方から見たような画像は、お絵かきに使うには向いていません。一般的には、遠方から、かつ、真横から見たような画像がベストです。実際にはありえませんが、例えば車の2つの車輪が他の2つの車輪の後ろに完全に隠れているというようなものが理想的です。 </p>
|
||
|
||
<p>
|
||
画像を回転させるとぼやけてしまいます。回転を必要としない画像が最良で、大きな角度の回転（30〜60度）を必要とする画像が次に良く、わずかに（数度）回転が必要な画像は最悪です。画像を回転させると暗くなりますが、これは、ほとんどの画像編集ソフトはガンマ値の扱いが非常に不適切だからです。（回転はガンマ値が1.0の画像にのみ有効です）。 </p>
|
||
|
||
<p>
|
||
非常に大きなサイズの画像は、ミスに寛容なので、作業がしやすくなります。できれば 1000 ピクセル以上の被写体が写っている画像を選びましょう。編集後に縮小することで、細かいミスを目立たなくすることができます。 </p>
|
||
|
||
<p>
|
||
画像が、粒度が粗すぎたり、薄暗すぎたり、半透明になりすぎたりしないように注意してください。 </p>
|
||
|
||
<p>
|
||
生き物の足や車のホイールなどにも注意が必要です。これらが何かに隠れて見えなくなっている場合は新しく描き足す必要があります。隠れているのが一部だけの場合は、他の部分をコピーして描き換えることができるかもしれません。 </p>
|
||
</blockquote>
|
||
</blockquote>
|
||
|
||
<hr size="2"
|
||
noshade>
|
||
|
||
<h2>
|
||
画像の準備 </h2>
|
||
|
||
<blockquote>
|
||
<p>
|
||
まず、画像をJPEGで保存し直さないようにしてください。これは品質低下の原因となります。<a href="https://jpegclub.org/">jpegtran</a>という特別なツールを使えば、品質を維持したまま画像を切り抜くことができます。 </p>
|
||
|
||
<blockquote>
|
||
<p>
|
||
<code>jpegtran -trim -copy none -crop 512x1728+160+128 < src.jpg > cropped.jpg</code>
|
||
</p>
|
||
</blockquote>
|
||
|
||
<p>
|
||
次に、切り抜いた画像を画像エディタで表示させます。トリミングをしていない大きな画像を開く場合は、画像エディタの動作が非常に遅くなるかもしれません。必要に応じて画像を回転させたりトリミングしたりして、画像を保存します。保存の際は、レイヤー、マスク、アルファチャンネルなどが保存されるように、各ソフトウェア専用のフォーマットを選択します。GIMPをお使いの方は「XCF」、Adobe Photoshopをお使いの方は「PSD」などを選択して下さい。 </p>
|
||
|
||
<p>
|
||
画像編集ソフトで画像を回転させたり切り抜いたりした場合は、マスクやアルファチャンネルのない１層の RGB レイヤーに統合して下さい。 </p>
|
||
|
||
<p>
|
||
レイヤーダイアログボックスを開いて、以下のように、レイヤーを上から順に何度か複製します： </p>
|
||
|
||
<ol>
|
||
<li>編集前の画像（可能であればプロテクトする）</li>
|
||
<li>編集を行う画像 － "作業用" レイヤー</li>
|
||
<li>グリーン１色のレイヤー（可能であればプロテクトする）</li>
|
||
<li>マゼンダ１色のレイヤー（可能であればプロテクトする）</li>
|
||
<li>編集前の画像（可能であればプロテクトする）</li>
|
||
</li>
|
||
</ol>
|
||
|
||
<p>
|
||
作業用レイヤーに、大まかに初期マスクを作成します。選択範囲から始めても良いですし、作業レイヤーのグレースケール値を用いても良いでしょう。また、マスクを反転させることもできます。 </p>
|
||
|
||
<p>
|
||
<b>注意：</b>マスクを設定した後は、画像の回転や拡大縮小は行えません。これはデータ損失の原因となります。サイズを調整するための特別な方法は後述します。 </p>
|
||
</blockquote>
|
||
|
||
<hr size="2"
|
||
noshade>
|
||
|
||
<h2>
|
||
<a name="prepare_mask" id="prepare_mask">
|
||
マスクの設定 </a>
|
||
</h2>
|
||
|
||
<blockquote>
|
||
<p>
|
||
レイヤーダイアログのサムネイル画像を <b>[Ctrl]</b> キーを押しながらクリックしたり、<b>[Alt]</b> キーを押しながらクリックしたりすることに慣れておきましょう。これは、何を見て何を編集しているかを把握するために必要となります。例えば、変更されていない画像を見ながら作業用レイヤーのマスクを編集する場合など、見えていないものを編集することもあります。混乱して間違ってしまわないように注意してください。自分が編集しているものが正しいかどうかを常に確認するようにしましょう。 </p>
|
||
|
||
<p>
|
||
一番上のオリジナル画像のレイヤーを表示しながら、作業用レイヤーに対して編集を加えるするように設定します。編集作業の必要に応じて画像を約400％に拡大してください（画像の各ピクセルを画面上 4x4 ピクセルのブロックとして表示し、編集することができます） </p>
|
||
|
||
<p>
|
||
100%不透明な部分と完全に透明な部分を選択します。色を指定することで、オブジェクトや背景をある程度正確に選択できる場合は、そのようにします。部分的に不透明にすべきピクセル（一般的にはオブジェクトの輪郭）を選択しないように、必要に応じて選択範囲を拡大、縮小、反転させます。 </p>
|
||
|
||
<p>
|
||
不透明な部分を白で、透明な部分を黒で塗りつぶします。この作業は、前景／背景色のインジケータからドラッグ＆ドロップするのが最も簡単です。作業用レイヤーのマスクを編集しながら、変更されていない画像レイヤーを見ているので、見た目には何も起こらないはずですが、サムネイル画像では大きな変更が見えるかもしれません。 </p>
|
||
|
||
<p>
|
||
次に、画像を拡大します。 </p>
|
||
|
||
<p>
|
||
作業内容を確認します。まず、一番上のオリジナルレイヤーを隠します。マスクだけを表示すると、黒の背景に白のオブジェクトが表示されるはずです (おそらく輪郭の部分には未編集のグレーが表示されます)。次に 作業用レイヤーを通常通り表示し、マスクがアクティブになるようにします。これで、あなたのオブジェクトが、次の有効レイヤーの上に表示されるはずです。このレイヤーは、コントラストを最大にするために、必要に応じてグリーンまたはマゼンタにする必要があります。緑のレイヤーを繰り返しクリックして有効/無効にすることで、これらの背景を行ったり来たりすることができます。マスクを見ながら編集して、単純なミスを修正します。 </p>
|
||
|
||
<p>
|
||
作業用レイヤーのマスクを編集しながら、一番上のオリジナルレイヤーの表示に戻ります。描画ツールを「ブラシ」に設定します。ブラシには、円形の小さなぼかし筆を選びます。5x5 サイズがほとんどの場合に適しています。 </p>
|
||
|
||
<p>
|
||
ゆっくりとぶれないように画像の輪郭をトレースします。外側には黒色、内側には白色を使います。色を変更しないまま複数のパスにならないように注意して下さい。 </p>
|
||
|
||
<p>
|
||
表示をちらっと反転させ、マスクがうまく機能していることを確認します。作業用レイヤーをグリーンまたはマゼンタの上に合成すると、元の背景が、境界周りのほんのわずかなギザギザした縁取りのように見えるはずです。この縁取りが見えない場合、オブジェクトマスクを小さくしすぎたことになります。この縁取りを構成するピクセルは、完全にオブジェクト内でもオブジェクト外でもありません。そのため、マスクは100%でも0%でもありません。この縁取りはこの後に取り除かれます。 </p>
|
||
|
||
<p>
|
||
マスクを表示して編集します。黒か白の色で領域を選択します。ほとんどの場合、選択されていない色の斑点が残っていると思います。選択範囲を反転させ、鉛筆ツールを使ってこれらの点を取り除きます。この作業を白と黒の両方で行います。 </p>
|
||
</blockquote>
|
||
|
||
<hr size="2"
|
||
noshade>
|
||
|
||
<h2>
|
||
<a name="replace_fringe" id="replace_fringe">
|
||
縁取りと不要なピクセルの除去 </a>
|
||
</h2>
|
||
|
||
<blockquote>
|
||
<p>
|
||
マスクをを表示しながら、黒で領域を選択した後、選択範囲を数ピクセル縮小します。ただし、マスクの端から縮小しないように注意してください（縮小することで、ミスを防いだりやり直したりすることができます） </p>
|
||
|
||
<p>
|
||
ここでマスクを無効にします。マスクされていない作業用レイヤーを表示して編集します。色選択ツールを使って、対象の平均的な色を選択します。この色を選択範囲にドラッグ＆ドロップすると、オブジェクト以外のピクセルのほとんどが削除されます。 </p>
|
||
|
||
<p>
|
||
この単色の領域は、Tux Paintが画像を縮小する際に生じる縁取りを抑制するのに役立ちます。オブジェクトの輪郭に大きく異なる複数の色がある場合は、選択範囲を分割して、近くの背景が似たような色になるようにします。 </p>
|
||
|
||
<p>
|
||
ここで、輪郭周りの縁取りを消去します。作業用レイヤーの画像を編集、表示していることを確認してください。以下の全てのレイヤーを頻繁に切り替えて表示することで、自分が何をしているのかを確認することができます： </p>
|
||
|
||
<ul>
|
||
<li>グリーン との合成（マスク有効）</li>
|
||
<li>マゼンタ との合成（マスク有効）</li>
|
||
<li>オリジナル（一番上、または一番下のレイヤー）</li>
|
||
<li>オリジナル との合成（マスク有効）</li>
|
||
<li>作業用レイヤー（マスク<strong>無効</strong>）</li>
|
||
</ul>
|
||
|
||
<p>
|
||
失敗を減らすために、マスクの中の灰色ではないピクセルだけを選択するとよいでしょう。（「マスクから色で領域選択、黒を選択、色加算モード、白を選択、反転」あるいは「すべてを選択、マスクから色で領域選択、色減算モード、黒を選択、白を選択」）この作業を行う際、選択範囲を少し広げて、選択領域を示す線を隠したくなるかもしれません。 </p>
|
||
|
||
<p>
|
||
ここではクローンツールとブラシツールを使います。必要に応じて不透明度を変えて下さい。3x3か5x5の小さな円形のブラシを主に使います。ぼかし筆かどうかは問いません。（ぼかし筆は不透明度100％、ぼかしではないブラシは不透明度70％程度で組み合わせると良いでしょう）。あまり一般的ではない使い方ですが、半透明のオブジェクトの場合には有効です。 </p>
|
||
|
||
<p>
|
||
最終目標は、オブジェクトの内側と外側の両方の縁取りを除去することです。内側の縁取りは、マゼンタやグリーンの上にオブジェクトを合成したときに見えるもので、明らかに除去が必要です。外側のフリンジは、画像を縮小したときに見えるようになるため、こちらも除去する必要があります。例として、鋭角なオブジェクトの輪郭にある2x2のピクセルの領域を考えてみましょう。左半分は黒で、不透明度は0％。右半分は白で、100％不透明です。つまり、黒い背景に白い物体がある状態です。Tux Paintがこれを50％（1x1ピクセルの領域）にスケーリングすると、結果はグレーの50％不透明ピクセルになりますが、正しい結果は、白の50％不透明ピクセルです。この結果を得るためには、黒いピクセルを塗り潰します。不透明度が0％であるにもかかわらず、黒いピクセルは重要です。 </p>
|
||
|
||
<p>
|
||
タックスペイントでは、画像を非常に大きく縮小することができるため、オブジェクトの輪郭を外側に大きく広げることが重要です。オブジェクトの輪郭の部分では、非常に正確に処理する必要がありますが、輪郭から離れるにつれて、少々手を抜いても大丈夫です。十数ピクセル以上外側まで描くとちょうど良くなります。これを太くすればするだけ、Tux Paintは汚い色の縁どりを発生させずにスケールダウンすることができます。オブジェクトの端から数ピクセル以上離れた部分については、鉛筆ツール（またはドラッグ＆ドロップで適当に色を選択）を使用して、結果がきれいに縮小されるようにしてください。 </p>
|
||
</blockquote>
|
||
|
||
<hr size="2"
|
||
noshade>
|
||
|
||
<h2>
|
||
<a name="save" id="save">
|
||
Tux Paint 用の画像の保存 </a>
|
||
</h2>
|
||
|
||
<blockquote>
|
||
<p>
|
||
せっかくの労作も簡単にダメになることがあります。画像編集ソフトは、不透明度0％の領域のピクセルを勝手にで破棄することがあります。この現象が発生する条件は、ソフトウェアのバージョンによっても異なります。慎重を期すため、画像を直接PNGとして保存してみてください。その後、不透明度0％の部分が黒くなったり白くなったりしていないことを確認するために、もう一度画像を読み込んでみてください。ディスクスペースを節約するため（そして自分のミスを隠すため）に画像を縮小する必要がある場合、ほぼ確実に 0％の不透明部分をすべて破壊してしまうことになります。そこで、もっと良い方法があります。 </p>
|
||
|
||
<h3>
|
||
より安全な保存方法 </h3>
|
||
|
||
<blockquote>
|
||
<p>
|
||
マスクをレイヤーダイアログからツールバーの未使用部分（最後の描画ツールの直後）にドラッグします。これで、マスクデータを含む1つのレイヤーからなる新しい画像が作成されます。これを、使用する設定に応じた希望のサイズまで縮小します。多くの場合、700～1500ピクセル程度の画像から始めて、最終的には300～400ピクセル程度の画像を作成します。 </p>
|
||
|
||
<p>
|
||
マスク画像を NetPBM の Portable Greymap ("<code>.pgm</code>") ファイルとして保存します。(古いバージョンの GIMPを使用している場合は、保存する前に画像をグレースケールに変換する必要があるかもしれません)。よりコンパクトな「RAW PGM」フォーマットを選択して保存します。(ファイルの2文字目はASCII数字の「5」、16進数のバイト0x35である必要があります) </p>
|
||
|
||
<p>
|
||
マスク画像を閉じます </p>
|
||
|
||
<p>
|
||
マルチレイヤー画像に戻って、作業用レイヤーを選択します。マスクと同じように、レイヤーダイアログからツールバーにドラッグしてください。これで作業用データの単一レイヤー画像ができあがります。マスクが付いていた場合は取り除かれます。レイヤーダイアログにマスクのサムネイルが表示されていない状態で、オブジェクトと輪郭の縁取りが表示されているはずです。マスクを拡大縮小したのであれば、この画像も同様に正確に拡大縮小してください。この画像を NetPBM の Portable pixmap ("<code>.ppm</code>") ファイルとして保存します。(注：<code>.ppm</code> ではなく <code>.pgm</code> です。) (RAW PPMフォーマットを選択した場合、ファイルの2バイト目はASCII数字の "6"、16進数のバイト0x36である必要があります) </p>
|
||
|
||
<p>
|
||
最後に、以下のように <a href="http://netpbm.sourceforge.net/">pnmtopng</a> コマンドで、２つのファイルを１つに合成します： </p>
|
||
|
||
<blockquote>
|
||
<p>
|
||
<code>pnmtopng -force -compression 9 -alpha mask.pgm fg.ppm > final-stamp.png</code>
|
||
</p>
|
||
</blockquote>
|
||
</blockquote>
|
||
</blockquote>
|
||
</body>
|
||
</html>
|