Ownedmedia ウェブ制作に役立つコンテンツを発信中!

ワークショップ 2016.05.19

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

Tags: ,,
最終更新日:Update

今回は普通の写真を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を使ってモノクロ漫画風のデザインを作成してみました。意外と簡単にできて、応用するとデザインの幅も広がるので、是非チャレンジしてみてはいかがでしょうか?

 

この記事を書いた人

オガワ シンヤ

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

  • Twitter

コメントフォーム

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

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?