UXPUB

UXPUB - спільнота з 3,504 дизайнерів та креативних фахівців

Місце для обміну досвідом та дискусій навколо індустрії

Зареєструватися Увійти
Cover image for Подготовка и экспорт SVG-иконок в Sketch
Редакція
Редакція

Опубліковано

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

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

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

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

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

Объедините фигуры до их простейшей формы. Вы должны иметь возможность выделить всю иконку в один клик. Подготовка и экспорт SVG-иконок в Sketch | Фото 5

? Перенос Sketch

Начнем с создания артборда 24x24 для иконки. И добавьте квадрат 24x24. Подготовка и экспорт 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. Теперь иконка готова, и осталось два шага до экспорта. Так как черный по умолчанию не #000000 в 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-иконок в граничных боках размером 24x24. Монохром с прозрачностью, так что их можно динамически окрашивать в Веб-е, iOS, Android и даже в Sketch (типа того). Совет от профи: Вы можете закрашивать черные иконки, но помещая цветную фигуру поверх них и изменяя режим блендинга на screen. Фон должен быть белым.

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

Веб

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

Android

Можете использовать этот инструмент для тестирования иконок http://inloop.github.io/svg2android/

iOS

Экспортированные PDF-ки векторные, и xcode сгенерирует исходники в 2x и 3x. Если вы хотите использовать свои иконки в разных размерах, нужно экспортировать их как отдельные pdf-ки. В этом примере sketch сгенерирует 3 разные PDF-версии. 1x = 24x24 , 2x = 48x48 , 64w = 64x64. Это будут ваши размеры 1x, а xcode создаст вариации в @2x и @3x. Также есть библиотека, которая позволяет использовать версию 1x pdf. https://github.com/mindbrix/UIImage-PDF http://ux.pub/kak-realizovat-kross-brauzernye-svg-ikonki/


Перевод статьи Anthony Collurafici

Обговорення (0)