Update久しぶりのデザインワークショップですが、今回は風景写真をアニメ風のイラスト背景のイメージにデザインしていきます。ツールはPhotoshopを使って作成していきます。映画のポスターでもよく見かけるような雰囲気を表現できるようになります。今回のサンプルにはこちらの写真素材を使いました。それでは早速進めていきたいと思います。写真の背景部分のみを切り取るので「選択ツール」で対象のところを選択します。「選択とマスク」のボタンをクリックして境界線を調整していきます。境界線は若干なめらかになるよう設定しておきます。そのようにすることで細かい部分も残せるようになります。選択部分を残すようにマスクをかけて背景部分を切り取ります。「ブラシツール」を選択し描画色を白色にした状態で、マスクのレイヤー上に細かいディティールが表示されるように微調整をしていきます。柔らかい設定にしたブラシツールを使って、境界線の部分をなぞっていきます。することで境界線をぼかすことができます。新規の塗りつぶしレイヤーを作成し、最背面に配置します。追加した塗りつぶしレイヤーを「スマートオブジェクトに変換」してレイヤー効果の「グラデーションオーバーレイ」で青空に見えるようブルーのグラデーションを追加します。背景のグラデーションの前面に雲の写真素材を配置します。雲の写真の描画モードを「スクリーン」に設定し、明るく背景になじませます。HDRトーン」からイメージに対してHDRトーンを適用させます。これでメリハリのついたイラスト風のベースを作り込んでいきます。ちなみにHDRトーンを適用する場合には全てのレイヤーが統合されます。作成したベースのレイヤーをコピーして、最前面に配置し「フィルター」→「フィルターギャラリー」→「塗料」を適用させます。ベースのレイヤーをコピーして、最前面に配置し「フィルター」→「フィルターギャラリー」→「パレットナイフ」を適用させます。ベースのレイヤーをコピーして、最前面に配置し「フィルター」→「ぼかし」→「ぼかし(ガウス)」を適用させます。「ぼかし」「パレットナイフ」「塗料」のフィルターを適用したレイヤーをまとめて、描画モードを「比較(明)」に設定します。これらのレイヤーの透明度を調整し、背景となじませていきます。仕上げにイメージに合わせて、明度や彩度を調整します。今回は明度と彩度を上げて、ブルーとシアン系の色味を強調させました。これで写真をアニメ風イラストに加工することができました。今回のサンプルはこのように仕上がりました。今回作成したイメージはアニメのキャラクターなどを使ったデザインにピッタリですね。タイポグラフィもオールド系の明朝を使うことで今はやりのアニメの雰囲気に近づけることができるのではないでしょうか。ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちらデザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。コメントをキャンセル記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。メールアドレスは公開されませんのでご安心ください。付いている欄は必須項目となります。コメント内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。配色と書体からターゲット別の女性向けデザインを考えてみる。