画像に影を追加

画像に影を追加ツールは、任意の画像を柔らかい、自然な影でページから浮かせます。処理はすべてブラウザ内で行われます。写真、スクリーンショット、ロゴ、切り抜き PNG をアップロードし、光源をドラッグして角度を決め、ぼかし、スプレッド、不透明度、色を調整します。透明 PNG では、影は画像のアルファチャンネルから作られるため、商品やステッカーは四角形ではなく、その輪郭のまま影を落とします。透明な背景の PNG、単色またはグラデーション背景の JPG として書き出すか、同じ見た目のCSS box-shadow コードをコピーできます。アップロードは一切ありません。画像がデバイスから外に出ることはありません。

影を決める3つの数値：オフセット、ぼかし、スプレッド

うまくいかない影のほとんどは、この3つのどれかを間違えています。オフセットは、影が被写体からどれだけ離れるかです。光がどこにあり、物体がどれだけ浮いているかを伝えます。ぼかしは縁の柔らかさです。小さいぼかしは硬い直射光（日差し、フラッシュ）に見え、大きいぼかしは拡散光（曇り、ソフトボックス）に見えます。スプレッドはぼかしを掛ける前に影の形を広げたり縮めたりします。重いハローや、物体の下に少し入り込んだ影は、こうして作ります。

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

1. 画像をアップロードする: 画像をアップロード枠にドラッグするか、タップして選びます。アップロードは一切なく、ファイルはブラウザ内で直接読み込まれます。
2. 光源を置く: 光源パッド上の太陽をドラッグします。影は反対側に落ち、中心から遠くへドラッグするほど、影も遠くへ伸びます。矢印キーでも操作できます。
3. 影の形を整える: 種類を選びます。ドロップ、レイヤード、ロング、グローのいずれかです。続けてぼかし、スプレッド、不透明度、影の色を設定します。
4. 背景を選ぶ: PNG なら透明のままにするか、単色またはグラデーションで塗ります。余白を追加で結果の周囲に空間を足せます。
5. ダウンロードまたはコピー: 元のサイズ、半分、または 2× で PNG または JPG を保存するか、生成された CSS をコピーして、同じ影をウェブ要素に再利用します。

四角形ではなく被写体に沿う影

オンラインの影ツールの多くは、ファイルの背後に四角形を描きます。写真ならそれで十分ですが、切り抜きの商品写真、ロゴ、ステッカーでは間違いです。丸いボトルが四角い影を落としてはいけません。このツールは画像のアルファチャンネルを読み、実際のシルエットから影を作るので、透明な部分には影が付きません。透明 PNG をアップロードすると、確認の緑のメモが表示されます。通常の不透明な写真では、シルエットは単純に写真の四角形です。角丸を設定していれば、先に丸められます。

どの種類の影を使うべきか

ピクセルではなくパーセントを使う理由

ここのスライダーはすべて、画像の短い辺に対するパーセントです。9% のぼかしは 400 px のサムネイルでも 4000 px の写真でも同じ見た目なので、気に入ったプリセットは大きな画像に差し替えても再計算なしで使えます。実数が必要なときは、ぼかしスライダーの横と CSS パネルに、相当するピクセル値が表示されます。

自然な影にするためのコツ

画像はプライベートですか？

はい。処理のために写真をサーバーへアップロードするオンラインエディタとは違い、このツールは HTML5 キャンバスを使ってウェブブラウザ内だけで動作します。画像がデバイスから外に出ることはなく、保存もされず、アカウント作成も不要です。タブを閉じれば画像は消えます。

よくある質問

このドロップシャドウツールは無料でプライベートですか？

はい。完全に無料で、HTML5 キャンバスを使ってウェブブラウザ内だけで動作するため、画像がサーバーにアップロードされることはなく、自分のデバイス上に留まります。ダウンロードした画像に透かしはなく、登録も不要です。

影は透明 PNG の形に沿いますか？

はい。影は画像のアルファチャンネルから作られるため、切り抜きの商品、ロゴ、ステッカーは四角形ではなく、その輪郭のまま影を落とします。通常の不透明な写真の場合、シルエットは写真の四角形で、必要に応じて角を丸められます。

背景を透明のままにするには？

背景を「透明」にして PNG でダウンロードします。描画されるのは影と被写体だけなので、あとから任意の色の上に置けます。JPG は透明度を保存できないため、JPG 書き出しでは背景が白で塗られます。

ぼかしとスプレッドの違いは？

ぼかしは影の縁を柔らかくし、距離に応じてフェードアウトさせます。スプレッドはぼかす前に影の形そのものを広げたり縮めたりするので、大きなスプレッドと小さなぼかしは硬いハローになり、小さなスプレッドと大きなぼかしは柔らかい雲のようになります。

影が画像の端で切れます。なぜ？

影には絵の外側の余白が必要です。このツールはオフセット、ぼかし、スプレッドから余白を自動で足し、「余白を追加」スライダーでもっと足せます。色付き背景の JPG として書き出す場合、その余白の上に影が落ちます。

同じ影の CSS を取得できますか？

はい。CSS パネルには、現在の設定に合う、すぐに貼れる box-shadow と filter drop-shadow のルールが、画像上で測ったピクセルで表示されます。コピーすれば、ファイルを書き出さずにウェブ要素へ同じ見た目を付けられます。

参考資料

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• アルファ合成 — Wikipedia