Jump to content

Recommended Posts

Небольшое предисловие:

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

Задача: сгенерировать иконочный шрифт из макета, который нам отдали в PSD.
Что нам понадобится:

1) Photoshop (думаю версия не имеет значения, например у меня CS5)
2) Inkscape (опенсорсный векторный редактор)
3) Любой текстовый редактор (у меня Sublime Text 2)
4) https://cloudconvert.org - сайт, который умеет конвертировать файлы в SVG
5) https://icomoon.io - генератор иконочных шрифтов

Шаг первый:
в макете находим нужную иконку, она должна быть векторная (т.е. это должен быть Shape), если иконка растровая, то её нужно конвертировать в вектор
 

чтобы конвертировать иконку в вектор кликните на слое с иконкой, зажав CTRL, иконка при этом выделится по контуру, затем откройте вкладку Paths (Window -> Paths) и внизу нажмите на иконку "Make work path from selection"

 


после этого нужно обрезать макет по размеру иконки (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 и генерим шрифт

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

  • Like 4
Link to comment
Share on other sites

Хм... У меня из фотошопа векторные объекты сразу в Илюстраторе открываются. Возможно и Inkscape должно.

 

А svg очистить можно еще с помощью онлайн инструментов https://github.com/svg/svgo-gui

Link to comment
Share on other sites

Хм... У меня из фотошопа векторные объекты сразу в Илюстраторе открываются. Возможно и Inkscape должно.

В Inkscape psd открываются с ошибками (пропадают детали), файлы .ai он у меня открывать отказывается, по крайней мере экспортированные из фотошопа. Иллюстратора у меня нет и не будет потому что см. предисловие.

Link to comment
Share on other sites

  • 4 weeks later...

Такс, короче мои эксперименты продолжаются...

Последняя версия Inkscape умеет открывать .psd. В связи с этим новый туториал (в разы проще чем я описывал до этого):

1) Допустим у вас есть отрисованая иконка. Важно чтобы она была векторная (shape, path).
2) Создаём новый файл в фотошопе, я всегда юзаю размер 32х32.
3) Копируем в него слой с иконкой. Наша цель в том, чтобы .psd состоял из одного слоя, в котором будет только шейп (вектор).

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

4) Выбираем инструмент Path Selection Tool (хоткей A). Выделяем все пути из которых состоит наша иконка.
5) Далее ищем волшебную кнопку "Combine" - она расположена в верхнем меню (это там где File Edit Image и т.п. кнопки, под ними)
6) Тыкаем в неё, она применит булевы операции ко всем выделенным путям и объединит их или вычтет один путь из другого.
7) Если после этого иконка поломалась, то попробуйте вернуть всё назад (CTRL+Z) и комбинировать пути руками по очереди. Т.е. не выделяйте сразу всё, а выбирайте пути по парам.

Совсем недавно я выклянчил у начальства Photoshop CC, и там не оказалось кнопки "Combine", начал гуглить и выяснил, что теперь она находится в меню Path Operations (искать его надо там же вверху), расположена она в выпадающем меню и называется теперь Merge Shape Components. Погнали дальше:

8) Теперь открываем получившийся .psd в Inkscape и экспортируем его в .svg.

Усё, наслаждаемся векторной иконкой.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Super_Saimon
      Добрый день!  Подскажите источник, от куда можно импортнуть в свой css файл шрифт DS-DIgital(шрифт как на старых циферблатах, нужен для отображения циферблата на таймере). Не могу  скачать к себе на комп - балуюсь в рабочее время на рабочем компе. И на работе запрет на скачивание без ведома админов чего угодно.
    • By SnowSilver
      Всем привет! Подскажите с подключением сторонних шрифтов...
      1. Предположим мне надо подключит какой то шрифт с разными начертаниями, могу ли я использовать одно имя шрифта в font-family, будет ли в таком случае использоваться правильное - подключенное начертание в зависимости от font-weight ?
      2. Проверить, есть ли шрифт в системе(чтоб его не грузить лишний раз), можно с помощью local, такого перечисления думаю достаточно, чтоб наверника проверить:
      local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin') ?
      Я подключаю так(для каждого начертания через тире указано начертание):
      @font-face { font-family: "Roboto-Thin"; src: local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin'), '/fonts/Roboto-Thin.woff2' format('woff2'), '/fonts/Roboto-Thin.woff' format('woff'); font-weight: 100; font-style: normal; } @font-face { font-family: "Roboto-Light"; src: local('RobotoLight'), local('Roboto Light'), local('Roboto-Light'), '/fonts/Roboto-Light.woff2' format('woff2'), '/fonts/Roboto-Light.woff' format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: "Roboto-Regular"; src: local('RobotoRegular'), local('Roboto Regular'), local('Roboto-Regular'), '/fonts/Roboto-Regular.woff2' format('woff2'), '/fonts/Roboto-Regular.woff' format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: "Roboto-Black"; src: local('RobotoBlack'), local('Roboto Black'), local('Roboto-Black'), '/fonts/Roboto-Black.woff2' format('woff2'), '/fonts/Roboto-Black.woff' format('woff'); font-weight: 900; font-style: normal; }  
    • By uppercase_css
      Здравствуйте.
      Подскажите, пожалуйста аналог Times New Roman MT Extra Bold , а то он только с латиницей работает.
      Спасибо.
    • By karakymg
      Доброго времени суток, есть блок ширина которого указана в процентах, внутри него есть такая конструкция
      <div class="block"> <a href="#"><i class="vk"></i></a> <a href="#"><i class="ok"></i></a> <a href="#"><i class="gp"></i></a> <a href="#"><i class="fb"></i></a> <a href="#"><i class="in"></i></a> <a href="#" class="fullwidth">Link</a> </div> элемент с классом fullwidth всегда по ширине в 100%
      нужно сделать что бы вс элементы без этого класса были inline-block (аля only vertical) и квадратные при условии что их может быть больше или меньше чем сейчас.
    • By Shiza
      Иногда при подключении шрифтов возникает следующая ситуация:



      Текст просто текст. Без оберток. Проблема возникает в хроме и почти всегда если шрифт используется в срытых (разворачиваемых) блоках или слайдерах (Owl Carousel), то есть на блоках который сначала не отображаются, а появляются позже.
      От чего это может происходить, и что с этим можно сделать?
      P.S. Создать JSFiddle с этой проблемой не удалось.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy