Teks dalam gambar Photoshop saya terlihat "buram"

9

Saya membuat header situs web di Photoshop CS5, namun ketika saya melihatnya, teksnya terlihat sangat buram dan saya tidak tahu mengapa.

Saya menggunakan preset Web. Apa yang Anda rekomendasikan untuk hasil paling tajam dan terbaik?

Inilah mockup saat ini:

Header

adobe-photoshop website-design cs5

— Jeff
sumber

apakah Anda mencoba memperbesar gambar raster? Itu biasanya mengarah pada keburaman. Di samping catatan, untuk raster vs. vektor, lihat misalnya: graphicdesign.stackexchange.com/questions/260/…

— Jari Keinänen

@ Koiyu - Lapisan-lapisan yang paling saya khawatirkan adalah lapisan-lapisan Teks, dan saya tidak merasterisasi lapisan-lapisan itu

— Jeff

(oh, saya melihat kurva di sekitar "xSky") Photoshop menerapkan beberapa anti-aliasing ke teks secara default dan pengaturan mungkin tidak sesuai dengan kebutuhan Anda saat ini. Ada contoh di graphicdesign.stackexchange.com/questions/1177/… (meskipun ini tidak langsung menjawab pertanyaan Anda)

— Jari Keinänen

Terima kasih untuk posting ini, persis apa yang saya butuhkan untuk membantu saya dengan teks buram saya, bantuan jelas yang luar biasa :)

14

Secara default, Photoshop menerapkan beberapa anti-aliasing ke lapisan teks. Alex telah memberikan perbandingan yang bagus dalam pertanyaan lain :

Opsi anti-aliasing tersedia di bilah alat dan di Characterjendela:

opsi anti-aliasing

NB: jika Anda berencana untuk menggunakan layer teks sebagai teks biasa (HTML) di produk akhir, browser kemungkinan besar akan membuat teks berbeda dari Photoshop. Info lebih lanjut tentang ini dapat Anda temukan pada pertanyaan yang sama "Font (anti) di Photoshop" yang disebutkan.

— Jari Keinänen
sumber

Jadi saya kira ini Anti Aliasing yang melakukannya? Bagaimana lagi saya bisa mencapai teks tebal? :)

— Jeff

Anda dapat menggunakan versi font yang lebih berani (jika tersedia), yang dapat dipilih dari drop-down di sebelah keluarga font. ATAU Anda bisa menggunakan Photoshop tebal palsu, yang diaktifkan dengan menekan tombol T (di sebelah tombol T ). ATAU Anda bisa menambahkan efek layer, misalnya stroke, untuk membuat teks terlihat lebih berani.

— Jari Keinänen

2

Juga, saya dapat menambahkan, ini adalah salah satu alasan Pictures of Text bukan ide yang baik. Teks asli dapat diterjemahkan dengan cara yang paling diinginkan oleh klien.

— mattdm

4

Pastikan atribut heightdan width(atau CSS) untuk imgtag Anda cocok dengan ukuran gambar yang sebenarnya. Jika tidak, itu akan diperbesar ulang oleh browser web, dan banyak browser web melakukan ini dengan cara yang jelek. Bahkan orang-orang yang melakukannya dengan relatif baik dapat membuat gambar agak buram.

Jika Anda ingin memastikan tampilannya benar, pertahankan piksel 1: 1.

— mattdm
sumber

Masalahnya, di Photoshop itu sendiri terlihat kabur. Bagaimana saya melakukan "piksel 1: 1"?

— Jeff

@ Jeff "menjaga piksel 1: 1" setara dengan melihat gambar pada zoom 100%.

— Jari Keinänen

@ Koiyu - Oke, saya sudah memilikinya. :)

— Jeff

1

Saya tidak akan menampilkan teks sebagai gambar yang mengarah pada aksesibilitas dan masalah mesin pencari.

Namun, jika Anda ingin menampilkan teks sebagai gambar, gambar png atau gif memberikan hasil yang lebih baik daripada gambar jpg karena kompresi jpeg. Bahkan jika Anda tidak memampatkan gambar Anda, peramban seperti Opera seluler atau 'akselerator' internet mungkin.

— jeroen
sumber

Selalu gunakan PNG, menjauh dari JPEG dahulu kala: P

— Jeff

1

Saya akan menjadikan teks sebagai file PNG transparan untuk resolusi yang lebih baik. Alternatif lain adalah menggunakan sIFR untuk gaya dan SEO. sIFR pada dasarnya menyematkan font sebagai Flash, tetapi 100% ramah mesin pencari. Lihat beberapa contoh di misalnya 3d-photomontage.com .

— Tony Tan
sumber

1

Saya harus menunjukkan bahwa mengatakan sama sekali tidak perlu menggunakan teks gambar dalam desain Anda. Hindari penggunaan font non-web untuk salinan tubuh. -Saya tahu mereka tampak hebat pada desain tetapi Anda mendapatkan lebih banyak masalah dalam HTML daripada nilainya -

Cukup pilih 'Tidak Ada' dari opsi anti-aliasing di PS jika Anda tidak ingin kabur dalam teks Anda. Versi HTML akan selalu membuat teks berbeda tergantung pada OS atau Browser sehingga tidak banyak yang dapat Anda lakukan.

Lihat ini juga, itu akan membantu Anda lebih banyak untuk memecahkan masalah rendering teks dalam HTML Anda daripada PS

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

Saya selalu mendesain dengan opsi alias alias 'Crisp' yang dipilih dan menyadari fakta bahwa teks dalam HTML akan tetap terlihat berbeda!

— Sahbas Memiliki
sumber