Организуй это полностью

Мой опыт организации работы с большими макетами и нестандартного использования новых возможностей фотошопа.

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

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

Последний год я использую инвижн и для максимального приближения прототипа к реальности требуется создавать десятки джипегов со всеми состояниями экранов, всплывающими, выпадающими, выезжающими и «сквозными» элементами. С увеличением количества страниц работа с макетом превращается в пытку. Каждый раз вручную открывать и пересохранять кучу макетов быстро надоедает.

Я перепробовал много приёмов и танцев с бубном вокруг фотошопа и далее приведу три, вымученных и проверенных на десятках проектов, рецепта, которые я использую для организации макета.

1. Всё в одном

Композиции слоёв отлично подходят для небольших сайтов и лэндингов.

Весь макет в одном файле. Странички, всплывающие окна и прочее — раскидываем по папкам, а каждое состояние экрана закрепляем в композиции.

Layer CompsLayer Comps

Чуть подробней можно прочитать у Ильи Бирмана.

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

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

Для быстрого экспорта всех состояний есть хороший скрипт Layer Comps to Files (ext), который имеет чуть более широкий функционал, чем встроенный по-умолчанию.

2. Постранично

Самый популярный и простой способ с постраничным разбиением макета (1 страница = 1 файл) подходит для больших сайтов, но при редактировании/добавлении «сквозного» элемента на несколько страниц — хочется застрелиться.

Одна страница — один файлОдна страница — один файл

Различные всплывающие окна можно так же показывать с помощью композиций в каждом файле — верстальщику будет приятно.

3. Всё раздельно

Лучшее решение для больших макетов нашлось неожиданно, ведь в фотошопе целых два дизайнера, днями и ночами придумывающих новые фичи и оптимизирующих интерфейс. Хочется верить, что когда-нибудь дооптимизируют и специализируют его под наши нужды, а пока можем использовать первые результаты их трудов: генератор графических ресурсов и связанные смарт-объекты.

Все страницы и повторяющиеся элементы (выпадающие меню, всплывающие окна и т.д.) я храню в отдельных файлах.

Все страницы, всплывающие окна и «сквозные» элементы в отдельных файлахВсе страницы, всплывающие окна и «сквозные» элементы в отдельных файлах

Для автоматической генерации всех превьюшек — создаю отдельный файл (я называю его «preview-generator.psd»), в который встраиваю все исходники страниц с помощью связанных смарт-объектов.

File → Place Linked или перетащите файл в фотошоп с зажатой клавишей AltFile → Place Linked или перетащите файл в фотошоп с зажатой клавишей Alt

Каждое состояние экрана — это отдельная папка с именем, вроде «01-страница-состояние.jpg».

Включаем генератор графических ресурсов в меню…

File → Generate → Image AssetsFile → Generate → Image Assets

…и мгновенно получаем обновлённые превьюшки всех страниц, готовых к отправке в инвижн.

Сгенерированные джипеги в автоматически-созданной папкеСгенерированные джипеги в автоматически-созданной папке

Позже
УберЛайн — плагин для подчёркивания текста