画像シャドウ追加ツール

ドロップシャドウ

フラットな製品のスクリーンショットは、柔らかいドロップシャドウを備えてページから際立って表示されます。一方、ドロップシャドウを設けない同じ画像は、まるで貼り付けられたかのように見えます。このツールでは、ぼかし半径、オフセット、拡散範囲および色を個別に制御可能なカスタムシャドウを設定でき、シャドウが組み込まれたPNGファイルを生成します。これにより、マーケティングページ、ブログヘッダー、ドキュメントなどへの使用に最適です。

ドロップシャドウを追加する方法

  1. 1

    画像をアップロードします

    透明度が設定されているPNGファイル、またはフレームを付ける予定の製品のスクリーンショットと組み合わせると最適な結果が得られます。

  2. 2

    影のパラメータを設定します

    ぼかし半径、X/Yオフセット、不透明度、色。

  3. 3

    キャンバスを選択してください

    画像と影を合わせる、またはパディング付きで固定サイズにする。

  4. 4

    エクスポート

    PNG出力ではソフトシャドウのエッジが保持されます。JPGでは背景が可視化されます。

適切に感じられるシャドウ設定

良いドロップシャドウは、多くの人が直感的に選ぶものよりも通常、より柔らかく、不透明度も低めです。

プリセットスタイル

スタイル ぼかし オフセットY 不透明度 スプレッド
軽度の上昇(UIカード) 12px 2px 8% 0
マテリアルの高さ 2 8px 2px 15% 0
マテリアルの高さ 8 24px 12px 20% 0
ソーシャルメディア投稿 40px 20px 25% 0
フローティングヒーロー画像 80px 40px 30% 0
長い影(フラットデザイン) 0px 40px 30% 0

シャドウの色

黒は扱いやすいですが、しばしば硬い印象を与えがちです。画像の主要な色を暗くして彩度を落としたものの方が、より一体感のある見た目になります。 不透明度25%の純粋な黒は、通常、不透明度70%の黒よりも自然です。 暖色系の画像の下には暖かい影を、寒色系の画像の下には冷たい影を合わせましょう。

光が当たっている場所

画像に内部の照明感(ハイライトのあるロゴなど)がある場合は、影の方向をその照明に合わせてください。一般的な写真スクリーンショットは通常、トップダウンからの照明で最も良好な効果が得られます(影が下方に2~20pxずつずれるように設定してください)。

PNG対JPG出力

  • PNG:影の縁が透明度にスムーズにフェードします。任意の背景に画像を配置するのに最適です。
  • JPG:影は選択した背景色に合わせて平らに展開されます。最終的な配置背景が分かっている場合に使用します。

スタッキング効果を避ける

ドロップシャドウに太い枠線、丸みを帯びた角、そして色調を加えると、デザインが複雑に見え始めることがあります。1つまたは2つの要素だけを選択してください、控えめな枠線と影で十分です。

よくある質問

ほぼ常に不透明度が高すぎます。20~30%に減らし、ぼかし半径を増やすようにしてください。日光下の実際の影は拡散しています;明瞭で濃い影はステージ照明のように見えます。

このツールは外側のドロップシャドウのみを生成します。インセットシャドウ(例えば、表面に押しつぶされたテキスト)には、専用のベベル/エンボスフィルターを使用してください。

デフォルトでは「はい」に設定されています。キャンバスは影の範囲を含むように拡張されます。影を縁で切り取るようにする(タイリングや連続した背景の場合)場合は、キャンバスを元のサイズに固定できます。

はい。アルファ付きPNGファイルを入力すると、完全な長方形ではなく、不透明な部分の周囲に影が生成されます。複雑なシルエットを持つ製品の切り抜き画像では、自然で形状に合った影が表示されます。

関連ツール

このツールは他の言語でも利用できます