Экспорт из Sketch для iOS в подробных деталях. Учимся резать исходники в Sketch

Простое руководство для тех, кто слегка запутался

Недавно я узнал, что некоторые из новых пользователей Sketch и дизайнеров, которые только начали работать с iOS, мучаются при экспорте исходников. Люди (включая и меня самого) сталкиваются с вопросами вроде “Каким должен быть размер артборда?”, “Какой размер исходника стоит выбрать для экспорта?” и т.д.

Я поделюсь тем, что сам усвоил, пока работал над дизайном iOS-приложения bridj.com.

Как работает экспорт из Sketch

Когда мне нужно разработать дизайн под iPhone, обычно я начинаю с артборда для iPhone 5s (640×1136 пикселей). Разрешение для iPhone 5 идентично. Все, что вы рисуете для iPhone 5/5c/5s/6 имеет одинаковое разрешение 326ppi. Плотность пикселей в мире Apple 200% или @2x. А все более раннее, чем iPhone 5/5c/5s/6 имеет плотность @1x из-за более низкого ppi. Все, что выпущено позднее, например iPhone 6 plus – уже @3x, так как плотность 401ppi. В частности, если размер иконки для артборда iPhone 5/5s или даже iPhone 6 50×50 пикселей, то размер в @1x будет 25×25 пикселей, а @3x – 75×75 пикселей.

Почему я начал с артборда iPhone5s? Он не слишком маленький и не слишком большой для моего 13-дюймового Mac-а. Я могу видеть достаточно деталей. Так что это мое личное предпочтение. Вы можете всегда выбрать для себя наиболее комфортный вариант самостоятельно.

Сейчас в Sketch, когда нужно экспортировать элементы или папки, вы выделяете элемент или папку, затем жмете на кнопку ‘make exportable’ (сделать экспортируемым) в правом нижнем углу. Появится панель экспорта, где вы увидите что-то вроде этого:

панель экспорта из Sketch для iOS

Я думаю, вы знаете, как использовать экспорт из sketch. Но я все равно скажу: выпадающий список с размерами позволяет выбрать, во сколько раз размер текущего элемента изменится при экспорте. Я выбрал элемент ‘Back 2’ с текущим размером в 40×30 пикселей. Если я выберу 1x в списке размеров, то элемент экспортируется в размере 40×30 пикселей. Если я выберу 0.5x, то экспортированный элемент будет иметь размер 20×15 пикселей. Если я выберу 2x, то размер при экспорте будет 80×60 пикселей.

Так как я использую артборд для iPhone 5s, я остановлюсь на 1x. Но iPhone 5s (329ppi) имеет размер @2x. Так что мы добавим суффикс ‘@2x’:

панель экспорта из Sketch для iOS @2x

Теперь мне нужно экспортировать его для @1x и @3x, получится следующее:

панель экспорта из Sketch для iOS @1x и @3x

0.5x – @1x, PNG предназначен для iPhone 4s и ниже, 1x — @2x для экрана retina (iPhone 5, 5s, 6) и 1.5x – @3x, PNG для iPhone 6 plus.

Также, если вы выберете артборд для экрана iPad ‘Portrait — Retina’ или ‘Landscape — Retina’, все, что вы нарисуете, будет иметь плотность пикселей @2x.

Когда вам понадобится передать файлы разработчику, придется экспортировать во все размеры (@1x, @2x и @3x). Не забудьте добавить соответствующие суффиксы при экспорте! Разработчик перенесет все эти изображения в Xcode, работа которого основывается на добавленных суффиксах, так как он автоматически умеет определять, какой размер какому устройству соответствует. Это сохранит уйму времени вашему разработчику.

Если вы думаете, что такой процесс слишком трудоемок и сложен, используйте один из замечательных готовых плагинов для Sketch. Я часто пользуюсь плагином Sketch Export Asset для android. Будьте осторожны, этот плагин думает, что вы создаете дизайны в @1x.

Если эта статья была полезной для вас, или у вас возникли вопросы, я бы очень хотел об этом знать!

2 Комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
10 фишек в Sketch для дизайнеров
Подробнее

10 фишек в Sketch для дизайнеров

Я уже довольно долго пользуюсь Sketch, и он мне абсолютно нравится. Поэтому я подумал, что будет неплохо собрать вместе 10 фишек, которые ежедневно помогают сделать мою работу в Sketch лучше и быстрее.
Sketch и Keynote
Подробнее

Sketch и Keynote. Анимируйте дизайн нарисованный в Sketch с помощью Keynote

Keynote – это то приложение, к которому я всегда обращаюсь за инструментами для разработки мелких анимаций в пользовательском интерфейсе. Это бесплатное приложение, без проблем работает в паре с файлами Sketch или .svg. Простое перетаскивание исходника дает возможность дизайнеру быстро создать рабочий интерфейс, так что к стадии анимирования можно приступить гораздо быстрее.

Лучшие статьи, раз в неделю, с доставкой на почту

Total
0
Share