Phông chữ (chống) răng cưa trong Photoshop

Tôi đang sử dụng Photoshop để thiết kế trang web và bất cứ khi nào tôi so sánh thiết kế photoshop với trình duyệt xem trước trực tiếp, các phông chữ dường như được hiển thị khác nhau.

Về cơ bản bất kỳ phương pháp khử răng cưa nào tôi chọn trong photoshop, văn bản luôn mang lại ấn tượng về văn bản in đậm . Vì vậy, tôi luôn bị buộc phải tắt khử răng cưa (đối với văn bản 12px / 14px bình thường).

Có phương pháp nào tôi có thể đạt được cùng kiểu hiển thị phông chữ trong Photoshop giống như phương pháp mà Windows sử dụng với Cleartype không?

Nếu không, có bất kỳ phông chữ nào ngoài đó trông đẹp hơn Arial khi tắt khử răng cưa không?

Có hai lý do văn bản ClearType rất sắc nét.

1. nó sử dụng kết xuất subpixel . Tôi không nghĩ Photoshop hỗ trợ điều đó.
2. nó sử dụng gợi ý tích cực để khớp các đường vào lưới pixel

Bạn có thể nhập văn bản của mình vào Notepad, chụp màn hình bằng một công cụ tiện lợi và dán nó vào Photoshop với chế độ hòa trộn Nhân (vì đó là văn bản màu đen trên nền trắng). Nhưng điều đó không thuận tiện. Chỉnh sửa: cũng có thể gần như không thể thực hiện với bất kỳ màu nền trước nào ngoài màu đen.

Anh chàng này đã mô tả một phương pháp để thực hiện kết xuất subpixel thủ công và trong mắt tôi, nó cải thiện độ sắc nét của phông chữ, làm cho nó gần với ClearType. Nhưng nó vẫn sử dụng gợi ý của Photoshop, vì vậy nó không sắc nét như ClearType.

Bạn có thực sự cần kết xuất kiểu ClearType trong Photoshop không? Nếu bạn xuất bất kỳ đồ họa nào chứa văn bản để sử dụng trong thiết kế web của mình, chúng không nên chứa kết xuất pixel phụ vì nó không phù hợp với một số màn hình (CRT, điện thoại xoay). Và nếu bạn không xuất văn bản mà chỉ nhìn vào nó, kết xuất của Photoshop có vẻ ổn.

Photoshop không phải là một chương trình thiết kế web. Để có được văn bản trông giống nhau trong trình duyệt như trong đồ họa (jpg, gif, v.v.), bạn phải sử dụng cùng một phông chữ trong cả hai chương trình. Một số phông chữ không được sử dụng bởi tất cả các trình duyệt.

Tùy thuộc vào kích thước văn bản của bạn, một phông chữ cỡ trung bình tốt có thể là Tahoma, Helvetica, Trebuchet hoặc Georgia. Kiểm tra trang web này để biết một số ý tưởng hay: http://www.snaphow.com/10- most-p phổ biến- web-fonts-used-in-web-safe- design /

Phông chữ lớn hơn là nơi nó bắt đầu quan trọng về việc khử răng cưa.

Nếu bạn đang cố gắng để văn bản hợp nhất với văn bản trên một trang, tôi khuyên bạn nên sử dụng định vị CSS để đạt được mục tiêu của mình. CSS cho phép bạn đặt văn bản từ trang web của bạn lên trên hình ảnh và sử dụng định vị tương đối và tuyệt đối để hiển thị trang chính xác như bạn muốn. Dưới đây là một ví dụ và hướng dẫn: http://css-tricks.com/text-blocks-over-image/

Thật không may, Photoshop không hỗ trợ bất kỳ loại kết xuất pixel nào. Cũng không có phần mềm Adobe nào khác ngoại trừ Dreamweaver . (Chà, nó không chính xác là công nghệ của Dreamweaver, vì nó chỉ hiển thị HTML và sau đó chuyển văn bản cho hệ điều hành được hiển thị.)

Quy trình công việc được đề xuất có thể là bạn tạo và cắt thiết kế của mình trong Photoshop và sau đó mở nó trong Dreamweaver. Nếu thiết kế cần chỉnh sửa thêm, bạn có thể mở tệp đồng thời trong Photoshop, thực hiện các thay đổi, lưu và làm mới chế độ xem trong Dreamweaver. Thêm bản cuối cùng, bản sao thực trong Dreamweaver. Bạn cũng có thể thay thế Photoshop bằng Fireworks; hoặc thậm chí bắt đầu tạo khung trong Fireworks → tiếp tục trong Photoshop → xuất bản thông qua Dreamweaver. (Rõ ràng tại sao các phiên bản Creative Suite thường được mua theo gói, phải không?)

Nếu thiết kế trông khác nhau trong bản xem trước của Dreamweaver so với trong trình duyệt, thì đó là một vấn đề khác, đáng tiếc (và tôi không nói về chỉ kiểu chữ mà là toàn bộ kết xuất). Bạn càng sớm có thể nâng cấp từ Photoshop lên bản demo trực tiếp bằng cách thông qua Dreamweaver hoặc không phải là tốt hơn. Tôi làm điều ước Photoshop sẽ có quyền hạn subpixel vẽ (nhưng đồng thời hy vọng cùng nó sẽ không được giới thiệu trong CS6, hoặc ít nhất là hy vọng tôi sẽ giàu bằng cách sau đó)!

Chỉ cần một lưu ý phụ: ClearType được bảo vệ với 10 bằng sáng chế, do đó, chính xác kết xuất giống nhau là không thể xảy ra. Ngoài ra, điều đáng chú ý là OS X sử dụng kết xuất (Quartz) khác nhau theo mặc định và các giao diện đồ họa trong các bản phân phối linux cũng vậy.

Thiết kế bằng HTML và CSS. Nếu bạn PHẢI đưa nó trở lại vào một bản mô phỏng PhotoShop, màn hình sẽ bắn nó ra khỏi trình duyệt, sau đó đưa nó trở lại tài liệu PhotoShop của bạn.

Nói chung, loại cài đặt trong PhotoShop là một nỗi đau.

Một cách giải quyết khả thi có thể là sử dụng phương pháp khử răng cưa "sắc nét" và đặt ánh sáng bên trong 0 độ sâu trên lớp văn bản:

Đối với mẫu này, tôi đã sử dụng màu trắng, độ mờ 85%, chế độ hòa trộn "màn hình", 0 choke, 0 kích thước. Không tốt như Ms rõ ràng, nhưng có vẻ ít táo bạo hơn ...

(dòng đầu tiên = không khử răng cưa, dòng cuối = khử răng cưa sắc nét mà không phát sáng bên trong)