Column
コラム

写真をマンガ・イラスト風にアレンジ加工する簡単Photoshopのテクニック

  • Twitterでシェア
  • このエントリーをはてなブックマークに追加
  • Google+でシェア
  • follow us in feedly
写真をマンガ・イラスト風にアレンジ加工する簡単Photoshopのテクニック

Photoshopのハーフトーン機能を上手く使えば写真をマンガ・イラスト風に簡単に加工することが可能です。今回はそんな加工方法をご紹介いたします。マンガを描く人にもおすすめ簡単に背景を作成する方法です。

元画像

上記の写真を下記のようなマンガ風にPhotoshopでアレンジする方法をご紹介します。


マンガ風


まずはベースとなるモノクロ写真に変換する。

背景レイヤーのコピー

【1】背景レイヤーをドラッグし、「新規レイヤー作成」上でドロップ。
背景のコピーを作成します。



Photoshopテクニック

【2】「イメージ」メニューから「色調補正」→「シャドウ・ハイライト」を選択し、シャドウ・ハイライトの設定を行います。



Photoshopテクニック

【3】加工する写真によって設定は変わりますが、ここではシャドウの量を40%、ハイライトの量を0%にします。



Photoshopテクニック

これでシャドウ部分が随分と明るくなりました。



Photoshopテクニック

【4】「イメージ」メニューから「色調補正」→「白黒」を選択し(Alt+Shite+Ctrl+B)、写真をモノクロに変換する。



スクリーントーンの作成

Photoshopテクニック

【1】「塗りつぶしまた調整レイヤーの新規作成」メニューから「ポスタリゼーション」を選択します。



Photoshopテクニック

【2】ここでは階調数を「4」に設定しています。
※数字を小さくすればするほど階調が少なくなります。



Photoshopテクニック

ここまでの仕上がりはこんな感じです。



網点(ドット)の作成

Photoshopテクニック

【1】モノクロの「背景のコピー」レイヤーをドラッグし、「新規レイヤー作成」上でドロップ。「背景のコピー2」を作成します。



Photoshopテクニック

【2】「背景のコピー2」のレイヤーを一番上に移動します。



Photoshopテクニック


【3】「フィルター」メニューから「ピクセレート」→「カラーハーフトーン」を選択。



Photoshopテクニック


【4】ハーフトーンの設定は最大半径を15pixel、ハーフトーンスクリーンの角度は各チャンネルともに45に設定します。
※最大半径の設定は加工する写真の解像度により効果が変わります。
ちなみに今回の画像解像度は5450pixel×3623pixelの画像を使用しています。



Photoshopテクニック


【5】「レイヤーパネル」の描画モードを「オーバーレイ」に設定。



Photoshopテクニック


ここまでの仕上がりはこんな感じです。



輪郭を強調し、線画っぽく加工する

Photoshopテクニック


【1】モノクロの「背景のコピー」レイヤーをドラッグし、「新規レイヤー作成」上でドロップ。「背景のコピー3」を作成します。



Photoshopテクニック


【2】「背景のコピー3」のレイヤーを一番上に移動します。



Photoshopテクニック


【3】「フィルター」メニューから「表現手法」→「輪郭検出」を選択。



Photoshopテクニック


このような感じで輪郭が検出されました。



Photoshopテクニック


【4】「イメージ」メニューから「色調補正」→「レベル補正」を選択。



Photoshopテクニック


シャドウを濃くし、ライトを飛ばすように真ん中に移動させます。
あまりコントラストを付け過ぎないほうが自然な感じになります。



Photoshopテクニック


上記のような線画が出来ました。



Photoshopテクニック


【5】「レイヤーパネル」の描画モードを「乗算」に設定。先ほど作成した線画を網点レイヤーにかぶせます。



Photoshopテクニック


このような仕上がりになります。



最後に色をつける

Photoshopテクニック


【1】「塗りつぶしまた調整レイヤーの新規作成」メニューから「グラデーションマップ」を選択します。



Photoshopテクニック


【2】「グラデーションマップ」をクリックして、「グラデーションエディター」を表示します。



Photoshopテクニック


【3】「グラデーションエディター」でお好みの色をつけます。ここでは上記のようなグラデーションを設定。



Photoshopテクニック


このような仕上がりになりまりました。



微調整をする

Photoshopテクニック


【1】「背景のコピー」レイヤーを選択し、「塗りつぶしまた調整レイヤーの新規作成」メニューから「レベル補正」を選択します。



Photoshopテクニック


【2】中間点をハイライト側によせるとシャドウ部分が際立ってきます。またハイライトを中間点によせてコントラストを弱くします。



Photoshopテクニック


最終的にはこのように仕上がりになりまりました。



まとめ

いかがでしたでしょうか。初心者でも加工が可能なように少し丁寧にキャプチャーで紹介いたしました。
WEB制作の現場ではあまりこのような加工をする機会は少ないですが、コミカルな表現をする場合にハーフトーンの設定など上手く利用出来れば表現力も増すと思います。 ちなみに下記のように別の写真もマンガ風にしてみました。


Photoshopテクニック


アメコミ的な演出としても使えますので、チャレンジしてみてください。

関連記事

被リンクでSEO効果を出すために私がやってみたこと... 近視眼的な被リンクに囚われてはいけない。 上記は単純な被リンクの構造を描いた図です。 あなたが運用するWEBサイトがポピュラーであるか否かはこれほど単純な被リンク構造で判断をされているわけではないのです。 だからいくら被リンクを増やしても近視眼的な被リンクばかりに囚われていては...
私の考える「本当に良いコンテンツとは」何なのか。... コンテンツを考えるときにもっとも重要な事とは何か。 それは「誰が」「どんな時」「どう役立つ」もしくは「どう楽しむ」記事であるのかという事。 私はこれに尽きると考えている。 よく詳細なペルソナを描けと言われている昨今。 私はペルソナを否定するつもりはない。 そして、ここで「そ...
スマホでも一眼レフで撮影したようなボカシ加工が簡単に出来る写真加工アプリTadaa SLR... 簡単に背景ボカシが出来るのがTadaa SLR 背景ボカシ加工が出来るアプリは無料でも様々出ていますよね「Blur」や「Blur Photo」など。 でも指で塗りつぶしていかないといけないし、ブラシの調整だのが面倒。 それが簡単にいい感じにボケ感を付けてくれるのがTadaa SLR。 h...
これまでとは違う!攻めの行政サイトでイケている地方自治体サイトまとめ... 京丹後市 https://www.city.kyotango.lg.jp/ リキッドデザインで京丹後市の景観を全面にPRした行政サイト。 ナビゲーションボタンもすっきりとまとめられていて好印象です。 その分クリック回数が増えますが、無駄な情報が目に入ってこないので目的の情報が探しやす...
1ヶ月間、無料ブログサービスを4種類運用してみた結果、比較してみてどれが良いのか?... アメーバブログ(アメブロ) https://official.ameba.jp/ 【アクセス数】★★★★★(注意が必要) 【エディター画面の書きやすさ】★★★★ 【ブログ記事内容の難易度】★ 【独自の特長】独自ドメインでの運用不可 【投稿した記事数】21記事 【記事の文字量】5...
BingWebマスターツールの使い方と便利な機能... なぜBingWebマスターツールへの登録が必要なのか https://www.bing.com/toolbox/webmaster/ BingWebマスターツールはマイクロソフトの検索エンジンBingにサイトをインデックスさせるためのツールです。 主にGoogleを利用しているからBi...
独自ドメインが無料で使えるAmebaOwnd(アメーバオウンド)でサテライトサイトを作成しよう。... まずはAmebaOwnd(アメーバオウンド)でデザインテンプレートを選ぼう https://www.amebaownd.com/ Amebaアカウントをお持ちの方はそのまま「無料でホームページを作成」ボタンをクリックして次に進んで下さい。 まだAmebaアカウントをお持ちでない方はアカ...
写真が美しいデザインが美しい温泉旅館のWEBサイト【厳選15サイトまとめ】... 石川県七尾市和倉温泉 多田屋 https://tadaya.net/ 和倉温泉の奥座敷にある多田屋 ここの温泉旅館のWEBサイトはWEB業界に長くいる人なら誰しもが知っているほど超有名です。 現在公開されているWEBサイトではないですが、2006年に公開されたFLASHのWEBサイト...

この記事を共有する

この記事を読んだ方におすすめの記事

その他の最新コラム記事

人気記事ランキング

コラムカテゴリ
  • このエントリーをはてなブックマークに追加
  • follow us in feedly
お問い合わせ