Contents
ビットマップ画像とベクター画像の違い
なぜ パス を用いるのか。
それはビットマップ（ラスター）画像とパス(ベクター)画像の違いを理解しておくと、使い所がわかっていいかもしれません。
拡大・縮小画像で違いが出る
256ｘ256pxのロゴを512x512pxに拡大した画像です。
ビットマップ画像はなんとなくぼやけていて、ベクター（パス）を用いて作成した画像のほうが輪郭がくっきりと表現されています。
実際に同一箇所を拡大してみるとよくわかります。
ビットマップ画像はビットを拡大しているのでぼやけています。
ベクター画像は輪郭を再計算しているのでギザギザが増えているのがわかります。
ビットマップとベクターの拡大方法
私は専門家ではありません。
拡大・縮小のプロセスについて正確性を求める方は、ベジエ曲線などの数学的知識を学ぶと沼にはまれると思います。
ベクター画像を本格的に扱えるソフトはInkscape(オープンソース)やIllustrator(Adobe)が有名なので、どちらかの書籍で正確な情報が得られるかもしれません。
ざっくり説明すると、
ビットマップ画像は正方形ビットを単純に拡大して、隙間を補間。
ベクター画像は輪郭のベクトル曲線を計算して、形状を曲線の集合体と捉えて拡大。
といったところです。
ビットマップ画像は写真など、多くの色が混じっているものの表現に優れています。
bmp、jpg、gifなど、ほとんどのファイルフォーマットがビットマップです。
ベクター画像はロゴ、アイコン、フォントなど、拡大縮小する画像には最適ですが多色画像には不向きです。
svg、aiなどの拡張子を持つファイルがベクター画像になります。
以前に自作フォントづくりの記事を書いていますので、興味のある方はこちらもどうぞ。
無料で Webフォント を自作、WordPressに組み込むまで完全解説します！
簡単な パス を用いたアイコン作成（初心者向け）
GIMPやIllustratorは主にビットマップ画像を取り込み、ビットマップ画像を出力するソフトです。
今回は編集過程でパス（ベクター）を使って加工しようと思います。
パスの作り方には自動と手動があります。
手動でパスを作るためには、どのような操作をすればパスの曲線が輪郭に沿うのかを予測する能力が必要となります。
ある程度の熟練を要するので、ここでは初心者向けに自動パス生成を用います。
GIMPに自動で輪郭を認識させるため、用意する画像は背景透明、描画色は濃いものが理想です。
今回サンプルとして用いるのはこの画像です。
イルカのクリップの写真からクリップ部分だけ残し、背景は透明にしてあります。
画像の取り込み
まずは画像をGIMPで開き、キャンバスサイズを変更します。
今回は512ｘ512 pxのアイコンを作ります。
背景を準備する
右サイドメニューの左下のアイコンから新しいレイヤーを作成します。
レイヤー名はわかりやすく背景にしてますが、自由に決めて大丈夫です。
サイズは512×512 px、背景は透明です。
背景となるレイヤーが追加できたら、下げておきます。
今回は下げなくても作業できると思いますが、背景の上に画像が乗っているイメージの方が理解しやすいかと思い…
この背景レイヤーに、パスで作った拡大画像を貼り付けることが今回の目標です。
輪郭を取って パス 生成
右サイドメニューで画像レイヤーが選択された状態にします。（画像レイヤーをクリックするだけです。）
選択→色域を選択をして、画像の色のついた部分にポインターを合わせてクリックします。
自動的にイルカの輪郭に沿って選択されます。
選択→選択範囲をパスにをすると自動的に計算してパスを生成してくれます。
パス生成が終わったら選択を解除します。（この選択が生きていると最後の塗りつぶしがうまくできません！）
この画像はもう使わないので、レイヤーの目玉を消しておきます。
パス を操作する
右メニューのパスのタブでパスが見えるように目玉を付けます。
レイヤーのタブに戻って背景レイヤーが選択された状態にし、目玉を付けます。
左メニューの拡大・縮小ツールを呼び出して画像上でクリックすると9個の四角が現れます。
これらをドラッグして大きさ、位置を調整し、拡大・縮小をクリックします。
最後に編集→パスで塗りつぶすで完成です。エクスポートしましょう。
輪郭だけほしいときはパスの境界線を描画です。
なめらかな境界線の画像ができました
急ごしらえのサンプルだったので、拡大すると白いノイズが目立ちます。
針金の写真から適当に用意したから当然ですね。
でも境界線はくっきりと仕上がっているのがわかると思います。
これはpng画像ですから、修正は簡単。
境界線を修正して回ることを思えば楽な作業です。
拡大・縮小をする時には、パスを使うひと手間で画像がグレードアップするので積極的に使いましょう。
