Які міркування виникають при розробці піксельних шрифтів?


14

Я розробляю піксельні шрифти для однієї простори для гри, і поки що мені вдалося працювати лише з надзвичайно маленькими розмірами (найбільший, яким я керував, є 5x9), тому що з ними найпростіше спробувати помилитися. Часто результати, які я придумую для розмірів навіть у 7x13, є блокадними і непривабливими.

Я проаналізував деякі інші піксельні шрифти, і більшість графічно привабливих мають багато альтернативних міркувань, які я ніколи б не думав робити, наприклад зробити цілі розділи лише діагонально пов'язаними.

Чи є спеціальні розміри блоків, які є "оптимальними" для розробки піксельних шрифтів? Чи є якісь особливі місця розташування пікселів, про які я, можливо, повинен мати на увазі? Тому що іноді, коли я малюю лінію, довжиною всього 11 пікселів (або змушує речі перетинатися з такими невеликими розмірами), це в кінцевому підсумку виглядає як щось інше колись зменшене.

Відповіді:


11

Піксельні шрифти не дуже відрізняються від шрифтів крихітних друку, коли ви переходите до нього *. Великим винятком є ​​те, що ви знаєте, що середовище буде робити з піксельними шрифтами - дуже велика перевага.

Насправді не існує ідеальної сітки пікселів. Очевидно, що більша сітка дає вам більше місця для роботи. Найменші типи, з якими я успішно працював, - це конструкції 7 пікселів. Конструктори MiniFonts Джо Джо Гілзпі допоможуть вам зрозуміти дизайн на межі розбірливості. Ще одне питання тут стосується цих мікроконструкцій і може дати вам додаткову інформацію.

З чого почати

Кожна проблема дизайну починається з обмеження.З хорошим шрифтом це [зазвичай] призначене використання. Де потрібно вмістити ваш піксельний шрифт? Чи виграє ваша гра від легко читається тексту чи текст повинен залишатися поза дорогою і бути доступним для "розшифровки" лише в разі потреби?

Вам потрібно буде уточнити, хочете ви, чи ні, ви хочете мати невелику букву. Весь верхній шрифт може розміщуватися в меншій сітці через відносно прості форми та відсутність розширювачів (нижче базової лінії та вище висоти кришки). Але малі регістри також можуть бути зовсім маленькими: Minx Gillespie забезпечує чудову орієнтир для того, що я вважаю найменшим розумним малим алфавітом.

Minx приблизно такий же маленький, як і нижній регістр

Деталі

Ви помітите щось навіть у найкращих піксельних шрифтах: вони виглядають жахливо, коли ви наближаєтесь і намагаєтесь розібратися у них. Вони покликані «сприйматись», тобто прогалини в дизайні заповнюються мозку. Тож два квадрати, вирівняні до 45 °, стають діагональною лінією. Іноді отвір у сітці - це «тонка» лінія між двома товстими штрихами.

Дизайн впритул здалеку : це завдання дизайнера шрифтів пікселів. Іншими словами, ви створюєте та змінюєте свої фігури на смішно близьких відстанях, при цьому, враховуючи, як вона буде виглядати, якщо переглядати її в нормальному розмірі.

Комп'ютер - наш друг у цій заплутаній ситуації: просто тримайте друге вікно відкритим із 100% переглядом, щоб ви могли бачити, як виглядає ваш дизайн насправді . Наявність другого монітора навколо цього "перегляду реальності" робить речі набагато зручнішими.

Розміщення малих літер

Оскільки ви згадали про необхідність в регістрі 6 x 12 ...

Ось короткий приклад, який я зібрав разом, щоб проілюструвати конкретні міркування з цією вимогою.

Пробачте, це груба ілюстрація

Для початку я відрізав піксель від вашого зросту. Працюючи в таких невеликих розмірах, ви помітите, що розбірливість виграє від ширшого корпусу персонажів. Ковпачки повинні бути лише трохи меншими за малі. Погляньте на 9px Verdana, щоб побачити, як широке тіло може принести користь розбірливості.

Персонажі з малих літер з видатними східцями часто читають краще, якщо вони настільки трохи простягнуться на висоту шапки (як, наприклад, b у моєму прикладі). У моєму прикладі все ще вдається зупинитися на 11 пікселях у висоту. Цьому сприяє той факт, що на розбірливість менше впливають довгі оманники: Лише пара пікселів зробить там.

Навіть на цій обмежувальній сітці ви можете побачити, які приємні штрихи стилю ви можете додати, не втрачаючи при цьому чіткості.

Збільшений, ви можете бачити, як виходять дивні речі

З висотою x та корпусом, виділеним для довідки:

введіть тут опис зображення

При збільшенні розміру Mілюструє помітний розгляд. У сітці з парним числом у вас немає жодної середньої точки для пікселя. Це не обов'язково погано, вам просто доведеться приймати деякі рішення, які здаються дивними при закритті. Друге M, наприклад, виглядає досить незручно при збільшенні, але насправді покращує розмір екрана. Ці види мається на увазі ліній є критичною складовою більшості піксельних шрифтів.

Звичайно, вам також доведеться враховувати додатковий простір, необхідний для проміжку літер. У вас, звичайно, не так багато місця для гри, але це важлива частина розбірливості.

Подивіться на майстрів

Як і в будь-якій художній формі, ви дізнаєтесь найбільше, намагаючись робити те, що роблять майстри. Наведені вище приклади дадуть вам багато інформації.

Класичний тематичний виклад піксельної майстерності - це Underbody's Unibody 8 . Новий вертикальний "курсив" досягає ефекту, використовуючи 45 ° вирівнювання, щоб мати на увазі кут курсивного шрифту без шкоди для всього шрифту в процесі.

Емігре був ще одним із піонерів разом із Сьюзан Каре на ранньому Mac OS.

* Бічна примітка:
Retina - це фантастичний приклад того, як шрифт для друку пояснює несподівані невеликі розміри, як це я вважаю, що це попередник Bell Centennial .

Сітківка H & FJ


Я справді хочу нижчу справу. Я хочу, щоб шрифт 6x12 був корисним у, скажімо, консолі.
Джо Z.

Але так, це дуже хороша відповідь, з великою кількістю ресурсів я можу роздивитись далі. Дякую.
Джо Z.

1
дуже незначне доповнення: "вгору і далеко" легко досягти у Photoshop, створивши нове вікно (меню вікна> розташувати> нове вікно для docname-1) і залишити одне з них зі 100% -вим збільшенням в бік як "копія попереднього перегляду"
horatio

1
Не хвилюйтесь, ви розумієте. Я навіть не думаю, що вам знадобиться зайвий зріст. Я б просто додав додатковий піксель на ширину і залишив висоту між 10 і 12. Пограйте з кількома символами і подивіться, де ви опинитесь.
цивільний одяг

1
До речі, стандартним тестовим словом, на яке припадають основні форми римського алфавіту, є гамбургети . Багато дизайнерів типів почнуть з H, nі oщоб відчути суттєві характеристики.
цивільному одязі
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.