画像の上に画像を重ねる

ある絵を別の絵の上に重ねると、日常の作業の多くがこなせます。商品写真にロゴやバッジを入れる、ミームにステッカーを貼る、写真にテクスチャやライトリークを重ねる、フレームや「売り切れ」スタンプを付ける、といったことです。ベース画像（複数も可）とオーバーレイを選び、9つの基準位置と細かい移動値で配置し、ベースに対する比率でサイズを決め、不透明度と回転を設定し、描画モードを選びます。乗算ではオーバーレイの白い部分が、スクリーンでは黒い部分が消えます。すべてブラウザ内で動作します。

使い方

1. ベース画像を1枚以上と、オーバーレイ画像を選びます。
2. 位置を選び、移動値で微調整します。
3. オーバーレイの幅を、ベースの幅に対する割合で設定します。
4. 不透明度、回転、描画モードを調整します。
5. 結果を1枚ずつダウンロードするか、まとめてZIPでダウンロードします。

計算式

オーバーレイの幅 = ベースの幅 × サイズ%；中心x = 基準 × (W − w) + w ÷ 2 + 移動 × W

基準は左が0、中央が0.5、右が1です（縦方向も同様）。そのため、左上のオーバーレイは左上の角に接し、中央のオーバーレイは真ん中に置かれます。高さはオーバーレイの縦横比を保ちます。描画モードはW3Cの合成とブレンドの定義に従います。乗算 = ベース × オーバーレイ、スクリーン = 1 − (1 − ベース)(1 − オーバーレイ)などです。

計算例

1200 × 800の写真に600 × 200のロゴを幅25%、右下、−2% / −2%で重ねると、ロゴは300 × 100 pxになり、左上の角はx = 1200 − 300 − 24 = 876、y = 800 − 100 − 16 = 684に置かれ、角から少し余白が空きます。