恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【Photoshop】描画モード「スクリーン」を使って印象的なビジュアルを作成する

投稿日:2019-04-01 更新日:




screens-images-top

今回は、Photoshopで幻想的な画像の加工・合成方法を1つ紹介したいと思います。

レイヤーの描画モードの「スクリーン」を活用することで、印象的なビジュアルを作成することができます。

まず、メインビジュアルとなる人物や風景などの画像を1つ用意します。

背景がある場合は「自動選択ツールなど」でメインビジュアルを選択し、
Ctrl+Shift+Iで「選択範囲」を「反転」、そして「Deleteキー」を押して背景を透明にしておいて下さい。

20190313_6re

こんな感じですね。背景はなしでメインビジュアルのみのレイヤーとなっています。
現在のレイヤーパネルのレイヤーはこれだけです。

次に、レイヤーパネルの「塗りつぶし、または調整レイヤーを新規作成」から「べた塗り」を選択し、
色は白(#ffffff)として作成してください。

レイヤーの名を背景として、「Ctlr+Shift+[でレイヤーパネルの最下層に持っていき、
動かないよう鍵をかけておいてください。

20190313_1re

レイヤーパネルにメインビジュアルと背景の2枚のレイヤーが作成されました。

これで準備は整いましたので、次からはいよいよ画像を加工・合成していきます。
まずはじめに、こちらの画像を使って合成してみたいと思います。

20190313_7re

画像をフォルダからPhotoshopにドラッグ&ドロップします。
レイヤーは一番上で、レイヤー名は「画像1」とします。

「レイヤーパネル」から取り込んだ「画像1」のレイヤーを選択し、右クリックでメニューを展開し、
「スマートオブジェクトに変換」を選択してください。

そしてVキーで「移動ツール」に切り替え、画像を「自由変形」させて、
画像とメインビジュアルを合成させたい部分に移動させてください。

そして、「画像1」のレイヤーの描画モードをデフォルトの「通常」から「スクリーン」に変えて下さい。
これで、背景が白の部分には画像が非表示になります。

20190313_2re

今回はこんな感じに配置してみました。

このままだと、画像の切れ目に違和感があるので、メインビジュアルと画像をなじませていきます。
「画像1」レイヤーを選択し、レイヤーパネルの下部メニューから「レイヤーマスク」を作成してください。

次に、レイヤーパネルで「画像1」の「レイヤーマスクサムネール」を選択し、「ブラシツール」を使用します。
色は黒(#000000)として、「ソフト円ブラシ」の設定にします。

設定ができたら、「画像1」とメインビジュアルがなじむようにブラシで描画したくない部分を削っていきましょう。
ポイントは、画像の境界線をブラシで削ることです。
境界線を曖昧にすることで、だいぶメインビジュアルとなじむようになります。

20190313_3re

こんな感じで仕上がりました。

あとは、合成したい画像を追加するたび、この「画像1」レイヤーで行った手順を繰り返していくだけです。
追加した画像が重なった部分はブラシで削るとなじむようになります。

20190313_4re

複数枚の画像を合成できました。

最後に、全体の色がなじむように、レイヤーパネルの下部メニューから「塗りつぶし、または調整レイヤーを新規作成」を選択し、
「色相・彩度」を選択します。彩度を大体-30から-45まで落とすと、全体的にまとまりがでます。

20190313_5re

完成です。

応用として、背景に図形などを作成し、図形にそって画像を合成させたり、太陽光などを作成して
メリハリ感を出すテクニックなどもあります。

幻想的なビジュアルは人の目に止まり、インパクトもあるのでぜひ活用していきましょう。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー。英語がちょっと話せます。 HTML/CSS(SASS), JavaScript(jQuery, Node.js, WebGL), PHP(Laravel), Ruby(Ruby on rails), MySQL, Swift, SEO, Wordpress, Photoshop, Illustrator, Indesignを扱います。