WEBデザイン

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

投稿日:2014年7月28日 更新日:

01

このお姉さんにあえて漫画調にマーカーネットをアピールしてもらうと…

02

ちょっと面白くて勢いのある効果が生まれますね。

昨今では漫画的な加工を取り入れるWEBデザインも増えてきました。

ですので、今回は写真を漫画風にアレンジする方法について、まとめてみました!

まずはphotoshopで写真のモードをグレースケールにします。

03

次に、写真を漫画の背景に加工するために作られた無料アクションをダウンロードします。

Adobe Photoshop5.5,Mac

http://matsudanozomu.com/nyuumon/img/manga.sit

PhotoshopCS2以降対応

http://matsudanozomu.com/nyuumon/img/manga.sit

アクションファイルの読み込み方

【PhotoShop】アクション(.atn)ファイルの追加(インストール)方法とおすすめのアクションまとめ

アクションファイルをphotoshopで読み込んだら、早速実装してみましょう!

04

05

私はとりあえず、この段階でアクションをストップしておきます。

次に元の写真レイヤーを2枚複製し、複製したレイヤーを選択した状態で「フィルター」→「表現手法」→「輪郭のトレース」の機能を使って、輪郭線を抽出。
※これを二回繰り返します。(足りない線を補うようにレベルの数値を調整するのがオススメです。)

06

元画像のレイヤーを非表示にするとこんな感じになります。

07

あとは不要な線を消したり、髪にブラシやパスを使って軽くハイライト入れます。

また、トーンのパターンをダウンロードして、塗りつぶし機能を使用してトーンをはったりすると、より漫画っぽくなります。

漫画トーンのパターンダウンロード

http://ne-ko-ma-ta.blog.ocn.ne.jp/blog/toneuse.html

photosho パターン読み込み方

http://blog.livedoor.jp/redamoon/archives/1531293.html

08

09

漫画の擬音素材

http://www.sozaijiten.com/manga/03_so.html

効果線素材

http://www.sozaijiten.com/manga/02_ef.html

吹き出し素材

正統派丸ふきだし

背景素材

http://da-yama.secret.jp/index.html

↑上記のサイトのようなフリー素材サイトからクオリティの高い線画の背景や効果線、書き文字、吹き出しなどの画像データをダウンロードし、
ペタペタ貼り付けるだけで…

02

完成です!

いかがでしたでしょうか。
ちょっとインパクトのある面白いコンテンツを作る際にお役立ていただければと思います。

-WEBデザイン

関連記事

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第二弾として「素敵な明朝英字フォント …

WEBデザインとは?概要や実際の制作の流れ、制作会社に依頼するときの注意点を徹底解説!

WEBデザインとは?概要や実際の制作の流れ、制作会社に依頼するときの注意点を徹底解説!

WEB制作においては、ユーザビリティを高めるために、WEBデザインが重要となります。WEBデザイン自体はスキルがあれば内製もできますが、こだわったデザインや高度なスキルが必要なデザインにしたい場合は、 …

WEB制作における商用利用OK!お洒落な無料フォント6選

WEB制作における商用利用OK!お洒落な無料フォント6選

こんにちは、デザイナーのAです。 今回は商用利用OKな無料フォントをご紹介します! 無料フォントとして紹介されているフォントでも、中には商用利用は不可とされているものもありますので、ライセンスをしっか …

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

本日はクリスマス、また一年の終わりが近ついてきましたが、 皆さんはいかがお過ごしでしょうか? サイトのデザイン制作に入る前に、よくWEBデザインギャラリーサイトで同じ業種やジャンルのサイトを参考してか …

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

WEBサイトのデザイン素材を紙媒体に使うとき、ベクターのデータがなくて困ったことありませんか? ペンツールでトレースするのも時間がかかるし、Photoshopでパスを作成したら境界がギザギザになってし …