icon
icon

Photoshopで画像に影をつける2つの方法【初心者向け】

Photoshopで【画像に影をつける】方法を初心者向けに解説した記事です。ドロップシャドウを使って影を付ける方法と、塗りつぶしと自由変形を使って影を付ける方法の2つを紹介しています。記事を読みながら自分でチャレンジしましょう!

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

Photoshopでは、オブジェや人物、文字などの画像に影をつけることができます。

今回は初心者向けに2つの作り方をご紹介します。

目次

今回は下記の2つの方法を順番にご紹介します。

(※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)

 

大石ゆかり

田島メンター!!写真に人物を追加したいんですが、周りに合わせた角度の影を付けることってできますか~?

田島悠介

Photoshopでは簡単に色々な場面に合わせた影を作成することができるよ。しかも影はあとからいくらでも編集可能なんだ。

大石ゆかり

具体的にはどうやるんですか~?

田島悠介

今回はふたつのやり方で影をつけてみよう。レイヤースタイルの「ドロップシャドウ」を使う方法と、塗りつぶし+自由変形で影を作る方法だよ。

 

事前準備

今回はこの画像をサンプルとして使用します。どのような写真でも同じですのでご用意ください。

ps_shd_1

 

このファイルでは白一色の背景レイヤーの上に、看板の絵のまわりが透過状態(何も描かれていない状態)のレイヤーを作成しています。この看板に影を付けてみたいと思います。

ps_shd_2

 

 

[PR] Webデザインで副業する方法とは

ドロップシャドウを使って影を付ける

レイヤースタイルのひとつ「ドロップシャドウ」を使用する方法です。

影を付けるものが描かれているレイヤー(ここではレイヤー0)が選択されていることを確認します。

ps_shd_2_2

 

レイヤーの下のメニューから「レイヤースタイルを追加」をクリックします。

ps_shd_2_3

 

「ドロップシャドウ」を選択します。

ps_shd_3

ここで各項目を設定します。

  • 描画モード:「乗算」に設定します。
  • 不透明度:影の濃さに関係します。ここでは50%に設定しています。
  • 角度:影の方向に関係します。ここでは30°に設定しています。
  • 距離:オブジェと影の間の距離です。ここでは50pxに設定しています。
  • スプレッド:数値が高いほど輪郭がくっきりした影になります。
  • サイズ:影の大きさです。

 

数値を変更するとプレビューが反映されるので、それを見ながら調整すると便利です。

ps_shd_4

 

「OK」を押すと影が作成されます。

ps_shd_5

完成です。
今度は、別の方法を試してみましょう。

 

田島悠介

レイヤースタイルを使った方法は手軽にできる上に、影の色や不透明度、角度や距離など必要な設定をまとめて行えるので便利だよ。

大石ゆかり

思ったより簡単に作成できちゃいました。

田島悠介

しかも後からいつでもレイヤーパレットから該当の「ドロップシャドウ」をダブルクリックすれば設定が変えられるんだ。

大石ゆかり

便利ですね!

田島悠介

それではもうひとつの方法も試してみよう。こちらは元画像そのものの情報から影を作成して、それを自由に変形するんだ。

 

塗りつぶしと自由変形を使って影を付ける

選択範囲と塗りつぶしで影のレイヤーを新しく作成し、自由変形やぼかしなどで影の形に整える方法です。

まず、看板の部分をクイック選択ツール・自動選択ツールなどで選択します。

ps_shd_6

 

レイヤーを新しく1つ追加します。ここでは「レイヤー2」としています。

ps_shd_7

 

「編集」から「塗りつぶし」を選択します。

ps_shd_8

 

使用を「ブラック」・描画モードを「通常」・不透明度を「100%」にして「OK」を押します。

ps_shd_9

 

シルエットの部分が黒く塗りつぶされた状態になります。このレイヤーを影として使用します。

ps_shd_10

 

レイヤーの属性を「乗算」にし、不透明度を50%にします。

ps_shd_11

 

影のレイヤーと本体のレイヤー(ここではレイヤー2とレイヤー0)を入れ替えます。

ps_shd_12

 

「編集」から「自由変形」を選択します。

ps_shd_13

 

影を作りたい方向に移動させます。

ps_shd_14

 

移動を反映させた状態です。

ps_shd_15

 

「フィルター」→「ぼかし」→「ぼかし(ガウス)」を選択します。

ps_shd_16

 

ぼかし(ガウス)の「半径」の項目を設定します。ここでは6.0pixelとしています。

ps_shd_17

 

「OK」をクリックして完成です。

ps_shd_18

 

出来上がった影をさらに自由変形することも可能です。

ps_shd_19

 

角度・位置などを変更して色々な方向からの影に調整することができます。

ps_shd_20

これで完成です。

まずは自分で簡単な方法から試してみてください。

 

田島悠介

影そのものにフィルター効果をかけたり、周りのオブジェクトに合わせて変形したりしたい場合は塗りつぶしと自由変形を使った方法がやりやすいかもしれないね。

大石ゆかり

逆にシンプルな影の場合はドロップシャドウが便利そうですね。

田島悠介

どちらの方法でも影はあとから編集できるので、とりあえず作成してみて全体を見ながら調整してみよう。

大石ゆかり

はい!ありがとうございました!

 

さらにPhotoshopを使いこなしたい場合は、Photoshopで写真をイラスト風にする方法も合わせてご覧ください。

執筆してくれたメンター

メンターOM

Webデザインの勉強のためロサンゼルスに留学。
その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。

現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、
アメリカだけでなく日本からのWeb制作も請け負う。
また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。

[お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。