이미지 위에 이미지 겹치기

한 그림을 다른 그림 위에 올리면 일상적인 작업이 많이 해결됩니다. 상품 사진에 로고나 배지 넣기, 밈에 스티커 붙이기, 사진 위에 질감이나 빛 번짐 얹기, 프레임이나 “품절” 도장 찍기 같은 것들입니다. 바탕 이미지(여러 장도 가능)와 오버레이를 고르고, 아홉 개의 기준 위치와 세밀한 이동값으로 배치하고, 바탕에 대한 비율로 크기를 정하고, 불투명도와 회전을 설정하고, 혼합 모드를 고르세요. 곱하기는 오버레이의 흰 부분을, 스크린은 검은 부분을 사라지게 합니다. 모든 작업은 브라우저 안에서 이뤄집니다.

사용 방법

1. 바탕 이미지를 하나 이상, 그리고 오버레이 이미지를 고릅니다.
2. 위치를 고르고 이동값으로 미세하게 조정합니다.
3. 오버레이 너비를 바탕 너비에 대한 비율로 정합니다.
4. 불투명도, 회전, 혼합 모드를 조절합니다.
5. 결과를 하나씩 받거나 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에 놓여 모서리에서 조금 띄워집니다.