こんにちは！

WEBデザイナーの原です！

皆さんはイラスト基調のデザインを制作する際に、

「写真をイラストにしたい！」「フリー素材に一手間加えて気の利いた画像を使いたい！」

けど、、、イラスト風に加工するってどうしたらいいの・・・？という風に思ったことはありませんか？

Photoshopでは、便利なフィルターなど多くありますが、“写真感”が残ってしまったり、逆に“原型を留めてない”なんてことになるケースも少なくありません。

実際私もこれまで幾度となくそんな経験をしてきました。。。笑

そんな悩みともおさらばしよう！！！！って事で、今回は、Photoshopを使ったイラスト風画像の表現方法を分かりやすくご紹介していきます！

今回はこちらの写真を基に加工していきたいと思います。なんとも気持ちよさそうないい雰囲気の写真ですね。

このまま使用してもよさそうな写真ではありますが、イラスト風に加工してオリジナリティのある画像に仕上げていきましょう。

写真素材はpixtaから購入させてもらいました。できるだけ空が抜きやすい画像が比較的作りやすいと思います。

それでは実際にやっていきましょう！

皆さんも細かい機能など確認しながら作成してみてください。

１.イラストっぽい画像加工のベースを作る

まずはイラスト風加工のベースとなる画像を作っていきます。

初めに、【イメージ】＞【色調補正】＞【HDRトーン】を選択します。

【HDRトーン】とは主に露光量とトーンの調整をすることができます。

この時に気をつけるべきポイントはレイヤーが全て統合されてしまう事です。私も正直HDRトーンの仕様はよく分かっていませんが、とにかく複数レイヤーを重ねた加工などをする場合は「レイヤーが全て統合されてしまうため一番最初にHDRトーンを調整する」と覚えておくと良いでしょう。

イラスト風にするために全体のトーンを結構パキパキにしちゃって大丈夫です。

使用する画像によって異なりますが、明るめでビビットにしておくと丁度良いと思います。

ちなみに私はこのくらいで調整しました。是非参考にしてみてください！

作成したベース画像は後から複製して色々と使うので消さないようにとっておいてください。

失敗した時にリカバリーが難しくなります。。。

２.選択範囲用のレイヤーを用意

後からでも良いですが、今回は分かりやすくするためにまず必要なレイヤーを先に準備しておきましょう。

まずは先ほど制作したベース画像を以下の５つに複製してください。

ここで軽くレイヤーの説明をしておきます。

●油彩

イラスト風にするためのディティールを調整するためのものです。

●ドライブラシ

油彩のディティールを補うためのフィルター加工用です。

●コントラスト用

画像にコントラストをつけるための選択範囲用のレイヤーです。

●境界線用

イラスト風な線のディティールをつけるための選択範囲用レイヤーです。

●空

後で空だけイラスト風の画像をマスクをかけて合成すための選択範囲様レイヤーです。

３.イラストっぽくフィルターでディティールを追加しよう

次は【油彩】レイヤーを使います。

そして【フィルター】＞【表現手法】＞【油彩】を使い下図の様に調整していきましょう。

この時ウニョウニョしていて気持ち悪い程度にやっちゃいましょう。

参考までに私はこのくらいで調整しました。

ただ、このままだと当然気持ち悪いですよね。

ここで【ドライブラシ】レイヤーを使います。

上記の様に調整したら、【油彩】のうねうねして気持ち悪い所に部分的にマスクをかけて合成していきます。

今回は主に草の部分を合成しました。ここはあまり丁寧にやらなくても意外と馴染むのでざっくり合成すればOKです。

４.選択範囲用レイヤーの作り方

２.選択範囲用の画像を作るで軽くご説明した選択範囲用のレイヤーの作り方について解説していきます。

①【コントラスト用】

コントラスト用レイヤーに対して【イメージ】＞【色調補正】＞【２階調化】を選択し、数値を調整して下記の様に影となる部分を黒くしておきましょう。

（２階調化とは白黒と違い“真っ白”か“真っ黒”だけでできた明度のない２階調の状態にできます。）

この時に元画像の背景などが暗すぎると塗りつぶされてしまうので、そんな時は【イメージ】＞【色調補正】＞【白黒】を選択し、数値を調整して明度を変えておくと良いと思います。

②【境界線用】

まずは境界線用レイヤーに対し、【フィルター】＞【その他】＞【ハイパス】を選択してください。

このハイパスフィルターというのは、高周波成分だけを抽出して、画像中のエッジ部分だけを残すことが可能なフィルターです。

これを利用して下記の様に拡大するとギリギリもやっとなんか見えるなってくらいほぼグレーの状態にします。

０.２〜０.４を目安に調整してみてください。こうすることで境界線部分だけが浮き出た様な状態になります。

その状態になった次に【イメージ】＞【色調補正】＞【２階調化】してください。

そうするとこのように線の部分が黒く浮き出てきますね。

この時のしきい値は無駄なノイズが消えて全体の線が出てくるくらいを目安にしてみてください。

③【空用】

次に空の切り抜き用レイヤーを作っていきます。

まず、【イメージ】＞【色調補正】＞【白黒】を選択し、数値を調整し左図の様に空以外の部分が極力暗くなるようにします。

そうしたら【イメージ】＞【色調補正】＞【２階調化】を選択し右図の様に空以外が真っ黒になるように調整します。

空がしっかりと抜けていれば問題ないと多います。

これで選択範囲用レイヤーの作成は完了です。

５.全体的に青みをかける

次にイラストの様な雰囲気にするために全体的に青みをかけていきます。

まず、境界線用レイヤーを選択し、【選択範囲】＞【色域指定】を選択してください。

そうしたら下記右側のスポイトで画像の白い部分を選択して「OK」を押すと白い部分のみが選択されます。

白い部分が選択できたら、【選択範囲】＞【選択範囲を反転】をすると黒い部分が選択できます。

この時、選択範囲用レイヤーは非表示にしておきます。

選択範囲が作れたら新規レイヤーを作成し、新規レイヤーの選択範囲上で青色に塗りつぶします。

そうすると青いレイヤーができましたね。

コントラストレイヤーも同様に作っておきます。

次に空用レイヤーを選択し、今度は空の部分のみを選択したいので空の部分のみをクイック選択ツールで選択していきます。

そうしたら先ほどと同様に新規レイヤーを作成し、選択範囲を青で塗りつぶしておきます。

ついでに塗りつぶしたレイヤーをもう一枚追加し、今度はグラデーションツールで下図右側のようにグラデーションにしておきます。

上記の４つのレイヤーが作れたら今度は、レイヤーを重ねていきます。

【コントラスト】乗算　塗り：４０％

【境界線】乗算　塗り：４０％

【空用で塗りつぶしたレイヤー】覆い焼きカラー　塗り：３０％

【グラデーション】オーバーレイ　塗り：４０％

ぐらいに設定します。

これら全てを重ねた画像がこちらになります。

６.空を合成して全体的に微調整

最後に空を差し替えます。

空は撮影時の天気だったり明るさでイラストっぽくならなかったり不都合が多いので差し替えてしまったほうが良いと思います。

作っておいた空の選択範囲用レイヤーを使って空の画像を合成したら完成です！！

最後に出来上がった画像の雰囲気に合わせてレイヤーの不透明度を調整したり、光源のレイヤーを追加したり微調整を行って今回仕上がった画像がこちらになります。

アニメキャラとか立たせても絵が締まりそうですね。笑

まとめ

過去に何度かこういった加工を行ってきましたが、今回この記事を書くにあたって調査しながら書きました。

改めてPhotoshopの可能性を感じましたね。

なかなか手間と工程のかかる作業ではありますが、こういった加工の仕方を覚えておくと他の加工オーバーレイや乗算に変えてみたり他の加工でも応用できる細かい技術が詰まってますよね。

これを機に皆さんも人物のグラフィック加工だったり他の加工の表現方法にも挑戦してみてください！！！

それでは皆さん、良きPhotoshopライフを！！！