Linked Smart Objects на службе Photoshop

Современный Photoshop мало что слышал о Responsive-дизайне (в народе RWD), в нем нет ни единого намека на то, что один и тот же макет может иметь несколько размеров. Именно поэтому мы очень часто именуем наши макеты схожим образом:

Homepage [Desktop].psd
Homepage [Tablet].psd
Homepage [Phone].psd

Внутри каждого из них находится адаптированный под отдельный брейкпоинт дизайн и сетка с направляющими. Отдельные обладатели мощных ЭВМ упаковывают все в один PSD на страницу. Такое тоже возможно.

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

Следуйте за мной…

В последней версии Photoshop СС мы получили два любопытных нововведения, которые смогут облегчить рабочий процесс дизайнера путем классической декомпозиции. Это ссылки (links) и изменяемые состояния ссылок (links layer comps).

Любой свой веб-проект я начинаю с дизайна сетки и определения брейкпоинтов, то есть тех диапазонов, в которых и будет жить определенный макет. Эта сетка погружается в отдельную группу, блокируется и всегда лежит сверху. Когда она мне нужна я ей пользуюсь.

Внутри группы разложены сетки под каждый брейкпоинт.

Но почти всегда возникает вопрос. Сетка одна, макетов много. Как не создавать ее дубликатов в каждом из документов? Разумнее было бы упаковать ее в отдельный PSD и разместить в каждом документе. Раньше это было невозможно.

В новом Photoshop CC мы сделаем это легко. Упаковываем группу в Smart Object:

Теперь преобразовываем Smart Object в ссылку и сохраняем на диске:

Вуаля! Теперь открываем новый файл и делаем Place Linked из меню File. Теперь наша сетка всегда с нами, при этом остается независимой от того, где размещена.

Однако, счастье было бы неполным, если бы не механизм Layer Comps. Layer Comps существуют уже давно, это состояния макета, механизм может тречить видимость слоев, их эффекты и позицию в документе. Создавая отдельный Layer Comps вы снимаете слепок с PSD документа и сохраняете в отдельной коробочке.

Стоит сделать несколько слепков для psd с сеткой. К примеру:

Состояния по порядку:

• Off — сетка скрыта
• Phone — сетка для телефонов
• Phone [Margins Only] — сетка скрыта, видны внешние маргиналии, полезно, когда совершается переход от одного брейкпоинта к другому.
• Tablet — сетка для планшетов
• Tablet [Margins Only] — сетка скрыта, только маргиналии
• Wide — широкая сетка для desktop
• Baseline Grid — базовая сетка для вертикального выравнивания

В новом Photoshop CC вы можете получить доступ ко всем этим состояниям из другого документа через панель Properties.

Крайне удобно использовать сетку в таком формате, наследуя ее сквозь весь дизайн. Любое изменение сетки будет автоматически отображено во всех ваших мокапах. В будущем может потребоваться расширение линейки брейкпоинтов, и декомпозиция снова вам поможет.