Photoshop resmimdeki metin “bulanık” görünüyor

9

Photoshop CS5'te bir web sitesi başlığı oluşturuyorum, ancak baktığımda metin çok bulanık görünüyor ve neden olduğu hakkında hiçbir fikrim yok.

Web ön ayarını kullanıyorum. En keskin ve en iyi sonuçlar için ne önerirsiniz?

İşte mevcut model:

Başlık

adobe-photoshop website-design cs5

— Jeff
kaynak

Raster görüntüyü büyütmeye çalıştınız mı? Bu genellikle bulanıklığa yol açar. Yan notta, raster ve vektör için bkz. Örneğin: graphicdesign.stackexchange.com/questions/260/…

— Jari Keinänen

@koiyu - En çok endişe duyduğum katmanlar Metin katmanları ve bunları rasterleştirmedim

— Jeff

(oh, "xSky" etrafındaki eğriye bakıyordum) Photoshop varsayılan olarak metne bazı kenar yumuşatma uygular ve ayar mevcut gereksinimlerinize uygun olmayabilir. Graphicdesign.stackexchange.com/questions/1177/… ' de örnekler var (bu doğrudan sorunuza cevap vermese de)

— Jari Keinänen

Bu yazı için teşekkürler, tam olarak bulanık

14

Varsayılan olarak, Photoshop metin katmanlarına bazı kenar yumuşatma uygular. Alex başka bir soruda güzel bir karşılaştırma yaptı :

Kenar yumuşatma seçenekleri araç çubuğunda ve Characterpencerede bulunur:

kenar yumuşatma seçenekleri

Not: metin katmanlarını son üründe normal (HTML) metin olarak kullanmayı planlıyorsanız, tarayıcılar muhtemelen metni Photoshop'tan farklı şekilde işler. Bu konuda daha fazla bilgi bulabilirsiniz aynı "Photoshop (Font) anti-aliasing" soru sözü.

— Jari Keinänen
kaynak

Yani sanırım bunu yapan Örtüşme Önleme mi? Başka kalın metinleri nasıl elde edebilirim? :)

— Jeff

Yazı tipi ailesinin yanındaki açılır menüden seçilebilen yazı tipinin daha bol bir sürümünü (varsa) kullanabilirsiniz. YA basarak etkindir sahte cesur Photoshop en, kullanabilirsiniz T düğmesine (yanındaki T düğmesinin). VEYA metnin daha görünür görünmesi için bir katman efekti, örneğin bir kontur ekleyebilirsiniz.

— Jari Keinänen

2

Ayrıca, Metin Resimlerinin iyi bir fikir olmamasının bir nedeni de bu olabilir . Gerçek metin müşteri tarafından en çok arzu edilen şekilde işlenebilir.

— mattdm

4

Etiketinizin heightve width(veya CSS) özelliklerinin imggörüntünün gerçek boyutuyla eşleştiğinden emin olun . Aksi takdirde, web tarayıcısı tarafından yeniden ölçeklendirilir ve birçok web tarayıcısı bunu çirkin bir şekilde yapar. Bunu nispeten iyi yapan kişiler bile görüntüyü biraz bulanıklaştırabilir.

Doğru göründüğünden emin olmak istiyorsanız, pikselleri 1: 1 olarak saklayın.

— mattdm
kaynak

Şey, Photoshop'un kendisinde bulanık görünüyor. "Piksel 1: 1" i nasıl yaparım?

— Jeff

@Jeff "pikselleri 1: 1 tutmak" görüntüye% 100 yakınlaştırma ile eşdeğerdir.

— Jari Keinänen

@koiyu - Tamam, buna rağmen zaten var. :)

— Jeff

1

Erişilebilirlik ve arama motoru sorunlarına yol açtığı için metni resim olarak göstermezdim.

Ancak, bir metni resim olarak görüntülemek istiyorsanız, png veya gif resimleri jpeg sıkıştırması nedeniyle jpg görüntülerinden daha iyi sonuç verir. Görüntünüzü sıkıştırmasanız bile, Opera mobile veya bir internet 'hızlandırıcı' gibi bir tarayıcı olabilir.

— jeroen
kaynak

Her zaman PNG'yi kullan, JPEG'den uzun zaman önce çıktı: P

— Jeff

1

Daha iyi çözünürlük için metni şeffaf bir PNG dosyası olarak yapardım. Başka bir alternatif, hem stil hem de SEO için sIFR'yi kullanmaktır . sIFR temel olarak yazı tipini Flash olarak gömüyor, ancak% 100 arama motoru dostu. Örneğin 3d-photomontage.com adresindeki bazı örneklere bakın .

— Tony Tan
kaynak

1

Şunu belirtmeliyim ki, tasarımınızda görüntü metni kullanmaya kesinlikle gerek yok. Gövde kopyası için web dışı yazı tipleri kullanmaktan kaçının. -Tasarımda harika göründüklerini biliyorum, ancak HTML'de değerinden daha fazla sorun yaşıyorsunuz -

Metninizde bulanıklık istemiyorsanız PS'deki kenar yumuşatma seçeneklerinden 'Hiçbiri'ni seçin. HTML sürümü, işletim sistemine veya tarayıcıya bağlı olarak metni her zaman farklı şekilde oluşturacaktır, böylece yapabileceğiniz çok şey yoktur.

Buna da bir göz atın, PS'niz yerine HTML'nizdeki metin oluşturma sorunlarını çözmenize daha fazla yardımcı olacaktır.

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

Her zaman 'Crisp' anti-aliased seçeneği seçili olarak tasarlıyorum ve HTML'deki metnin yine de farklı görüneceğinin farkındayım!

— Şahbaş Has
kaynak