Văn bản trong hình ảnh Photoshop của tôi trông có vẻ mờ nhạt

9

Tôi đang tạo một tiêu đề trang web trong Photoshop CS5, tuy nhiên khi tôi nhìn vào nó, văn bản trông rất mờ và tôi không biết tại sao.

Tôi sử dụng cài đặt trước Web. Bạn đề nghị gì cho kết quả sắc nét nhất và tốt nhất?

Đây là mockup hiện tại:

Tiêu đề

adobe-photoshop website-design cs5

— Jeff
nguồn

bạn đã thử phóng to hình ảnh raster chưa? Điều đó thường dẫn đến mờ. Trên một mặt lưu ý, đối với raster vector vs, xem ví dụ: graphicdesign.stackexchange.com/questions/260/...

— Jari Keinänen

@koiyu - Các lớp tôi lo lắng nhất là các lớp Văn bản và tôi đã không raster những lớp đó

— Jeff

(oh, tôi đã xem xét đường cong xung quanh "xSky") Photoshop áp dụng một số khử răng cưa cho văn bản theo mặc định và cài đặt có thể không phù hợp với nhu cầu hiện tại của bạn. Có những ví dụ trong graphicdesign.stackexchange.com/questions/1177/... (mặc dù điều này không trực tiếp trả lời câu hỏi của bạn)

— Jari Keinänen

Cảm ơn bài đăng này, chính xác những gì tôi cần để giúp tôi với văn bản mờ của tôi, trợ giúp rõ ràng tuyệt vời :)

14

Theo mặc định, Photoshop áp dụng một số khử răng cưa cho các lớp văn bản. Alex đã cung cấp một so sánh tốt đẹp trong một câu hỏi khác :

Các tùy chọn khử răng cưa có sẵn trên thanh công cụ và trong Charactercửa sổ:

tùy chọn khử răng cưa

Lưu ý: nếu bạn dự định sử dụng các lớp văn bản dưới dạng văn bản (HTML) thông thường trong sản phẩm cuối cùng, các trình duyệt có thể sẽ hiển thị văn bản khác với Photoshop. Thông tin thêm về điều này bạn có thể tìm thấy trên cùng một câu hỏi "Phông chữ (chống) trong Photoshop" được đề cập.

— Jari Keinänen
nguồn

Vì vậy, tôi đoán đó là Anti Aliasing đang làm điều đó? Làm thế nào khác tôi có thể đạt được văn bản in đậm? :)

— Jeff

Bạn có thể sử dụng một phiên bản đậm hơn của phông chữ (nếu có), có thể được chọn từ trình đơn thả xuống bên cạnh họ phông chữ. HOẶC bạn có thể sử dụng phần giả đậm của Photoshop, được bật bằng cách nhấn nút T (bên cạnh nút T ). HOẶC bạn có thể thêm một hiệu ứng lớp, ví dụ như một nét, để làm cho văn bản trông đậm hơn.

— Jari Keinänen

2

Ngoài ra, tôi có thể nói thêm, đây là một lý do mà Pictures of Text không phải là một ý tưởng hay. Văn bản thực có thể được hiển thị theo cách mong muốn nhất của khách hàng.

— mattdm

4

Đảm bảo rằng các thuộc tính heightvà width(hoặc CSS) cho imgthẻ của bạn khớp với kích thước thực của hình ảnh. Nếu không, nó sẽ bị thay đổi kích thước bởi trình duyệt web và nhiều trình duyệt web thực hiện việc này theo cách xấu. Ngay cả những người làm điều đó tương đối tốt có thể làm cho hình ảnh hơi mờ.

Nếu bạn muốn đảm bảo rằng nó trông đúng, hãy giữ các pixel 1: 1.

— mattdm
nguồn

Vấn đề là, trong bản thân Photoshop, nó trông thật tuyệt. Làm cách nào để thực hiện "pixel 1: 1"?

— Jeff

@Jeff "giữ pixel 1: 1" tương đương với việc nhìn vào hình ảnh ở mức thu phóng 100%.

— Jari Keinänen

@koiyu - Được rồi, tôi đã có điều đó mặc dù. :)

— Jeff

1

Tôi sẽ không hiển thị văn bản dưới dạng hình ảnh dẫn đến các vấn đề về khả năng truy cập và công cụ tìm kiếm.

Tuy nhiên, nếu bạn muốn hiển thị văn bản dưới dạng hình ảnh, hình ảnh png hoặc gif cho kết quả tốt hơn hình ảnh jpg do nén jpeg. Ngay cả khi bạn không nén hình ảnh của mình, một trình duyệt như Opera mobile hoặc 'máy gia tốc' internet có thể.

— jeroen
nguồn

Luôn sử dụng PNG, tránh xa JPEG từ lâu: P

— Jeff

1

Tôi sẽ làm cho văn bản dưới dạng tệp PNG trong suốt để có độ phân giải tốt hơn. Một cách khác là sử dụng sIFR cho cả phong cách và SEO. Về cơ bản, sIFR nhúng phông chữ là Flash, nhưng nó thân thiện với công cụ tìm kiếm 100%. Xem một số ví dụ tại ví dụ 3d-photomontage.com .

— Tony Tân
nguồn

1

Tôi nên chỉ ra rằng hoàn toàn không cần sử dụng văn bản hình ảnh trong thiết kế của bạn. Tránh sử dụng phông chữ không phải web cho bản sao cơ thể. -Tôi biết rằng chúng trông tuyệt vời trên thiết kế nhưng bạn gặp nhiều rắc rối trong HTML hơn giá trị của nó -

Chỉ cần chọn 'Không' từ các tùy chọn khử răng cưa trong PS nếu bạn không muốn làm mờ văn bản của mình. Phiên bản HTML sẽ luôn hiển thị văn bản khác nhau tùy thuộc vào Hệ điều hành hoặc Trình duyệt, vì vậy thực sự không có nhiều thứ bạn có thể làm.

Hãy nhìn vào điều này là tốt, nó sẽ giúp bạn nhiều hơn để giải quyết các vấn đề kết xuất văn bản trong HTML của bạn chứ không phải PS

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

Tôi luôn luôn thiết kế với tùy chọn khử răng cưa 'Crisp' được chọn và nhận thức được thực tế rằng văn bản trong HTML sẽ trông khác đi!

— Sahbas có
nguồn