Search the Community

Небольшое предисловие: В компании, где я работаю, строго запрещено иметь нелицензионный софт, поэтому иногда приходится извращаться. Если вы ярый сторонник торрентов, то можете смело проходить мимо, ибо для вас всё сильно проще. А остальным я предлагаю решение, которое я гуглил месяцами, но все равно не нашел ничего похожего. Наткнулся я на него совершенно случайно. Итак погнали... Задача: сгенерировать иконочный шрифт из макета, который нам отдали в 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 и генерим шрифт Всем спасибо за внимание! Предложения по улучшению моего алгоритма действий приветствуются. На возникшие вопросы обязательно отвечу.