WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >Photoshop

Photoshopで図形を作る際には「シェイプ」機能を使いますが、写真やイラストの形のシェイプが作れると、何かと便利です。
今回は、写真やイラストの輪郭をシェイプへ変換する方法をご紹介します！

カラーオーバーレイでもできるけど…

写真やイラストをシルエットのように取り入れたい場合、レイヤー効果の一つ「カラーオーバーレイ」を使用すれば手っ取り早くシルエットイメージを作ることができます。
ただ、この方法だといくつか問題があります。

データが重くなる

写真やイラストにカラーオーバーレイをかける方法では、元の写真やイラストはそのままpsdデータ内に残ることになります。

それで問題ない場合もありますが、写真やイラストはある程度容量のあるデータですので、psdの中に含まれていればそれだけデータが重くなってしまいます。

いろいろな写真やイラストのシェイプを作りたい場合は、あまりおすすめできません。

写真やイラストをシェイプにして、元の写真やイラストを削除してしまったほうが、psdデータ全体の容量が軽くなり、スムーズに作業できます。

形を調整できない

カラーオーバーレイをかけてシルエットにする際に、より簡略化したい、または元の形が分かりにくくなったので部分的に誇張させて分かりやすくしたい、などの調整が必要になることもあります。

写真やイラストにカラーオーバーレイをかける方法では、元の写真やイラストごと調整する必要があります。

元のイラストが編集可能なものであれば多少は調整が効きますが、写真の場合は調整が難しいですし、イラストを編集するにしても、元のイラストの見え方とシルエットでの見え方との兼ね合いを考えて調整する必要があり、やや難しさがあります。

シェイプ化することで、パスを動かせば図形そのものを自在に調整できるようになるため、周りの要素と合わせやすくなります。

必ずしもカラーオーバーレイを使った方法が非効率になるとは言えませんが、シェイプ化する方法も知っておいたほうが、状況に応じて一番スムーズな方法を選ぶことができ、作業効率化にもつながりそうです。

写真やイラストの輪郭をシェイプにする方法

イラストの境界線にパスを取る

まずは、シルエット化したいイラストを用意します。

「レイヤー」パネルを確認し、イラストのサムネイル上にマウスカーソルを持っていったら「Ctrl」キーを押しながらクリック。

猫のイラストの輪郭（境界線）が選択されました。切り抜き＋透過されている写真やイラストであれば、この方法が一番手っ取り早く輪郭を選択できます。

次に、ツールが「選択ツール（ショートカット「M」）」になっている状態で、選択された範囲内のどこかにカーソルを持っていき、右クリック。
「作業用パスを作成」をクリックします。

表示したウィンドウの「許容量」の数値を設定します。

数値が小さいほど細かくパスを取ってくれますが、最小値である「0.5」だとガタつきが出てしまうので、今回は0.7にします。
イラストの作りこみ具合やサイズにもよるので、都度調整します。

猫のイラストの境界線に沿ってパスを作ることができました。

パスを「塗り」状態のシェイプにする

作業用パスができたら、上部メニューから「レイヤー」＞「新規塗りつぶしレイヤー」＞「べた塗り」を選択します。

「新規レイヤー」というウィンドウが開き、レイヤー名を聞かれるので、分かりやすい名前をつけます。後から変えられるので、特に必要がなければそのまま「OK」で大丈夫です。

すると色の選択ができるようになるので、お好きな色に設定します。これももちろん後から変えられます。

猫のイラストの形をしたシルエットシェイプが完成しました！

注意点

写真やイラストの形のシェイプを作るにあたって注意点があります。

実際に作ってみると分かるのですが、どうしても境界線がズレます。
アイコンなどの用途で小さく使う分には良いのですが、正確なシルエットが必要な場合は、最初に書いた「写真・イラストにカラーオーバーレイをかける」方法のほうが適切です。

両方のやり方を知っておくことで、用途や状況によって使い分けていきましょう！