マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン

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

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

01

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

02

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

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

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

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

03

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

Contents

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デザイン

関連記事

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

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

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

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

簡単レシピ!アメコミ風デザイン素材と活用法!!

今回はアメコミ風のデザインを作るときに役立つフリー素材と活用法をご紹介いたします。 まずは実際のアメコミを見て、簡単に特徴を分析してみます。 アメコミでgoogle画像検索をかけると、、、 とってもカ …

WEBトレンド!?パーツの動きに注目!!~素敵サイトの旅 その2~

明けましておめでとうございます。web初心者のKです! 本年もどうぞよろしくお願いいたします。 みなさま、お正月はいかがお過ごしでいたでしょうか? 私はあまりに寒すぎて冬眠できないかな~、と、 食いだ …

簡単!アニメーションpng Apngの作り方

こんにちは、デザイナーのAです! AdobeAnimateを利用して簡単に画像をアニメーションさせるApngの作り方をご紹介します! Animateには簡単&効率的にアニメーション作成できるツールが多 …