写真を簡単加工でイラスト化!Photoshopでいろいろ試した結果辿り着いたそれっぽい方法!

Photoshopで写真を簡単にイラスト化します!

イラスト化する方法は様々あり、海外の有料・無料アクションやチュートリアルを試したのですがこの方法が最も簡単でそれっぽくなるのではないか?という現時点での結論です。

こちらは画面解像度にかなり依存するので、フィルターの数値やフィルターの重ね掛けなどで適宜調整してください。

リソース

制作の流れ

主な工程としては、

  1. フィルター/フィルターギャラリー/エッジのポスタリゼーション
    →エッジの太さ:0、エッジの強さ:0、ポスタリゼーション:2
  2. フィルター/表現技法/拡散
    →不均等
  3. フィルター/表現技法/油彩
    →ブラシ:3、クリーン度:10、拡大・縮小:0.1、密度の詳細:0
  4. フィルター/シャープ/アンシャープマスク
    →量:200、半径:5.0、しきい値:0
  5. 油彩を2回追加してスマートフィルター上のアンシャープマスクを一番上に
    →スマートフィルターは上から、アンシャープマスク、油彩、油彩、油彩、拡散、フィルターギャラリーとなります
  6. レイヤーを複製、複製レイヤーの油彩を1つに、マスクを使って目・鼻・口などボケが気になる箇所はこちらを表示
    →油彩を重ね掛けしていくと目などがボケていくため となります。

となります。

基本情報

横1440(px)x縦1920(px)

今回はこちらの人物の写真をイラスト化していきます。

制作ステップ

STEP1. フィルターを重ねてイラスト化

まずはレイヤーを後から調整が行えるようスマートオブジェクトに変換します。
人物レイヤーのレイヤー名を右クリックして[スマートオブジェクトに変換]を選択します。

フィルターを重ねてイラスト化していきます。

メニューバーの[フィルター/フィルターギャラリー]を選択します。

[アーティスティック/エッジのポスタリゼーション]を選択、以下のように設定します。

エッジの太さ:0
エッジの強さ:0
ポスタリゼーション:2

調整後のイメージがこちらです。

続けて[フィルター/表現手法/拡散]を選択、[モード:不均等に]を選択します。

調整後のイメージがこちらです。

続けて[フィルター/表現手法/油彩]を選択、以下のように設定します。

ブラシ:3.0 クリーン度:10.0
拡大縮小:0.1 密度の詳細:0.0

調整後のイメージがこちらです。

続けて[フィルター/シャープ/アンシャープマスク]を選択、以下のように設定します。

量:150% 半径:5.0pixel しきい値:0レベル

調整後のイメージとレイヤー構造がこちらです。

STEP2. さらにフィルターを重ねてイラスト化のクオリティを高める

フィルターの[油彩]を追加して境界を滑らかにして、イラスト化のクオリティを高めていきます。

[フィルター/表現手法/油彩]を選択、以下のように設定します。

ブラシ:3.0 クリーン度:10.0
拡大縮小:0.1 密度の詳細:0.0

同じ設定でもう一度[油彩]を追加します。

追加した[油彩]2つは[アンシャープマスク]の下に配置します。

STEP3. 目鼻口を調整してイラスト化を仕上げる

目鼻口が少し大味になってしまったのでマスクで調整します。

人物レイヤーを複製(Mac:⌘+J/Win:Ctrl+J)、複製レイヤーに[レイヤー]パネル下部の[レイヤーマスクを追加]でマスクを追加、レイヤーマスクを反転(Mac:⌘+I/Win:Ctrl+I)して複製レイヤーを一旦見えない状態にします。

[ブラシツール]を選択、描画色を[白(#ffffff)]、右クリックで[ソフト円ブラシ]を選択します。

ブラシで塗ることで目・鼻・口のみ表示します。

こちらは目・鼻・口が油彩の重ねがけでぼけてしまったので、目・鼻・口のみ[油彩]の適用を減らしたレイヤーをマスクで表示することを意図とした操作です。

こちらで完成です!

制作ポイント

写真をイラスト風に加工する

写真のイラスト化は他にもいくつか行っているので合わせてご覧ください。

コネクリ

ウェブデザイナーとしてキャリアをスタートして、スマートフォンの台頭によりUI/UX・ゲームデザインを担当、現在はインハウス寄りのディレクター兼リードデザイナー。
社内外のディレクション・ワイヤー設計・デザイン・コーディングを行う。
自社、受託ともにウェブ・アプリ・グラフィック・ゲームの実績多数。

本サイトやTwitterYouTubeにてPhotoshopとIllustratorの作例を発信中!

個人としての仕事は、動画制作「【アーティストに学ぶ】#33 Adobe Illustrator iPad版 xコネクリ – アドビ公式」、オンラインセミナー「光と色をコントロールすることで デザインのディテールを追い込む Photoshop & Illustrator」、著書「デザインのネタ帳 プロ並みに使える写真加工 Photoshop(MdN/共著)」など。

おすすめ書籍

PhotoshopやIllustratorの使い方についての書籍ではありませんが、イラストを主軸に活動している方は元よりデザインに関わるすべての方におすすめできる書籍です。

どちらかというと中~上級者向けの書籍で、光が色に及ぼす影響や配色の理論から技術的なテクニックまで根本から学べます。

私はディレクションすることも多々あり、今まで感覚的に伝えていた部分の言語化に大いに役立てることができました。

PREVIOUS POST カメラの世界に飛び込むファンタジーな画像合成を行うPhoto...
NEXT POST ちょっと見栄っ張りなビルオーナー様必見!Vanishing ...
PAGE TOP