Fontcreator как пользоваться
Перейти к содержимому

Fontcreator как пользоваться

  • автор:

Как я делаю шрифт (обещанный рассказ с картинками 🙂

Рассказываю… Но сразу скажу, возможно что-то делаю не так и может быть более опытные создатели шрифтов укажут на мои ошибки, буду рада) К теме создания буковок подошла прям совсем недавно, поэтому пользователь еще не опытный) но тема очень интересна для меня!

С удовольствием делюсь своим пока небогатым опытом в данной области!

Покажу на примере нового шрифта. На Шаттере буквы уже висят (продаж пока не было). Но там просто векторный алфавит. А пока готовлю набор для КМ. Там будет три шрифта и вот один из них.

1. Ну первое, конечно, рисую сами буковки. Рисую я в Кореле (лирическое отступление — люблю Корел очень, работать с вектором там одно удовольствие, и есть в нем несколько незаменимых, на мой взгляд, инструментов, аналоги которых в Иллюстраторе для меня неудобны. Но после Корела всегда “переправляю” вектор в Иллюстратор, проверяю пути и сохраняю в епс — ушла далеко))). Пример отрисовки букв и некоторых символов:

2. Когда все буквы, цифры и символы нарисованы, нужно каждый из них, отдельным файлом сохранить в png:

3. Далее нужна программа для преобразования нарисованных буковок в полноценный шрифт, который можно будет потом установить и пользоваться им в любой программе (волшебство какое-то �� �� �� ��) Я использую Font Creator. Запускаем программу, создаем Новый проект, даем название шрифту:

4. Открывается поле с ячейками для символов. Двойным щелчком заходим “внутрь” ячейки для редактирования. Появляется новое окно, в которое вставляем сохраненные png-буквы. Правим размер в соответствии с базовыми линиями и закрываем окошко. Можно и форму подредактировать, если нужно, да и вообще сразу здесь букву нарисовать! (Но я Корел не предам, буду в нем все отрисовывать)))

И так с каждой буквой, цифрой и символами.

После закрытия каждого окна редактирования, поле постепенно заполняется)

В результате вот такая картина:

5. Остается самая малость: экспортировать шрифт

6. Установить шрифт на своем компьютере и радоваться, так, как будто произошло волшебство �� �� ��

Все вроде бы) Если что, спросите) Надеюсь, пригодится! Спасибо за внимание)

FontCreator – Tutorials

Designing fonts can be challenging, but FontCreator has many features that allow you to make awesome fonts. These tutorials will explain both basic and advanced topics and help you make fonts quickly and easily.

There are a couple of things you need to know in order to make a variable font. This tutorial shows how to create a variable font based on existing non-variable fonts.

After importing an image you might come to the conclusion your glyph either lacks quality (e.g. not enough points) or has too much detail (e.g. contains too many points). In this tutorial you’ll find some recommendations that will lead to better import results.

Sometimes regular pair positioning won’t do. Sure it fixes spacing between two letters, but what if it fails for a specific combination of 3 characters, like in L’Amour? Contextual kerning comes to the rescue!

Everything you ever wanted to know about the internals of OpenType layout features is revealed by the interactive proofing feature as available in FontCreator. Only focus on those OpenType features relevant for the specific layout problem you need to address.

FontCreator comes with advanced tools required for the development of Arabic fonts, covering Arabic, Farsi, Malay, Sindhi, Uighur, and Urdu. This tutorial explains several advanced topics required to make professional Arabic fonts.

There are two scalable color font extensions that can bring color to your OpenType fonts. This tutorial provides information about both COLR and SVG color support.

This tutorial explains how to add gems like swashes, ligatures, and stylistic sets to your fonts.

This tutorial explains why glyph names are not what they used to be, but they are as important, only friendlier and smarter.

One of the most important tasks of font design is providing balanced spacing between glyphs. It is tedious and can become boring, but not with optical metrics!

While designing your font, you also want to test it for consistency, verify correct kerning pairs, and at some point, check the OpenType layout features. Here is a short tutorial about how to detect and fix incorrect positioning of diacritics.

A list of several video tutorials made by FontCreator users. Ranging from very simple tutorials to create your first font to advanced tasks like editing OpenType layout features and adding kerning to your font.

This tutorial explains how you and other font designers can use FontCreator to add support for Latin diacritical marks (accents) in your fonts.

FontCreator comes with 70 powerful scripts. There are scripts that allow you to change a font into an italic or bold version. Other scripts extend a font’s range by adding characters for Greek Extended, Eastern Europe, Vietnamese, Ligatures, Small Capitals, and more.

Several OpenType font settings relate to vertical font line spacing. This tutorial explains how to set compatible vertical metrics.

This tutorial explains how to make fonts work like a family that goes beyond regular, italic, bold, and bold italic.

If your fonts covers Turkish language support and also contains OpenType features, be sure to add localized forms for Turkish i.

The Romanian language uses S/s and T/t with a commaaccent. Due to legacy some text and/or fonts incorrectly use S/s and T/t cedilla.

In Catalan there are words which contain two Ls that each belong to a separate syllable, for example col·legi. In that case a “punt volat” (flying point) is used between two Ls.

Our software is made to run on Windows, but there are ways to use it on a Mac. This tutorial shows several options that allow you to use our font editor on a Mac.

Numerous websites explain what fonts are best to use nowadays, but some provide inaccurate information which makes it even more confusing. Here we explain what really matters.

This tutorial is part of the user manual and is probably the quickest way to introduce yourself to FontCreator. It shows how to make a font based on your handwriting. It also shows how easy it is to test and install fonts with FontCreator.

Как создать собственный рукописный шрифт

В интернете в свободном доступе имеются сотни самых разных шрифтов, в том числе экзотических и рукописных, но даже такое их обилие окажется совершенно бесполезным, если вам нужен шрифт, имитирующий ваш собственный почерк. Причины, по которым может понадобиться такая имитация, могут быть различны, но дело не столько в причинах, а в том, как её реализовать.

Оказывается, что очень просто. Для этого понадобиться программа High-Logic FontCreator и немного усидчивости и терпения.

Перед тем как перейти к описанию процесса, позвольте сказать пару слов о самой FontCreator. Предназначается эта программа для создания и редактирования шрифтов. С её помощью вы можете обновлять существующие и добавлять новые символы, исправлять их разметку, просматривать и устанавливать шрифты, исправлять некорректно отображаемые шрифты, а также преобразовывать изображения в текст.

Некоторые полезные сведения

Итак, устанавливаем и запускаем программу. Далее в главном меню выбираем File -> Open -> Font File и открываем любой кириллический шрифт, заранее скопированный в удобную вам папку. FontCreator проанализирует и выведет его содержимое во внутреннем окне, каждая ячейка которого будет содержать определённый символ.

FontCreator

Если по такой ячейке кликнуть два раза, программа откроет символ в небольшом окошке, имеющем разметку в виде сетки с направляющими.

FontCreator

Захватывая мышкой маркеры, можно изменять размер шрифта, его высоты и ширину, угол наклона, а также форму самих контуров.

FontCreator

Что касается направляющих. В FontCreator их семь: WinDescent, BaseLine, x-Height, CapHeight, WinAscent и ещё две вертикальных без имени.

BaseLine — опорная линия привязки, на которой «стоит» шрифт.
CapHeight — определяет высоту заглавных букв.
X-Height — определяет высоту строчных букв. Исключение составляют строчные буквы рукописных шрифтов, имеющие вверху «хвостик» . Высота таких символов определяется линией CapHeight.
• Линии WinDescent и WinAscent служат для ограничения символов, имеющих дополнительные элементы, например, чёрточку в «И» кратком или хвостик в «Щ» или «р».
• Безымянные вертикальные линии определяют ширину символа. Для каждого символа она своя.

Мы можем об этом даже не подозревать, но все эти линии учитываются текстовыми редакторами, благодаря чему буквы в тексте не наслаиваются друг на друга, не располагаются одна выше другой, а стоят ровно, как вымуштрованные солдаты на параде.

Создание собственного рукописного шрифта

Возьмите обычный лист белой бумаги формата А4 и напишите на нём в ряд все буквы (строчные и заглавные), а также все символы, которые вы предполагаете использовать при печати. Писать лучше всего чёрной гелевой ручкой, чтобы символы на листе были чёткими и хорошо выделялись. Далее сканируем лист в изображение формата JPEG или PNG. Если у вас есть устройство с поддержкой рукописного ввода стилусом, используйте его.

Далее открываем какой-нибудь кириллический шрифт в FontCreator, а полученное изображение — в любом графическом редакторе с поддержкой выделения. Для этого вполне сгодится Paint.

Paint

Выделяем символ на изображении и копируем участок в буфер обмена. Далее идём в FontCreator, находим тот же символ в таблице ячеек, двойным кликом открываем его в редакторе, выделяем и жмём кнопку Dеlete , а на его место вставляем наш выделенный участок изображения (в меню Edit -> Paste) .

FontCreator

Программа распознает картинку и преобразует её в доступный для редактирования контур. Теперь осталось выполнить масштабирование контура таким образом, чтобы его верхушка совпала с линией x-Height, если это строчная буква и с CapHeight, если это буква заглавная. Привязка к линии BaseLine производится автоматически. «Хвостики» букв «р», «у», «в», «б» привязываем к WinDescent или WinAscent соответственно.

FontCreator

Чтобы не получилось никаких накладок и созданный вами рукописный шрифт выглядел естественно, правую вертикальную направляющую перетаскиваем в крайнюю правую точку масштабированного символа.

FontCreator

Точно таким же образом заменяем все нужные вам символы. Работа может показаться вам долгой и утомительной, но результат стоит приложенных усилий. После того как все символы будут заменены, экспортируем проект в нужный формат шрифта и производим его установку в систему.

FontCreator

Использованная в примере программа High-Logic FontCreator является лучшим инструментом для создания и редактирования шрифтов. К сожалению, она платная и при работе в пробном режиме не позволяет экспортировать проекты в готовые для установки форматы шрифтов. Но кто ищет, тот всегда находит. Полагаем, найти в интернете пусть и не самую свежую, но вполне рабочую версию для вас не составит особого труда.

1. Overview¶

The project started as a response to the lack of bitmap font generators that worked on a mac & linux platform. The trusted old BMFont generator made by Angelcode was an inspiration but since it was too heavily relying on windows code, it was not an option.

Also, at the same time, the project was expected to be an experimental & learning experience in image processing, numpy, fonts and glyphs. The goal was to make a robust and performant platform independent solution for making fonts, ease enough to be used by non artists as well as professional artists.

Although the need for bitmap fonts have lessened over the years, it was still a fun experiment.

1.2. Layers & Effects¶

One of the goals was to mimic the workflow of an artist making a bitmap font in photoshop, with layers, blends and effects.

The layers are stacked upon each other and they support both blending and opacity. Each layer have a color function that produces pixels given the a gray scale glyph image as input. Each layer can have zero or more effects applied to it.

The effects can also be applied as post effects that are applied after all layers are combined.

Each blend function is a good representation of how Photoshop blends it’s layers. Some good reads:

1.3. Performance¶

Another goal was to make the tool as fast as possible with the target of generating a normal bitmap font with several layers in less than a second. To reach this goal, the tool has been profiled using cProfile and gprof2dot to find the hot spots.

Some functionality was also hard to find a nice pythonic way to implement, so the tool uses C++ for a few processing functions such as the bin packing algorithms and the distance field calculations.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *