Создание дизайна под родные Android-приложения приносит массу удовольствия; временами даже счастья. И весь этот кайф длится ровно до момента, пока вы не возьмете ваше красивое приложение, на шлифовку которого у вас и вашей команды ушло несметное количество часов, и не… экспортируете исходники [и тут звучит драматическая музыка].

Экспорт исходников готового приложения под Android в Sketch — это, наверное, самое монотонное занятие, каким только может заняться дизайнер мобильных приложений. Не один год я искал способы усовершенствовать эту рутину. И до сих пор, похоже, каждый дизайнер сталкивается с той же проблемой, что и я: до сих пор нет идеального решения. Есть только методы немного лучше других.

Как уже говорилось, мой метод немногим лучше. Это самый быстрый способ, который мне удалось отыскать для Android в Sketch, но и он не без изъяна.

Настройте файл Sketch

Около года назад я перенес всю свою мобильную работу над Remind в Sketch по разным причинам, о которых уже подробно рассказали в других статьях. Если вы еще не испытали этот продукт, я очень советую вам скачать и попробовать.

Лучше всего для меня работает создание отдельной страницы в начале или в конце моего проекта в Sketch специально для исходников, которые необходимо экспортировать. Просто копируйте в эту страничку все исходники для будущего экспорта. Таким образом, у вас будет удобный набор всех изображений для будущего приложения. Также вы сможете быстро выделить все исходники сразу, чтобы указать настройки для экспорта.

Как улучшить процесс дизайна и разработки под Android в Sketch 3

Видите, я также разделяю исходники с помощью артбордов, чтобы упорядочить материалы по разделам приложения или даже релизам.

Настройки для экспорта

В Remind мы рисуем все в масштабе 200% (xhdpi) и потом уменьшаем. Этот прием отлично работает, но требует большей внимательности и продуманности. Тут каждый выбирает для себя. Я рекомендую рисовать дизайн в 100% (mdpi) и масштабировать для экспорта, если вы новичок в дизайне под мобильные устройства. Вот есть замечательная статья на эту тему. Я расскажу, как экспортировать исходники в обоих случаях.

Когда все нужные исходники размещены на страничке, выделите их все сразу и укажите настройки экспорта, как указано на картинках ниже, в зависимости от выбранного вами dpi:

Как улучшить процесс дизайна и разработки под Android в Sketch 3
Поставьте “-” и введите подходящее разрешение dpi, как на изображениях выше.

Экспорт

  1. Создайте новую папку под именем res на своем компьютере.
  2. Вернитесь в Sketch (в котором все еще выделены все слои), придайте исходникам целопиксельный размер , выбрав опцию Layer > Round to Nearest Pixel Edge (округлить до ближайшего пикселя).
  3. Нажмите большую кнопку Export Layers (экспортировать слои) в панели Export и сохраните все слои в папку res.
Как улучшить процесс дизайна и разработки под Android в Sketch 3
После экспорта папка будет выглядеть примерно так.

И обещанный волшебный порошок

Небольшой спойлер: под волшебным порошком я имел в виду shell-команду. Чтоб вы не поняли меня неправильно.

Это маленькая, но классная shell-команда, которую мне помог написать Эрик Холмс, пройдется по вашей папке res, создав все необходимые для экспорта папки, и разместит изображения по соответствующим папкам. Кроме того, изображения будут правильно переименованы.

Когда нужно вручную экспортировать каждый файл, правильно его называть и указывать корректное разрешение DPI в соответствующую папку, создается огромное пространство для ошибок. А мой метод исключает этот вездесущий человеческий фактор☺

Не так много дизайнеров пользуется shell-командами в целях экономии времени. Я обещаю, что они не такие страшные, какими кажутся на первый взгляд.

  1. Просто откройте терминал
  2. Скопируйте текст отсюда
  3. Вставьте его в окно терминала
  4. Нажмите клавишу возврата

Ух, это было грубо, но посмотрите! Настоящая магия! Все ваши файлы теперь аккуратно разложены по своим местам.

Как улучшить процесс дизайна и разработки под Android в Sketch 3
Результат использования shell-команды.

Приятный бонус: Сжатие

Всегда, всегда, всегда сжимайте файлы перед тем, как отдавать их разработчикам. Для быстрой компрессии я предпочитаю ImageOptim. Обязательно также познакомьтесь с ImageAlpha. Последний инструмент требует больше ручного контроля и времени, но потенциально сможет сжать ваши файлы лучше.

С помощью ImageOptim вы можете просто перетащить свою папку res в окошко, и программа сделает свое дело. Если вы предпочитаете пользоваться shell-командами, в окне терминала просто вставьте эту команду и нажмите return:

open -a ImageOptim 

Вуаля! Теперь у вас идеально организованные, сжатые, адаптированные для разработчиков исходники Android в Sketch -приложения.

Если есть что-то лучше

Описанный здесь метод действительно отлично подходит нашей команде, но суть в том, чтобы найти метод, подходящий именно вам и/или вашей команде. Я бы хотел услышать другие подходы, которые используют дизайнеры в своей работе. Я буду обновлять эту статью по мере нахождения новых, лучших способов подготовки исходников.