画像に枠を追加

枠は、写真とページを区切り、SNS投稿を仕上がった印象にし、スナップ写真をプリントしたような雰囲気にします。このツールは、単色・内側・二重線の枠、角丸、やわらかいドロップシャドウ、手書き風のキャプションが入るポラロイド風フレームを追加できます。太さはピクセル、または画像に対する割合で指定できるので、サイズの異なる写真にも同じ見た目の枠が付きます。すべてブラウザー内で動作します。

使い方

1. 画像を1つ以上選びます。
2. スタイルを選び、太さをピクセル、または短辺に対する割合で設定します。
3. 枠の色を選びます。二重線・影・キャプションでは、2色目も選びます。
4. 角丸では半径を、ポラロイド風ではお好みでキャプションを入力します。
5. 枠を付けた画像をダウンロードするか、まとめて1つのZIPで保存します。

計算式

単色・二重線・角丸：出力 = (幅 + 2b) × (高さ + 2b)；ポラロイド風：(幅 + 2b) × (高さ + b + 3.5b)；内側：サイズは変わらない

b はピクセル単位の枠の太さで、割合の単位を使う場合は b = round(短辺 × % ÷ 100) です。二重線は b を約 b ÷ 3 ずつの3本の帯に分け、枠の色、2色目、枠の色の順に塗ります。角丸は、枠を付けた画像の短辺に対する割合で半径を決め、画像自体の角も同じように丸めます。ドロップシャドウは、ぼかしとずらしのために、すべての辺に 2b + b/2 の透明な余白を加えます。

計算例

1080 × 1350の縦長の写真に5%の枠を付けると、b = round(1080 × 0.05) = 54pxなので、結果は1188 × 1458pxです。同じ b でポラロイド風にすると、下の帯は 54 × 3.5 = 189px で、フレームは 1188 × (1350 + 54 + 189) = 1188 × 1593pxになります。