0%

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

Posted:2019.08.02

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

久しぶりのデザインワークショップですが、今回は風景写真をアニメ風のイラスト背景のイメージにデザインしていきます。ツールは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 写真をアニメ風イラストのイメージに仕上げてみる

 


 

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

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

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

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

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

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

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

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

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

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

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

CAPTCHA


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