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

Недавно я узнал, что некоторые из новых пользователей 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. Так что мы добавим суффикс [email protected]:

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

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

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

0.5x – @1x, PNG предназначен для iPhone 4s и ниже, [email protected] для экрана 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.

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