웹에서와 같이 Photoshop 텍스트를 표시하려면 어떻게해야합니까?


11

앤티 앨리어싱이 "없음"으로 설정된 상태에서 Photoshop의 모든 것을 실제로 디자인해야합니까? 더 좋은 방법이 있다고 확신합니다.

Photoshop에서 기본 웹 안전 (예 : Tahoma)을 선택할 때 웹에서 실제로 어떻게 보이는지 확인할 수 있도록 설정하고 싶습니다.

예 : Photoshop에서 앤티 앨리어싱이 "선명"으로 설정된 Tahoma와 Firefox에서 렌더링하는 방법의 차이점은 중요합니다. Photoshop에서는 멋지고 매끄럽게 보이고 웹에서는 쓰레기처럼 보입니다.

콘텐츠를 웹에 게시하려는 경우 가장 유사한 앤티 앨리어싱 선택이 있습니까 (가장 비슷한 결과를 보임)?


1
글꼴이 웹에서 표시되는 방식은 전적으로 브라우저, 브라우저 설정, OS 및 OS 설정에 따라 다릅니다. 다시 말해, 사람들마다 다르게 보입니다.
DA01

답변:


10

대부분의 운영 체제 및 브라우저는 앤티 앨리어싱 또는 하위 픽셀 앤티 앨리어싱으로 렌더링합니다. 하위 픽셀 앤티 앨리어싱은 Windows (ClearType 포함) 및 OS X와 ​​같은 데스크탑 플랫폼에서 일반적입니다. 표준 흑백 앤티 앨리어싱은 장치의 하위 픽셀 순서가 장치 방향에 따라 변경 될 수 있고 하위 픽셀 렌더링이 이루어지는 모바일 플랫폼에서 일반적입니다. t는 종종 더 높은 픽셀 밀도 디스플레이를 갖기 때문에 중요합니다.

앨리어싱 된 텍스트 렌더링은 Windows XP에서 일반적이며 ClearType은 기본적으로 비활성화되어 있습니다. Windows Vista 이상에서는 기본적으로 ClearType이 켜져 있습니다.


Photoshop vs Windows X OS X vs iOS vs Android vs WebKit vs Firefox (Gecko)에서의 렌더링은 일반적으로 모두 다릅니다. 따라서 스크린 샷을 만들어 문서에 비트 맵 레이어로 추가하지 않는 한 Photoshop에서 무언가를 제작하고 텍스트 렌더링이 동일하다는 것을 알 수있는 방법은 절대 없습니다.


2
이 질문에 대답 한 이후 Adobe는 시스템 글꼴 렌더링을 사용하는 Photoshop (Windows의 경우 이에 상응하는 기능)에 "Mac"및 "Mac LCD"옵션을 추가했습니다. 종종 Safari와 매우 유사하거나 동일합니다.
Marc Edwards

8

새로운 사고 방식은 레이아웃 및 타이포그래피 디자인을 위해 Photoshop을 피하고 가능한 빨리 브라우저에서 시작하는 것입니다.

Photoshop 구성 요소와 달리 클라이언트에 실제 URL을 전달하면 최종 제품이 선택한 브라우저에서 Photoshop 구성 요소와 약간 다르게 렌더링 될 때 클라이언트의 기대치가 높아지는 것을 방지 할 수 있습니다.

궁극적으로 클라이언트를 교육하고 브라우저와 OS간에 발생하는 피할 수없는 인쇄상의 불일치를 고객에게 알리는 것은 우리의 책임입니다.


1
회사에서는 디자인을 만들어 프론트 엔드 개발자에게 전달합니다. 코드는 절대 만지지 않습니다. 그 말로, 실제로 텍스트가 어떻게 보이는지 확인하기 위해 실제로 웹 페이지를 작성하지 않는 솔루션이 필요합니다.
jonn_g

2

Photoshop CC에는 글꼴에 대한 새로운 앨리어싱 모드가 추가되었습니다. "선명한"또는 "강한"대신 새로운 "Mac LCD"를 사용해보십시오. 100 % 웹 안전 디자인을 얻게됩니다.


1
브라우저, 글꼴 및 운영 체제에서 100 % 일관성과 같은 것이 없다는 점을 고려할 때 "100 % 웹 안전 디자인"과 같은 것은 없습니다.
DA01

1

짧은 답변 : 할 수 없습니다.

Photoshop은 서체가 외부에서 렌더링되는 방식을 아는 데 이상적 일뿐만 아니라 일반적으로 글꼴 작업에 적합하지 않습니다. (Design Firm / Print Shop에서 근무했을 때 PS로 디자인 된 모든 것을 동일한 이유로 PDF로 내 보내야했습니다). 그런 다음 웹, 브라우저 및 해당 브라우저를 실행하는 OS의 문제가 발생합니다. 지금까지 내가 아는 한 OS X는 글꼴을 적절하게 렌더링하는 측면에서 최고이며 Linux는 2 위이며 Windows는 마지막입니다. 실제로는 모두 글꼴 렌더링에 서로 다른 알고리즘을 사용하므로 어디에서나 동일한 결과를 얻을 수는 없습니다. 해결책이 있다면 우리 모두 Linux, Mac으로 전환하거나 다음 번에 Microsoft가 Windows Metro로 성공할 때까지 기다리거나 (죄송합니다. Windows 8이라고 부르는 것을 싫어합니다) 완전히 불면 될 것입니다.

내 2 센트 만

반점


0

내 눈에 브라우저의 렌더링은 Mac의 Photoshop "Sharp"와 "Crisp"사이, Windows의 "Crisp"와 "Strong"사이에 있습니다. 함께 일하는 그래픽 디자이너에게 라이브 텍스트로 "Crisp"을 사용하는 것이 좋습니다. 기본 "Strong"은 항상 실망하도록 설정합니다. ;)

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