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

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

| 素材作成講座

Pin It

Borderline, in one way or another

アイコン等を作る際に境界線をつける人はそれなりにいると思います。今回は境界線の付け方を私なりに紹介してみたいと思います。

Introduction

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

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

Style A

光彩(内側)

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

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

不透明度50%

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

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

Style B

境界線(位置:内側)

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

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

不透明度50%

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

グラデーションオーバーレイ

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

Style C

選択範囲変更

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

拡大画像

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

光彩を適用

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

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

Conclusion

イメージ

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


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.