Создание дизайна под родные Android-приложения приносит массу удовольствия; временами даже счастья. И весь этот кайф длится ровно до момента, пока вы не возьмете ваше красивое приложение, на шлифовку которого у вас и вашей команды ушло несметное количество часов, и не… экспортируете исходники [и тут звучит драматическая музыка].
Экспорт исходников готового приложения под Android в Sketch - это, наверное, самое монотонное занятие, каким только может заняться дизайнер мобильных приложений. Не один год я искал способы усовершенствовать эту рутину. И до сих пор, похоже, каждый дизайнер сталкивается с той же проблемой, что и я: до сих пор нет идеального решения. Есть только методы немного лучше других.
Как уже говорилось, мой метод немногим лучше. Это самый быстрый способ, который мне удалось отыскать для Android в Sketch, но и он не без изъяна.
Настройте файл Sketch
Около года назад я перенес всю свою мобильную работу над Remind в Sketch по разным причинам, о которых уже подробно рассказали в других статьях. Если вы еще не испытали этот продукт, я очень советую вам скачать и попробовать.
Лучше всего для меня работает создание отдельной страницы в начале или в конце моего проекта в Sketch специально для исходников, которые необходимо экспортировать. Просто копируйте в эту страничку все исходники для будущего экспорта. Таким образом, у вас будет удобный набор всех изображений для будущего приложения. Также вы сможете быстро выделить все исходники сразу, чтобы указать настройки для экспорта.
Видите, я также разделяю исходники с помощью артбордов, чтобы упорядочить материалы по разделам приложения или даже релизам.
Настройки для экспорта
В Remind мы рисуем все в масштабе 200% (xhdpi) и потом уменьшаем. Этот прием отлично работает, но требует большей внимательности и продуманности. Тут каждый выбирает для себя. Я рекомендую рисовать дизайн в 100% (mdpi) и масштабировать для экспорта, если вы новичок в дизайне под мобильные устройства. Вот есть замечательная статья на эту тему. Я расскажу, как экспортировать исходники в обоих случаях.
Когда все нужные исходники размещены на страничке, выделите их все сразу и укажите настройки экспорта, как указано на картинках ниже, в зависимости от выбранного вами dpi:
Поставьте “-” и введите подходящее разрешение dpi, как на изображениях выше.
Экспорт
- Создайте новую папку под именем res на своем компьютере.
- Вернитесь в Sketch (в котором все еще выделены все слои), придайте исходникам целопиксельный размер , выбрав опцию Layer - Round to Nearest Pixel Edge (округлить до ближайшего пикселя).
- Нажмите большую кнопку Export Layers (экспортировать слои) в панели Export и сохраните все слои в папку res.
После экспорта папка будет выглядеть примерно так.
И обещанный волшебный порошок
Небольшой спойлер: под волшебным порошком я имел в виду shell-команду. Чтоб вы не поняли меня неправильно.
Это маленькая, но классная shell-команда, которую мне помог написать Эрик Холмс, пройдется по вашей папке res, создав все необходимые для экспорта папки, и разместит изображения по соответствующим папкам. Кроме того, изображения будут правильно переименованы.
Когда нужно вручную экспортировать каждый файл, правильно его называть и указывать корректное разрешение DPI в соответствующую папку, создается огромное пространство для ошибок. А мой метод исключает этот вездесущий человеческий фактор☺
Не так много дизайнеров пользуется shell-командами в целях экономии времени. Я обещаю, что они не такие страшные, какими кажутся на первый взгляд.
- Просто откройте терминал
- Скопируйте текст отсюда
- Вставьте его в окно терминала
- Нажмите клавишу возврата
Ух, это было грубо, но посмотрите! Настоящая магия! Все ваши файлы теперь аккуратно разложены по своим местам.
Результат использования shell-команды.
Приятный бонус: Сжатие
Всегда, всегда, всегда сжимайте файлы перед тем, как отдавать их разработчикам. Для быстрой компрессии я предпочитаю ImageOptim. Обязательно также познакомьтесь с ImageAlpha. Последний инструмент требует больше ручного контроля и времени, но потенциально сможет сжать ваши файлы лучше.
С помощью ImageOptim вы можете просто перетащить свою папку res в окошко, и программа сделает свое дело. Если вы предпочитаете пользоваться shell-командами, в окне терминала просто вставьте эту команду и нажмите return:
open -a ImageOptim
Вуаля! Теперь у вас идеально организованные, сжатые, адаптированные для разработчиков исходники Android в Sketch -приложения.
Если есть что-то лучше
Описанный здесь метод действительно отлично подходит нашей команде, но суть в том, чтобы найти метод, подходящий именно вам и/или вашей команде. Я бы хотел услышать другие подходы, которые используют дизайнеры в своей работе. Я буду обновлять эту статью по мере нахождения новых, лучших способов подготовки исходников.
Перевод статьи Lindsay Mindler
Топ коментарі (0)