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

Введение

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

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

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

Создание векторных иконок

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

Если же вы умеете сами отлично рисовать и можете с легкостью освоить какой-то векторный графический редактор, то можно воспользоваться, например, Corel Draw или же каким-то определенным онлайн-редактором. Таких редакторов огромное количество, достаточно лишь в поисковой системе набрать соответствующий запрос:

Онлайн редактор SVG
Онлайн редактор SVG

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

Каталог платных и бесплатных векторных иконок
Каталог платных и бесплатных векторных иконок

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

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

Создание иконочного шрифта

Для создания собственного иконочного шрифта мы воспользуемся онлайн-сервисом, которых существует также огромное количество, вы же выбираете для себя необходимый и удобный. Лично мне понравился сервис Glypther. Он удобный, имеет понятный интерфейс, даже для тех, кто не знает английского языка. Также вы можете использовать бесплатный набор иконок, предоставляемый самим сервисом.

Еще мне данный сервис понравился тем, что он не требует регистрации нового пользователя, чтобы начать с ним работать. Работать с данным сервисом также очень удобно и просто. Для начала необходимо произвести все необходимые настройки: задать имя шрифта, префикс для класса, если данный шрифт будет использоваться для веб-проектов. Для этого в верхнем левом углу нажимаем на значок «шестеренки» и появляется окно с настройками, в котором устанавливаем необходимые нам:

Настройки иконочного шрифта
Настройки иконочного шрифта

После того, как настройки все произведены, нажимаем на кнопку Save Settings.

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

Загрузка векторных иконок для шрифта
Загрузка векторных иконок для шрифта

Перетаскивать иконки в нужную ячейку можно и при помощи мыши (Drag&Drop). Также вы можете в ячейке откорректировать уже загруженную иконку: задать ей префикс, имя класса, увеличить или уменьшить в размере, повернуть в нужном направлении. Для этого необходимо просто произвести одинарный клик мыши по нужной ячейки и произвести все необходимо корректировки:

Настройки векторной иконки
Настройки векторной иконки

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

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

Сохранение иконочного шрифта
Сохранение иконочного шрифта

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

Заключение

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Была ли эта статья полезна?

Оставить комментарий

Пожалуйста, авторизуйтесь чтобы добавить комментарий.
  Подписаться  
Уведомление о