写真をイラスト調に加工する:Photoshop編

2013年9月12日 / Photoshopテクニック, 同人誌をデザインする


写真をイラスト調に加工する:Photoshop編

PhotoshopとGIMPを使って写真をイラスト調に加工します。(GIMP編はこちら
フリー素材の写真を使ってイラスト調に加工してみましょう。

慣れれば10分もかかりません。
自作イラストとの合成の他、コラージュ調の表紙のパーツとしても活用できます。

今回はタルトケーキの写真をサンプルにしましたが、風景や動物の写真にも応用できます。

元画像のタルトケーキ。

元画像のタルトケーキ。この画像をイラスト調に加工します。

完成はこんな感じになります。

完成はこんな感じになります。

今回の写真はすべてフリーの写真素材『足成』さんからお借りしています。

写真を加工する

このままでは使いにくいので、下準備をします。
色合いが暗く、くすんで見えますので「トーンカーブ」で補正します。
イメージ>色調補正>トーンカーブ
「RBG」では全体的に明るくしたいので、カーブが山なりになるようにします。

代替こんなカーブになるように調整。ハイライトをもっとつけたい時はRGB(黒いライン)がS字になるようにする感じで。

こんなカーブになるように調整。明暗をもっとつけたい時はRGB(黒いライン)をS字カーブにします。

青みがかって見えるので「B」のカーブを若干下げ、「R」を少しだけ上げます。
次に背景は今回使いませんので切り取ります。
だいたい単色なので自動選択ツールでサクッと削除しました。

色調補正+背景削除後

色調補正+背景削除後

 

写真っぽさをなくす

そもそも写真っぽさとは何かというと、細かい色の階調や陰影、形の正確さです。
今回のタルトの画像は、たくさんフルーツが乗っていて色の階調や陰影がたくさんあります。
これらを適当に間引いてやると、ぐっとイラストに近づきます。
Photoshopでは、フィルター加工をしても画像が損なわれない「スマートフィルタ」という機能がありますのでぜひ活用しましょう。
フィルターの有無や再加工が簡単になります。
レイヤーを右クリックから「スマートオブジェクトに変換」、もしくはメニューバーのレイヤーから「スマートオブジェクトに変換」を選択します。(レイヤーウィンドウのメニューからでも可)

psd04
レイヤーのサムネールにアイコンが付きます。(「背景」レイヤーをスマートオブジェクト化するとレイヤー変換されます。名前が「レイヤー1」などになりますが、そのままでOKです)

レイヤー名が「背景のコピー」になってますが気にしないでください。

これ以降レイヤー名が「背景のコピー」になってますが気にしないでください…

イラスト調に加工する

フィルタ>カットアウトを選択します。
レベル数は色の階調の段階です。大きくなればなるほど、元の写真に近くなります。
エッジの単純さは、輪郭の正確さです。この数値が大きくなると、輪郭が大きく変化します。
エッジの正確さで微調整します。
これを下のように入力します。

psd06

レベル数「7」
エッジの単純さ「3」
エッジの正確さ「2」

次にフィルタ>ドライブラシを選択します。
このフィルタでベタ塗っぽさを出します。
ブラシサイズは小さくするとディティールが活かされます。
ブラシの細かさは小さくするとストロークのような線が現れます。(今回は使わないので数値を大きめに)
テクスチャはノイズっぽくなってしまうので、今回は使いません。
これを下のように入力します。

ブラシサイズ「6」 ブラシの細かさ「9」 テクスチャ「1」

ブラシサイズ「6」
ブラシの細かさ「9」
テクスチャ「1」

これでざっくりとイラストっぽくなりました。

psd08

レイヤーウィンドウに「スマートフィルタ」とフィルタ2つが追加されています。

微調整と仕上げ作業

レイヤーパネルにスマートフィルタの下に、2つフィルタが並んでいます。
右端のアイコンをダブルクリックすることで、各フィルタの不透明度を微調整できます。

psd09
今回はフィルタ不透明度をそれぞれ70%にします。(ドライブラシもカットアウトも両方)

psd10
すると元画像のディティールが少し透けて見えました。

フィルタの不透明度を70%にすると、加工時のエッジの不自然さが抑えられます。

フィルタの不透明度を70%にすると、加工時のエッジの不自然さが抑えられます。

ですが、ハイライトのところ(タルトの中心やイチゴの上部)が少しつぶれてくすんでいます。

psd12
キャラクターのイラストでも、顔や瞳など特に注目されるところはぐっと力を入れて描きます。
モノのイラストでも同じです。
このイラストの中央のベリーとその周辺のディティールを元の写真から復活させましょう。
スマートフィルタの白い画面を選択します。

psd13
ブラシツールを選択して、中央部分を塗ります。
(スマートフィルタの白い画面に黒く描画されますが、この部分にはフィルタがかかっていない状態を表しています)

psd14
これで元の写真のハイライトやディティールを復活させることができました。

psd15
あとはお好みで彩度などを上げて微調整して完成です。

レイヤー>新規調整レイヤー>色調補正>色調・彩度の「再度」を15に。

レイヤー>新規調整レイヤー>色調補正>色調・彩度の「再度」を15に。

 

 

完成はこんな感じになります。

完成はこんな感じになります。

まとめ

慣れてくるといろんなものに応用できて便利です。私の好みなんですが、色調がはっきりしているタルトを選んでみました。

このフィルタは色がはっきりしているものは得意なんですが、全体が似たような色の写真は苦手です。たとえば空はグラデーションが妙な色分けをされてしまうので不向きかもしれません。モノや動物とかが向いてると思います。(室内や風景はGIMP編(まとめ)で紹介しています。)
サンプルとしていくつか。

 

切り抜きが荒いのでもうちょっとちゃんとやった方がいいですね…。このサンプルは最後に「彩度」を下げて落ち着いた色合いにしています。

切り抜きが荒いのでもうちょっとちゃんとやった方がいいですね…。このサンプルは最後に「彩度」を下げて落ち着いた色合いにしています。

こちらは彩度を結構強引に上げています。ちょっと現実離れしたした雰囲気でいいかな~と思います。触角など細かい部分は加工途中でフェードアウトしてしまうことが多いので、あとで描き足してください。

こちらは彩度を結構強引に上げています。ちょっと現実離れしたした雰囲気でいいかな~と思います。触角など細かい部分は加工途中でフェードアウトしてしまうことが多いので、あとで描き足してください。


おすすめ記事

タグ: , , , , ,

スポンサーリンク

BOOTHショップ

SNS

twitterID:@dotsuku

スポンサーリンク




お問い合わせフォーム

お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文(必須)

TOPへ戻る