ドロップシャドウとは？

ドロップシャドウとは、画像の背後に少しずらして配置する、画像を暗くぼかした複製のことです。画像がページの上に浮かんでいるように見せられます。商品画像の切り抜き、ロゴ、スクリーンショット、写真を背景から浮き上がらせ、平面的なデザインに奥行きを加えます。

ツールの説明

画像を開き、「ぼかし」で影のぼかし具合を設定し、水平方向と垂直方向のオフセットで位置を調整します。「色」セクションで色と不透明度を選択します。透過部分のあるPNGまたはWebPでは、影は画像全体を囲む長方形ではなく、被写体の形に沿って付きます。写真の場合は、写真の長方形に影が付きます。

キャンバスは影全体が収まるように必要な分だけ拡張されます。ダウンロードされるPNGは背景が透過しているため、ページやスライドにそのまま配置できます。

特徴

  • 透過画像の形に沿った影
  • ぼかし、オフセット、色、不透明度を調整
  • 影に合わせてキャンバスが拡張されるため、影が切れません
  • 背景が透過したPNGをダウンロード

仕組み

ぼかしはCSSの影のぼかしと同じように機能します。ガウスぼかしを適用し、その標準偏差は指定値の半分です。影は画像の端からぼかしの約1.5倍の距離まで徐々に薄くなります。そのため、オフセットを考慮したうえで、影が画像の端を越えて届く分だけ、各辺でキャンバスが拡張されます。

ヒント

  • 水平方向のオフセットを使わず、画像の真下にぼかした影を付けると、画像が浮いているように見えます。
  • 自然に見せるには、不透明度を30%〜50%程度にします。ぼかしなしで不透明度を最大にすると、代わりに平面的でレトロなスタイルになります。
  • 色付きのページでは、黒よりもページの色を暗くした色のほうが自然に見えます。
  • 背景の透過を維持するには、形式としてPNGまたはWebPを使用してください。JPGでは影の背景が白になります。