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

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

シンプルでスタイリッシュなデザインが流行している一方、イラストを使った楽しいデザインも人気があります。特に、水彩調やパステル調のアナログなイラストで作られた温かな雰囲気のデザインは、人間同士のつながりが薄くなりがちなコロナ時代、ニーズが増えていくのではないかという説もあります。

とはいっても、いきなりアナログイラストをデザインに取り入れるのはかなりハードルが高いですよね…。そこで今回は、Photoshopを使って写真を水彩画風に加工する方法をご紹介します！ほとんど自動で加工してくれるので、絵を描いたことがない、絵心がない、という方でも簡単に取り入れることができます。

元となる画像を用意する

まずは、加工したい写真を用意します。実際にイラスト化したい画像と、もう1枚、紙っぽい素材画像を用意してください。写真素材サイトで「水彩紙」「画用紙」などと検索して、ほどよくデコボコしている素材を手に入れておくと良いです。

紙素材画像をPhotoshopで開き、加工したい写真を重ねる

画像が用意できたら、紙素材画像をPhotoshopで開きます。次に、加工したい写真を上に重ねます。

こうすることで、最終的に下に敷いた紙素材の質感をイラストに加えることができます。

写真を加工する

「塗り」部分を作る

加工したい写真のレイヤーを選択した状態で、上部メニューから「フィルター」＞「フィルターギャラリー」を選択します。

右のほうに加工の仕方がいろいろ出てくるので、「アーティスティック」＞「水彩画」を選択します。

調整します。「ブラシの細かさ」は数値が高いほど水彩っぽくなるかと思います。最高値「14」で良いくらいです。
「シャドウの濃さ」は少し数値を上げただけでかなり黒くなってしまうので「0」でOKです。
「テクスチャ」は数値を上げるほどシャープがかかります。上げることで少々ガビガビするので、最低値「1」で大丈夫です。

もちろん写真によりますので、お好みで調整してください。

このように設定しました。ここで「OK」をクリック。

写真が水彩っぽくなりました。この写真のレイヤーを「乗算」にします。

すると、下に敷いてある紙素材が透けて見えることによって、紙っぽい質感がプラスされます。これで「塗り」は一旦完了です。

「線画」部分を作る

次に、線画を作ります。もちろん、写真を手でトレースする必要はありません。ここも自動で作ることができます。

先ほど水彩っぽく加工した写真のレイヤーをコピーし、かけたフィルターを削除します。レイヤーの右端の、円が重なっているようなアイコンをドラッグ＆ドロップで下部のゴミ箱アイコンまで持っていけば、フィルターを削除できます。

フィルターを削除して元の写真に戻ったところで、今度は線画用のフィルターをかけます。「塗り」の時と同じように、「フィルター」＞「フィルターギャラリー」を選択します。

加工の仕方は「スケッチ」＞「コピー」を選択します。右の数値ですが、「ディテール」は数値を上げるほど線が濃く太くなります。こちらは最小値「1」で良いかと思います。「暗さ」も同じく線が濃く太くなりますが、こちらのほうが微調整がしやすいです。今回は「12」にしました。

ここで「OK」をクリックすると、このようになります。

鉛筆で描いたような線画が追加されて、さらに手書きっぽくなりました。線画が濃すぎる場合は、線画レイヤーの不透明度を落とせばOKです。

仕上げ

元の写真によってはこれで終わりで良いのですが、少し暗いので、調整します。「塗り」を作ったレイヤーのみに「レベル補正」や「トーンカーブ」などを適用して、少し明るくします。ここはお好みのものを使ってください。

少し明るくなりました。

最後に、境界線をふわっとさせます。
まず、すべてのレイヤーをグループ化します。

次に、「Ctrl＋A」で画面いっぱいに選択範囲を作ります。その状態で上部メニューから「Shift＋F6」を押すと、「境界をぼかす」という機能が使えます。

ぼかしの範囲を決めます。数値が大きいほどふわっとぼけます。今回は30pxにします。「カンバスの境界に効果を適用」にチェックが入っていない場合は、チェックを入れてください。

選択範囲を表す点線が丸くなったと思います。ここで、先ほど加工した画像たちが入っているレイヤーグループを選択します。その状態で、レイヤーパネル下部の「逆日の丸」のようなアイコン（マスク）をクリックします。

画像の境界がふわっとして、水彩画のようになりました。一番下のレイヤーにベージュや薄イエローなどを敷くと、より水彩画っぽさが出ると思います。これで完成です！

水彩画風イラストを使ったサイト例

今回のやり方を使っているかどうかは分かりませんが、水彩画を取り入れているサイトをご紹介します。

青柳ういろう

水彩イラストのおかげで、優しい和風の雰囲気です。スクロールするとジワッと絵具が広がる動きも楽しいですね。

maison de frouge

洋風デザインにもマッチします。手書き風イラストが入ると、丁寧に手作りされている感が出て美味しそうに見えてきます。

ほっこりしたデザインにぜひ！

飲食店や旅館のサイトなど、温かみがほしいデザインには、今回の方法を使って水彩画のようなイラストを取り入れてみても良いかもしれません。写真によっては少し調整が難しいものもあるかもしれませんが、ぜひ一度チャレンジしてみてくださいね。