Подготовка и экспорт SVG-иконок в Sketch | Фото 1
Эта статья подразумевает, что вы уже знакомы с основами дизайна иконок. Здесь мы рассмотрим, как готовить и экспортировать иконки для использования в вебе, iOS и Android. Мы будем использовать Sketch для организации, управления и экспорта иконок.

Также детально рассмотрим монохромные иконки, которые можно динамически окрашивать на всех платформах.

🎉 🎉 Sketch 42 🎉🎉

Я начал работу над этим постом перед релизом Sketch 42. Оказывается, в этой версии было внесено ряд существенных изменений. И эти изменения повлияли на мой рабочий процесс.

  1. При вставке из illustrator, графика гораздо лучше примыкает к пиксельной сетке.
  2. Изменение правила заливки теперь осуществляется гораздо проще (детальнее об этом ниже).

Начнем с Illustrator

Перед погружением в sketch я бы хотел начать с illustrator. Я пользуюсь им 15 лет, и некоторые привычки не так легко сломать. Я куда быстрее орудую ручкой в illustrator, чем в Sketch. Обычно дизайн иконок я создаю именно в illustrator и переношу их в Sketch.

Причины НЕ использовать только illustrator:

  1. Файлы Illustrator ограничены 100 артбордами. Если у вас большой набор иконок, вы не можете хранить их в одном файле.
  2. Экспорт партии файлов имеет свои ограничения.
  3. Если дизайн-команда пользуется Sketch, в любом случае вам понадобятся иконки в Sketch.

Приступим

Подготовка и экспорт SVG-иконок в Sketch | Фото 2

Я буду рисовать иконки размером 24×24. Мне нравится делать артборд размером 24×24 под каждую иконку.

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

Контурные кривые

Вы захотите конвертировать любые кривые в фигуры.

Подготовка и экспорт SVG-иконок в Sketch | Фото 3
Я создал кастомную горячую клавишу ⌥⌘O
Подготовка и экспорт SVG-иконок в Sketch | Фото 4

Объединение фигур

Объедините фигуры до их простейшей формы. Вы должны иметь возможность выделить всю иконку в один клик.

Подготовка и экспорт SVG-иконок в Sketch | Фото 5

💎 Перенос Sketch

Начнем с создания артборда 24×24 для иконки. И добавьте квадрат 24×24.

Подготовка и экспорт SVG-иконок в Sketch | Фото 6

Я люблю добавлять направляющие линии к символам. Они также послужат граничным блоком для символа.

Сгруппируем эту фигуру и назовем ее «Guides», а затем сгруппируем ее снова.

Подготовка и экспорт SVG-иконок в Sketch | Фото 7

Это создаст нужную структуру папок для символов.

Теперь было бы неплохо подумать о правилах названия для всех иконок и символов.

Вот пример правил наименования, которыми я пользовался в прошлом. Я выбрал более короткие версии имен для символов, чем имена экспортируемых файлов. Можно использовать прямой слеш для создания иерархии в экспорте и символах.

Подготовка и экспорт SVG-иконок в Sketch | Фото 8

Для экспорта используем артборд, и группа слоев станет нашим символом.

Подготовка и экспорт SVG-иконок в Sketch | Фото 9

Импорт из Illustrator

Правила наименования и структура документа готова. Вернемся к импорту иконок из Illustrator. Начните с копирования-вставки иконки из Illustrator в Sketch.

Подготовка и экспорт SVG-иконок в Sketch | Фото 10

Все выглядит довольно хорошо, но давайте рассмотрим более сложную форму.

Подготовка и экспорт SVG-иконок в Sketch | Фото 11

Это, конечно, не совсем то, что мы ожидаем. Посмотрим на список слоев.

Подготовка и экспорт SVG-иконок в Sketch | Фото 12

Есть две квадратные фигуры, которых тут быть не должно. Это какие-то артефакты из illustrator. Возможно, можно исправить это в illustrator, но и в sketch это не составит большого труда — просто удалите соответствующие слои.

Подготовка и экспорт SVG-иконок в Sketch | Фото 13

Так лучше, но конечная цель — единая комбинированная фигура. Мы объединим все слои. Проще всего выделить все слои и воспользоваться инструментом union.

Подготовка и экспорт SVG-иконок в Sketch | Фото 14

Опять мы разбили оригинальную иконку, и нужно реорганизовать слои и типы объединения. Также понадобится изменить правило заливки, если нужно использовать эти svg-иконки в Android.

Что такое Fill-Rule?

Подготовка и экспорт SVG-иконок в Sketch | Фото 16

Я подумал о том же, когда мой Android-разработчик сказал, что мои svg-иконки не работают. Первой реакцией было открыть svg в текстовом редакторе и удалить атрибут. Но это не сработало, так что пришлось покопаться глубже.

Fill-Rule — это параметр SVG, который изначально определяет, какие фигуры заливаются или вычитаются из общей фигуры. По умолчанию в svg используется значение «nonzero», именно такое значение и требует Android.

К сожалению, в Sketch используется «evenodd». К счастью, в Sketch есть все опции, которые нужны для конвертации фигур из «evenodd» в «nonzero». И в Sketch 42 все стало еще проще.

Давайте разберем, как работает fill-rule.

Подготовка и экспорт SVG-иконок в Sketch | Фото 17

Fill-rule = «evenodd» начинается вне фигуры и учитывает каждую кривую до центра, четные контуры заливаются, а нечетные — вычитаются.

Подготовка и экспорт SVG-иконок в Sketch | Фото 18

Fill-rule = «nonzero» означает, что любой контур, нарисованный в направлении по часовой стрелке, будет залит, а любой, нарисованный против часовой стрелки — будет вычтен.

И когда я говорю «нарисованный в определенном направлении», я буквально имею в виду, в каком направлении были нарисованы точки.

Подготовка и экспорт SVG-иконок в Sketch | Фото 19

Обычно мы не рисуем вручную каждую точку фигур, но важно понимать, как это работает, чтобы подправить фигуры после разбивки.

К счастью, в Sketch есть возможность изменения fill-rule. В инспекторе есть иконка в виде шестеренки рядом с заливкой в инспекторе.

Подготовка и экспорт SVG-иконок в Sketch | Фото 20

Вернемся к иконке «news» и изменим правило заливки на nonzero.

Подготовка и экспорт SVG-иконок в Sketch | Фото 21

Супер, все еще разбито! И это еще одна перемена, замеченная мной в 42. Нужно убедиться, что слои расположены в корректном порядке. Я передвинул самый наружный слой вниз. И изменил булевый тип. Проверьте, чтобы вычтенные области имели тип subtract, а залитые — union.

Подготовка и экспорт SVG-иконок в Sketch | Фото 22

Примечание: Sketch 42 исправляет порядок за нас. В прошлом это не особо играло роль, нужно было использовать либо горизонтальное отображение, либо симметричные объекты. Или же есть опция reverse path в меню Layer > Paths > Reverse Order.

Теперь иконка готова, и осталось два шага до экспорта.

Так как черный по умолчанию не #0 в Illustrator, я все время забываю изменить на нужный оттенок. Мне нравится применять стиль черного слоя, который я назвал ‘icon black'.

Подготовка и экспорт SVG-иконок в Sketch | Фото 23

И, наконец, давайте создадим символ

Подготовка и экспорт SVG-иконок в Sketch | Фото 24

При экспорте вы захотите выделить артборд. Помните, что мы назвали их в соответствии с желаемой структурой файлов.

Подготовка и экспорт SVG-иконок в Sketch | Фото 25

Вы можете просто экспортировать PDF-ки для iOS и SVG-версии для веб и Android в 1х, чтобы избежать любых вариаций пиксельной плотности.

Подождите перед экспортом любых SVG

Сначала установите плагин SVGO Compressor от Bohemian Coding. Это очень важный шаг, который исправит 90% всех возможных проблем с SVG.

https://github.com/BohemianCoding/svgo-compressor

Подготовка и экспорт SVG-иконок в Sketch | Фото 26

Вот и все!

Подготовка и экспорт SVG-иконок в Sketch

Вот и он — красивый целопиксельный набор SVG-иконок в граничных боках размером 24×24. Монохром с прозрачностью, так что их можно динамически окрашивать в Веб-е, iOS, Android и даже в Sketch (типа того).

Совет от профи: Вы можете закрашивать черные иконки, но помещая цветную фигуру поверх них и изменяя режим блендинга на screen. Фон должен быть белым.

Подготовка и экспорт SVG-иконок в Sketch

Несколько финальных штрихов по интеграции иконок

Веб

Так как в иконках нет штрихов, мы можем закрасить их, просто изменив заливку в CSS. Это отлично работает и с svg-спрайтами.

Android

Можете использовать этот инструмент для тестирования иконок

http://inloop.github.io/svg2android/

iOS

Экспортированные PDF-ки векторные, и xcode сгенерирует исходники в 2x и 3x. Если вы хотите использовать свои иконки в разных размерах, нужно экспортировать их как отдельные pdf-ки.

Подготовка и экспорт SVG-иконок в Sketch

В этом примере sketch сгенерирует 3 разные PDF-версии.

1x = 24×24, 2x = 48×48, 64w = 64×64. Это будут ваши размеры 1x, а xcode создаст вариации в @2x и @3x.

Также есть библиотека, которая позволяет использовать версию 1x pdf.
https://github.com/mindbrix/UIImage-PDF

Как реализовать кросс-браузерные SVG иконки