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

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

最近、絵描きさん界隈で話題になっていた「ベースを塗ったイラストにオーバーレイで影をつけるとラク！」という手法を、Photoshopで試してみました！

Webデザインでも、「イラストを手早く描きたい」「良い感じのイラスト素材を見つけたけど、影があればよかったのに…」といった時に活用できそうです。

影を塗るのは少し技術が必要ですが、手順としては簡単なのでご紹介していきます。

通常の影塗りのデメリットについて

手法をご紹介する前に、通常の影塗りのデメリットについて説明します。

普通に影をつけていく場合、オレンジには濃いオレンジの影、紫には濃い紫の影、とそれぞれの色に対して「少し濃い色」を毎回作りながら塗っていきます。

影の色にこだわって制作する場合はこの方法でももちろん良いのですが、次のようなデメリットがあります。

1. 毎回色を設定するのに時間がかかる
   オレンジの影はこの色、紫の影はこの色…と、毎回色を作って塗っていくのは単純に時間がかかります。
2. トーンがばらつきやすい
   それぞれの色で影をつけていくとトーンがばらつき、統一感を出すのが難しいことがあります。
3. 後から色を修正するのに手間がかかる
   影をつけた後に「ここのオレンジをやっぱり青にしたいな…」となると影の色も合わせて修正する必要があり、かなり手間がかかります。

イラスト自体がメインコンテンツの場合や、個性的な影をつけたい場合は、影にもこだわって一色一色丁寧に色を設定しながら影をつけていくほうが良いこともありますが、そうでない場合、これからご紹介する方法で効率よく影塗りをしていったほうが良いこともあります。

それでは、実際の方法をご紹介します。

イラストを用意する

まずは、寒そうな猫のイラストを用意します（何でも良いです）。ベースの色や柄は塗ってありますが、影はまだ塗っていません。

こちらはIllustratorで線画を描き、Photoshopで色を塗ったものです。どのツールで描いても良いですが、必ず線画と塗りのレイヤーを分けておいてください。塗りはもちろん統合する必要はなく、塗りレイヤーを一つのグループにまとめておけば大丈夫です。

イラスト素材を使う場合も、線画と塗りで分けてベクトルスマートオブジェクトとしてPhotoshopに貼り付けると、この方法が使えます。

黒一色で影を塗る準備をする

塗りレイヤーをグループ化したものの上に新規レイヤーを追加し、クリッピングマスクします。塗りグループと新規レイヤーの間にカーソルを置き、Altを押しながらクリックするとクリッピングされます。
これで、塗りのある箇所にのみ影を塗ることができます。

このとき、黒で影をつけるのはベースの色が見づらくて塗りにくいため、あらかじめ新規レイヤーの不透明度を少し下げておきます。今回は50％に設定します。

影を塗る

新規レイヤーに影を塗ります。黒一色なので、暗くなりそうなところにとにかくせっせと塗っていきます。

不透明度50％とはいえ黒なので、このままだとどんよりと濁って見えます。

影レイヤーの設定を変更する

ここから影を自然に馴染ませていきます。手順は簡単です。影レイヤーを「オーバーレイ＋不透明度を調整」するのみです！

今回は柔らかい雰囲気のイラストに合わせるため、不透明度を20％にしました。ここはイラストのテイストやお好みに合わせて調整してください。

ベースカラーが明るいパーツ、例えば猫の顔やマフラーにあまり影がつかないのは気になりますが、紫の服の影は濃い紫に、オレンジのこたつの影は濃いオレンジになり、濁らず綺麗に発色しました！

なお、影レイヤーをオーバーレイではなく「ハードライト」や「カラー比較（暗）」などに変えると、ベースカラーが明るいパーツの影もしっかりと表示されます。
オーバーレイより少し濁ってしまいますが、より柔らかい雰囲気になるので、今回はかえって良いかもしれません。

服の色の鮮やかさを残したい場合は、顔やマフラーを別レイヤーにして「服はオーバーレイ、顔はハードライト」などと分ける方法も有効かもしれません。

オーバーレイ影のメリット

この方法のメリットは、先に挙げたデメリットがだいたい解消されることです。すべてのパーツの影を黒一色で塗るので色を考えたり調整する必要がなく、トーンも大きくずれません。また、すべてのパーツに一括で影を入れていくので、光源も迷いにくくなります。

一番助かるのが、影色が「ベースカラーより暗い色」という設定になっているので、ベースカラーを後から変更しても影を修正する必要は基本的にないということです。
「ベースカラーの段階では良いと思ったのに、影をつけたら合わなくて、別の色にしたくなった…」という時にも助かる手法です。

効率よく影塗りをして手軽にイラストを取り入れよう

イラストのベース塗りは塗りつぶし機能などでパパっと塗ることもできますが、影については手作業になるため、毎回色を設定するのは大変です。今回のように柄がある場合はさらに手間がかかりますよね。

影にこだわらない場合は今回の方法で効率よく影塗りをすることでイラスト利用のハードルが下がり、デザインに取り入れやすくなりそうです。
Photoshop以外のツールでも使えることの多い方法なので、ぜひ試してみてくださいね！