PSD를 PNG로: RGBA를 제공할 때 알파 가장자리, 색상 프로필 의도 및 "표시되는 병합"의 실제 의미를 설명합니다.
PNG는 깨끗한 알파가 필요한 아이콘, 컷아웃 및 스티커에 적합합니다. JPEG와 달리 부드러운 가장자리의 블록 손상을 방지하지만 풀 컬러 마스터는 커질 수 있으며 반투명 픽셀은 여전히 뷰어 합성 규칙에 따라 다르게 보입니다. 서버측 PSD에서 PNG로의 변환은 효과적으로 "표시되는 합성물을 래스터화한 후 인코딩"합니다. 즉, 라이브 유형이나 벡터를 보존하지 않으므로 PSD가 마스터로 유지되고 PNG가 핸드오프입니다. 전체 알파가 필요한지, 대상이 sRGB인지, 아트가 어두운 UI에 있는지 적어보세요. 그렇지 않으면 디자인, 웹, 시험 인쇄가 세 가지 배경을 가진 동일한 파일을 두고 논쟁을 벌이게 될 것입니다. QA를 밝은 매트 + 어두운 매트 + 실제 CSS 배경으로 표준화하고 해시를 기록하여 논쟁이 스크린샷 대신 증거로 돌아갈 수 있도록 합니다.
온라인에서 PSD를 PNG로 사용하는 방법: 승인된 파일을 업로드하고 가시 레이어 병합을 기다린 후 다운로드한 다음 자산 버전을 지정하기 전에 밝은 매트와 어두운 매트 모두에서 투명한 가장자리를 확인합니다.
- Photoshop에서 외부 가시성 상태를 고정합니다. 주석과 스크래치 레이어를 숨기고, 투명하게 유지되어야 하는 흰색 판 블록 영역이 없는지 확인하고, 브리핑에서 대지 크기와 @2x/@3x 대상을 확인하고, 도구의 병합 표시 메모를 업로드하고 읽으므로 아무도 PNG에서 계층화된 의미를 기대하지 않습니다.
- 알파 채널을 다운로드하여 검사한 다음 흰색, 아주 어두운 표면 및 라이브 페이지 배경 위에 PNG를 합성합니다. 머리카락, 그림자 및 얇은 획을 확대하여 회색 줄무늬, 색상 후광 또는 들쭉날쭉한 부분을 만듭니다. 실패하면 맹목적으로 PNG를 수정하는 대신 PSD에서 매트/클리핑을 수정하고 다시 실행하세요.
- 버전이 지정된 파일 이름, 레코드 색상 공간, ICC 포함 정책, 긴 가장자리 및 승인자와 함께 제공됩니다. CDN이 이를 제공하는 경우 "자산을 교체했습니다"라는 지문 URL이 한 달 동안의 캐시와 충돌하지 않습니다.
PSD를 PNG로 FAQ(알파, 병합 표시 및 파일 크기)
검은색 배경에서는 가장자리가 회색으로 보이지만 흰색에서는 괜찮아 보입니다. 변환이 깨졌나요, 아니면 알파 사전 곱셈과 보기 컨텍스트가 깨졌나요?
반투명 앤티앨리어싱 픽셀은 배경색과 상호 작용합니다. 한 쪽은 직선 알파를 가정하고 다른 쪽은 사전 곱셈을 가정하면 고전적인 "어두운 매트 회색 무늬"를 얻게 됩니다. 실제 웹 또는 엔진 배경을 검증하고, 합성 가정을 문서화하고, Photoshop에서 매트나 내보내기 옵션을 조정합니다. 수학을 변경하지 않고 "또 다른 PNG 내보내기"를 요청해도 문제가 해결되는 경우는 거의 없습니다.
Photoshop "다른 이름으로 내보내기"와 온라인 병합 출력은 약간 다릅니다. 서비스를 비난하기 전에 무엇을 확인해야 합니까?
차이점은 PNG 인코더가 아닌 가시성 스택, 클리핑 그룹, 조정 범위 또는 오래된 스마트 개체에서 발생하는 경우가 많습니다. 스크래치 레이어에 로컬로 표시되도록 병합하고 ROI를 비교합니다. 로컬 병합이 이미 내보내기 형식에 동의하지 않는 경우 파이프라인을 에스컬레이션하는 대신 PSD를 수정하세요.
Hero PNG는 규모가 크고 CDN 비용이 많이 듭니다. 사이트 전체에서 PNG를 금지해야 할까요, 아니면 언제 PNG가 여전히 올바른 거래일까요?
부드러운 알파 또는 선명한 컷아웃이 필요한 곳에는 PNG를 유지하세요. 긴 가장자리를 제한하고, 아트가 승인되면 팔레트로 양자화하고, 사진 배경을 JPEG/WebP/AVIF로 분할하고, 실제로 알파가 필요한 영역을 문서화하여 공격 크기를 조정합니다. 전면적인 금지는 바이트를 절약하는 것보다 더 많은 해킹을 발생시킵니다.
큰 PNG에서는 작은 글자와 가는선이 선명해 보이지만 브라우저 크기를 조정하면 흐릿해 보입니다. PSD를 수정해야 할까요, 아니면 CSS를 수정해야 할까요?
배송된 크기에 맞게 픽셀 격자에 정렬하고, 홀수 크기와 절반 픽셀 넛지를 피하고, '이미지 렌더링'과 정수 배율 조정 경로에 동의합니다. 1x 및 2x에서 확인하세요. 레이아웃 크기 조정을 수정하지 않고 PNG에서만 스트로크를 두껍게 하면 일반적으로 하나의 아티팩트가 다른 아티팩트로 교환됩니다.
클라이언트는 PNG에 "레이어가 없다"고 하며 사본을 편집할 수 없다고 말합니다. 전달하기 전에 기대치를 어떻게 설정합니까?
PNG는 편집 가능한 레이아웃이 아닌 래스터 핸드오프입니다. 편집이 약속된 경우 PSD(또는 동의한 소스)를 RASTER_FINAL 대 EDITABLE_MASTER 라벨 파일과 함께 배송하세요. 온라인 PSD-PNG가 "프로젝트 소스 내보내기"가 아니라 평면화된다는 점을 서면으로 명확히 하세요.