境界線の作り方あれこれ / Borderlines, in one way or another

とりあえず適当な画像を用意します。今回は楕円形選択ツールで作成した円を使います。いうまでもないとは思いますけれど、背景と円はそれぞれ別のレイヤーにしてください。

次に円を描いたレイヤーをダブルクリックして、レイヤースタイルの選択画面を呼び出し、グラデーションオーバーレイを指定して、黄色からオレンジに変化するようにしました。この円の周囲に境界線を設定していきます。

一つ目は「光彩（内側）」のレイヤー効果を使って境界線を作成する方法です。（Style A）

円が描かれているレイヤーをダブルクリックしてレイヤースタイルの設定画面を呼び出し、「光彩（内側）」にチェックを入れます。今回はさらに、光彩の色を白にして、ソースをエッジに、チョークを100%、サイズを3pxで作成しました。お好みでアンチエイリアスもかけます。すると左図のような画像が出来上がります。

この光彩（内側）のレイヤースタイルで作成された境界線の特徴は、2枚が目の画像のように、不透明度を調整することができることです。

但し、このStyle Aの方法では下で紹介するStyle BやStyle Cのように境界線にグラデーションをかけることができません（厳密にいうと可能ですが、面倒です）。ただ不透明度をいじって、元画像を反映させることができる点が利点です。

二つ目の方法はレイヤースタイルの境界線を使って境界線を作成する方法です。（Style B）

今回はレイヤースタイル設定画面で「境界線」にチェックを入れ、「カラー」で白を選択、位置を「内側」にし、3pxで設定しました。すると左図のような画像が出来上がります。見た感じでは、Style Aとそれほど大きく変わった様子はありませんよね。

ですが不透明度を変化させるとStyle Aとの違いが分かります。Style Aでは不透明度を下げると、元画像の色が境界線に反映されていましたけれど、Style Bの方法だと、さらに下層の背景画像が反映されています。私がアイコンを作るときは基本的にこうなってしまうのが嫌なので、Style Bの方法は使わないようにしています。PNGやGIFで背景透過処理を行ったときに困ってしまいますし。

もちろんStyle Bにも利点がないわけではありません。左図を見ていただくとお分かりのように、「境界線」にはグラデーションオーバーレイやパターンを適用することができます。今回は分かりやすいように虹を適用してみました。

Style Cは少し手間のかかる方法です。描画色を黒、背景色を白に設定したら、一番上の基本図形が描かれたレイヤーをCtrl＋クリックで、まず円を選択範囲にします。次に「選択範囲」→「選択範囲を変形」で選択範囲を縮小します（今回は3pxほど小さくしました）。その後、「チャンネル」タブを選択し、アルファチャンネルを新規作成し、選択範囲を解除しないまま、Back Spaceキーを押して白い円の形を作成します。

次に、再びレイヤータブで戻り、最初の円をCtrl+クリック、そのままアルファチャンネルに戻り、アルファチャンネルの新規レイヤー上に新たに作成された少し小さな円のあるレイヤを今度はCtral+Altを押しながらクリックします。すると左の拡大画像のように、円の周囲を二重に囲むように選択範囲が設定されますので、新規レイヤーを作成し、この選択範囲の中を塗り潰しツールやブラシで色を塗ります。するとStyle Cの1枚目の画像のように、Style AやStyle Bと同じような画像ができます。

Style Cで作った境界線は、Style Aのように、不透明度を変更することで、元画像の色を反映させることもできますし、Style Bのようにレイヤースタイルで、グラデーションオーバーレイやパターンを適用することもできます。また、Style Cの境界線は、それ自体独立した画像ですので、左図のように光彩（外側）を適用して、境界線自体が光るような効果を出すことも可能です。

この方法は以上の点で、とても便利ですが、作るのが面倒ですし、元画像の形を変化させるたびに作り直さなくてはならない分、厄介ですよね。

以上で紹介した3つの方法以外にも境界線を作る方法はあると思うのですが、これら3つの違いをある程度把握するだけでも、随分と表現の幅が広がると思います。是非、色々試してみてください。