05.Понятие слоя в Photoshop

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

Панель слоёв

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

Давайте создадим новый документ и на практике разберемся в преимуществах и сущностях На данный момент, панель показывает нам, что в нашем документе имеется всего один слой, который называется "Фон" (Background).

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

Наш белый фон уже находится на фоновом слое, так что давайте добавим новый слой над фоновым для размещения нашего первого прямоугольника. Чтобы добавить новый, нажмите на кнопку «Создать новый слой» (Add new Layer), расположенную визу панели:

После чего сразу над фоновым появится новый слой. Photoshop автоматически именует его "Слой 1" (Layer 1). Если мы посмотрим на миниатюру слева от имени нового слоя, мы увидим, что она заполнена шахматными бело-серыми клетками, которые в Photoshop обозначают, что слой пустой (прозрачный):

Обратите внимание, что "Слой 1" выделен в панели отдельным цветом (в более ранних версиях – синим, серым, фиолетовым). Это означает, что в настоящее время он является активным. Все, что в этот момент мы добавляем к документу, будет добавлено именно на "Слой 1", а не на фоновый слой под ним.

Давайте добавим наш первый прямоугольник. На панели инструментов выберите инструмент "Прямоугольная область" (Rectangular Marquee Tool), если он на данный момент не выбран, и создайте прямоугольное выделение, затем залейте его красным цветом.

Теперь давайте посмотрим на панель. На миниатюре предварительного просмотра мы видим, что фоновый слой по-прежнему заполнен белым цветом, а красный прямоугольник на этот раз добавлен на "Слой 1", так что он полностью отделен от белого фона:

Теперь давайте добавим второй прямоугольник, и разместим его также на собственном слое, для этого надо создать ещё один новый слой, также кликнув по значку «Создать новый слой» (New Layer). Второй новый слой появился на этот раз выше "Слой 1". Photoshop по умолчанию создаёт новый слой непосредственно над активным слоем.

Примечание. Если Вы зажмёте клавишу Ctrl и кликните по значку "Добавить новый слой", то Photoshop создаст новый слой под активным.

Photoshop снова автоматически именовал новый слой, на этот раз "Слой 2 (Layer 2)":

Обратите внимание, теперь новый "Слой 2".

Теперь создайте зелёный прямоугольник с помощью прямоугольного выделения и заливки.

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

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

Из этого следует, что если мы хотим изменить изображение так, чтобы красный перекрывал зелёный, нам следует изменить расположение слоёв в панели. Для этого просто нажмите на "Слой 1", чтобы выделить его и сделать активным слоем, а затем, удерживая левую клавишу мыши, переместите его вверх до горизонтальной линии (на рис. помечена жёлтым), когда линия подсветится, отпустите кнопку мыши:

Теперь красный прямоугольник находится над зелёным в палитре:

И в рабочем документе уже красный перекрывает зелёный, а не наоборот, как это было раньше:

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

Слои сохраняют элементы изображения по отдельности, поэтому мы можем работать с каждым элементом нашего изображения индивидуально, не затрагивая другие. Мы можем изменить положение объектов друг над другом, как мы только что сделали. Мы можем переместить какой-либо отдельный элемент изображения, при этом не затрагивая другие. Мы можем бы изменить цвет отдельного объекта без изменения любых других цветов в изображении. Мы можем изменить цвет глаз, отбелить зубы, размыть фон, оставляя объекты переднего плана чёткими. Практически невозможно описать все возможности для творчества, которые дают слои в Photoshop.

Работа со слоями:

Как мы разобрались с Вами ранее, в Photoshop-файле всё содержимое расположено слоями.

Для того чтобы слой можно было выделить по клику необходимо сделать следующие настройки:

Выбрать элемент Move (M) и в верхней части экрана выбрать Автовыбор и Слой

Есть несколько типов слоев - текст, картинки, смар-тобъект, вектор

Текст – это текстовый слой, который можно редактировать

Картинка – это вставленное изображение

Смарт-объект – содержит оригинальное связанное изображение. (например, на макете изображение может отображаться круглой формы, а смарт-объект содержать оригинальную квадратную картинку. При этом для экспорта мы используем оригинальную картинку, а все манипуляции с формой, обводкой, тенью и т.д. производим в css). О смарт-объектах мы поговорим с вами немного позже.

Слои могут объединяться в группы

Группам обычно дают осмысленные названия, которые соответствуют элементам или разделам сайтов.

Если мы посмотрим на скрин выше, мы увидим, что макет состоит из нескольких груп слоёв, которые соответствуют частям сайта (Menu, Slider, About и т.д.)

В макете есть несколько типов слоёв (текстовые слови, слои с изображениями, смарт-объекты)