웹 사이트를 디자인하는 데 Photoshop을 사용하고 있으며 Photoshop 디자인을 라이브 브라우저 미리보기와 비교할 때마다 글꼴이 다르게 렌더링되는 것처럼 보입니다.
기본적으로 포토샵에서 선택하는 앤티 앨리어싱 방법은 텍스트가 항상 굵은 텍스트 의 느낌을줍니다 . 따라서 항상 앤티 앨리어싱 (일반 12px / 14px 텍스트)을 해제해야합니다.
Windows에서 cleartype과 함께 사용하는 것과 같은 종류의 글꼴 렌더링을 Photoshop에서 수행 할 수있는 방법이 있습니까?
그렇지 않은 경우 앤티 앨리어싱이 해제되어있을 때 Arial보다 더 잘 보이는 글꼴이 있습니까?
답변:
ClearType 텍스트가 너무 선명한 두 가지 이유가 있습니다.
메모장에 텍스트를 입력하고 편리한 도구로 스크린 샷 한 다음 혼합 모드 곱하기 (흰색 배경에 검은 색 텍스트이므로)로 Photoshop에 붙여 넣을 수 있습니다. 그러나 그것은 편리하지 않습니다. 편집 : 검은 색 이외의 전경색으로는 거의 불가능합니다.
이 사람 은 수동 하위 픽셀 렌더링을 수행하는 방법을 설명했으며 내 눈에는 글꼴 선명도를 개선하여 ClearType에 더 가깝게 만듭니다. 그러나 여전히 Photoshop의 힌트를 사용하므로 ClearType만큼 선명하지 않습니다.
Photoshop에서 ClearType 스타일 렌더링이 정말로 필요합니까? 웹 디자인에 사용하기 위해 텍스트가 포함 된 그래픽을 내보내는 경우 일부 디스플레이 (CRT, 회전식 전화)에 적합하지 않기 때문에 서브 픽셀 렌더링을 포함해서는 안됩니다. 텍스트를 내 보내지 않고 그냥 보더라도 Photoshop의 렌더링은 괜찮은 것처럼 보입니다.
Photoshop은 웹 디자인 프로그램이 아닙니다. 브라우저에서 그래픽 (jpg, gif 등)과 동일한 텍스트를 얻으려면 두 프로그램 모두에서 동일한 글꼴을 사용해야합니다. 일부 글꼴은 일부 브라우저에서 사용되지 않습니다.
텍스트 크기에 따라 Tahoma, Helvetica, Trebuchet 또는 Georgia와 같은 중간 크기의 글꼴이 좋습니다. 다음 웹 사이트에서 좋은 아이디어를 확인하십시오. http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/
앤티 앨리어싱과 관련하여 더 큰 글꼴이 사용됩니다.
텍스트를 페이지의 텍스트와 병합하려는 경우 CSS 위치를 사용하여 목표를 달성하는 것이 좋습니다. CSS를 사용하면 웹 페이지의 텍스트를 이미지 위에 놓을 수 있으며 상대 및 절대 위치를 사용하여 원하는대로 페이지를 정확하게 렌더링 할 수 있습니다. 여기 예제와 튜토리얼이 있습니다 : http://css-tricks.com/text-blocks-over-image/
불행히도 Photoshop은 어떤 종류의 하위 픽셀 렌더링도 지원하지 않습니다. Dreamweaver를 제외한 다른 Adobe 소프트웨어도 마찬가지 입니다. (단지 HTML을 렌더링 한 다음 운영 체제의 텍스트를 전달하기 때문에 Dreamweaver의 기술이 아닙니다.)
제안 된 작업 과정은 Photoshop에서 디자인을 만들어 슬라이스 한 다음 Dreamweaver에서 여는 것입니다. 디자인에 추가 수정이 필요한 경우 Photoshop에서 파일을 동시에 열거 나 Dreamweaver에서 뷰를 변경하고 저장하고 새로 고칠 수 있습니다. Dreamweaver에서 최종 실제 사본을 추가하십시오. Photoshop을 Fireworks로 바꿀 수도 있습니다. Fireworks에서 와이어 프레이밍을 시작하거나 → Photoshop에서 계속 → Dreamweaver를 통해 게시 할 수도 있습니다. (Creative Suite 에디션이 일반적으로 번들로 구매되는 이유는 분명합니다. 그렇지 않습니까?)
Dreamweaver의 미리보기에서 브라우저와 디자인이 다르게 보일 경우 불행히도 또 다른 문제입니다 (타이포 그라피 만 아니라 렌더링 전체를 말하는 것입니다). Photoshop에서 빠른 시일 내에 Dreamweaver를 통해 또는 데모를 통해 라이브 데모로 향상시킬 수 있습니다. 내가 할 소원 포토샵 서브 픽셀 렌더링 능력을 가질 것이다 (그러나 동시에 희망에서이 CS6에 도입되지 않을 것이다, 또는 적어도 희망에 나는 그때까지 부자가 될 것입니다)!
참고 사항 : ClearType은 10 개 정도의 특허로 보호되므로 정확히 동일한 렌더링이 불가능합니다. 또한 OS X은 기본적으로 다른 렌더링 (Quartz)을 사용하므로 Linux 배포판의 그래픽 인터페이스도 마찬가지입니다.
가능한 해결 방법은 "날카로운"앤티 앨리어싱 방법을 사용하고 텍스트 레이어에 0 심도 내부 광선을 설정하는 것입니다.
이 샘플에서는 흰색, 불투명도 85 %, "스크린"블렌드 모드, 0 초크, 0 크기를 사용했습니다. Ms 클리어 타입만큼 좋지는 않지만 덜 견고 해 보입니다 ...
(첫 번째 줄 = 앤티 앨리어싱 없음, 마지막 줄 = 내부 글로우가없는 날카로운 앤티 앨리어싱)