Эта статья подразумевает, что вы уже знакомы с основами дизайна иконок. Здесь мы рассмотрим, как готовить и экспортировать иконки для использования в вебе, iOS и Android. Мы будем использовать Sketch для организации, управления и экспорта иконок. Также детально рассмотрим монохромные иконки, которые можно динамически окрашивать на всех платформах.
? ? Sketch 42 ??
Я начал работу над этим постом перед релизом Sketch 42. Оказывается, в этой версии было внесено ряд существенных изменений. И эти изменения повлияли на мой рабочий процесс.
- При вставке из illustrator, графика гораздо лучше примыкает к пиксельной сетке.
- Изменение правила заливки теперь осуществляется гораздо проще (детальнее об этом ниже).
Начнем с Illustrator
Перед погружением в sketch я бы хотел начать с illustrator. Я пользуюсь им 15 лет, и некоторые привычки не так легко сломать. Я куда быстрее орудую ручкой в illustrator, чем в Sketch. Обычно дизайн иконок я создаю именно в illustrator и переношу их в Sketch.
Причины НЕ использовать только illustrator:
- Файлы Illustrator ограничены 100 артбордами. Если у вас большой набор иконок, вы не можете хранить их в одном файле.
- Экспорт партии файлов имеет свои ограничения.
- Если дизайн-команда пользуется Sketch, в любом случае вам понадобятся иконки в Sketch.
Приступим
Я буду рисовать иконки размером 24х24. Мне нравится делать артборд размером 24x24 под каждую иконку. Если вы как я, то будете миксовать контуры и фигуры для создания нужной графики. В конце вам захочется конвертировать штрихи в кривые. И упростить кривые до единой фигуры.
Контурные кривые
Вы захотите конвертировать любые кривые в фигуры. 
Я создал кастомную горячую клавишу ⌥⌘O 
Объединение фигур
Объедините фигуры до их простейшей формы. Вы должны иметь возможность выделить всю иконку в один клик. 
? Перенос Sketch
Начнем с создания артборда 24x24 для иконки. И добавьте квадрат 24x24. 
Я люблю добавлять направляющие линии к символам. Они также послужат граничным блоком для символа. Сгруппируем эту фигуру и назовем ее “Guides”, а затем сгруппируем ее снова. 
Это создаст нужную структуру папок для символов. Теперь было бы неплохо подумать о правилах названия для всех иконок и символов. Вот пример правил наименования, которыми я пользовался в прошлом. Я выбрал более короткие версии имен для символов, чем имена экспортируемых файлов. Можно использовать прямой слеш для создания иерархии в экспорте и символах. 
Для экспорта используем артборд, и группа слоев станет нашим символом. 
Импорт из Illustrator
Правила наименования и структура документа готова. Вернемся к импорту иконок из Illustrator. Начните с копирования-вставки иконки из Illustrator в Sketch. 
Все выглядит довольно хорошо, но давайте рассмотрим более сложную форму. 
Это, конечно, не совсем то, что мы ожидаем. Посмотрим на список слоев. 
Есть две квадратные фигуры, которых тут быть не должно. Это какие-то артефакты из illustrator. Возможно, можно исправить это в illustrator, но и в sketch это не составит большого труда - просто удалите соответствующие слои. 
Так лучше, но конечная цель - единая комбинированная фигура. Мы объединим все слои. Проще всего выделить все слои и воспользоваться инструментом union. 
Опять мы разбили оригинальную иконку, и нужно реорганизовать слои и типы объединения. Также понадобится изменить правило заливки, если нужно использовать эти svg-иконки в Android.
Что такое Fill-Rule?
Я подумал о том же, когда мой Android-разработчик сказал, что мои svg-иконки не работают. Первой реакцией было открыть svg в текстовом редакторе и удалить атрибут. Но это не сработало, так что пришлось покопаться глубже. Fill-Rule - это параметр SVG, который изначально определяет, какие фигуры заливаются или вычитаются из общей фигуры. По умолчанию в svg используется значение “nonzero”, именно такое значение и требует Android. К сожалению, в Sketch используется “evenodd”. К счастью, в Sketch есть все опции, которые нужны для конвертации фигур из “evenodd” в “nonzero”. И в Sketch 42 все стало еще проще. Давайте разберем, как работает fill-rule. 
Fill-rule = “evenodd” начинается вне фигуры и учитывает каждую кривую до центра, четные контуры заливаются, а нечетные - вычитаются. 
Fill-rule = “nonzero” означает, что любой контур, нарисованный в направлении по часовой стрелке, будет залит, а любой, нарисованный против часовой стрелки - будет вычтен. И когда я говорю “нарисованный в определенном направлении”, я буквально имею в виду, в каком направлении были нарисованы точки. 
Обычно мы не рисуем вручную каждую точку фигур, но важно понимать, как это работает, чтобы подправить фигуры после разбивки. К счастью, в Sketch есть возможность изменения fill-rule. В инспекторе есть иконка в виде шестеренки рядом с заливкой в инспекторе. 
Вернемся к иконке “news” и изменим правило заливки на nonzero. 
Супер, все еще разбито! И это еще одна перемена, замеченная мной в 42. Нужно убедиться, что слои расположены в корректном порядке. Я передвинул самый наружный слой вниз. И изменил булевый тип. Проверьте, чтобы вычтенные области имели тип subtract, а залитые - union. 
Примечание: Sketch 42 исправляет порядок за нас. В прошлом это не особо играло роль, нужно было использовать либо горизонтальное отображение, либо симметричные объекты. Или же есть опция reverse path в меню Layer > Paths > Reverse Order. Теперь иконка готова, и осталось два шага до экспорта. Так как черный по умолчанию не #000000 в Illustrator, я все время забываю изменить на нужный оттенок. Мне нравится применять стиль черного слоя, который я назвал ‘icon black’. 
И, наконец, давайте создадим символ 
При экспорте вы захотите выделить артборд. Помните, что мы назвали их в соответствии с желаемой структурой файлов. 
Вы можете просто экспортировать PDF-ки для iOS и SVG-версии для веб и Android в 1х, чтобы избежать любых вариаций пиксельной плотности.
Подождите перед экспортом любых SVG
Сначала установите плагин SVGO Compressor от Bohemian Coding. Это очень важный шаг, который исправит 90% всех возможных проблем с SVG. https://github.com/BohemianCoding/svgo-compressor 
Вот и все!
Вот и он - красивый целопиксельный набор 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)