튜토리얼

투명한 제품 이미지: PNG가 여전히 흰색 배경을 표시하는 이유

불투명한 PNG 배경을 진단하고, 미리보기 표면과 내보내기 변경 사항을 확인한 다음, 실제 전달 환경에서 작동하는 제품 누끼 이미지를 준비하세요.

코발트 블루 캔버스 가방, 파란색 색상 견본, 그리고 일치하는 제품 사진.

PNG는 투명한 배경을 실제로 포함하지 않고도 투명도를 지원할 수 있습니다. 제품 이미지에 흰색 사각형이 표시된다면, 먼저 그 흰색이 픽셀의 일부인지, 미리보기 인터페이스의 일부인지, 아니면 내보내기 또는 전달 과정에서 추가된 배경인지 확인하십시오. 각 원인마다 다른 해결책이 필요하며, 파일 이름 확장자를 변경한다고 해서 배경이 제거되지는 않습니다.

Adobe의 JPEG 및 PNG 비교는 형식별 투명도 지원의 차이점을 설명합니다. 웹사이트를 탓하거나 배경 제거 단계를 반복하기 전에 이러한 차이점을 활용하여 파일 자체를 검사하십시오.

이미지 편집 전에 사각형 진단하기

편집기나 테스트 페이지에서 이미지를 시각적으로 다른 두 배경 위에 놓아보세요. 실제 투명 영역은 두 배경을 모두 드러냅니다. 이미지에 고정된 흰색 영역은 흰색으로 남아 있습니다. 손잡이와 본체 사이 또는 두 스트랩 사이의 공간을 포함하여 전체 윤곽선을 확인하십시오.

보이는 현상확인해야 할 가능성 있는 설명다음 조치
모든 배경에서 흰색 사각형불투명한 흰색 픽셀배경을 마스크하거나 제거한 후 투명하게 내보내기
주변 색상이 페이지에 따라 변함실제 투명도구성에 필요한 경우 페이지 배경 조정
바둑판 무늬가 모든 곳에서 계속 보임바둑판 무늬 이미지가 픽셀로 저장됨원본으로 돌아가 실제 투명도 생성
제품 주위에 희미한 테두리가장자리 픽셀이 이전 배경을 유지함마스크를 정교하게 다듬고 밝고 어두운 표면에서 검사
원본은 투명하나 전달된 이미지는 불투명내보내기 또는 전달 변환업로드된 파일과 페이지에서 제공하는 파일을 비교

이는 진단 가능성일 뿐이며, 모든 상점이 동일한 이미지 파이프라인을 사용한다는 주장은 아닙니다.

깨끗한 원본과 전달용 사본 유지하기

가상의 파란색 캔버스 가방의 경우, 손상되지 않은 제품과 되돌릴 수 있는 마스크가 포함된 원본을 보존하십시오. 이미 평면화된 내보내기에서 배경을 반복적으로 제거하는 대신, 해당 원본에서 전달용 사본을 만드십시오.

손잡이, 솔기 및 직물 가장자리를 유용한 확대 수준에서 검사하십시오. 목표는 기계적으로 딱딱하게 잘린 것이 아니라 믿을 수 있는 윤곽선입니다. 부드러운 직물은 금속 버클보다 더 부드러운 가장자리를 가질 수 있습니다. 완벽하게 깨끗한 실루엣을 얻기 위해 미세한 제품 세부 사항을 지우는 것을 피하십시오.

투명 누끼 이미지 및 크림색 배경 카탈로그 이미지와 같이 의도된 용도에 따라 사본 이름을 지정하십시오. 흰색 배경 카탈로그 이미지는 완전히 올바를 수 있습니다. 문제는 이를 재사용 가능한 누끼 이미지와 혼동하는 것입니다.

목적지가 실제로 제공하는 것 확인하기

대량 컬렉션을 처리하기 전에 테스트 이미지 하나를 업로드하십시오. 제품 카드와 상세 페이지를 확인한 다음, 결과가 변경되면 표시된 파일과 원본을 비교하십시오. 전달 워크플로에서는 다양한 자르기, 배경 및 이미지 변환이 발생할 수 있습니다.

Shopify의 제품 미디어 문서는 해당 플랫폼에 대한 지원되는 미디어 및 이미지 처리 방법을 설명합니다. 한 서비스에서 허용되는 형식이 모든 곳에서 동일하게 보존될 것이라고 가정하기보다는, 자신의 목적지에 대한 현재 요구 사항을 따르십시오.

원본이 투명도를 표시하지만 목적지가 흰색인 경우, 그 결과가 실제로 바람직하지 않은지 결정하십시오. 흰색 이미지 영역이 있는 상점 테마는 투명 이미지를 올바르게 표시하고 있을 수 있습니다. 직사각형 매트가 다른 페이지 색상에 대해 보이거나 의도된 레이아웃을 방해할 때 문제가 됩니다.

그림자를 의도적으로 보존하기

그림자는 고립된 제품이 안정감을 느끼도록 도울 수 있습니다. 그림자가 재사용 가능한 누끼 이미지에 속하는지 아니면 최종 장면에 속하는지 결정하십시오. 왼쪽 조명으로 생성된 강한 그림자는 반대편에서 조명된 배경에 배치될 때 잘못되어 보일 수 있습니다.

가방 예시의 경우, 유연한 구성을 위해 깨끗한 제품 누끼 이미지를 준비하고, 최종 광고를 제작할 때 장면에 일관된 그림자를 추가하거나 요청하십시오. 투명 내보내기에서 부드러운 그림자를 유지한다면, 밝고 어두운 배경 모두에서 그 가장자리를 테스트하십시오.

투명도는 유리 제품을 불투명하게 만들고 주변의 모든 것을 제거하는 것과 다릅니다. 투명한 개체는 반사와 투과된 배경 색상을 포함할 수 있습니다. 이는 단순한 외부 실루엣보다 더 신중한 리터칭 또는 합성 접근 방식이 필요합니다.

누끼 이미지를 참조로 사용한 다음, 완성된 광고 판단하기

가방 참조를 Panelly Studio에 추가하고 유지하려는 제품 아이덴티티를 지정하십시오: 파란색 캔버스, 손잡이 모양, 솔기 및 제공된 모든 라벨. 최종 설정을 직접 설명하십시오. 완성된 4패널 광고는 각 패널에 완전하고 의도적인 배경을 가질 수 있습니다.

입력 참조가 누끼 이미지였다고 해서 완성된 광고가 투명하게 유지될 필요는 없습니다. 또한 업로드된 투명 이미지가 편집 가능한 레이어를 생성하거나 생성된 출력에서 동일한 픽셀 윤곽선을 보장한다고 가정해서도 안 됩니다. 참조와 결과를 비교하고 수정 시 불일치하는 부분을 명시하십시오.

파일 크기 및 전달 품질을 위해서는 별도의 제품 이미지 압축 가이드를 사용하십시오. 투명도는 제품을 둘러싼 것이 무엇인지에 답하고, 압축은 이미지를 효율적으로 전달하는 방법에 답합니다.

FAQ

JPEG를 PNG로 이름 변경하면 투명도가 생성되나요?

아니요. 파일 이름은 이미지 데이터를 다시 작성하거나 불투명한 배경 픽셀을 제거하지 않습니다. 의도한 마스크 또는 투명 영역을 생성한 후 실제 지원되는 형식으로 내보내십시오.

투명 이미지가 특정 뷰어에서 검은색으로 보이는 이유는 무엇인가요?

뷰어가 검은색 표면 위에 이미지를 표시하고 있거나, 전달된 파일이 평면화되었을 수 있습니다. 이 경우들을 구분하기 위해 두 가지 배경에서 이미지를 테스트하십시오.

모든 전자상거래 이미지가 투명해야 하나요?

아니요. 목적지와 구성에 맞는 형식을 선택하십시오. 재사용 가능한 누끼 이미지, 흰색 배경 카탈로그 이미지, 그리고 완전한 라이프스타일 광고는 각기 다른 목적을 가집니다.

출처 및 추가 자료

네 컷으로 완성하는 하나의 광고.

다음 광고는 여기에서 시작됩니다.

제품, 이점 및 대상을 설명하세요. Panelly로 4컷 광고를 만드세요.

제작 시작 ↗크레딧 팩 보기