Photoshop 이미지의 텍스트가 "흐리게 보입니다"

Photoshop CS5에서 웹 사이트 헤더를 만들고 있지만 텍스트를 볼 때 텍스트가 매우 흐리게 보이며 이유를 모릅니다.

웹 사전 설정을 사용합니다. 가장 선명하고 최상의 결과를 위해 무엇을 추천하십니까?

현재 모형은 다음과 같습니다.

기본적으로 Photoshop은 텍스트 레이어에 앤티 앨리어싱을 적용합니다. Alex 는 다른 질문 에서 좋은 비교를 제공했습니다 .

앤티 앨리어싱 옵션은 도구 모음과 Character창 에서 사용할 수 있습니다.

NB : 최종 제품에서 텍스트 레이어를 일반 (HTML) 텍스트로 사용하려는 경우 브라우저는 Photoshop과 다르게 텍스트를 렌더링합니다. 이에 대한 자세한 정보는 언급 된 동일한 "Font (anti) aliasing in Photoshop"질문에서 찾을 수 있습니다 .

태그 의 height및 width속성 (또는 CSS) img이 이미지의 실제 크기와 일치 하는지 확인하십시오 . 그렇지 않으면 웹 브라우저에 의해 크기가 조정되며 많은 웹 브라우저가 이것을 추한 방식으로 수행합니다. 비교적 잘하는 이미지조차도 이미지가 다소 흐려질 수 있습니다.

제대로 보이는지 확인하려면 픽셀을 1 : 1로 유지하십시오.

텍스트를 이미지로 표시하지 않으므로 접근성 및 검색 엔진 문제가 발생합니다.

그러나 텍스트를 이미지로 표시하려면 jpeg 압축으로 인해 png 또는 gif 이미지가 jpg 이미지보다 더 나은 결과를 제공합니다. 이미지를 압축하지 않아도 Opera 모바일 또는 인터넷 '가속기'와 같은 브라우저가있을 수 있습니다.

더 나은 해상도를 위해 텍스트를 투명 PNG 파일로 만듭니다. 다른 대안은 스타일과 SEO 모두에 sIFR 을 사용 하는 것입니다. sIFR은 기본적으로 글꼴을 Flash로 포함하지만 100 % 검색 엔진 친화적입니다. 3d-photomontage.com 에서 몇 가지 예를 참조하십시오 .

디자인에 이미지 텍스트를 사용할 필요가 전혀 없다는 것을 지적해야합니다. 본문에 웹 이외의 글꼴을 사용하지 마십시오. -디자인에서 멋지게 보이지만 HTML에서 가치가있는 것보다 더 많은 어려움을 겪습니다.

텍스트가 흐리게 표시되지 않도록하려면 PS의 앤티 앨리어싱 옵션에서 '없음'을 선택하십시오. HTML 버전은 OS 또는 브라우저에 따라 항상 텍스트를 다르게 렌더링하므로 실제로 할 수있는 일은 많지 않습니다.

이것도 살펴보십시오 .PS가 아닌 HTML에서 텍스트 렌더링 문제를 해결하는 데 더 도움이됩니다.

http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

나는 항상 'Crisp'앤티 앨리어싱 옵션을 선택하여 디자인하고 HTML의 텍스트가 어쨌든 다르게 보일 것이라는 사실을 알고 있습니다!