Правильная работа со слоями в фотошопе

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

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

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

Удаляем все лишнее

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

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

Cотни активных не подписанных слоев, десятки скрытых, хаотично разбросанные папки. Это, конечно, вполне, рабочие моменты. Но в итоговом варианте макета — все должно быть идеально.

Поэтому, первым делом нам нужно избавиться от пустышек (пустые слои без каких-либо элементов) и скрытых, не нужных слоев. Но тут есть небольшой подвох.

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

Для упрощения процесса поиска и удаления таких слоев я придумал небольшой хак.

Что бы разблокировать все слои нужно кликнуть на первый, а затем на последний АКТИВНЫЕ слои в панели слоев, зажимая при этом клавишу Shift. Это позволит создать выделение всех слоев, после чего следует нажать кнопку замка (блокировки слоя) два раза. Первый раз заблокирует все выделенные слои а второй разблокирует.

Примечательно то, что таким способом разблокируются все слои во всех папках. Это значительно экономит время и нервы.

Теперь, при помощи инструмента Move tool (V) и включенной галочкой Auto select выделяем весь макет (от левого верхнего угла, до правого нижнего), и нажимаем сочетание клавиш Ctrl+G (для mac os — cmd+G) — это объединит все активные не пустые слои в группу и оставит весь мусор за ней.

После этого удалаем мусор и разгрупировываем недавно сгрупированные слои, кликнув на папку в панели слоев правой клавишей мыши и выбрав пункт: ungroup layers.

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

Внимание! Нужно быть предельно внимательным при этой процедуре и не удалить таким образом скрытую папку каким-нибудь поп-апом.

Правила организации папок

Называть каждый слой уникальным именем — я считаю последней стадией. Это клиника и так делать не надо. Но распределить слои по папкам все же стоит.

Если у вас есть всплывающие окна, поп-апы и прочие подобные элементы — их нужно вынести за пределы основного контейнера. Структура слоев в таком случае должна выглядеть примерно так:

С папкой pop-up все понятно. Слои в ней могут распологаться хаотично. Auto select верстальщику в помощь.

А вот папку container давайте разберем поподробнее.

Она должна состоять из подпапок. Подпапки — это основные блоки сайта, например Меню, Контент, Сайдбар.

Каждая подпапка должа состоять из множества папок.

К примеру, мы делаем дизайн блога. Подпапка Сайдбар будет состоять из следующих папок:

Подписка, популярные записи, новые записи, архив и так далее.

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

Таким образом можно очень быстро организовать все слои. Особенно, если не перетаскивать по одному слою, а воспользоваться инструментом Move tool и его функцией auto select

Для пущей важности можно обозначить все папки разными цветами, но кто-то сравнивал это с флагом ЛГБТ. Я обычно помечаю цветом только ховеры.

Резюмируя сказанное

И так. Давайте подведем итог вышесказанного:

1. Избавляейтесь от пустых и неактивных слоев.
2. Группируйте все слои в папки, соблюдая иерархию
3. Правильно называйте папки
4. Не заморачивайтесь с переименованием слоев
5. Помечайте цветом важные папки
6. Пользуйтесь auto select

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

в заключении

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