Разрабатывая новый дизайн сайта или стилистический постер, часто применяют веб-шрифты с иконками. В обычный шрифт формата .ttf вставляют иконки, фигуры в виде контуров. Это очень удобно, ведь при масштабировании такие иконки подстраиваются под размер экрана и качество остаётся неизменным. Сегодня я расскажу как можно создать такой шрифт со своими иконками.
Всё что Вам потребуется это умение работать с каким-нибудь фото-редактором, например Adobe Photoshop, Illustrator и программа Fontographer 5, так что - поехали!
Я очень часто использую Adobe Photoshop (далее PS) совместно с Adobe Illustrator (далее Ai), многих функций, которые есть в одной программе, нет в другой и наоборот. Вы же можете использовать сразу Ai.
Создаем любую иконку, в виде фигуры если Вы работаете в PS или сразу из кривых в Ai. Мне захотелось создать иконку из нового фильма Mortal Kombat, который только снимается:
Скачать данную иконку Вы можете с моего Яндекс.Диска: https://yadi.sk/d/jZ-dcU14JSnTAA
Если Вы создали иконку в PS, то откройте её в Ai и выделите контур, нажав левой кнопкой мыши по иконке:
Теперь необходимо скопировать контур иконки, нажмите сочетание клавиш CTRL+C и откройте программу Fontographer 5. В программе Fontographer 5 создайте новый документ (см. скриншот):
Затем выберите любую свободную ячейку, выделите её и нажмите сочетание клавиш CTRL+V и Ваша иконка скопируется в новый шрифт (см. скриншоты):
Такие же действия Вы можете проделать со всеми своими иконками, чтобы в итоге у Вас получился шрифт с иконками. Далее Вам необходимо сгенерировать шрифт и сохранить его в любое удобное место, выберите File->Generate Font Files... произведите настройки под себя и нажмите кнопку Generate:
Проверить результат получившихся иконок Вы можете открыв сгенерированный файл .ttf или в программе FontLab:
Вот таким простым способом Вы можете создать свой веб-шрифт с иконками!
Спасибо за внимание!
Если остались вопросы пишите комментарии, ставьте лайки и подписывайтесь!
