【デザインワークショップ】vol.23 写真をアニメ風イラストのイメージに仕上げてみる
最終更新日: Update!!
久しぶりのデザインワークショップですが、今回は風景写真をアニメ風のイラスト背景のイメージにデザインしていきます。ツールはPhotoshopを使って作成していきます。映画のポスターでもよく見かけるような雰囲気を表現できるようになります。
今回のサンプルにはこちらの写真素材を使いました。それでは早速進めていきたいと思います。
まずは写真の背景部分のみを切り取るので「選択ツール」で対象のところを選択します。「選択とマスク」のボタンをクリックして境界線を調整していきます。
境界線は若干なめらかになるよう設定しておきます。そのようにすることで細かい部分も残せるようになります。
選択部分を残すようにマスクをかけて背景部分を切り取ります。
「ブラシツール」を選択し描画色を白色にした状態で、マスクのレイヤー上に細かいディティールが表示されるように微調整をしていきます。
柔らかい設定にしたブラシツールを使って、境界線の部分をなぞっていきます。こうすることで境界線をぼかすことができます。
新規の塗りつぶしレイヤーを作成し、最背面に配置します。
追加した塗りつぶしレイヤーを「スマートオブジェクトに変換」してレイヤー効果の「グラデーションオーバーレイ」で青空に見えるようブルーのグラデーションを追加します。
背景のグラデーションの前面に雲の写真素材を配置します。
雲の写真の描画モードを「スクリーン」に設定し、明るく背景になじませます。
「イメージ」→「色調補正」→「HDRトーン」からイメージに対してHDRトーンを適用させます。これでメリハリのついたイラスト風のベースを作り込んでいきます。ちなみにHDRトーンを適用する場合には全てのレイヤーが統合されます。
作成したベースのレイヤーをコピーして、最前面に配置し「フィルター」→「フィルターギャラリー」→「塗料」を適用させます。
同じくベースのレイヤーをコピーして、最前面に配置し「フィルター」→「フィルターギャラリー」→「パレットナイフ」を適用させます。
さらにベースのレイヤーをコピーして、最前面に配置し「フィルター」→「ぼかし」→「ぼかし(ガウス)」を適用させます。
「ぼかし」「パレットナイフ」「塗料」のフィルターを適用したレイヤーをまとめて、描画モードを「比較(明)」に設定します。
これらのレイヤーの透明度を調整し、背景となじませていきます。
仕上げにイメージに合わせて、明度や彩度を調整します。今回は明度と彩度を上げて、ブルーとシアン系の色味を強調させました。
これで写真をアニメ風イラストに加工することができました。今回のサンプルはこのように仕上がりました。
今回作成したイメージはアニメのキャラクターなどを使ったデザインにピッタリですね。タイポグラフィもオールド系の明朝を使うことで今はやりのアニメの雰囲気に近づけることができるのではないでしょうか。是非お試しください!



















今回作成したイメージはアニメのキャラクターなどを使ったデザインにピッタリですね。タイポグラフィもオールド系の明朝を使うことで今はやりのアニメの雰囲気に近づけることができるのではないでしょうか。是非お試しください!
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories