palitra-kompozitsiya-sloev-v-fotoshope
Автор статьи:

Палитра Композиция слоев в фотошопе: запись различных версий документа


Композиция слоев запоминает состояние слоев на палитре: их видимость, расположение содержимого слоя, а также примененные стили слоя и режимы наложения. 

Открывается палитра через командное меню Окно:

Окно — Композиция слоев (Window — Layer Comps)

palitra-kompozitsiya-sloev-v-fotoshope

Интерфейс палитры вполне простой. Так элемент №1 — это кнопка Создать новую композицию слоев (Create New Layer Comp), проще говоря сделать подобие снимка текущего состояния палитры слоев. После этого снимок станет доступным в списке выбора — элемент №2.

Само собой, не обязательно, чтобы это был окончательный вариант композиции — вы всегда можете внести правки и перезаписать поверх снимка с помощью кнопки Обновить композицию слоев (Update) — элемент №3. Или удалить ненужную снимок — кнопка №4. С помощью стрелок под стрелкой №5, можно перемещаться по снимкам экрана вперед и назад.

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

novaya-kompozitsiya-sloev

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

Диалоговое окно содержит три настройки, которые можно включить или отключить:

  • Видимость (Visibility) — фиксирует текущий статус видимости слоев (значки глаза) независимо от того, видимы они или нет.
  • Позиция (Position) — фиксирует местоположение содержимого слоя. То есть, если вы передвинули содержимое слоя, то такое изменение фотошоп также может запомнить.
  • Вид (Стиль слоя) (Appearance) — фиксирует все наложенные на слой стилевые эффекты и режимы наложения.

Данная палитра получила широкое распространение у веб-дизайнеров, которые проектируют и рисуют будущий сайт в фотошопе.

Допустим, дизайнер придумал, чтобы на сайте были такие такие элементы как табы (вкладки) — это некий контентный блок с кнопками над ним, и, нажимая на эти кнопки, сайт меняет содержимое контентной части и это все работает без перезагрузки страницы и без средств Java-скрипта. Пример:

obrazets-paneli-vkladok

Как видите, контент первой вкладки нарисован, а значит все ясно, что тут должно быть. Но что находится внутри второй и третей вкладки? А ведь там может быть, что угодно!

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

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

А теперь все подробно и на практике

Как пользоваться Композицией слоев

Шаг 1

Начинаем с того места, когда первая вкладка уже разработана. Нужно ее зафиксировать. Для этого откройте палитру Композиция слоев и нажмите кнопку Создать новую композицию слоев

sozdat-kompoziyu-sloev-v-fotoshope

obrazets-paneli-vkladok

Шаг 2

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

Важно

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

soderzhimoe-vtoroy-vkladki-min

Сохраняем результат второй вкладки в Композицию слоев.

sozdanie-kompozitsii-dlya-vtoroy-vkladki

Шаг 3

Повторяем предыдущий шаг: рисуем третью вкладку и сохраняем ее.

tretya-vkladka-min

sozdanie-kompozitsii-dlya-tretey-vkladki

Шаг 4

Теперь, когда все нарисовано и сохранено по вкладкам, ваш PSD-файл имеет такую структуру:

kompozitsiya-sloev

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

obrazets-paneli-vkladoksoderzhimoe-vtoroy-vkladki-mintretya-vkladka-min


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

Скачать: PSD-файл к уроку "Композиция слоев"
PSD-файл с примером созданной композиции слоев. Откройте файл в фотошопе, затем сразу откройте палитру Композиция слоев. Щелкайте по "вкладкам" и смотрите как меняется отображение документа. Сравнивайте с тем что видите на палитре слоев.
Скачано: 99 раз, размер: 121.6 KB, дата обновления: 09 Янв 2017

Заметили ошибку в тексте - выделите ее и нажмите Ctrl + Enter. Спасибо!