Векторная графика, шрифтовые иконки - что делать если их нет а они позарез нужны

MM Web Studio Group

Векторная графика, шрифтовые иконки - что делать если их нет а они позарез нужны
Здравствуйте уважаемые посетители ресурса. Однажды работал над большим проектом. Среди всех заданий поступило одно не совсем стандартное задание — создать онлайн редактор xls/xlsx документов. По сути своей онлайн версия Excel. Никакой графики дополнительной, ничего дополнительного к заданию не было.
Как известно многим что кроме всего прочего на подобных ресурсах куча иконочных кнопок начиная от Жирности текста и заканчивая кнопкой создания нового листа (+). Но если с плюсом проблем особых нет, то вот с иконками некоторыми такими как объединить ячейки, диаграмма и прочее — появляются трудности ведь в веб не так часто используют построение диаграмм, а за кнопки с иконкой диаграммы лучше вообще промолчать laugh Найти и залить png файлы в качестве иконок, но вот не задача: оказывается что если и найдёшь сстоль «экзотические» иконки с открытой лицензией, то они не всегда нужного оттенка или вообще цветные что не особо подходит. Дальше взор упал на svg и иконочные шрифты. Но так всех нужных иконок в svg или иконочных шрифтах не нашёл. Соответственно дальше решил всё сделать по своему — взять растр и векторизировать его чтобы на выходе получить svg а лучше даже иконочный шрифт. Начал перерывать интернет в поисках хоть какого то руководства или онлайн сервиса соответственно это мало что дало кроме пожалуй бесплатного векторного редактора Inkckape и небольшого намёка на то что туда можно импортировать растр. Ну что попробуем. Дальше я не буду рассказывать как я всё-таки смог сделать то что хотел. Лучше я опишу все шаги чтобы подобное повторить.


И так, нам понадобится:
  • Редактор векторной графики Inksсape — для win 8 и win10 его можно найти в appstore а для всего остального по ссылке.
  • Нужные иконки в png без разницы чернобелые или цветные.
  • IcoMoon — если нам надо в конечном счёте иконочный шрифт а не svg
  • Прямые руки(причём последний пункт пожалуй основной)
Приступим!

Для начала нам нужно выкачать подходящие нам иконки в png. Если с готовой векторной графикой или икончным шрифтом бывают проблемы, то png можно найти почти на любой вкус и любую тематику. Без разницы цветными будут png или чернобелыми. Нам и то и то подойдёт. Тут гугл в помощь. У меня как правило получилось через гугл найти иконки на ресурсах на подобие icon8, fatcow и подобных. Выкачали? Молодцы!

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

Открываем Inksсape. Дальше нам нужно загрузить нужную png иконку в редактор. Для этого жмём файл — Импортировать. Сделали? Тогда продолжим.

Если мы видем в редакторе что качество иконки ужасное слишком видны пиксели и прочее исправляем это: жмём Фильтры — Pixel Tools — Pixellize.

Если иконка у нас цветная, то стоит её для начала сделать чёрнобелой, а точнее даже чёрной а потом преобразовывать в svg.Для этого кликаем по изображению чтобы выбрать и жмём Фильтры — Цвет — Fade to Black or White. В открывшемся окне выставляем уровни в 0.00, а Fade to в чёрный. Дальше применить и закрыть. Дальше нам надо сохранить эту картинку в виде png. Ведь нам надо не изображение с маской, а чёрная иконка. Для этого жмём Файл — Экспортировать в png. В открывшемся окне выставляем вкладку рисунок или выделенное если мы шелчём выделили изображение. Дальше жмём Экспортировать как и там указываем путь и имя нашей чернобелой иконки, дальше жмём кнопку Экспорт. Проверяем по тому пути что указали выше завершился ли успешно экспорт и если всё ок, удаляем наше изображение с листа или создаём новый лист через Файл — Создать или по нажатию Ctrl+N.В пустой лист мы импортируем нашу чернобелую иконку Файл — Импортировать. И продолжаем работать.

Дальше жмём правой кнопкой миши на изображение и жмём на Векторизовать растр — ок.Дальше во вкладке Заливка мы жмём на крестик и знак вопроса. Этим мы выбираем убрать заливку а потом выбираем цвет не определён. То же самое повторяем и на вкладке Обводка. Дальше Правка -Resize Page to Selection или Ctrl+Shift+R чтобы сделать размер изображения таким же как иконка.

Всё готово, можно сохранять в Svg.

Если же нам нужна иконка в иконочном шрифте идём на сайт IcoMoon

Жмём Import Icons и импортируем только что созданую svg. Она появится на странице, дальше выбираем её, жмём Generate Font, а потом там же Download. Распаковываем файлы шрифтов и стиля в нужное нам место, правим стили css по собственному усмотрению, смотрим в стилевом файле какие классы каждый символ имеет и вставляем теги i с нужными класами иконок.
Радуемся!!!

Надеюсь эта статья была полезна для Вас и Вы почерпнули из неё что-то новое и полезное. Спасибо за внимание!!!
0
11:41
RSS
Аноним
12:40
Красная статья!!!???
Аноним
12:44
Хорошая статья!!! Молодец Михаил!!!
Загрузка...