웹 디자인시 색상 프로파일과 관련하여 어떻게해야합니까?


15

나는 Doug Avery 가이 기사 를 읽었 으며 Adobe Photoshop에서 색상 관리를 비활성화하는 방법을 설명하고 후속 기사는 이에 대해 논쟁하고 sRGB를 지원하는 의견에 대한 반응으로 sRGB를 지원하지만 여전히 어떤 기술에 대해 확신하지는 못합니다. 개인 워크 플로에 적용해야합니다.
기사를 읽는 동안 수집 한 것 (잘못된 경우 수정하십시오) 에서이 문제를 처리하는 올바른 방법은 Photoshop에서 색상을 sRGB로 관리하고 더 많은 것이 필요할 때 교정 색상 을 사용 하는 것입니다. 작품의 "충실한"미리보기.

현재 색상 프로필을 사용하지 않도록 설계된 전체 웹 사이트 프로젝트가 있습니다. 몇 달 전에 Photoshop 자체의 Eyedropper Tool로 올바르게보고되었지만 Photoshop에서 렌더링 한 색상 이 스크린 샷에서 측정 한 이미지를 Chrome에서 내 보낸 이미지를 열 때 표시되는 Chrome 의 색상과 일치하지 않는 것으로 나타났습니다 . PNG.
빠른 검색 후 나는 이전에 언급 한 게시물을 보았고 제안을 맹목적으로 적용했습니다 (후속 조치를 알지 못하거나 문제에 대해 읽지 않아도). 그 이후로 문제가 없었습니다. Photoshop에서 작업 한 스크린 샷을 찍어 개발자가 사용할 수 있도록 업로드했습니다. 그는 디자인을 개발할 때 내가보고 사용하는 것과 같은 색을 보게되고, 실제로 내가하는 일을보기 위해 농구대를 뛰어 넘을 필요가 없습니다.

내 질문 :

  • Proof Colors 를 사용하도록하여 더 많은 작업을 추가 할 때 웹 디자인에 sRGB를 사용해야합니까 (사진이나 인쇄물과 같이 사용하지 않는 의미를 이해합니다) ? (그것이 바로 내가 보는 방법입니다. 틀린 경우 수정하십시오)

  • ICC 프로파일로 저장 하면 일부 브라우저가 프로파일을 올바르게 적용하는 반면 다른 브라우저는 무시하므로 ISC 프로파일 없이 sRGB로 디자인 한 다음 저장하는 것이 가장 좋습니다 . 컬러 프로파일을 처음 사용하는 목적을 어기는 것이 아닙니까? 아니면 기사의 내용을 잘못 해석하고 있습니까?


1
Marc Edwards의 대답이 옳다고 생각하지 않습니다. 색상 프로파일을 "모니터"로 설정하면 한 사람에게만 잘 어울립니다. sRGB를 사용하면 더 넓은 범위의 사람들이보다 일관되게 볼 수 있습니다. 이 링크를 읽으십시오. 내가 아직 찾은 최고의 정보를 제공합니다. gballard.net/psd/saveforwebshift.html

답변:


5

나의 (때로는 논란의 여지가있는) 의견 : 사용자 인터페이스와 웹 디자인에 sRGB를 사용하는 것을 추천하는 사람들은 미쳤다. 이유는 다음과 같습니다.

색상 관리가 화면 디자인에 적용 되려면 세 가지 중요한 사항이 발생해야합니다.

  1. 올바른 워크 플로우를 사용하여 이미지를 작성해야합니다.
  2. 이미지는 올바른 ICC 색상 프로파일로 저장해야합니다.
  3. 이미지는 이미지의 프로파일 및 이미지가 표시되는 환경 (브라우저 및 OS 등)에 따라 올바르게 표시되어야합니다.

세 가지가 모두 없으면 색상 관리가 전혀 작동하지 않습니다. 그러한 것들 중 하나 또는 둘을 갖는 것은 전체 체인이 파손되었음을 의미합니다.

그리고 여기에 문지름이 있습니다. Photoshop에서 저장된 모든 PNG 및 GIF는 ICC 프로파일을 가질 수 없으므로 대부분의 경우 2 번은 불가능합니다 (JPEG는 프로파일을 가질 수 있음). 그리고 많은 브라우저가 올바르게 작동하지 않기 때문에 3 번도 많은 경우에 나타납니다.

당신이 웹에 사진을 표시하는 경우, 당신의 최선의 선택은 sRGB를에 파괴적으로 변환하는 것입니다 사용해 sRGB ICC 프로파일을 포함 하고 단지 JPEG 파일을 사용합니다. 웹 사용자 인터페이스 요소를 제작하는 경우 가장 좋은 방법은 "장치 RGB"(프로파일 또는 색상 관리가없는 기본 색상)를 대상으로 Photoshop을 설정하는 것입니다.

Doug Avery의 조언이 좋습니다. 그의 게시물의 중요한 부분은 모든 결과를 비교하는 데 사용하는 그리드입니다. 그가 추구하는 것은 HTML, CSS 및 이미지의 색상을 일치시키는 것입니다. 이미지의 색상 값과 HTML / CSS에 사용 된 색상 값이 동일한 방식으로 처리되는 경우에만 가능합니다.

나는이 주제에 대해 더 많이 썼습니다 :

색상 관리 및 UI 디자인

그리고 여기에 Adobe 엔지니어와 ad nausium이 논쟁했습니다.

웹용으로 저장, PNG 및 GIF의 경우 sRGB로 변환은 기본적으로 해제되어 있어야합니다.

Proof Colors를 사용하도록하여 더 많은 작업을 추가 할 때 웹 디자인에 sRGB를 사용해야합니까 (사진이나 인쇄와 같은 용도로 사용하지 않는 의미를 이해하고 있습니까)? (그것이 바로 내가 보는 방법입니다. 틀린 경우 수정하십시오)

아니요, 필요하지 않습니다. 실제로 sRGB가 도움이된다고 가정하면 주제에 대한 이해가 부족함을 보여줍니다. sRGB를 반드시 사용해야하는 상황이 있지만 완전한 사진 작업 과정의 일부입니다. JPEG 이미지를 사용하고 sRGB를 사용하며 sRGB 프로파일을 포함해야합니다. 모든 작업을 수행하지 않고 그 일부를 수행 할 수 없으며 색상 관리의 이점을 기대할 수 있습니다.

Photoshop에서 GIF 또는 PNG를 저장하는 경우 이미지에 ICC 프로파일이 절대 포함되지 않으므로 워크 플로가 설정되어 있고 브라우저가 이미지를 처리하는 방식을 확인해야합니다.

ICC 프로파일로 저장하면 일부 브라우저는 프로파일을 올바르게 적용하는 반면 다른 브라우저는 무시하므로 Is 프로파일을 사용하지 않고 저장 한 다음 sRGB를 사용하여 저장하는 것이 가장 좋습니다. 컬러 프로파일을 처음 사용하는 목적을 어기는 것이 아닙니까? 아니면 기사의 내용을 잘못 해석하고 있습니까?

명심하십시오 :

  • GIF는 ICC 프로파일을 가질 수 없습니다.
  • Photoshop에서 저장 한 PNG는 ICC 프로파일을 가질 수 없습니다.
  • PNG는 프로파일을 가질 수 있지만 프로파일과 함께 저장되는 경우는 거의 없습니다.
  • JPEG는 프로파일을 가질 수 있습니다.
  • 프로파일이있는 이미지의 브라우저 렌더링은 브라우저마다 다릅니다.
  • HTML 및 CSS의 색상은 종종 장치 RGB 또는 sRGB로 간주되며 제어 할 수 없습니다.

4
집에 6 대의 컴퓨터가 있고 직장에 2 대의 보정 된 모니터가 있습니다. 하나의 보정 된 모니터에는 적절한 색 영역이 없으므로 보정을해도 신뢰할 수 없습니다. 가정의 6 개 모두 선반에 재고가 있으며 모두 다르게 표시됩니다. 이것은 실제 사용에 대한 교훈입니다. 이것이 내가 걱정을 멈추고 사랑하는 법을 배운 방법입니다.
horatio

3
네. 목표는 여러 디스플레이에서 일관성이 아닌 UI 요소에 대한 페이지 내 일관성입니다 (대부분의 상황에서는 불가능 함).
Marc Edwards

3

Mac에서 개발 / 디자인 할 경우 프로파일이 반드시 필요합니다.

Photoshop의 이미지를 Adobe RGB 또는 ProPhoto RGB (좋은 카메라에서 사용하는 2 개의 프로파일)로 작업하면 PSD가 웹용으로 저장되고 Windows PC에서 볼 때 색상이 많이 이동합니다.

Mac 사용자의 경우 여러 플랫폼에서 색상을 유지하려면 WORKING 파일에서 sRGB 프로파일을 사용해야합니다.

최종적으로 게시 된 파일 (웹용으로 저장)에는 프로파일이 없지만 Mac에서 생성하는 동안 sRGB를 사용해야합니다. Mac과 Windows에서 색상이 비슷하게 표시되기 위해서는 최소한 sRGB가 있어야합니다.


2

이 단락의 진술을 확인하고 싶습니다.

기사를 읽는 동안 수집 한 것 (잘못되면 수정하십시오)에서이를 처리하는 올바른 방법은 Photoshop에서 색상을 sRGB로 관리하고 더 많은 것을 필요로 할 때 교정 색상을 사용하는 것입니다 작품의 "충실한"미리보기.

ICC 프로파일로 저장하면 일부 브라우저는 프로파일을 올바르게 적용하는 반면 다른 브라우저는 무시하므로 Is 프로파일을 사용하지 않고 저장 한 다음 sRGB를 사용하여 저장하는 것이 가장 좋습니다. 컬러 프로파일을 처음 사용하는 목적을 어기는 것이 아닙니까? 아니면 기사의 내용을 잘못 해석하고 있습니까?

프로덕션 환경 (알려진 자체 제어)과 출력 장치를 구분하고 사진에 가장 적합한 방법으로 워크 플로를 정렬합니다. 설명하겠습니다 :

디지털 카메라에서 사진을 열면 포함 된 sRGB 프로파일로 사진을 열 수있는 옵션이 있습니다. 프로필없이 열면 중요한 정보가 잃어 버립니다 (색상이 다르게 보입니다). 따라서 추가 처리를 위해 프로파일을 유지합니다. 포함 된 프로파일을 사용하여 Photoshop은 모니터 프로파일, 교정 용 컬러에 액세스하는 프로파일, 프린터 프로파일 및 동료가 작업중인 모든 프로파일에 색상을 적용 할 수 있습니다.

디자인 파일에서 사진을 사용하는 경우 프로파일이 첨부 된 빈 캔버스를 만들어야합니다. 그리고 최종 그래픽이 아닌 디자인 파일을 개발자에게 넘겨 주면 여전히 프로파일을 첨부하는 것이 좋습니다 ...

프로파일없이 최종 파일을 저장하면 예상대로 보입니다. 왜 이렇게이다? 프로파일이없는 그래픽은 sRGB 프로파일이 첨부 된 것처럼 해석되기 때문에 (누군가 이것에 대한 참조를 알고있을 것입니다).

또한 스크린 샷을 찍을 때 시스템이 모니터 프로파일의 색상을 sRGB로 변환하거나 sRGB 색상 공간에 가까운 모니터가 좋습니다.


1

첫 번째 질문에 대한 답변 : 워크 플로에서 sRGB를 사용하지 않으면 다른 색상 공간에서 사용 된 모든 이미지의 색상이 웹에서 정확하거나 잘리지 않습니다. 가져 오거나 사용하는 프로파일이없는 대부분의 이미지는 이미 올바른 색 공간 (예 : 카메라의 표준 공간)에 있기 때문에 제대로 작동합니다.

두 번째 질문은 웹에서 색상 프로파일 사용이 아직 구현되지 않았기 때문에 목적이 무너졌습니다. 브라우저는 sRGB를 '예상'하므로 첨부 할 필요가 없으므로 파일 크기가 커집니다. 많은 브라우저가 프로파일을 이해하지 못하기 때문에 색상이 잘 리므로 Adobe rgb 1998과 같이 프로파일이 포함 된 이미지를 제공하는 것은 좋지 않습니다.


"브라우저 '예상'sRGB"— 일종의. 여러 브라우저에서 동작이 혼합되어 있습니다. 태그가없는 이미지는 대부분 장치 RGB (변환 없음)로 렌더링합니다. OS X의 Safari 6은 태그가 지정되지 않은 이미지가 sRGB이고 변환한다고 잘못 가정합니다.
Marc Edwards

0

Adobe Photoshop CC (2017) 용 업데이트 :

  1. 작업 공간을 기본값으로 두십시오 (북미 범용 2)

  2. 다른 것을 바꾸지 마십시오

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.