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

ワークショップ 2019.08.02

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

Tags: ,,,,
最終更新日:Update

久しぶりのデザインワークショップですが、今回は風景写真をアニメ風のイラスト背景のイメージにデザインしていきます。ツールはPhotoshopを使って作成していきます。映画のポスターでもよく見かけるような雰囲気を表現できるようになります。

 

今回のサンプルにはこちらの写真素材を使いました。それでは早速進めていきたいと思います。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

まずは写真の背景部分のみを切り取るので「選択ツール」で対象のところを選択します。「選択とマスク」のボタンをクリックして境界線を調整していきます。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

境界線は若干なめらかになるよう設定しておきます。そのようにすることで細かい部分も残せるようになります。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

選択部分を残すようにマスクをかけて背景部分を切り取ります。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

「ブラシツール」を選択し描画色を白色にした状態で、マスクのレイヤー上に細かいディティールが表示されるように微調整をしていきます。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

柔らかい設定にしたブラシツールを使って、境界線の部分をなぞっていきます。こうすることで境界線をぼかすことができます。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

新規の塗りつぶしレイヤーを作成し、最背面に配置します。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

追加した塗りつぶしレイヤーを「スマートオブジェクトに変換」してレイヤー効果の「グラデーションオーバーレイ」で青空に見えるようブルーのグラデーションを追加します。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

背景のグラデーションの前面に雲の写真素材を配置します。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

雲の写真の描画モードを「スクリーン」に設定し、明るく背景になじませます。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

「イメージ」→「色調補正」→「HDRトーン」からイメージに対してHDRトーンを適用させます。これでメリハリのついたイラスト風のベースを作り込んでいきます。ちなみにHDRトーンを適用する場合には全てのレイヤーが統合されます。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

作成したベースのレイヤーをコピーして、最前面に配置し「フィルター」→「フィルターギャラリー」→「塗料」を適用させます。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

同じくベースのレイヤーをコピーして、最前面に配置し「フィルター」→「フィルターギャラリー」→「パレットナイフ」を適用させます。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

さらにベースのレイヤーをコピーして、最前面に配置し「フィルター」→「ぼかし」→「ぼかし(ガウス)」を適用させます。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

「ぼかし」「パレットナイフ」「塗料」のフィルターを適用したレイヤーをまとめて、描画モードを「比較(明)」に設定します。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

これらのレイヤーの透明度を調整し、背景となじませていきます。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

仕上げにイメージに合わせて、明度や彩度を調整します。今回は明度と彩度を上げて、ブルーとシアン系の色味を強調させました。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 

これで写真をアニメ風イラストに加工することができました。今回のサンプルはこのように仕上がりました。

【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる

 


 

今回作成したイメージはアニメのキャラクターなどを使ったデザインにピッタリですね。タイポグラフィもオールド系の明朝を使うことで今はやりのアニメの雰囲気に近づけることができるのではないでしょうか。是非お試しください!

この記事を書いた人

オガワ シンヤ

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

  • Twitter

コメントフォーム

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

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

CAPTCHA


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

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