웹 디자인을위한 Photoshop 색상 설정


9

웹 디자인을 위해 Photoshop에서 어떤 색상 프로파일 설정을 사용해야합니까? 모니터 보정 효과가 웹 이미지를 저장합니까?

모니터를 색도계로 보정하고 모든 주요 브라우저에서 색상이 일관되게 유지되도록하고 싶습니다.

작업 공간, 색상 관리를 위해 교정 된 모니터 프로파일을 사용하고 웹용으로 저장할 프로파일을 포함하지 않으며 가능할 때마다 .png 24를 사용하려고합니다. 이것이 모범 사례입니까?

색상 설정

여기에 이미지 설명을 입력하십시오

웹용으로 저장

여기에 이미지 설명을 입력하십시오


1
가능한 보충 질문 포인트-웹이 사용 사례라고 설명했지만 다른 사람의 CMYK 아트를 가끔 편집해야하는 경우 위의 설정이 '안전'합니까?
e100

좋은 지적. 나는 인쇄 또는 CMYK 경험이 많지 않아 몰라요.
Chris_O

답변:


5

"색상 관리"와 "웹 개발"은 "걱정하지 마십시오", "시간 낭비"또는 "fuggedaboudit"로 인증되지 않은 한 같은 문장에 사용해서는 안됩니다. lawndartcatcher가 설명 된 이유는 맞습니다. 두 대의 모니터가 동일한 색상을 표시하는 사무실 (그래픽 디자인 스튜디오 제외)을 아직 보지 못했습니다. 가정용 컴퓨터는 최소한 나쁘다.

웹에서 주로 작업하는 경우 sRGB 인터넷의 표준이며 모든 사용자 에이전트 (브라우저)가 표시되도록 빌드 되므로 기본 값 이어야합니다 .

웹 사이트의 이미지에 색상 프로파일을 포함시키지 마십시오. 이미지에 크기를 추가하지만 유용한 정보를 추가하지 않으므로 페이지를 더 무겁게 만드는 것입니다. Photoshop에서 웹 및 장치 용으로 저장하는 경우 "내장 색상 프로파일"을 선택 취소하십시오. 안전 조치로, "sRGB로 변환"을 선택하십시오 (다른 색 공간에있는 이미지를 처리하고 변환하는 것을 잊어 버린 경우).

다른 질문에 대답하려면 모니터 캘리브레이션 을 사용하여 이미지의 색상 프로파일로 프로파일을 사용하는 경우를 제외하고 SfW 이미지에는 영향을 미치지 않습니다.

PNG-24는 투명 이미지에 유용합니다. 투명도가 포함되지 않은 경우 jpeg는 일반적으로 동일한 이미지 품질과 적은 색상의 간단한 이미지, 특히 가장자리가 단단한 경우 (로고가 전형적인 예) .gif가 가장 적합합니다.


7

글쎄, 큰 문제는 많은 시간을 소비하고 색상을 보정하고 선택하는 데 관심을 가져야하며 (좋은 것입니다!) 모니터의 "밝기"버튼. 저의 (비 설계) 동료들은 모두 두 개의 화면을 가지고 있으며 그 중 어느 것도 서로 일치하지 않습니다. "고객이 요청한이 특정 빨간색이 내가 수행 한 번거로운 보정을 기반으로 항상 올바르게 보이는 방법이 있습니까?" 슬프게도 대답은 다음과 같습니다.

아니.

그러나 (그리고 이것은 꽤 크지 만) 당신이 취하는 모든 치료가 중요합니다. 일관된 프로파일을 유지하면 모든 페이지 / 색상이 동일한 모니터에서 동일하게 보입니다. 모든 사람이 동일한 모니터를 사용하고있는 것은 아니므로 항상 동일하게 보이지는 않습니다.

프로파일을 포함하지 않으면 브라우저가 현재 프로파일을 대체 할 수 있도록 도어가 열린 채로있을 수 있습니다. 주요 브라우저가 색상 처리에 동의하도록 할 수 있다면 아마 노벨상이있을 것입니다.

간단히 말해서, 그렇습니다 -당신이 취하는 모든 치료가 중요하고 사용중인 설정이 좋습니다 (개인적으로 좀 더 일반적인 RGB 프로파일을 원할지라도). 그러나 일단 디자인에서 컴퓨터를 떠나 알 수없는 웹 사용자의 세계로 나가면 제어 할 수있는 기능이 너무 많습니다.


매우 도움을 주셔서 감사합니다! 가장 큰 관심사는 Photoshop에서 컬러 # 172550으로 만든 그래픽을 사용하는 경우 CSS의 # 172550이 모든 모니터의 그래픽과 일치한다는 것입니다.
Chris_O

웹 안전 색상으로 작업 할 수도 있습니다
Jack

2
웹 안전 색상은 "손상을 제한"하는 좋은 방법 중 하나이지만 불행히도 색상 # 172550은 대다수의 사람들이 모니터를 보정하지 않기 때문에 보드 전체에서 다르게 보일 것입니다. 인쇄 작업을하고 있다면 전문 프린터가 Pantone 표준을 준수하여 작업하기가 더 쉬워서 # 172550의 모양을 알 수 있습니다.
lawndartcatcher

2
브라우저는 sRGB를 사용합니다. 이것이 W3C 표준입니다. 화상에 대한 다른 컬러 프로파일을 사용하여 보장하는 브라우저에서 볼 때 다를 수있다.
Alan Gilbertson

2
웹에 안전한 색상은 여기와 관련이 없습니다 ( 그래픽 디자인 .stackexchange.com / questions / 40 /… )
e100

3

+1 Chris 이것은 정말 좋은 질문입니다. 정확히 나는 그것을 깊이 알지 못하지만이 질문에 관심을 가질 때 같은 기사를 찾았습니다. 내 설정을 변경했을 때 도움이 될 수 있습니다. 이것도 호기심을 풀어줄 수 있습니다.

  1. Ivan의 색상 관리
  2. 웹용 Photoshop에서 색상 관리를위한 팁
  3. 여러 장치에서 색상을 일치시키는 색상 관리
  4. 이 설정은 아무도 포토샵에 사용하지 않아야합니다

이것이 조금 도움이되지 않기를 바랍니다 .......


Smashing Magazine 기사와 그에 따른 토론을 기억합니다. 마지막 기사가 가장 적합합니다. 감사!
Chris_O

항상 환영합니다 ...
Jack

1

웹 컬러 관리에 대한 나의 솔직한 느낌은 위에서 언급 한 것들을 반영하지만 약간의 경고가 있습니다.

일반적으로 말하면 색상 관리 워크 플로 외부에서 디자인하고 모니터 / 소프트웨어 콤보가 제대로 작동하지 않는 경우 최소한 좋은 시작점을 가질 수 있도록 색상 관리 워크 플로를 끝까지 유지하는 것이 좋습니다. 의도 치 않은 색상 캐스트, 색역 및 감마 문제 등으로 점심 식사를하는 경우, 교정되지 않은 다른 최종 사용자 장비가 반대 방향으로 동등한 양을 초과 할 가능성이 높아지고 편향된 색상 결정에 따라 처음에 색상 관리 워크 플로 내에서 설계된 경우보다 잘못 표시됩니다.

또한 웹 사이트 및 웹 사이트 템플릿에 대한 그래픽 이미지 (헤더, 탐색, 배경 등)에 태그를 지정하지는 않지만 16 진수로 지정된 색상과 색상 관리 된 이미지 사이의 색상 불일치로 인해 색상 관리에 어려움이 생길 수 있습니다 실제로 색상 프로파일을 존중 몇 브라우저)에, 나는 종종 태그 사진을. 특히 고해상도 이미지. 드물기는하지만 최종 사용자가 색상 관리 브라우저에서 콘텐츠를보고있는 경우, 프로필을 통해 사용자는 사진을 촬영했을 때 사진을보고 사람의 피부 톤, 하늘, 물 등을 볼 수 있습니다. 제대로 표현되었습니다.

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