By
Great Rash
Небольшое предисловие:
В компании, где я работаю, строго запрещено иметь нелицензионный софт, поэтому иногда приходится извращаться. Если вы ярый сторонник торрентов, то можете смело проходить мимо, ибо для вас всё сильно проще. А остальным я предлагаю решение, которое я гуглил месяцами, но все равно не нашел ничего похожего. Наткнулся я на него совершенно случайно. Итак погнали...
Задача: сгенерировать иконочный шрифт из макета, который нам отдали в PSD.
Что нам понадобится:
1) Photoshop (думаю версия не имеет значения, например у меня CS5)
2) Inkscape (опенсорсный векторный редактор)
3) Любой текстовый редактор (у меня Sublime Text 2)
4) https://cloudconvert.org - сайт, который умеет конвертировать файлы в SVG
5) https://icomoon.io - генератор иконочных шрифтов
Шаг первый:
в макете находим нужную иконку, она должна быть векторная (т.е. это должен быть Shape), если иконка растровая, то её нужно конвертировать в вектор
после этого нужно обрезать макет по размеру иконки (Crop Tool)
Шаг второй:
нужно убрать все слои, кроме необходимого нам (того, что с иконкой), для этого создаём новый файл (File -> New) и перетаскиваем в него нужный нам слой из макета, после этого сохраняем файл (File -> Save As), в появившемся меню выбираем формат .eps (Encapsulated PostScript)
Шаг третий:
лезем на сайт CloudConvert выбираем наш .eps-файл и конвертируем его в .svg, далее нужно очистить его от всего говна, которое образовалось там после конвертации
Шаг четвертый:
открываем получившийся .svg в любимом текстовом редакторе, ищем там тег <path />, кроме этого тега нам больше ничего не понадобится, всё остальное можно смело стирать, из самого тега <path /> удаляем все атрибуты, кроме d="" (там собственно путь) и стиля clip-rule (он отвечает за "дырки" внутри иконки).
Шаг пятый:
ручками делаем новый чистенький SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" version="1.1"> <path style="clip-rule: evenodd;" d="<!-- тут собственно путь -->" /></svg>Шаг шестой (возможно необязательный):
у меня после конвертации иконка получилась кверху ногами, да ещё и 15px превратились в 150px (т.е. размер увеличился в 10 раз), хз почему так. но чтобы это пофиксить нам понадобится Inkscape, создаём там файл нужного размера (например 32х32 - я обычно этот размер для шрифтов юзаю), загружаем туда наш .svg и отражаем его по вертикали и подгоняем под нужный размер, затем сохраняем как SVG (Inkscape опять надобавляет в код своего говна типа метаданных и прочей лабуды, по желанию вычищаем всё это оттуда)
Шаг седьмой:
лезем на сайт IcoMoon и генерим шрифт
Всем спасибо за внимание! Предложения по улучшению моего алгоритма действий приветствуются. На возникшие вопросы обязательно отвечу.
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.