Photoshop'ta yazı tipi (kenar yumuşatma)

Web sitelerini tasarlamak için Photoshop kullanıyorum ve bir photoshop tasarımını canlı tarayıcı önizlemesi ile karşılaştırdığımda, yazı tipleri farklı bir şekilde işleniyor gibi görünüyor.

Temelde photoshop'ta seçtiğim herhangi bir kenar yumuşatma yöntemi, metin her zaman kalın metin izlenimi verir . Bu yüzden her zaman kenar yumuşatma özelliğini kapatmak zorunda kalıyorum (normal 12 piksel / 14 piksel metin için).

Photoshop'ta Windows'un cleartype ile kullandığı gibi yazı tipi oluşturmanın aynı türünü gerçekleştirebileceğim bir yöntem var mı?

Değilse, kenar yumuşatma kapalıyken Arial'dan daha iyi görünen yazı tipleri var mı?

ClearType metninin bu kadar net olmasının iki nedeni vardır.

1. alt piksel oluşturmayı kullanır . Photoshop'un bunu desteklediğini sanmıyorum.
2. çizgileri piksel ızgarasına sığdırmak için agresif ipucu kullanır

Metninizi Not Defteri'ne yazabilir, güzel bir kullanışlı araçla ekran görüntüsü verebilir ve Çarpma modu ile Photoshop'a yapıştırabilirsiniz (çünkü beyaz bir arka plan üzerinde siyah metindir). Ama bu uygun değil. Düzenleme: siyah dışında herhangi bir ön plan rengi ile yapmak neredeyse imkansız olabilir.

Bu adam manuel alt piksel oluşturma için bir yöntem açıkladı ve gözlerime göre, yazı tipi keskinliğini geliştirerek ClearType'a daha yakın hale getiriyor. Ancak yine de Photoshop'un ipucunu kullanıyor, bu yüzden ClearType kadar keskin değil.

Photoshop'ta gerçekten ClearType tarzı oluşturmaya ihtiyacınız var mı? Web tasarımınızda kullanmak üzere metin içeren grafikleri dışa aktarırsanız, bazı ekranlar (CRT, döndürülmüş telefon) için uygun olmadığı için alt piksel oluşturma içermemelidir. Ve metni dışa aktarmıyorsanız, yalnızca metne bakıyorsanız, Photoshop'un görüntüsü iyi görünür.

Photoshop bir web tasarım programı değildir. Tarayıcıda bir grafikte (jpg, gif vb.) Aynı görünen metni almak için her iki programda da aynı yazı tipini kullanmanız gerekir. Bazı yazı tipleri tüm tarayıcılar tarafından kullanılmaz.

Metninizin boyutuna bağlı olarak, iyi bir orta boy yazı tipi Tahoma, Helvetica, Trebuchet veya Georgia olabilir. Bazı iyi fikirler için bu web sitesine göz atın: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

Daha büyük yazı tipleri, kenar yumuşatma hakkında önemli olmaya başladığı yerdir.

Bir sayfadaki metinle birleştirilecek metni almaya çalışıyorsanız, hedeflerinize ulaşmak için CSS konumlandırmasını kullanmanızı öneririm. CSS, web sayfanızdaki görüntülerin üstüne metin yerleştirmenize olanak tanır ve sayfayı tam istediğiniz gibi oluşturmak için göreli ve mutlak konumlandırma kullanır. İşte bir örnek ve öğretici: http://css-tricks.com/text-blocks-over-image/

Ne yazık ki Photoshop herhangi bir alt piksel oluşturmayı desteklemiyor. Dreamweaver hariç, başka hiçbir Adobe yazılımı da yoktur . (Tam olarak sadece HTML'yi oluşturduğu ve ardından oluşturulacak işletim sisteminin metnini ilettiği için tam olarak Dreamweaver'ın teknolojisi değildir.)

Önerilen iş akışı, tasarımınızı Photoshop'ta oluşturup dilimlemeniz ve ardından Dreamweaver'da açmanız olabilir. Tasarımın daha fazla düzeltmeye ihtiyacı varsa, dosyayı Photoshop'ta aynı anda açabilirsiniz, değişiklikleri yapın, kaydedin ve görünümü Dreamweaver'da yenileyin. Son, gerçek kopyayı Dreamweaver'a ekleyin. Photoshop'u Fireworks ile de değiştirebilirsiniz; hatta Fireworks'te tel kafes oluşturmaya başlayın → Photoshop'ta devam edin → Dreamweaver aracılığıyla yayınlayın. (Creative Suite sürümlerinin neden genellikle paket halinde satın alındığı anlaşılıyor, değil mi?)

Tasarım Dreamweaver'ın önizlemesinde tarayıcılardan daha farklı görünüyorsa, bu başka, talihsiz bir konudur (ve sadece tipografiden değil, bir bütün olarak renderden bahsediyorum). Photoshop'tan canlı demoya ne kadar erken yükseltebilirsiniz - Dreamweaver üzerinden olsun veya olmasın - daha iyi. Ben yapmak dileği Photoshop alt piksel oluşturma yetkilerine sahip olacak (ancak aynı zamanda umut azından CS6 tanıtılan olmayacak, ya da en azından umut azından ben o sırada zengin olacak)!

Sadece bir yan not: ClearType 10 veya daha fazla patentle korunmaktadır, bu yüzden tam olarak aynı renderleme mümkün değildir. Ayrıca OS X'in varsayılan olarak farklı render (Quartz) kullandığını ve linux dağılımlarındaki grafik arayüzleri kullandığını belirtmek gerekir.

HTML ve CSS'de tasarım. Bir PhotoShop maketine geri getirmeniz GEREKİRSE, ekran tarayıcıdan çıkarılır, sonra PhotoShop belgenize geri getirilir.

PhotoShop'ta ayar türü genel olarak bir acıdır.

Olası bir çözüm, "keskin" kenar yumuşatma yöntemini kullanmak ve metin katmanında 0 derinlikli bir iç parlaklık ayarlamak olabilir:

Bu örnek için beyaz renk,% 85 opaklık, "ekran" karışım modu, 0 jikle, 0 boyut kullandım. Bayan açık tip kadar iyi değil, ama daha az cesur görünüyor ...

(ilk satır = kenar yumuşatma yok, son satır = iç parlaklık olmadan keskin kenar yumuşatma)