Как создать интерфейс для Android по макету. Часть 1

Доброе утро, друзья.

Сегодня хочу опубликовать первую часть статьи о том, как я превращал макет интерфейс из макета PhotoShop в рабочий интерфейс Android приложения. 

Рассматривать будет на примере макета аудиоплеера для Android, который любезно предоставил MishaAem. Часть информации я нашел в интернете, о чем-то догадался сам.

Таким интерфейс был задуман автором:

Ко мне он попал в виде PSD файла для PhotoShop.

Итак, начнем.



Этап первый -  Нарезка макета

Первый делом нужно получить все необходимы ресурсы из макета.

Как бы я делал раньше:

С помощью PhotoShop инструмента "Рамка" вырезал бы каждый отдельный элемент, затем скрывал слои со всеми изображениями кроме нужного, затем сохранял полученную картинку и на последом с помощью волшебного Ctrl+z возвращался к исходному макету и повторял бы все до тех пор, пока не получил бы все нужные картинки.

Я думаю, Вы уже представили насколько это затратный процесс и насколько он скучный!

Благо есть иной способ.

Для PhotoShop CS 4 Файл -> Сценарии -> Экспортировать слои в файлы...

Нужно убедиться, что стоит галочка "Тримминг слоев" после можно нажимать "Выполнить" и наблюдать магию!

Через несколько минут (зависит от количества слоев) получим много графических ресурсов для будуoего Android плеера:

Уже лучше, но это еще не все. Есть пара нюансов.

Мне не нужны ВСЕ картинки для приложения, например, полосу прокрутки я сделаю программно, полу прозрачные обложки альбомов мне также не к чему, как и размытый зайдник!

Конечно можно просто удалить эти файлы из папки и все, но на их созданию мы потратили время, поэтому считаю что лучше просто удалить эти слои до экспорта! К тому же, под категорию удаления также могут подойти:

 -) Повторяющиеся элементы управления, например, если эти кнопка назад, которая может присутствовать на многих экранах.

 -) Заглушки, например те же обложки альбомов, ведь в реальном приложении они будут выбираться из плей листа.

 -) Текст, его также можно (и нужно) сделать программно

 -) Простой фон, например, если это однородный цвет или градиент.

 -) Эффекты, которые можно сделать программно (тень) 

Кроме этого, если есть "сложные" картинки, в которых один элемент состоит из нескольких слоев, то такие слои лучше объединить в PhotoShop в один слой перед экспортом.

После исключения всего выше перечисленного получаем:

В разы меньше ресурсов и за более быстрое время!

Этап второй - переименование

Теперь осталось дело за малым, дать нашим картинкам правильные имена! Но и тут есть пара нюансов:

По умолчанию название файла состоит из общего префикса с порядковым номером и названии файла. Но мы хотим, чтобы наши ресурсы были названы согласно гугловской конвенции именования для ресурсов Android, например, ic_back_menu.png.

Так вот, тут есть 2 варианта: 

1) После экспорта переименовать из руками

2) "Правильно" назвать слои в PSD.

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

Продолжение будет в течении пары дней)