0%

Designデザインワークショップ

Posted:2016.05.19

【デザインワークショップ】vol.6 写真をモノクロ漫画タッチのデザインに仕上げてみる

今回は普通の写真をPhotoshopを使って、モノクロの漫画タッチのデザインをつくるチュートリアルです。漫画特有の印刷された質感やトーン、そして画の迫力やインパクト、躍動感などを再現したいと思います。

 

まずは素材となる写真を漫画タッチに加工していきます。そしてそれぞれの素材を組み合わせていき、漫画の雰囲気に仕上げていきます。今回はこちらの2つを写真素材として使います。

 

0-20-1

 

STEP1.コントラストを調整

1.トーン編集用にレイヤーをコピーします

 

1-1

 

 

2.色調補正のシャドウ・ハイライトを調整しハイライトを強調させる

 

1-2

 

 

STEP2.白黒に変更する

1.色調補正の白黒の項目でモノクロにする

 

2-1

 

 

STEP3.階調数を調整

1.調整レイヤーで色調補正のポスタリゼーションで階調数を減らす

 

3-1

 

 

STEP4.カラーハーフトーンの適用

1.ドット表示用にレイヤーをコピー

 

4-1

 

 

2.フィルターのカラーハーフトーンを適用する

 

4-2

 

 

3.描画モードをオーバーレイに変更する

 

4-3

 

 

STEP5.アウトラインの強調

1.トーン編集で作成したレイヤーをコピーし最前面に移動させる

 

5-1

 

 

2.フィルターの輪郭検出を適用する

 

5-2

 

 

3.色調補正のレベル補正でコントラストを強くする

 

5-3

 

 

4.描画モードを乗算に変更する

 

5-4

 

 

STEP6.素材を組み合わせる

1.背景と人物を重ねる

 

6-1

 

 

2.集中線を追加する

 

6-2

 

 

3.吹き出し、効果音を追加する

 

6-3

 

 

4.背景と集中線にベクトルマスクをかけ周囲をトリミングして構図を調整する

 

6-4

 

 

5.塗りつぶしレイヤーを背景に追加する

 

6-5

 

 

6.コマの枠線を追加する

 

6-6

 

 

あとは吹き出しの中にセリフを入れて完成です!普通の写真が週刊雑誌の漫画のようなデザインに仕上がりました。

 

manga

 

セリフのフォントも漫画の雰囲気に合わせたものを使うとより一層良いですね。

 

ちなみに色調補正でグラデーションマップを使って色を重ねてもいい感じに仕上がります。

 

7-1

 

 

いかがでしょうか、今回のワークショップはPhotoshopを使ってモノクロ漫画風のデザインを作成してみました。意外と簡単にできて、応用するとデザインの幅も広がるので、是非チャレンジしてみてはいかがでしょうか?

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】