Организуй это полностью
Мой опыт организации работы с большими макетами и нестандартного использования новых возможностей фотошопа
Пока половина дизайнеров, имеющих эппловские компьютеры, дружно перебираются на скэтчапп — расскажу о том, как я работаю в фотошопе со сложными макетами.
Под «сложными» я подразумеваю различные панели управления и вообще большие сайты и интерфейсы со множеством страниц, всплывающих окон и прочих состояний экрана.
Последний год я использую инвижн и для максимального приближения прототипа к реальности требуется создавать десятки джипегов со всеми состояниями экранов, всплывающими, выпадающими, выезжающими и «сквозными» элементами. С увеличением количества страниц работа с макетом превращается в пытку. Каждый раз вручную открывать и пересохранять кучу макетов быстро надоедает.
Я перепробовал много приёмов и танцев с бубном вокруг фотошопа и далее приведу три, вымученных и проверенных на десятках проектов, рецепта, которые я использую для организации макета.
1. Всё в одном
Композиции слоёв отлично подходят для небольших сайтов и лэндингов.
Весь макет в одном файле. Странички, всплывающие окна и прочее — раскидываем по папкам, а каждое состояние экрана закрепляем в композиции.
Чуть подробней можно прочитать у Ильи Бирмана.
Правда, с увеличением количества экранов возникают проблемы. Композиции лучше делать, когда макет уже полностью готов и не планируется вносить изменения — в противном случае можно потерять много нервных клеток, добавляя новый элемент.
Композиции слоёв я бы рекомендовал в первую очередь для небольших лендингов, где нужно показать пару всплывающих окон с регистрацией/логином и для демонстрации состояний элементов при наведении курсора.
Для быстрого экспорта всех состояний есть хороший скрипт Layer Comps to Files (ext), который имеет чуть более широкий функционал, чем встроенный по-умолчанию.
2. Постранично
Самый популярный и простой способ с постраничным разбиением макета (1 страница = 1 файл) подходит для больших сайтов, но при редактировании/добавлении «сквозного» элемента на несколько страниц — хочется застрелиться.
Различные всплывающие окна можно так же показывать с помощью композиций в каждом файле — верстальщику будет приятно.
3. Всё раздельно
Лучшее решение для больших макетов нашлось неожиданно, ведь в фотошопе целых два дизайнера, днями и ночами придумывающих новые фичи и оптимизирующих интерфейс. Хочется верить, что когда-нибудь дооптимизируют и специализируют его под наши нужды, а пока можем использовать первые результаты их трудов: генератор графических ресурсов и связанные смарт-объекты.
Все страницы и повторяющиеся элементы (выпадающие меню, всплывающие окна и т.д.) я храню в отдельных файлах.
Для автоматической генерации всех превьюшек — создаю отдельный файл (я называю его «preview-generator.psd»), в который встраиваю все исходники страниц с помощью связанных смарт-объектов.
Каждое состояние экрана — это отдельная папка с именем, вроде «01-страница-состояние.jpg».
Включаем генератор графических ресурсов в меню…
…и мгновенно получаем обновлённые превьюшки всех страниц, готовых к отправке в инвижн.
