Piksel yazı tiplerini tasarlarken dikkat edilmesi gereken noktalar nelerdir?


14

Bir oyun için tek aralıklı piksel yazı tipleri tasarlıyorum ve şimdiye kadar sadece son derece küçük boyutlarla çalışabildim (yönettiğim en büyük 5x9) çünkü bunlar denemek ve hata yapmak için en kolay olanı. Çoğu zaman, 7x13 kadar küçük boyutlarda bile bulduğum sonuçların hepsi bloklu ve zevksizdir.

Diğer bazı piksel yazı tiplerini analiz ettim ve grafiksel olarak çekici olanların çoğu, tüm bölümleri sadece çapraz olarak bağlı hale getirmek gibi, asla düşünmeyeceğim birçok alternatif düşünceye sahip.

Piksel yazı tiplerini tasarlamak için "en uygun" özel blok boyutları var mı? Aklımda tutmam gereken özel piksel yerleşimleri var mı? Çünkü bazen yalnızca 11 piksel uzunluğunda bir çizgi çizdiğimde (veya bu küçük boyutlarda bir şeyleri kesiştiğinde), bir kez uzaklaştırıldığında başka bir şeye benziyor.

Yanıtlar:


11

Piksel fontlar, aşağı doğru indirdiğinizde küçük baskı fontlarından çok farklı değildir *. Tek büyük istisna, ortamın piksel yazı tipleriyle ne yapacağını bilmeniz - çok büyük bir avantaj.

Gerçekten de ideal bir piksel ızgarası yoktur. Açıkçası daha büyük bir ızgara size daha fazla çalışma alanı sağlar. Başarıyla çalıştığımı gördüğüm en küçük türler 7 piksel tasarımlardır. Joe Gillespie'nin MiniFonts tasarımları , okunabilirlik eşiğinde tasarım yapmayı anlamanıza yardımcı olacaktır. Burada başka bir soru bu mikro tasarımlarla ilgiliydi ve size daha fazla referans verebilir.

Nereden başlamalı

Her tasarım sorunu bir kısıtlama ile başlar. İyi bir yazı tipi ile [genellikle] amaçlanan kullanımdır. Piksel yazı tipinizin nereye sığması gerekir? Oyununuz kolayca okunabilen metinlerden yararlanabilir mi veya metnin yoldan çıkması mı gerekiyor ve yalnızca gerektiğinde "deşifre etmek" mi mümkün?

Küçük harf isteyip istemediğinizi açıklığa kavuşturmanız gerekir. Tümü büyük harfli yazı tipi, nispeten basit şekiller ve genişletici eksikliği nedeniyle (taban çizgisinin altında ve kapak yüksekliğinin üzerinde) daha küçük bir ızgaraya sığabilir. Ancak küçük harf de oldukça küçük olabilir: Gillespie'nin Minx'i , en küçük küçük harfli alfabeyi dikkate alacağım şey için mükemmel bir referans noktası sağlar.

Minx küçük harf kadar küçük

Ayrıntılar

En iyi piksel yazı tiplerinde bile bir şey fark edeceksiniz: Yaklaştığınızda ve anlamaya çalıştığınızda korkunç görünüyorlar. "Algılanmaları" amaçlanmıştır, yani tasarımdaki boşluklar beyin tarafından doldurulur. Böylece 45 ° 'ye hizalanmış iki kare çapraz bir çizgi haline gelir. Bazen ızgaradaki bir delik, iki kalın vuruş arasındaki "ince" çizgidir.

Uzaktan tasarlayın : Piksel yazı tipi tasarımcının zorluğu budur. Başka bir deyişle, normal boyutunda görüntülendiğinde neye benzeyeceğini düşünürken, gülünç derecede yakın mesafelerde şekillerinizi yaratır ve değiştirirsiniz.

Bu kafa karıştırıcı durumda bilgisayar arkadaşımızdır:% 100 görünümüyle ikinci bir pencereyi açık tutun, böylece tasarımınızın gerçekten nasıl göründüğünü görebilirsiniz . Bu "gerçeklik görünümü" için ikinci bir monitör olması, işleri çok daha kolay hale getirir.

Küçük harf yerleştirme

6 x 12'de küçük harf ihtiyacından bahsettiğiniz için ...

İşte bu gereksinimle ilgili belirli hususları göstermek için birlikte attığım hızlı bir örnek.

Affet beni, kaba bir örnek

Yeni başlayanlar için, yüksekliğinizden bir piksel dilimledim. Bu kadar küçük boyutlarda çalışırken, okunabilirliğin daha geniş bir karakter gövdesinden yararlandığını göreceksiniz. Büyük harflerin küçük harflerden çok az olması gerekir. Geniş bir gövdenin okunabilirliğe nasıl fayda sağlayabileceğini görmek için 9px Verdana'ya bakın.

Belirgin yükselişe sahip küçük harfler, kapak yüksekliğini (örneğimdeki gibi) biraz daha fazla uzatırlarsa daha iyi okunur b. Örneğim hala 11 piksel yüksekliğinde bir gövde üzerinde kalmayı başarıyor. Bu, okunabilirliğin uzun dekenderlerden daha az etkilenmesi gerçeğiyle desteklenir: Orada sadece birkaç piksel yapacak.

Bu kısıtlayıcı ızgarada bile, okunabilirliği tamamen bozmadan ne güzel küçük dokunuşlar ekleyebileceğinizi görebilirsiniz.

Büyümüş, şeylerin ne kadar garip olduğunu görebilirsiniz

Referans için x yüksekliği ve gövdesi vurgulanmış olarak:

resim açıklamasını buraya girin

Büyütülmüş boyutta, Mdikkate değer bir hususu göstermektedir. Çift sayı ızgarasıyla, bir pikselin inmesi için tek bir orta noktanız olmaz. Bu mutlaka kötü bir şey değil, sadece yakınken garip görünen bazı kararlar vermeniz gerekecek. İkincisi M, yakınlaştırıldığında oldukça garip görünüyor, ancak aslında ekran boyutunda bir gelişme. Bu tür zımni çizgiler, çoğu piksel yazı tipinin kritik bir bileşenidir.

Tabii ki, mektup aralığı için gereken ek alanı da dikkate almanız gerekir. Kesinlikle orada oynayacak çok yeriniz yok ama okunabilirliğin önemli bir parçası.

Üstatlara bak

Herhangi bir sanat formunda olduğu gibi, ustaların yaptıklarını yapmaya çalışarak en çok öğreneceksiniz. Yukarıda bağladığım örnekler size zengin bir bilgi sağlayacaktır.

Piksel yazı tipi mükemmelliğinde klasik bir vaka çalışması Underware's Unibody 8'dir . Yeni dik "italik", işlemdeki tüm yazı tipinden ödün vermeden italik bir yazı tipinin açısını ima etmek için 45 ° hizalama kullanarak etki eder.

Emigre , Mac OS'nin başında Susan Kare ile birlikte öncülerden biriydi .

* Yan not:
Retina , önceki model Bell Centennial olarak düşündüğüm gibi, bir baskı yazı tipinin beklenmedik küçük boyutlarda nasıl hesaplandığına dair harika bir örnektir .

H & FJ Retina


Aslında daha küçük bir dava istiyorum. 6x12 yazı tipinin bir konsolda kullanılabilmesini istiyorum.
Joe Z.

Ama evet, bu çok iyi bir cevap, daha fazla bakabileceğim birçok kaynak var. Teşekkür ederim.
Joe Z.

1
çok küçük bir eklenti: Yeni bir pencere (pencere menüsü> düzenle> docname-1 için yeni pencere) oluşturarak ve bunlardan birini% 100 yakınlaştırma boyutunda bir tarafa bırakarak Photoshop'ta "yakın ve uzak" kolayca elde edilebilir "önizleme kopyası"
horatio

1
Endişeye gerek yok, fikri anladınız. Ekstra yüksekliğe ihtiyacınız olacağını bile sanmıyorum. Genişliğe fazladan piksel eklerim ve yüksekliği 10 ile 12 arasında bırakırdım. Birkaç karakterle oynayın ve nerede olduğunuzu görün.
sivil polisler

1
Bu arada, Roma alfabesinin temel şekillerini açıklayan standart bir test kelimesi Hamburgefonts'tur . Birçok tip tasarımcıları ile başlayacak H, nve ogerekli özellikleri için bir fikir edinmesini.
sivil polisler
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.