Экспорт из 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.

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

Total
0
Shares
2 комментария
  1. Здравствуйте! Возник вопрос относительно экспорта: я создал дизайн приложения в АртБорде Iphone 6 Plus. При экспорте с 1х, 2х и 3х параметрами иноки в самом приложении на IPhone 6 смотрятся размыто. В чем может быть проблема? Спасибо.

  2. Друзья, столкнулся с такой проблемой:

    Рисую иконку в Sketch, экспортирую в PNG формат во всех нужных размерах (@2x, @3x). При загрузке иконки в Xcode на экране iPhone она отображается с тонкой серой рамкой в 1pt вокруг иконки, хотя в Sketch ее нет.

    Я не могу понять – проблема на стороне Sketch или уже в Xcode? Прошу помощи!

Добавить комментарий
Похожие статьи
Превью-релиз Adobe Experience Design CC
Подробнее

Превью-релиз Adobe Experience Design CC (Project Comet)

От имени создателей я рад поведать вам, что Project Comet стал Adobe Experience Design CC (Preview), или Adobe XD, как мы его называем. Именно сегодня продукт стал доступен для Mac OS, и мы счастливы сделать первый предварительный обзор.

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
0
Share