Image Overlay

이미지 오버레이는 기본 이미지 위에 올리는 모든 시각 레이어입니다. 텍스트, 도형, 화살표, 로고, 색상 틴트, 다른 사진, 기기 프레임이 포함됩니다. 오버레이와 기본 이미지가 합쳐져 보는 사람에게 최종 화면으로 나타납니다.

오버레이는 알파 합성으로 합쳐집니다. 오버레이의 각 픽셀은 불투명도 값을 가지며, 결과 색은 그 값에 비례해 오버레이 색과 기본 색을 섞은 값입니다. 불투명도가 100%이면 오버레이가 기본 이미지를 가립니다. 50%이면 두 이미지가 함께 보입니다.

오버레이는 편집 가능한 별도 레이어로 남기거나, 내보낼 때 픽셀에 병합할 수 있습니다. 병합된 오버레이는 원본 파일 없이 제거할 수 없습니다.

오버레이 유형

• 주석: 화살표, 상자, 타원, 선, 텍스트 라벨, 단계 번호
• 강조: 관심 영역 위에 올리는 반투명 색
• 가림 레이어: 개인정보 위의 흐림 처리 또는 단색 상자
• 브랜딩: 로고와 워터마크
• 프레임: 스크린샷을 감싸는 기기 또는 브라우저 프레임
• 비교 레이어: 부분 불투명도로 겹친 두 이미지

오버레이를 쓰는 곳

단계별 가이드는 화살표와 번호 마커로 클릭할 위치를 표시합니다. 버그 리포트는 상자로 문제가 되는 부분을 가리킵니다. 마케팅 이미지는 스크린샷 위에 제목과 로고를 올립니다. 디자인 검토에서는 두 버전을 겹쳐 위치 차이를 찾습니다.

오버레이의 동작 방식

편집기는 오버레이를 위치, 크기, 색, 쌓임 순서를 가진 객체로 저장합니다. 렌더링할 때는 기본 이미지를 먼저 그리고, 오버레이를 아래에서 위 순서로 그립니다. 내보내기는 모든 요소를 이미지 하나로 병합하거나, 프로젝트 형식으로 레이어를 유지합니다.

Temposhot Documents 편집기의 오버레이는 Text(T), Rectangle(R), Ellipse(O), Line(L), Arrow(A)와 Pro 도구인 Blur(B), Click Marker(M), Step Numbers(N)를 포함합니다. [ 키와 ] 키로 쌓임 순서를 바꿉니다. 편집기는 주석을 캡처한 이미지와 분리해 저장합니다.

흔한 실수

• 오버레이가 가리키려는 컨트롤을 가림
• 스크린샷 배경에서 사라지는 색 사용
• 반투명 상자만으로 개인정보를 가림
• 편집본에만 있는 오버레이를 두고 원본 프레임을 공유함. 주석이 있는 프레임을 Temposhot ZIP으로 내보내면 원본 파일이 들어 있다는 경고가 표시됩니다.

지금 고칠 이미지가 있나요?

브라우저에서 Screenshot Annotation Tool으로 화살표와 라벨을 추가할 수 있습니다. 디자인된 배경 위에 스크린샷을 배치하려면 Social Image Composer를 사용합니다.

자주 묻는 질문

내보낸 후 오버레이를 제거할 수 있나요?

병합되지 않은 원본이나 편집 가능한 프로젝트가 있는 경우에만 제거할 수 있습니다.

투명한 오버레이를 유지하는 형식은 무엇인가요?

PNG와 WebP는 투명도를 유지합니다. JPG는 투명도를 지원하지 않습니다.

출처

• Alpha compositing (Wikipedia)
• Blend modes (Wikipedia)

관련 자료

• 주석과 프레임: Documents 편집기 도구.
• Mac에서 지침용 스크린샷에 주석 달기: 실제 사용 예시.