Сегодня мы с вами рассмотрим Дизайн и экспорт иконки в Sketch 3 иконки приложения. Дизайн иконки приложения — задание не из легких. И Apple, и Android следуют руководству Human Interface Guideline, которое приводит рекомендации требования по созданию иконки приложения. Очень важно подготовить иконки в нескольких размерах для различных кейсов, вариации должны быть совместимы со скринами retina и non-retina. И также должны быть опциональные иконки (для настроек, панели инструментов, панели навигации, полосы табуляции и т. д.).

Мы бы могли спокойно ограничиться использованием Photoshop со смарт-объектами и создать всего одну иконку приложения, которая автоматически смасштабируется до нужных размеров. App Icon Template даже создал бесплатный PSD-шаблон и Photoshop action для экспорта иконок, но в Sketch 3 весь этот функционал доступен в родной комплектации приложения.

Почему?

Потому что Sketch создан непосредственно для дизайнеров интерфейсов и приложений, а Photoshop — нет.

Некорректно полагать, что Photoshop и Illustrator — бесполезные инструменты. У Photoshop лучшее управление слоями, а Illustrator — векторный инструмент с функцией символов. Sketch учел все эти плюсы, и соединил оба мира в едином приложении для Mac по цене всего $ 99 —  за слои, векторы и быстродействие.

Что мы будем создавать?

В этом уроке мы научимся конструировать иконку приложения в векторном формате, используя родные возможности Sketch 3, а также добавочный функционал из Sketch Toolbox. Мы также опробуем экспорт иконки в Sketch и все его потрясающие возможности. Вот иконка, которую я сделала раньше.

Дизайн и экспорт иконки приложения в Sketch 3

Отступление: перед началом работы стоит упомянуть, что в Sketch есть шаблон иконки приложения для iOS. Мы не будем его использовать, и если вам не интересно узнать, почему, пропустите этот раздел и продолжите сам урок.

Перейдите на File → New From Template → iOS App Icon. На первый взгляд вы заметите, что есть несколько артбордов, плавающих вокруг на бесконечном канвасе. Отлично — это то, что нам необходимо, верно?

Создаем артборды для иконки приложения

Посмотрите влево и вы также заметите сайдбар со слоями. Каждый артборд назван соответствующим образом (например, iTunesArtwork@2x), и внутри них находится фигура. Нажмите R и нарисуйте прямоугольник, который по размерам будет соответствовать артборду. Вы можете удерживать Shift, чтобы соблюсти пропорцию сторон 1:1, но вы заметите, что Sketch автоматически (и интуитивно) выравнивает фигуру с близлежащими слоями в любом случае, т. е. подгоняет размер рисуемого прямоугольника под размер артборда.

О нет, мы потеряли наши закругленные углы!

Apple требует квадратные иконки приложения, потому что iOS автоматически применяет маску с закругленными углами. Каждый угол должен быть углом «90° градусов», в этом требовании они очень категоричны, так что там нужно использовать эту фигуру иконки (Icon Shape) как слой-маску, чтобы посмотреть, как иконка будет выглядеть в реальности. Кликните левой кнопкой мышки на Icon Shape и выберите «Use as Mask»  (использовать в качестве маски) —  и вот, наша иконка снова имеет закругленные углы.

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

Что такое символы?

Символы — это сохраненная коллекция стилей в группе (подобно CSS-классу). Представьте себе возможность создавать кнопку, создавать новую группу и применять кнопку к этой группе, вместо необходимости создавать дизайн кнопки повторно. Это экономит время. Если вы измените стили символьной группы, каждый символ будет обновляться автоматически (пример: вы заканчиваете дизайн приложения, и вдруг решаете, что все кнопки должны быть другого цвета).

В правом сайдбаре (инспектор) вы сможете увидеть, что у нашего прямоугольника есть заливка (Fill) и граница (Border), а также ширина (Width) и высота (Height). Измените цвет заливки, сделайте размеры чуть меньше и выделить группу (Group) из панели инстументов Sketch. В данный момент фокус изменится с прямоугольника на вновь созданную группу, и в инспекторе сейчас можно увидеть «No Symbol». Кликните на этот элемент, выберите «Create New Symbol» (создать новый символ) и назовите его «Icon».

Создание символа для иконки приложения

Нажмите CMD + D, чтобы продублировать символ и попытаться изменить его размер. Оба символа изменились в размере одновременно, и сейчас должно стать понятно, почему этот способ не подходит для создания иконок с различными размерами.

Дублируем символ для иконки приложения

Так какой же способ лучший?

Простое дублирование. Когда мы закончим с дизайном иконки приложения, мы можем продублировать всю группу несколько раз, затем изменить размер копий и затем переместить копии на другие артборды. Отлично — у нас будут иконки во всех нужных размерах; правда, если нужно будет что-то изменить, придется проделывать это с каждой группой.

Несмотря на то, что Sketch — шикарный инструмент для наших целей, важно понимать его ограничения, чтобы не тратить время впустую. В данном случае символы нам не подходят.

Примечание: это единственное мое сомнение по поводу Sketch, так что пусть оно вас не пугает.

А теперь выбросите все

И давайте начнем сначала. Sketch Toolbox и плагин Aeiconizer будут нашими помощниками в этот раз, и хотя это менее родной способ справиться с нашей задачей, он работает просто отлично. Мы будем создавать дизайн одну иконку приложение и воспользуемся плагином Aeiconizer из Sketch Toolbox для воспроизведения дизайна в нужных нам размерах, готовых для экспорта. Мы создадим фиктивное «ночное» приложение, для которого необходимо нарисовать простую иконку с изображением месяца.

  • Нажмите CMD + N, чтобы открыть новый канвас
  • Нажмите, А для создания артборда и выберите 180 — iPhone 6 Plus в разделе iOS Icons
  • Нажмите CMD + «+» для увеличения до 200%
  • Нажмите R и нарисуйте прямоугольник размером с артборд

В инспекторе выберите следующие стили:

  • Fill: #23282c
  • Border: untick and trash

Рисуем фон иконки приложения

Создаем фигуру месяца

Теперь мы нарисуем основу для будущего месяца:

  • Нажмите О и нарисуйте круг размером 109×109
  • Уберите границы, заливку пока можно оставить
  • Перетяните круг точно в центр канваса, Sketch автоматически «подтянет» круг в нужную точку при передвижении.
  • Продублируйте круг и выровняйте копию по правому краю артборда.

Создаем иконку месяца в Sketch

На данный момент у нас есть два накладывающихся круга на холсте. Первый круг будет луной, а с помощью его копии мы «вырежем» форму месяца из оригинального круга.

  • Удерживайте Shift и выделите оба круга на холсте
  • В панели инструментов Sketch нажмите Subtract

В результате этой трансформации из двух кругов должна получиться единая форма месяца. На данный момент оба круга можно выделять по отдельности в сайдбаре со списком слоев — это очень полезная возможность, так как для отшлифовки фигуры месяца нам придется немного подвигать верхний овал. Когда форма вам покажется идеальной, нажмите Flatten в панели инструментов. Flatten — это деструктивное действие, в результате которого овалы уже будут объединены в единое целое.

Форма месяца в Sketch

Стилизация иконки

В инспекторе задайте следующие стили:

  • Fill (заливка): #FFF, 85 (Hex, A)
  • Border (граница): #FFF, 5 (Hex, A) и Outside, 3 (Position, Thickness)
  • Shadows (тени): #000, 50 (Hex, A) и 0, 2, 10, 0 (X, Y, Blur, Spread)
  • Inner Shadow 1 (внутренняя тень): #FFF, 15 (Hex, A) и 0, 4, 0, 0 (X, Y, Blur, Spread)
  • Inner Shadow 2: #000, 10 (Hex, A) и 10, 0, 0, 0 (X, Y, Blur, Spread)

Стилизация иконки месяца

Теперь иконка выглядит более стильно, но все же довольно просто. Конечно, идея в том, чтобы иконка отличала «ночной» режим приложения, работая, в основном, в фоновом режиме, когда свет погашен, так что сама иконка не должна быть слишком «ослепительной».

Sketch Toolbox

Sketch Toolbox — бесплатное и неофициальное приложение для Mac, с помощью которого можно управлять расширениями Sketch. Как только вы его установите, найдите плагин Aeiconizer Plugin и установите его — этот метод куда проще, чем использования опции «Reveal Plugins Folder…» из панели инструментов Mac и копирования скачанных расширений в найденную папку.

Воспользуемся Aeiconizer Plugin

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

Факт: оригинальный артборд является корректным размером для иконки Apple touch.

Выделите артборд из списка слоев и перейдите на Plugins → Aeiconizer. Вы сразу заметите, что иконка продублировалась несколько раз — такой метод более эффективен по ряду причин:

  1. Нам не надо настраивать никакие символы
  2. Мы работали только с одним артбордом
  3. Мы можем изменить оригинальный дизайн и еще раз запустить Aeiconizer

Воспользуемся Aeiconizer Plugin

Начинаем экспорт иконки приложения в Sketch

Приложения, созданные в Xcode, имеют специальную папку для хранения изображений (включая иконки приложений) под названием Images.xcassets. В эту папку необходимо включить версии 2x и 3x всех изображений для экранов retina.

Экспорт в Sketch предложит вам сохранить изображения как 2x и 3x, если вы об этом попросите, но так как наш артборд уже содержит все нужные размеры, мы можем просто экспортировать его в размере 1x (non-retina).

Начните с выделения каждого артборда со списка слоев, но помните, что нужно пропустить исходный артборд. Если вы запускали Aeiconizer только что, требуемые артборды будут уже выделены. Нажмите CMD + Shift + E для запуска экспорта. Появится диалог для подтверждения экспорта — вы можете добавить или убрать любые артборды перед финальным экспортом.

Экспорт в Sketch иконки приложения

Нужно ли вам экспортировать слой или группу с какими-то особыми настройками (это может, не применимо к нашей иконке, но для будущих дизайнов — вполне), выделите нужный слой и кликните на опции «Make Exportable» в правом нижнее углу окна приложения. У вас будет возможность выбрать другой формат файла, суффикс или разрешение перед экспортом этого выбранного слоя.

Независимо от того, как вы инициируете операцию экспорта, приложение Sketch всегда запоминает каждый экспортированный слой вместе с настройками экспорта, и сохраняет информацию в так называемый «слайс». Пользователи Adobe Fireworks должны быть в курсе этой терминологии.

Кроме того, слайсы полезны и для других дизайнеров и разработчиков, которые используют файл. sketch впервые — им могут понадобиться ваши слайсы, очень удобно иметь нужные настройки под рукой.

Заключение

В этом уроке работы со Sketch 3 мы научились использовать различные типы масок, освоили работу с Aeiconizer Plugin, а также настраивать слайсы для экспорта иконки приложения во все необходимые размеры для заливки приложения в app store. Это далеко не все освоенные нами пункты, мы также поработали со Sketch Toolbox, изучили возможности инспектора для стилизации элементов. Надеюсь, вам понравилось!

Перевод статьи designmodo.com автора Daniel Schwarz.