Наложение и порядок слоёв


Содержание

Описание режимов наложения слоев в фотошопе

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

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

В программе фотошоп есть уйма мест, где можно столкнуться с ними, например:

  • в диалоговом окне Стиль слоя, где вы можете добавить такие эффекты как тень, свечение и т.д.;
  • в диалоговых окнах некоторых фильтров;
  • в диалоговых окнах Заполнить и Выполнить обводку;
  • на панели Параметры, когда используется инструмент, которым можно рисовать — Кисть, Заливка, Восстанавливающая кисть, Карандаш, Штамп, Архивная кисть, Градиент, Размытие, Резкость и Палец;
  • в диалоговых окнах Вычисления и Внешний канал.

При работе с режимами наложения удобно рассматривать цвета, входящие в состав слоев, как состоящие из трех элементов:

  • базового цвета — с которого вы начали работу, тот, который уже есть в изображении;
  • наложенного цвета — который вы добавляете к базовому цвету, добавив в документ изображение на новом слое или рисуя инструментом Кисть на другом слое (отличном от базового);
  • результирующего цвета — который получается после смешения базового и наложенного цветов в определенном режиме наложения.

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

Рассмотрим все виды режимов наложения и как их применение влияет на изображение в целом

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

Режимы наложения Обычный и Растворение

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

Обычный (Normal)

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

Сочетание клавиш: Shift+Alt+N

Затухание или Растворение (Dissolve)

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

Сочетание клавиш: Shift+Alt+I

Затемняющие режимы наложения

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

Затемнение (Darken)

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

Сочетание клавиш: Shift+Alt+K

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

Умножение (Multiply)

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

Сочетание клавиш: Shift+Alt+M

Затемнение основы (Color Burn)

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

Сочетание клавиш: Shift+Alt+B

Линейный затемнитель (Linear Burn)

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

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

Сочетание клавиш: Shift+Alt+A

Темнее (Darker Color)

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

Осветляющие режимы наложения

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

Замена светлым (Lighten)

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

Более темные компоненты игнорируются, так что он превосходно подходит для удаления черного фона.

Сочетание клавиш: Shift+Alt+G

Экран (Screen)

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

Сочетание клавиш: Shift+Alt+S

Осветление основы (Color Dodge)

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

Сочетание клавиш: Shift+Alt+D

Линейный осветлитель (добавить) (Linear Dodge (Add))

Он осветляет изображение, увеличивая яркость. Объединяет в себе режимы Экран и Осветление основы, и поэтому осветляет изображение сильнее, чем любой другой режим наложения. Но поскольку он склонен к перекрашиванию всех светлых пикселов в белый, то получившееся изображение может выглядеть неестественно.

Сочетание клавиш: Shift+Alt+W

Светлее (Lighter Color)

Фотошоп сравнивает базовый и наложенный цвета и оставляет только более светлые пиксели. В отличие от Замена светлым, он не объединяет никаких цветов, а лишь оставляет более светлые.

Освещающие режимы наложения

В отличие от осветляющих и затемняющих режимов, освещающие режимы наложения немного затемняют и немного осветляют ваше изображение, увеличивая контрастность. Их нейтральный цвет — 50-процентный серый, который не влияет на результирующий цвет; он просто исчезает.

Перекрытие (Overlay)

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

Сочетание клавиш: Shift+Alt+O

Мягкий свет (Soft Light)

Как можно предположить из названия, он освещает изображения мягким светом. В результате светлые области становятся светлее (как если бы они были осветлены), а темные — темнее (как если бы они были затемнены). Рисуя черным цветом, вы затемните лежащее ниже изображение, рисуя белым — осветлите.

Сочетание клавиш: Shift+Alt+F

Жесткий свет (Hard Light)

Объединяет в себе Умножение и Экран: если наложенный цвет светлее 50-процентного серого, то изображение становится светлее; если наложенный цвет темнее — изображение становится темнее. Если вы реально хотите выделить детали изображения, можно использовать данный режим совместно с фильтром Тиснение (Emboss).

Сочетание клавиш: Shift+Alt+H

Яркий свет (Viv >Фотошоп применяет цветовое затемнение для повышения контрастности цветов, которые темнее 50-процентного серого и цветовое осветление для уменьшения контрастности цветов, которые светлее 50-процентного серого. Используйте этот режим, если нужно «выдавить» изображение или добавить к нему текстуру.

Сочетание клавиш: Shift+Alt+V

Линейный свет (Linear Light)

Объединяет режимы Линейный затемнитель и Линейный осветлитель: первый используется для уменьшения яркости цветов, которые темнее 50-процентного серого; второй — для увеличения яркости цветов, которые светлее 50-процентного серого.

Сочетание клавиш: Shift+Alt+J

Точечный свет (Pin Light)

Объединяет режимы Замена светлым и Затемнение: если наложенный цвет светлее, чем 50-процентный серый, то области, окрашенные в базовый цвет более темный, чем 50-процентный серый, меняют цвет на наложенный; а те пиксели, которые цвет которых светлее 50-процентного серого, не изменяются вообще. Но если наложенный цвет темнее 50-процентного серого, он заменяет цвет более светлых областей на наложенный, а более темные области не изменяются. Этот режим используется редко, так как дает странные результаты (а может не давать их вообще), но поэкспериментировать с ним — особенно в сочетании с фильтрами — все же стоит.

Сочетание клавиш: Shift+Alt+Z

Жесткое смешение (Hard Mix)

Резко уменьшает количество цветов в изображении (эффект, известный как постеризация), поэтому в итоге вы получаете крупные области, окрашенные в очень яркие красный, зеленый и синий цвета. В этом режиме фотошоп анализирует сумму значений RGB-каналов наложенного цвета и прибавляет их к основному цвету. Например, если значение красного, зеленого или синего каналов равно 255, то оно прибавляется к базовому цвету; если же значение меньше 255, то прибавляется 0. Действие режима можно ослабить, уменьшая значение Заливка в верхней части палитры слоев.

Сочетание клавиш: Shift+Alt+L


Сравнительные режимы наложения

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

Разница (Difference)

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

Сочетание клавиш: Shift-t-Alt+E

Исключение (Exclusion)

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

Сочетание клавиш: Shift+Alt+X

Режимы наложения на основе цветового тона

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

Цветовой тон (Hue)

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

Сочетание клавиш: Shift+Alt+U

Насыщенность (Saturation)

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

Сочетание клавиш: Shift+Alt+T

Цветность (Color)

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

Сочетание клавиш: Shift-bAlt+C

Яркость (Luminosity)

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

Сочетание клавиш: Shift+Alt+Y

Вычитание (Subtract)

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

Разделить (Div >Делит 8-разрядное значение от каждого слоя друг на друга.

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

Секреты режимов наложения

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

Одной из последних возможностей, попавших в руки веб-дизайнеров является обработка изображений с помощью режимов наложения (смешивания). Режимы наложения позволяют с легкостью раскрашивать изображения и добавлять текстуру, а также применять другие эффекты без необходимости лишний раз открывать графический редактор. Это экономит время, так как позволяет избежать повторной обработки графики при внесении изменений, а также предотвращает проблемы при необходимости еще раз применить настройки, созданные несколько месяцев назад. Вместо этого нужные графические режимы можно задавать, применять и поддерживать с помощью нескольких деклараций CSS.

Описание режимов наложения

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

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

  • прозрачность
  • текстуризация
  • раскрашивание

Эффект прозрачности с multiply

Начнем с режима наложения “умножение” ( multiply ). Математическую формулу этого режима можно представить так:

Все. Мы действительно умножаем цвет верхнего слоя ( a ) на цвет нижнего слоя ( b ), чтобы получить итоговый цвет и ( x ), именно поэтому режим называется умножение.

Но как умножать цвет? Это работает так: на экранах устройств цвета создаются на основе трех каналов: красного, зеленого и синего. У каждого из этих каналов есть значение яркости — число, определяющее, насколько сильно он будет светить. Ну, а раз у нас есть числа, мы можем их умножать!

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

Это все хорошо, но что с этим можно сделать на практике?

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

Два слоя без смешивания

Два слоя в режиме смешивания multiply

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

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

Пыль и царапины с помощью screen

Функциональная противоположность multiply называется screen (экран). Минутку, а разве противоположность умножению это не деление? Ответ опять лежит в области математики:

x = 1 − (1 − a) × (1 − b)

Этот режим не называется “деление”, потому что на самом деле в нем мы умножаем еще больше! В данном случае мы умножаем инвертированное значение слоя a на инвертированное значение слоя b и затем инвертируем результат. В итоге белые пиксели на верхнем слое полностью непрозрачны, а черные пиксели наоборот прозрачны. Каждый оттенок между слоями осветляет нижний слой.

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

Слои для смешивания: слой с лавандовым цветом и слой с пылью и царапинами (с сайта Spoon Graphics)

Результат смешивания фотографии с этими слоями в режиме screen

Раскрашивание с помощью hue и color

У всех режимов смешивания есть потенциал к изменению цвета графики, но особо полезны для раскрашивания два из них: цветовой тон ( hue ) и цветность ( color ).

Цветовой тон hue

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

Цветность color

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

Красно-коричневое наложение делает пиксели исходника красновато-коричневыми, также как и в режиме hue , но оно также придает им одинаковую насыщенность

Такого же эффекта можно достигнуть, изменив порядок слоев, поместив цветовой слой под фотографией и смешав их в режиме luminosity .

Кроссбраузерное наложение

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

Управление цветом это сложный мир и хотя W3C рекомендует использовать по умолчанию профиль sRGB, подход производителей браузеров различается — каждый браузер рендерит цвета согласно своим прихотям. Например, в Chrome рендеринг изображений основывается на “неуправляемом” цветовом пространстве, если в изображении не прописан цветовой профиль. Firefox работает также, но глубоко в его конфигурационных настройках запрятан флаг, устанавливающий sRGB по умолчанию для изображений с не указанным профилем. А Safari действует почти как Photoshop, так как графический API Apple основан на Adobe Postscript. Да, даже здесь есть свои отличия.

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

И еще — не забывайте тестировать на “живых” устройствах, а не только в режиме эмуляции, чтобы понять как хардверные ограничения (типа нехватки оперативной памяти) влияют на ваш сайт. Некоторые режимы наложения могут вызвать задержки при прокрутке страницы. И если вы добиваетесь гладкости 60 кадров в секунду, учитывайте это при своем выборе.

Применение режимов наложения

Режимы наложения можно применить с помощью пары свойств CSS: background-blend-mode и mix-blend-mode , также нам может пригодиться свойство isolation .

Наложение фоновых изображений

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

Попробуем добавить пыль и царапины на фото. (Обратите внимание, что код предназначен для конкретных примеров).

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

Иногда у вас может возникнуть потребность использовать цвет в качестве наложения. К сожалению, свойство CSS background-color ограничено одним цветом и это всегда будет самый нижний слой, независимо от того, объявлен ли он в начале списка фонов или нет. Рекомендация W3C предлагает нотацию image() , позволяющую использовать цвет в качестве изображения, но на данный момент это не поддерживается ни в одном браузере. К счастью, у нас есть обходной путь: так как градиенты в CSS рассматриваются как изображение, мы можем обмануть браузер, подсунув ему однотонный цвет с двумя идентичными точками останова.

Итак, осветлим изображение, как мы делали это ранее и изменим его цвет на сепию.

Наложение элементов HTML

Свойство mix-blend-mode задает режим наложения для элементов HTML, поэтому элементы на перекрывающихся слоях будут использовать его при смешивании с нижними слоями. Давайте опять добавим заглавие к изображению, удалив нежелательный белый фон заглавия с помощью режима multiply . Я также сделал элемент с изображением немного прозрачным, чтобы улучшить наложение цветов.

А вот пример использования mix-blend-mode для наложения нескольких элементов.


Использование mix-blend-mode для наложения нескольких элементов

Если вы не хотите, чтобы элемент в нижнем слое смешивался с каким-либо из верхних слоев, их можно отделить друг от друга с помощь третьего свойства: isolation . Это используется для наложения нескольких элементов без воздействия на базовый слой. Каждому из дисков в нашем примере задано mix-blend-mode в значение screen , что вынуждает их создавать новые цвета при пересечении. Но мы хотим, чтобы фотография горы не смешивалась с ними.

Использование isolation для предотвращения смешивания нижнего слоя с остальными

Учитывайте, что mix-blend-mode применяется к элементу целиком, вместе со всеми его потомками. Это аналогично воздействию свойства opacity , делающему невидимым не только контейнер, но и его содержимое. Точно также и mix-blend-mode смешивает и контейнер, и содержимое.

Для следующего примера я немного поработал в Photoshop и создал набросок дизайна для вымышленного производителя лыжного оборудования Masstif. В этом наброске я создал блок с небольшим текстом и логотипом. Я смешал этот блок в режиме осветления цветов ( color-dodge ). Это дает четкий контраст по отношению к фону и помогает лучше сочетать текст и графику.

При попытке воспроизвести это средствами HTML и CSS, я рассчитывал, что работать будет следующий код:

Но в результате содержимое смешалось с контейнером так, как на следующем изображении.

Также как отдельные проблемы с прозрачностью частично решаются за счет альфа-каналов фона, здесь мы тоже можем решить проблему с mix-blend-mode путем перемещения того, что возможно в фон. Вместо создания блока и наложения его с помощью mix-blend-mode , будет работать прием с конвертацией блока в background-image . Это не является решением для всех случаев, но попытаться стоит. Другого способа изолировать дочерние узлы от содержащего их смешиваемого элемента нет.

Поддержка в браузерах

Режимы наложения поддерживаются в большинстве основных браузеров, кроме Internet Explorer и Edge. Некоторый оптимизм есть в том, что реализация режимов наложения для Edge находится в стадии рассмотрения, а этот браузер уже поддерживает все режимы наложения для SVG, что дает шанс на скорую реализацию. Вы можете повлиять на процесс, проголосовав на сайте пожеланий для разработчиков Edge.

Также есть проблема с Safari — он не поддерживает режимы hue , saturation , luminosity и color .

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

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

Режимы наложения слоев

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

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

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

Уже из названия этого режима становится понятно, что это обычное состояние слоя. Здесь нет взаимодействия между слоями (активным и нижестоящим).

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

Darken (Замена темным)

Этот режим проявляет только темные оттенки верхнего слоя на нижнем. Его используют для наложения одного слоя на другой, если вы хотите затемнить, то лучше использовать режим следующий по списку — Multiply.

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

Colour burn (Затемнение основы)

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

Linear burn (Линейный затемнитель)

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

Lighten (Замена светлым)

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

Этот режим производит те же вычисления, как и режим «Умножение», но использует при этом инвертированные значения, чтобы проявить конечный результат. Этот режим осветляет изображение. Его можно применять для осветления темных фотографий, путем дублирования и установления верхнему слою режима «Осветление»

Colour dodge (Осветление основы)

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

Linear dodge (Линейный осветлитель)

То же самое, что предыдущий режим, но здесь цвета сочетаются путем повышения яркости.

Этот режим равномерно смешивает цвета обоих слоев, хорошо поддается изменениям прозрачности. Он отсеивает светлые части и умножает темные. При низком уровне прозрачности, он похож на «Нормальный» режим, но с более интенсивными цветами. Хорошо подходит для наложения текстуры на изображение.

Soft light (Мягкий свет)

Этот режим осветляет и затемняет цвета изображения в зависимости от цвета верхнего слоя. Это почти то же самое, что фильтр рассеянный свет. Хорошо подойдет для корректировки тонов, а понижение прозрачности даст еще более изысканный эффект.

Hard light (Жесткий свет)

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

Vivid light (Яркий свет)

Этот режим затемняет или осветляет цвета изображения в зависимости от того, какие цвета на верхнем слое. Кажется, что изображению добавили различные значения контраста.

Linear light (Линейный свет)

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

Pin light (Точечный свет)

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

Hard Mix (Жесткий микс)

Дает похожий результат, контраст здесь на максимуме. Получается очень яркое изображение, причем крупными кусками.

Подходит для создания различных эффектов. Он реверсирует тона и цвета, яркость здесь зависит от разницы пикселей.

Более мягкая версия режима «Разница», контраст небольшой.

Hue (Цветовой тон)

Здесь, цвета верхнего слоя смешиваются с насыщенностью и яркостью нижнего слоя. Это дает сильный эффект. Альтернативный режим — это «Цветность».

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

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

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

Теперь, для закрепления материала советую вам провести эксперимент. Возьмите фото, создайте новый слой и залейте его разноцветным градиентом. Затем прогоните по всем режимам и посмотрите, похожи определения режимов на ваш результат или нет.

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: На стипендию можно купить что-нибудь, но не больше. 8983 — | 7233 — или читать все.

188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно

Фотошоп как на одном слое проявить другой. Наложение и порядок слоёв

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

Введение

Layers (Слои) в Photoshop напоминают стопку прозрачных листов. Представьте себе, что каждый отдельный слой это стекло, на котором отображена какая либо фигура, если поверх наложить второе стекло с другой фигурой, то получится уже две фигуры, три стеклянных листа — три фигуры и тд.

Панель Layers:

Работать со слоями можно как через меню Layer, так и через отдельную панель Layers:

По умолчанию панель Layers отображена в нижнем правом углу редактора. Если она отсутствует, то зайдите в меню Window (Окно) и выберите строку Layers (Слои). Или же просто нажмите клавишу F7:

Создание нового слоя

Для начала и нажмите по пиктограмме снизу Сreate new Layer (Создать новый слой). Или же комбинацией клавиш Shift+Ctrl+Alt+N:

Итак, у нас есть два пустых слоя. Нижний залит белым однотонным цветом и называется Background, а второй, только что созданный нами — прозрачный и по умолчанию называется Layer 1:

Сейчас Layer 1 подсвечен синим цветом. Это говорит о том, что он активен и все изменения которые мы проделаем на холсте будут отображены только на нем. Что бы лучше это понять, проделаем простой эксперимент, выберите инструмент Brush (Кисть) и нарисуйте на холсте что угодно, на пример вот такую простую звезду:

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

Давайте создадим еще один слой (Shift+Ctrl+Alt+N) и добавим на него еще одну фигуру:

Теперь у нас есть два слоя и на каждом из них по одной фигуре. Верхняя фигура перекрывает нижнюю. И это логично ведь мы же добавили ее после того, как нарисовали звезду. Но фотошоп позволяет нарушить закон последовательности. Попробуйте опустить слой Layer 2 под Layer 1, как показано ниже и вы сразу же заметите результат. Сделать это очень просто — зажмите левую кнопку мыши и просто передвиньте слой вниз:

В результате этого действия, вы заметите как первая фигура стала перекрывать вторую:

Отображение и скрытие слоя

Если вы внимательно присмотритесь на панель Layers, то слева от каждого слоя обнаружите пиктограмму с изображением глаза. Эта пиктограмма позволяет включить и выключить отображение слоя:

Попробуйте нажать на одну из пиктограмм и наблюдайте за результатом:


Управление непрозрачностью

Вот таким простым способом можно на время отключить отображения любого слоя.

Двигаемся дальше. В верхней части палитры Layer обратите внимание на параметры Opacity (непрозрачность) и Fill (заполнение). Благодаря им можно менять прозрачность слоя. Например Opacity со значением в «100%» означает полную видимость, а значение «0» полную невидимость:

На первый взгляд кажется что параметры Opacity и Fill одинаковы. Но это только кажется. Fill отличается тем, что он влияет только на прозрачность пикселей слоя, а Opacity влияет и на пиксели и на эффекты.

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

и переименуйте его:

Представьте что вы работаете над большим проектом, где присутствуют десятки слоев. В таком количестве очень легко запутаться даже профессионалу. Но фотошоп позволяет облегчить работу дизайнеру благодаря созданию так называемых групп. Например в проекте есть 5 слоев с набросками и 10 с контурами или же какими либо фильтрами. Их неплохо бы было рассортировать по группам. Создать группу очень просто, для этого с зажатой клавишей Shift выберите несколько слоев и потяните их на пиктограмму Create a new group (Создать новую группу):

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

Создание дубликата (копии) слоя

Если вам нужно создать точную копию слоя, то просто выберите его и нажмите Ctrl+J. Появится точный дубликат:

Режимы наложения

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

Normal (Нормальный)

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

Dissolve (Растворение)

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

Darken (Замена темным)

Проявляет темные оттенки слоя.

Multiply (Умножение)

Один из самых распространенных режимов в фотошопе. В этом режиме цвет становится насыщеннее и темнее. Отлично подойдет для затемнения пересвеченных фотографий.

Color Burn (Затемнение основы)

Позволяет повысить контрастность и насыщенность цвета. Помимо этого Color Burn еще и немного затемняет оттенки.

Linear Burn (Линейный затемнитель)

Затемняет нижний слой, и проявляет цвет верхнего. Так же уменьшает и яркость.

Lighten (Замена светлым)

Создает противоположный эффект режиму Darken. Проявляет светлые пиксели.

Screen (Осветление)

Хорошо подходит для осветления изображения.

Colour dodge (Осветление основы)

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

Linear dodge (Линейный осветлитель)

Дает такой же эффект как и предыдущий режим, но теперь цвета сочетаются повышая яркость.

Overlay (Перекрытие)

Этот режим равномерно смешивает цвета обоих слоев. Он не влияет на светлые части и умножает темные. Неплохо подходит для какой нибудь текстуры.

Soft Light (Мягкий свет)

Этот режим осветляет и затемняет цвета в зависимости от цвета верхнего слоя. Неплохо подойдет для коррекции тонов.

Hard light (Жесткий свет)

По свойствам похож на Soft light, но менее контролируем и поэтому почти не используется. Затемняет, если наверху темное изображение и осветлять если светлое, при этом повышая контрастность.

Vivid Light (Яркий свет)

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

Linear Light (Линейный свет)

Результат зависит от цветов верхнего слоя. Если верхний яркий, то нижний станет светлее, если темный, то темнее.

Pin Light (Точечный свет)

Дает различные интересные результаты, работает путем перемещения цветов в зависимости от темных или светлых тонов

Hard Mix (Жесткое смешение)

Максимально повышает контраст, делая изображение очень ярким.

Difference (Разница)

Смешиваясь с белым цветом приводит к инвертированию цвета. С темными цветами данный режим не работает

Exclusion (Исключение)

Похож на режим Difference, но дает меньшую контрастность.

Hue (Цветовой тон)

Цвета верхнего слоя смешиваются с яркостью и насыщенностью нижнего, что дает довольно сильный эффект.

Saturation (Насыщенность)

Хорошо подходит когда слою нужно принять цвет или текстуру другого.

Colour (Цветность)

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

Luminosity (Свечение)

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

Практика

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

Для начала выберете любую фотографию…

И откройте ее в фотошопе…

Создайте новый слой…

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

Растяните изображение по нужному размеру и не забудьте нажать Enter! Переименуйте слой…

Теперь поработаем с режимами наложения…

Для практики поиграйте с разными режимами, пока не поймете какой подходит лучше

Я установил Soft Light (Мягкий свет) и с непрозрачностью в 75%…

Не будем останавливаться на достигнутом, добавим еще один слой с изображением и придадим ему тип смешивания по вкусу…

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

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

Рис. 3.51. Карты рядом друг с другом

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Рис. 3.53. Воображаемые координаты веб-страницы

Наложение и порядок слоёв


Год завершается. Пора подводить итоги и делать подарки. Главный итог работы в этом году: на основе материала семинаров сделаны первая и вторая части курса «Практическая цветокоррекция». В связи с этим мы отправили в архив все семинары, кроме «Основ цветокоррекции». Туда отправилось и отдельное занятие по режимам наложения.

Вот оно и будет подарком, только не разовым, а долгоиграющим. Год назад, после небольшой словесной перепалки, я решил не жадничать уже выложил конспекты ко всем семинарам (ссылки на скачивание есть на соответствующих страницах сайта www.fotoproekt.ru). А здесь я начинаю выкладывать более подробные статьи, написанные для журнала «Фотомастерская».

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

Что такое режимы наложения

В оригинальной (английской) версии они называются Blending Modes. И, строго говоря, переводятся на русский как «режимы смешивания». Режим задает алгоритм, по которому смешиваются цвета исходного и накладываемого изображений для получения результирующего. Но русский термин «смешивание» прочно закрепился за методикой смешивания каналов и инструментом Channel Mixer.

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

Режимы наложения используются инструментами ручного редактирования: кисть (Brush), карандаш (Pencil), штамп (Stamp), историческая кисть (History Brush), градиент (Gradient), размытие (Blur), резкость (Sharpen), палец (Smudge) и их разновидностями; командами: Fade. Apply Image. Calculations. Но самым серьезным инструментом они становятся при использовании со слоями.

Надо заметить, что результат рисования в отдельном слое (вставка в него картинки) с последующим изменением режима наложения не всегда совпадает с непосредственным рисованием на исходном изображении (вставке в него картинки при помощи команды Apply Image. или команд Paste и Fade Paste) с использованием инструмента в соответствующем режиме. Отличия возникают в областях, где кисть имеет прозрачность. Однако они невелики, а работа со слоями имеет много плюсов.

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

Для чего они нужны

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

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

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

Для чего нужны режимы наложения? Если сказать коротко — для того, чтобы сэкономить наше время. С их помощью можно производить коррекции, нереализуемые при помощи стандартных корректирующих инструментов Photoshop. Причем, делать это быстро, без нудного ручного рисования масок. Или делать локальную коррекцию быстрее и проще, чем другими инструментами.

Какие бывают режимы наложения

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

Обычные (Normal, Dissolve).
Результирующий цвет получается усреднением исходного и корректирующего.

Затемняющие (Darken, Multiply, Color Burn, Linear Burn, Darker Color).
Корректирующее изображение затемняет (как минимум, не осветляет) исходное.
Список построен по увеличению визуальной степени воздействия.

Осветляющие (Lighten, Screen, Color Dodge, Linear Dodge, Lighter Color).
Корректирующее изображение осветляет (как минимум, не затемняет) исходное.
Список построен по увеличению визуальной степени воздействия.

Контрастные (Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Hard Mix).
Корректирующее изображение затемняет или осветляет исходное в зависимости от собственной яркости.
В основном список построен по увеличению визуальной степени воздействия.

Сравнительные (Difference, Exclusion).
Результат зависит от разницы между исходным и корректирующим изображением.

Покомпонентные цветовые (Hue, Saturation, Color, Luminosity).
Результат получается за счет сочетания цветового тона, цветовой насыщенности и яркости, взятых по отдельности с исходного или корректирующего изображения.

Можно применить и другую классификацию. Все режимы делятся на две группы: поканальные (отмечены серым) и композитные (отмечены красным). Для композитных режимов результат в отдельном канале зависит от содержимого всех каналов исходного и корректирующего изображения.

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

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

Почему приходится заниматься самостоятельным анализом

Да потому, что нормального подробного описания алгоритмов работы режимов наложения нигде нет. Вообще нигде. Книги и Интернет пестрят невразумительными фразами: «…этот режим работает так же как предыдущий, только еще сильнее…», или: «…в этом режиме происходит затемнение основы изображения».

А зачем тогда было создавать предыдущий? И что является «основой» изображения? Это сопровождается такими же невразумительными и малоиллюстративными примерами наложения друг на друга разных картинок и насыщенных цветных плашек.

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

Отдельно хочу сказать пару слов про широко распространенное выражение «интуитивно понятно». Это выражение очень напоминает лепет буфетчика театра Варьете: «Осетрину прислали второй свежести». А ответ Воланда — «Голубчик, вторая свежесть — это вздор! Свежесть бывает одна — первая, она же и последняя. А если осетрина второй свежести, то это означает, что она тухлая!» — можно распространить и на термин «понимание».

При рассмотрении любого вопроса у человека может быть всего два состояния: «понятно» (иногда про это говорят «абсолютно понятно» или «кристально ясно», желая отделить от замаскированного непонимания) и «непонятно» (тогда в качестве маскировки употребляют слова «интуитивно понятно», «в целом понятно» и т.п.). Будьте честными перед собой, не прячьтесь за словоблудием!

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

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

Методика анализа

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

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

Корректирующее (накладываемое) изображение. Такой же клин, только яркость возрастает снизу-вверх. Для каждой плашки справа указана ее яркость. Эта информация будет оставаться неизменной. Слева будет указываться параметр, наиболее информативный для каждого режима: отнормированная яркость, отклонение яркости от белого или средне серого и т.п.

Наложив эти картинки друг на друга, мы получим клетчатую доску, уникальную для каждого режима наложения. Она и послужит основой для анализа. Чтобы вам было проще ориентироваться на ней, я ввел координатную сетку аналогичную шахматной. На иллюстрации поле J(64) отмечено зеленым, диагональ A(0)-K(255) — красным, область A(160)-D(255) — синим.

Записав яркость каждого поля доски, мы получим матрицу 9х9.

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

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

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

UPD.
Желающие самостоятельно поэкспериментировать с наложением таких клиньев могут сами построить их или скачать мой psd (79 кб)

На какие вопросы мы должны получить ответ

1. Существует ли для данного режима наложения нейтральный цвет и, если да, то какой?

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

2. Как изменяется степень воздействия по полному тоновому диапазону?

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

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

3. Как изменяется контраст в различных тоновых диапазонах?

Локальный контраст, или контраст отдельных областей изображения (объектов сцены), очень важен для нас. Именно благодаря ему передается светотеневой рисунок, то есть ощущение объема объектов. От понимания того, в каких тоновых диапазонах режим наложения повышает, понижает или оставляет без изменений контраст исходного изображения, зависит эффективность его применения в коррекциях, направленных на изменение локального контраста.

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

4. Соответствует ли уменьшение непрозрачности ослаблению воздействия?

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

Наглядным примером такой коррекции (правда, немного из другой области) является гауссово размытие. Если поверх исходной картинки лежит слой, к которому применен Gaussian Blur с радиусом 50, уменьшение его непрозрачности до 50% не даст результат аналогичный размытию исходника с радиусом 25.

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

5. Каким реальным фотопроцессам соответствует режим наложения?

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

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

Общей оговоркой для всех режимов наложения является гамма рабочего пространства. В реальном фотопроцессе все расчеты производятся с энергетической яркостью (гамма 1), в фотошопе мы работаем с перцептуальной яркостью (гамма 2,2). Если вы хотите не просто корректировать «на глаз», а постараться получить результат, максимально близкий к реальному аналогу, наложения должны совершаться с гамма 1.

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

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

6. Что происходит при наложении картинки самой на себя?

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

7. Как меняется результат, если поменять местами исходное и корректирующее изображение?

Ответ на этот вопрос может пригодиться для оптимизации послойной структуры файла.

8. Для чего может использоваться данный режим, каковы приемы и особенности его практического применения?

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

Не советую так поступать. Если разберетесь в теории и посмотрите приемы применения как иллюстрацию к ней — получите в руки мощный инструмент, который сможете осмыслено применить для решения любой стоящей перед вами задачи. Если просто просмотрите примеры применения — будете знать (пока не забудете), как обработать точно такие же изображения, как у меня.

Режим наложения Normal

Да, как бы странно это ни звучало, именно с него мы начнем разбираться с поканальными режимами наложения. В некоторых описаниях я встречал утверждение, что в режиме Normal изображения между собой не взаимодействуют. Действительно, о каком взаимодействии можно говорить, когда верхняя картинка полностью закрывает нижнюю? О взаимодействии, которое возникает при уменьшении непрозрачности накладываемого слоя.

Посмотрите на семейство кривых, оказывающих на изображение такое же воздействие, как наложение однотонной плашки яркости 64 с различной непрозрачностью. При непрозрачности 0% изображение не меняется, при непрозрачности 100% — вырождается в однотонную плашку. Этому случаю соответствует горизонтальная прямая на уровне 64.

Как фотошоп рассчитывает яркость при частичной непрозрачности? Предположим, некоторый пиксель картинки имел до коррекции яркость 192 (A). Его же яркость после коррекции с непрозрачностью 100% — 64 (B). Вычисляя яркость при уменьшении непрозрачности по пути из точки A к точке B, программа проходит на столько процентов, сколько мы выставим в поле Opacity. Так же рассчитывается финальная яркость остальных пикселей. То есть, при уменьшении непрозрачности кривая равномерно подтягивается к своему начальному положению.

Формула имеет один и тот же вид для 8-битного режима и отнормированной яркости, где: s — яркость исходного изображения; с — яркость корректирующего изображения; r — яркость финального изображения; k — значение параметра Opacity в процентах.

При изменении порядка наложения слоев результат сохраняется, если непрозрачность верхнего слоя изменить на 100-k.

В реальной жизни режиму Normal соответствует просмотр двух сцен через полупрозрачное зеркало. Сцена видимая на просвет — исходное изображение; сцена видимая в отражении — корректирующее изображение; коэффициент отражения зеркала — Opacity.


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

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

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

Что стоит за самоналожением картинки

Обещанный ответ на шестой вопрос. Вернитесь к клетчатой доске и посмотрите на диагональ A(0)-K(255). У ее полей есть одно общее свойство: яркости исходного и корректирующего изображения равны. Это случай наложения картинки самой на себя в соответствующем режиме.

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

Это не значит, что такой прием нельзя использовать. Но, применяя его, вы должны понимать, на что идете. И если уж решили им воспользоваться, не надо дублировать на новый слой все изображение. Просто создайте любой корректирующий слой (Curves, Layers и т.п.) с нулевыми настройками (не меняющий изображение).

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

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

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

Режимы наложения слоев и прозрачность в Adode Photoshop

Слои в фотошопе имеют два важных атрибута: режимы наложения слоев и прозрачность. Благодаря этим атрибутам слои не просто накладываются друг на друга, как в аппликации, но и смешиваются по разным алгоритмам. Это позволяет быстро и гибко управлять цветом изображения, регулировать прозрачность слоя, а значит, создавать новые образы и воплощать самые смелые идеи.

Управление режимами наложения слоев и прозрачностью

Часть атрибутов доступна непосредственно в палитре Layers (Слои). В первую очередь, это режим наложения и прозрачность.

Прозрачность регулируется двумя инструментами. Fill (Заливка) влияет на прозрачность только пикселей слоя, а вот Opacity (Непрозрачность) влияет на непрозрачность пикселей и эффектов слоя.

Управление режимами наложения слоев и прозрачностью в окне «Слои»

В нижней части панели расположены следующие инструменты:

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

Как работают режимы наложения слоев

Давайте рассмотрим, как работают режимы наложения слоев в трех разных ситуациях:

  1. Накладывается дубликат слоя
  2. Накладывается цвет
  3. Накладывается другое изображение, например, текстура

Normal (Нормальный)

Пиксели верхнего слоя непрозрачны и потому закрывают нижний слой. Изменение прозрачности верхнего слоя сделает его полупрозрачным и заставит смешаться с другим слоем. В этом примере прозрачность верхнего слоя 100%, кроме надписи — там 50%.

Dissolve (Растворение)

Комбинирует верхний слой с нижним, используя пиксельный узор. Эффекта не будет, если верхний слой имеет 100% непрозрачность. Уменьшите прозрачность для проявления эффекта.

Группа затемнения

Darken (Замена темным)

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

Darken (Замена темным)

Multiply (Умножение)

Затемняет все изображение. Полезен для увеличения плотности светов и средних тонов. Если верхний слой белый – изменений не произойдет.

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

Color Burn (Затемнение основы)

Позволяет получить более темное изображение с увеличенной контрастностью. Если верхний слой белый – изменений не произойдет.

Color Burn (Затемнение основы)

Linear Burn (Линейный затемнитель)

Более “сильная” комбинация режимов наложения Multiply и Color Burn, темные пиксели преобразуюся в черные. Если верхний слой белый – изменений не произойдет.

Темнее

Сравнивает суммарную величину значений всех каналов для совмещенного и основного цветов и отображает цвет с наименьшим значением. В режиме «Темнее» третий цвет не создается.

Группа осветления

Lighten (Замена светлым)

Режим противоположный режиму Darken, затемняет темные пиксели более светлыми.

Lighten (Замена светлым)

Screen (Экран)

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

Color Dodge (Осветление основы)

Действие похоже на Screen (Экран), но заметно сильнее в светлых областях за счет проявления более насыщенных и контрастных цветов нижнего слоя. Имитирует недодержку в фотографическом процессе.

Color Dodge (Осветление основы)

Linear Dodge (Линейный осветлитель)

Комбинация режимов Screen и Color Dodge; светлые значения преобразуются в белые. Если верхний слой черный – эффекта не будет.

Linear Dodge (Линейный осветлитель)

Группа увеличения контрастности

Overlay (Перекрытие)

Затемняет темные пиксели (Multiply) и осветляет (Screen) светлые, что приводит к увеличению контрастности без усечения теней и светов. Если верхний слой 50% серый – эффекта не будет.

Soft Light (Мягкий свет)

Комбинация режима Dodge, который осветляет светлые пиксели, и режима Burn, который затемняет темные пиксели. Увеличивает контрастность чуть меньше чем режимы Overlay и Hard Light.

Soft Light (Мягкий свет)

Hard Light (Жесткий свет)

Использует тот же метод, что и режим Overlay, но эффект более сильный.

Hard Light (Жесткий свет)

Vivid Light (Яркий свет)

Если верхний слой светлее 50% серого, то верхний слой осветяется через уменьшение контраста (Color Burn), а если темнее – то затемняется через увеличение контраста (Color Dodge).

Vivid Light (Яркий свет)

Linear Light (Линейный свет)

Похож на режим Vivid Light. Если верхний слой светлее 50% серого, то верхний слой осветяется через увеличение яркости (Linear Burn), а если темнее – то затемняется через уменьшение ярокости (Linear Dodge).

Linear Light (Линейный свет)

Pin Light (Точечный свет)

Комбинирует режимы Darken и Lighten для замены значений пикселей. Если верхний слой светлее чем 50% серый, пиксели осветляются через режим Lighten, а если темнее 50% серого – затемняются режим Darken.

Pin Light (Точечный свет)

Hard Mix (Жесткий микс)

Осветляет светлые пиксели и затемняет темные пиксели до пороговых значений. Это приводит к чрезвычайной постеризации. Свечение верхнего слоя смешивается с цветом нижнего.

Hard Mix (Жесткий микс)

Группа сравнения

Difference (Разница)


Представляет идентичные пиксели как черные, похожие – как темно-серые, а противоположные – как инвертированные. Если верхний слой черный – изменений не будет.

Exclusion (Исключение)

Похоже на режим Difference, однако обеспечивает меньшую контрастность. Наложение на черный цвет не приводит к каким-либо изменениям, а наложение на белые пиксели – к инверсии сравниваемых значений, что приводит к их отображении серым цветом.

Группа компонентов изображения

Hue (Цветовой тон)

Комбинирует свечение (Luminance) и насыщенность (Saturation) нижнего слоя с цветовым тоном (Hue) верхнего.

Hue (Цветовой тон)

Saturation (Насыщенность)

Комбинирует свечение (Luminance) и цветовой тон (Hue) нижнего слоя с насыщенностью (Saturation) верхнего слоя.

Color (Цветность)

Комбинирует тон (Hue) и насыщенность (Saturation) верхнего слоя и свечение (Luminance) нижнего слоя.

Luminosity (Яркость)

Противоположный режиму Color. Комбинирует Luminance (cвечение) верхнего слоя и Hue (цвета) и Saturation (колебание цвета) нижнего слоя.

Режимы наложения слоев в Фотошопе

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

О режимах наложения слоев мы и поговорим в этом уроке. Эта информация даст базис знаний в работе с режимами наложения.

Каждый слой в палитре изначально имеет режим наложения «Нормальный» или «Обычный», но программа дает возможность путем изменения этого режима поменять тип взаимодействия этого слоя с подлежащими.

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

Режимы наложения делятся на шесть групп (сверху вниз): Нормальные, Субтрактивные, Аддитивные, Комплексные, Разностные и HSL (Hue – Saturation – Lighten).

Нормальные

В данную группу входят такие режимы, как «Обычный» и «Затухание».

«Обычный» используется программой для всех слоев по умолчанию и никакого взаимодействия не предусматривает.

«Затухание» выбирает случайные пиксели с обоих слоев и удаляет их. Это придает изображению некоторую зернистость. Данный режим влияет толькона те пиксели, которые имеют изначальную непрозрачность менее 100%.

Эффект похож на наложение шума на верхний слой.

Субтрактивные

Данная группа содержит режимы, которые тем или иным способом затемняют изображение. Сюда входят «Затемнение», «Умножение», «Затемнение основы», «Линейный затемнитель» и «Темнее».

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

«Умножение», как следует из названия, умножает значения базовых оттенков. Любой оттенок, умноженный на белый даст исходный оттенок, умноженный на черный даст черный цвет, а другие оттенки не станут ярче начальных.

Исходное изображение при применении «Умножения» становится темнее и насыщеннее.

«Затемнение основы» способствует своеобразному «выжиганию» цветов нижнего слоя. Темные пиксели верхнего слоя затемняют нижний. Также здесь имеет место умножения значений оттенков. Белый цвет в изменениях не участвует.

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

«Темнее». Этот режим оставляет на изображении темные пиксели с обоих слоев. Оттенки становятся темнее, цифровые значения уменьшаются.

Аддитивные

Эта группа содержит следующие режимы: «Замена светлым», «Экран», «Осветление основы», «Линейный осветлитель» и «Светлее».

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

«Замена светлым» является режимом, действие которого противоположно действию режима «Затемнение».

В данном случае программа сравнивает слои и оставляет только наиболее светлые пиксели.

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

«Экран» в свою очередь противопоставлен «Умножению». При применении данного режима цвета нижнего слоя инвертируются и перемножаются с цветами верхнего.

Изображение становится более ярким, а итоговые оттенки всегда будут светлее исходных.

«Осветление основы». Применение этого режима дает эффект «выцветания» оттенков нижнего слоя. Уменьшается контрастность исходного изображения, а цвета становятся более светлыми. Создается эффект свечения.

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

«Светлее». Режим противоположен режиму «Темнее». На изображении остаются только наиболее светлые пиксели с обоих слоев.

Комплексные

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

Называются они следующим образом: «Перекрытие», «Мягкий свет», «Жесткий свет», «Яркий свет», «Линейный свет», «Точечный свет» и «Жесткое смешение».

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

«Перекрытие» является режимом, вобравшим в себя свойства «Умножения» и «Экрана».

Темные цвета становятся насыщеннее и темнее, а светлые становятся светлее. Результат — более высокая контрастность изображения.

«Мягкий свет» — менее резкий собрат «Перекрытия». Изображение в данном случае подсвечивается рассеянным светом.

При выборе режима «Жесткий свет» изображение подвергается освещению более сильным источником света, чем при «Мягком свете».

«Яркий свет» применяет режим «Осветление основы» к светлым участкам и «Линейный осветлитель» к темным. При этом контрастность светлых увеличивается, а темных – уменьшается.

«Линейный свет» противоположен предыдущему режиму. Увеличивает контрасность темных оттенков и уменьшает контрастность светлых.

«Точечный свет» объединяет светлые оттенки при помощи режима «Светлее», а темные – при помощи режима «Темнее».

«Жесткое смешение» воздействует на светлые участки режимом «Осветление основы», а на темные – режимом «Затемнение основы». При этом контраст на изображении достигает настолько высокого уровня, что могут появиться цветовые аберрации.

Разностные

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

Режимы такие: «Разница», «Исключение», «Вычитание» и «Разделить».

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

«Исключение» работает так же, как и «Разница», но уровень контраста получается ниже.

«Вычитание» изменяет и смешивает цвета следующим образом: цвета верхнего слоя вычитаются из цветов верхнего, а на черных участках цвета будут такие же, как на нижнем слое.

«Разделить», как становится понятно из названия, делит числовые значения оттенков верхнего слоя на числовые значения оттенков нижнего. Цвета при этом могут кардинально меняться.

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

Режимы в группе: «Цветовой тон», «Насыщенность», «Цветность» и «Яркость».

«Цветовой тон» придает изображению тон верхнего слоя, а насыщенность и яркость – нижнего.

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

«Цветность» придает итоговой картинке тон и насыщенность накладываемого слоя, я яркость остается такой же, как на подлежащем.

«Яркость» придает изображению яркость нижнего слоя, сохраняя цветовой тон и насыщенность нижнего.

Режимы наложения слоев в Фотошопе позволяют добиться очень интересных результатов в Ваших работах. Обязательно используйте их и удачи в творчестве!

Отблагодарите автора, поделитесь статьей в социальных сетях.

Наложение и порядок слоёв. Фиксированный дизайн. Наложение слоев

Рисунок в «Фотошопе» может состоять из одного или нескольких слоев, и на любом из них (кроме фона) могут быть прозрачные участки, сквозь которые просматриваются нижележащие элементы. Самой важной особенностью компонентов рисунка является их абсолютная самостоятельность и независимость от других, а результат их взаимодействия между собой зависит от того способа, как объединить слои в «Фотошопе».

На слое можно рисовать и стирать, его можно перемещать, блокировать, временно спрятать, трансформировать, изменить непрозрачность, «сделать умным» (смарт-слоем) или удалить вовсе. Можно на него «надеть маску» и рисовать на ней или «прикрыть» корректирующим аналогом, чтобы вносить поправки, не разрушая оригинал.

Начинающему пользователю, впервые запустившему программу с намерением создать шедевр, и не надо ломать голову над тем, как сделать слои в «Фотошопе», потому что, вставив в документ скопированное в буфер обмена изображение или загрузив картинку по команде «Поместить» (в меню «Файл»), он обнаружит, что объекты вставляются, самостоятельно располагаясь в палитре на новом месте.

Панель слоев

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


Можно, взявшись мышкой, переставлять компоненты палитры вверх или вниз. Двойной щелчок по миниатюре приведет к выделению на холсте содержимого слоя. Кликая по иконкам в строке «Закрепить» (Lock), мы можем сохранить прозрачность и цвета пикселей, закрепить положение слоя или сохранить их все (кнопка с замочком).

Создаем новый слой

Для тех, кому не терпится узнать, как создавать слои в «Фотошопе», в нижней части панели предусмотрена специальная кнопка (листочек с загнутым уголком), нажав на которую, вы и поместите новенький слой выше выбранного (выделенного). Кроме того, можно добавить «Новый» (New), как показано ниже.

Как сообщают подсказки на остальных иконках в палитре внизу, мы можем (слева направо) «Добавить стиль…», «Добавить маску», «Создать новый корректирующий…», «Создать новую группу» и, наконец, выбросить в корзину. Такие же команды продублированы в меню Layer.

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

Объединяем слои

Все команды, определяющие, как объединить слои в «Фотошопе», вызываются щелчком правой кнопкой мыши или выбираются в меню Layer. Для каждой команды предусмотрены «горячие клавиши», которые очень облегчают жизнь «фотошопера».

Если в палитре выбран один слой, его можно только «Объединить с предыдущим», а если выделено два и больше, их можно связать, объединить и сгруппировать, выбрав соответствующие команды. Можно выбирать одновременно, щелкая по ним с нажатой клавишей Ctrl, либо выделить верхний, а затем, нажав Shift, нижний.

Можно ничего не выделять, а просто выбрать команду «Объединить видимые».

Возможность манипуляций с несколькими компонентами одновременно зависит от того, как объединить слои в «Фотошопе».

Слои собираются в группу по команде «Сгруппировать…» в меню Layer (Ctrl + G). Преимущества объединения в группу заключаются в том, что ее элементы обладают общими параметрами непрозрачности и режима наложения, что избавляет от необходимости возиться с каждым слоем. Кроме того, перемещать и трансформировать (Ctrl + T) можно всю группу целиком, а также создавать для нее единую маску.

Если выбрать очень хитрую комбинацию клавиш Ctrl + Alt + Shift + E, «Фотошоп» объединит все выбранные в единый, отдельный слой с результирующим эффектом, поместив его поверх остальных и сохранив при этом в палитре каждый на своем месте.

Как «наложить в слои»

«Оригинальность» заголовка связана исключительно с желанием вызвать улыбку (доброжелательную), а по сути, призывает сосредоточиться на такой архиважной и невероятно обширной теме: как наложить слои в «Фотошопе».

За характер смешивания наложенных друг на друга слоев в «Фотошоп» отвечают «Режимы наложения» (Blending mode), выпадающий список которых расположен в верхней части панели.

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

Все режимы наложения разбиты на 6 групп по принципу общности поведения (за исключением первой, безымянной группы). Их количество иназвания в переводе на русский могут отличаться в различных версиях редактора.

Первые два режима совершенно ничего не связывает. «Обычные (Нормальный)» выставляется по умолчанию, и смешивание происходит, если только слои отличаются непрозрачностью. А в режиме «Затухание (Растворение, Рассыпание)» вообще ничего не смешивается. Здесь верхний слой рассыпается на мелкие точки, и тем их больше, чем ниже непрозрачность.

Вторую группу составляют «Затемняющие режимы», при которых результирующее изображение всегда оказывается темнее исходных слоев.

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

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

Пятая группа включает 2-4 таковых и носит название «Режимы сравнения (сопоставления)». Инструменты этой группы, вычисляя разности в цветовых каналах, сравнивают пиксели между слоями и в редактировании фотографий используются редко.

Последнюю группу с именем «Режимы составляющих цвета» именуют еще группой HSL по названиям первый трех режимов (Hue/Оттенок, Saturation/Насыщенность, Luminosity/Яркость). В каждом из элементов этой «компании» верхний слой управляет либо яркостью, либо насыщенностью, либо цветом нижнего.

Таким образом, конечный результат создания или редактирования изображения будет зависеть от того, как объединить слои в «Фотошопе» и какие режимы наложения при этом будут использованы.

Когда дело касается редактирования фотографий, чаще всего используют пять режимов наложения («Перекрытие», «Умножение», «Экран», «Яркость» и «Цветность»).

Слои в «Фотошопе» применяются с целью создания нужного изображения. Очень напоминает аппликации с наложением прозрачной бумаги, чтобы получить, например, коллаж. Кроме того, благодаря слоям можно сохранить исходный рисунок в случае выполнениях ошибочных операций. Также ими могут быть совершенно разные картинки, текст, блики. Так как же создать слой в «Фотошопе»? Ниже представлены варианты.

Где расположены слои

Сначала следует открыть файл с нужной картинкой или создать новый документ. Обычно по умолчанию еще до появления в рабочей области картинки видно справа специальное окно, на котором расположена вкладка «Слои». Если этой вкладки нет, то в горизонтальном меню нужно нажать Window (по-русски «Окно»), затем найти в списке Layer («Слои»). В меню появляется галочка слева от слова, а также окно «Свойства» и открытая вкладка со слоями. Теперь можно приступать к работе.

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

Создание слоев при помощи окна «Свойства»

Далее встает вопрос о том, как создать слой в «Фотошопе», куда нужно нажимать? Ниже представлена фотография, на которой четко видны подсказки. Следует открыть у себя на компьютере программу «Фотошоп», чтобы попрактиковаться и запомнить, где что расположено.

Все функции, связанные со слоями, располагаются в нижней части окна «Свойства» во вкладке «Слои». Второй значок справа — это и есть «Создать новый слой», который по-английски означает New Lawer. Достаточно нажать левой кнопкой мыши, чтобы он появился. Рекомендуется обратить внимание на то, где отображается новый слой во вкладке. Как правило, по умолчанию он располагается над предыдущим.

Разблокировка изображения

Следует отметить, что по умолчанию открытый документ имеет В окне со свойствами виден справа «замочек» и надпись «Фон». То есть с картинкой нельзя работать. Она заблокирована от каких-либо операций. Чтобы она стала рабочей, нужно дважды левой кнопкой мыши щелкнуть по «Фону» во все той же вкладке «Слои». Появляется горизонтальной прямоугольное окошко с предложением сделать изображение новым слоем, а также дать ему наименование. Таким образом, становится понятно, как создать новый слой в «Фотошопе» на оригинальном файле с изображением.

Дополнительные два способа создания

В «Фотошопе» есть несколько вариантов того, как создать новый слой. Один из них уже рассмотрен. Следующий способ подразумевает использование горизонтального меню сверху. Там есть вкладка «Слои» («Layer»). Нажав ее, можно увидеть самое первое в списке слово «Новый» («New»). Следует нажать на «Слой…».

Троеточие означает, что программой будет предложено внести корректировки в параметры создаваемого слоя, а именно:

  • дать имя;
  • задать цвет;
  • выбрать режим наложения;
  • откорректировать непрозрачность в процентах.

Затем следует нажать «Ок».

Есть еще один интересный способ, как создать слой в Фотошопе моментально, буквально за одну секунду без наведения курсора мыши на значок и меню. Для этого применяется комбинация клавиш, которые нужно нажать сразу все вместе на клавиатуре — Ctrl+Shift+N. Но чтобы успешно таким способом создать новый слой, нужно деактивировать другие операции, например, создание текста или трансформирование. Пусть будет активным только один из имеющихся слоев во вкладке окна «Свойства».

Разные версии «Фотошопа»

Новичков может смутить то, что существуют разные версии программы. Нередко на тематических форумах и в социальных сетях они спрашивают: «Как создать новый слой в «Фотошопе CS6″, если я изучал более раннюю версию?». Ответ простой: так же, отличий никаких.

Корректирующий слой

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

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

  1. Через меню «Слои». Открыть «Новый корректирующий слой», далее нужно выбрать функцию.
  2. В окне «Свойства». Найти «Слои», внизу есть круглый черно-белый значок с треугольником справа.

Как создать корректирующий слой в «Фотошопе» так, чтобы он оказался поверх других слоев? Достаточно перетащить его выше, над другими слоями.

Итак, в статье была приведена инструкция по тому, как создать слой в «Фотошопе» тремя способами. Успехов!

Откройте изображения, с которыми собираетесь работать, в Photoshop. Для этого воспользуйтесь командой Open («Открыть») из меню File («Файл») или сочетанием клавиш Ctrl+O. В окне проводника выберите нужные , щелкнув по ним левой кнопкой мыши при нажатой клавише Ctrl. Щелкните по кнопке «Открыть».

Вставьте одну картинку поверх другой. Для этого щелкните левой кнопкой мыши по окну с файлом, который собираетесь вставлять поверх другого изображения. Выделите картинку при помощи сочетания клавиш Ctrl+A или команды All («Все») из меню Select («Выделение»).
Скопируйте выделенное изображение при помощи сочетания клавиш Ctrl+C. Можете воспользоваться командой Copy («Копировать») из меню Edit («Редактирование»).

Перейдите к изображению, которое собираетесь использовать в качестве фона, щелкнув левой кнопкой мыши по окну с этим изображением.
Вставьте скопированное изображение при помощи сочетания клавиш Ctrl+V. То же самое можно сделать при помощи команды Past («Вставить») из меню Edit («Редактирование»).

Если нужно, подгоните вставленное изображение по размеру. Для этого в палитре Layers («Слои») щелкните левой кнопкой мыши по слою со вставленным изображением и примените команду Transform («Трансформировать»), пункт Scale («Размер») из меню Edit («Редактирование»). Уменьшите или увеличьте размер картинки, потянув мышью за угол появившейся вокруг изображения рамки. Примените трансформирование, нажав клавишу Enter.

Скройте ненужные детали изображения, наложенного на фон, или измените прозрачность его отдельных участков при помощи маски слоя. Для этого щелкните левой кнопкой мыши по кнопке Add Layer Mask («Добавить маску слоя»), которая находится в нижней части палитры «Слои». В палитре «Инструменты», которая находится в левой части окна программы, выберите инструмент Brush Tool («Кисть»). Щелкните левой кнопкой мыши по значку маски слоя. Закрасьте черным цветом те фрагменты вставленной картинки, которые хотите скрыть. Они станут прозрачными. Для того чтобы получить плавный переход от вставленного изображения к фону, уменьшите параметр Hardness («Жесткость») инструмента «Кисть». Настроить параметры кисти можно в панели Brush («Кисть»), которая расположена под главным меню.

Откорректируйте цвета верхнего слоя, настроив цветовой баланс. Это можно сделать через меню Image, пункт Adjustment, подпункт Color Balance. Передвигая ползунки, добейтесь гармоничного сочетания нижнего и верхнего слоя.

Сохраните результат, воспользовавшись командой Save («Сохранить») меню File («Файл»). Для того чтобы иметь возможность вернуться к редактированию слоев в этом файле, сохраните его в формате PSD.

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

Рис. 3.51. Карты рядом друг с другом

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Рис. 3.53. Воображаемые координаты веб-страницы

Пять основных режимов наложения в Photoshop

Один из ключевых моментов, который просто необходимо знать при работе в программе Photoshop — это принцип работы режимов наложения (Blend Modes).

Режимы наложения предоставляют нам различные способы взаимодействия слоя со слоем (слоями), находящимися ниже его в Панели слоёв. Без использования режимов наложения, единственным реальным способом взаимодействия слоёв является изменение непрозрачности.
Режимы наложения дают нам не только дополнительные творческие возможности, особенно, при объединении их с масками, но также могут быть очень полезны, когда дело доходит до редактирования, ретуширования и восстановления фотографий.

Конечно, для повседневной работы не нужно знать всё о режимах наложения, которых на данный момент в Photoshop CS6 имеется 27 штук. Но иметь понятие об основных принципах работы наиболее часто используемых режимов наложения, таких, как «Умножение», «Экран», «Перекрытие», «Цветность» и «Яркость» (Multiply, Screen, Overlay, Color и Luminosity) просто необходимо.

Прежде чем мы перейдем к изучению функций режимов наложения, следует узнать, где они находятся и как их активировать. Активировать их можно через главное меню в верхней части рабочего окна Photoshop, но, гораздо легче сделать это через Панель слоёв, через раскрывающийся список в верхнем левом углу панели. По умолчанию активен режим «Обычные» (Normal):

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

При клике по меню раскрывающего списка, этот самый список раскрывается, и мы видим меню из 27-ми режимов наложения, разделённых на шесть групп по общим признакам, кроме самой первой группы — режимы «Обычные» (Normal) и «Затухание» (Dissolve) не имеют абсолютно ничего общего друг с другом

Классификацию по группам и англо-русский перевод режимов наложения Вы можете посмотреть этом материале.

На скриншоте я привёл режимы наложения из официальных русскоязычной и англоязычной версий Photoshop CS6:

Как мы видим, режимы поделены на пять групп, не считая базовой, это группа Затемнение (Darken Modes), Осветление (Lighten Modes), Контраст (Contrast Modes), Сравнение (Comparative Modes) и Компонентные (Composite Modes). Кратенько рассмотрим каждую:

Затемнение (Darken Modes) Каждый из режимов, входящих в эту группу, делает изображение темнее.

Осветление (Lighten Modes) Это группа режимов осветления изображения.

Контраст (Contrast Modes) Входящие сюда режимы как затемняют, так и осветляют изображение, повышая его контрастность.

Сравнение (Comparative Modes) сюда входят «Разница» (Difference), «Исключение» Exclusion), и два новых режима, появившихся в версии CS5 — это «Вычитание» (Subtract) и «Разделить» (Divide). Все они сравнивают пиксели между слоями и вычитают их или усиливают контрастность в зависимости от вида изображений. В редактировании фотографий они используются достаточно редко.


И последняя группа Компонентные (Composite Modes), также известная, как HSL-группа (HSL расшифровывается как «оттенок, насыщенность и яркость»). Режимы наложения в этой группе работают с цветом или яркостью (освещенностью) пикселей в слое.

Наложение и порядок слоёв. Фиксированный дизайн. Наложение слоев

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

Прежде чем мы приступим к дальнейшему изучению того, какие удивительные вещи можно совершать со слоями, нам нужно рассмотреть один особой тип слоя — «Фон» (Background layer). Причина, по которой мы останавливаемся на изучении слоя заднего фона, заключается в том, что некоторые действия с этим слоем совершать нельзя в отличие от действий с другими слоями. Если мы не будем осведомлены об этих действиях заранее, мы сможем легко запутаться в нашей работе и не получить желаемый результат.

Ниже представлено изображение фоторамки, открытое в программе Photoshop. Данное изображение я взял из фотобанка Fotolia:

Всякий раз, когда мы открываем новое изображение в программе Photoshop, оно открывается в окне собственного документа и размещается на отдельном слое под названием «Фон» (Background), что мы и можем видеть на панели слоев. Обратите внимание, что слово «Фон» выделено курсивом. Таким образом, программа уведомляет нас о некоторых особенностях этого слоя:

Панель слоев отображает, что изображение размещено на слое заднего фона

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

Правило 1: Мы не можем перемещать содержимое слоя заднего фона

Одно из действий, которое мы не можем совершать со слоем заднего фона, — перемещение его содержимого. Обычно, когда нам надо переместить содержимое слоя, мы выбираем в верхней части панели инструментов инструмент «Перемещение» (Move):

Выбираем на панели инструментов инструмент «Перемещение»

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

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

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

Значок в виде замка говорит нам о том, что данный слой закреплен

Правило 2: Отсутствие прозрачных пикселей

В ближайшее время я собираюсь импортировать в мой документ еще одно изображение и поместить его в фоторамку. Однако в данный момент внутренняя часть рамки заполнена белым цветом. Это означает, что я должен сначала очистить белую область внутри фоторамки и лишь потом поместить туда фотографию. Обычно, когда мы удаляем пиксели со слоя, удаленные области становятся прозрачными и позволяют нам увидеть нижележащий слой. Давайте посмотрим, что произойдет, когда я попробую удалить какую-нибудь область на слое «Фон».

Сначала, я должен выделить область внутри рамки, и поскольку она заполнена бельм цветом, для выделения я буду использовать инструмент «Волшебная палочка» (Magic Wand) . В программе Photoshop CS2 и более ранних версиях, мы можем выбрать инструмент «Волшебная палочка» , просто нажав на его значок на панели инструментов. В программе Photoshop CS3 и более поздних версиях (в моем случае это версия Photoshop CS5), этот инструмент спрятан за инструментом «Быстрое выделение» (Quick Selection), поэтому необходимо сначала нажать на инструмент «Быстрое выделение» (удерживая кнопку мыши нажатой несколько секунд), дождаться появления выпадающего меню с перечнем инструментов и выбрать из списка инструмент «Волшебная палочка» :

Выбираем инструмент «Волшебная палочка»

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

Белая область внутри рамки теперь выделена

Чтобы удалить область внутри рамки, я нажму клавишу Backspace (Win) / Delete (Mac). Однако вместо ожидаемого удаления области и замещения белого цвета прозрачными пикселями, программа открывает диалоговое окно параметра «Заполнить» (Fill) и предлагает заполнить выделенную область другим цветом:

Вместо того чтобы удалить область, программа Photoshop открывает диалоговое окно параметра «Заполнить»

Я нажму кнопку «Отмена» (Cancel) для выхода из диалогового окна, поскольку это совсем не та команда, которую я хотел выполнить. Я хотел удалить белую область внутри фоторамки, но не заполнять ее другим цветом. Может быть, программа Photoshop что-то перепутала? Хорошо, я попробую удалить область другим способом. Для этого я перейду в раздел «Редактирование» (Edit) в строке меню в верхней части экрана и выберу команду «Вырезать» (Cut):

Выбираем команду «Вырезать» в разделе «Редактирование»

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

Белая область внутри рамки теперь заполнена черным цветом

Откуда же взялся черный цвет? Оказывается, программа Photoshop заполнила область черным цветом, потому что, если мы посмотрим на образцы цвета переднего плана и цвета фона в нижней части панели инструментов, то увидим, что цвет фона (на нижнем правом квадрате) — в настоящий момент черный, соответственно программа и заполнила область цветом фона. Если бы цвет фона был выбран фиолетовым, область заполнилась бы именно фиолетовым цветом. Однако в данный момент цвет фона — черный:

Образцы цвета переднего плана (левый верхний) и цвета фона (правый нижний)

Итак, почему же программа Photoshop не удалила белую область внутри рамки? Почему же вместо этого она заполнила ее другим цветом? Причина в том — что слои заднего фона не поддерживают прозрачность. Действительно, так как назначение слоя «Фон» — служить задним фоном документу, то нет необходимости делать его прозрачным, ведь под этим слоем для просмотра быть ничего не должно. Ведь задний фон — это все-таки задний фон! Неважно, каким способом я буду пытаться удалить область внутри рамки, у меня никогда не получится этого сделать, до тех пор, пока изображение размещено на слое заднего фона. Как же тогда я смогу разместить еще одну фотографию внутри рамки? Давайте пока отложим решение этой проблемы и вернемся к ней чуть позже.

Правило 3: Мы не можем перемещать слой «Фон» и помещать его над другим слоем

Ниже представлена фотография, которую я хочу поместить внутри фоторамки. Данное изображение я также взял из фотобанка Fotolia:

Изображение, которое будет размещено внутри фоторамки

В настоящий момент изображение открыто в отдельном окне, поэтому я быстро скопирую его в окно документа с фоторамкой, нажав сочетание клавиш Ctrl+A (Win) / Command+A (Mac) для выделения всей фотографии. Затем я нажму клавишную комбинацию Ctrl+C (Win) / Command+C (Mac), чтобы скопировать изображение во внутренний буфер. После этого я перейду в окно документа с фоторамкой и нажму сочетание клавиш Ctrl+V (Win) / Command+V (Mac), чтобы вставить изображение в документ. Программа поместит новое изображение на отдельный слой под названием «Слой 1» (Layer 1), расположенный над слоем «Фон» с фоторамкой:

Вторая фотография размещена на отдельном слое над слоем «Фон»

Видно, что новая фотография появилась перед фоторамкой в окне документа:

Второе изображение появилось перед фоторамкой

Для того чтобы мое второе изображение появилось внутри рамки, мне нужно поменять порядок расположения слоев — поместить слой с рамкой поверх слоя с фотографией. Обычно, менять слои местами — легко, необходимо всего лишь выбрать слой для перемещения и перетащить его поверх другого слоя, но не в нашем случае, когда мы хотим переместить слой «Фон». Когда я нажимаю на слой «Фон» и пытаюсь переместить его поверх слоя с фотографией, появляется маленький значок в виде перечеркнутого круга (международный знак запрета), свидетельствующий о том, что по некоторым причинам это действие невозможно:

Значок в виде перечеркнутого круга свидетельствует о том, что я не могу переместить слой «Фон» поверх слоя «Слой 1»

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

Правило 4: Мы не можем перемещать другие слои под слой «Фон»

Хорошо, если мы не можем перемещать слой «Фон» поверх другого слоя, что будет, если мы попробуем переместить другой слой под слой «Фон»? Я нажму на «Слой 1» и попробую переместить его под слой «Фон», но и это не получается. Опять возникает маленький значок в виде перечеркнутого круга, который означает невозможность совершения действия:

Тот же значок запрета появляется, и когда мы пытаемся переместить «Слой 1» под слой заднего фона

И снова, причина этого заключается в том, что слой «Фон» должен всегда оставаться задним фоном документа. Мы не можем перемещать данный слой поверх других слоев и также перемещать другие слои под слой «Фон».

Простое решение проблемы

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

Так как главное назначение слоя «Фон» — служить основой документу, каждое из этих правил имеет смысл. Тем не менее, как и с большинством других правил, иногда нам требуется их нарушить. В нашем случае, обойти все эти правила легко! Все, что нам требуется, — как-то иначе переименовать слой «Фон»! Для того чтобы переименовать слой «Фон», вы можете перейти в раздел «Слои» (Layer) в верхней части экрана, выбрать пункт «Новый» (New) и далее — «Слой из заднего плана» (Layer From Background):

Выбираем «Слои» > «Новый» > «Слой из заднего плана» (Layer > New > Layer From Background)

Более быстрый способ заключается в том, что можно просто дважды кликнуть кнопкой мыши по слову «Фон» на панели слоев:

Дважды кликаем кнопкой мыши по названию слоя «Фон»

В любом случае после этих действий откроется диалоговое окно «Новый слой» (New Layer), где можно будет ввести новое имя для слоя. По умолчанию, программа предлагает имя «Слой 0» (Layer 0), которое нам подходит. Так как нам подойдет любое другое имя кроме «Фон» , просто нажмите ОК для подтверждения нового имени «Слой 0» и выхода из диалогового окна, при условии, что вы не хотите дать слою какое-то определенное имя:

Вы можете оставить имя «Слой 0» в качестве нового имени слоя или ввести любое другое на ваше усмотрение

Совет: чтобы еще быстрее переименовать слой «Фон», дважды щелкните кнопкой мыши по слову «Фон», удерживая нажатой клавишу Alt (Win) / Option (Mac). Программа тотчас переименует слой, присвоив ему имя «Слой 0» без открытия диалогового окна «Новый слой».

Теперь мы можем видеть, что имя слоя заднего фона изменилось на «Слой 0»:

Слой «Фон» был переименован на «Слой 0»

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

Например, мне все еще нужно переместить фоторамку поверх изображения на «Слое 1». Теперь это сделать легко, так как фоторамка больше не находится на слое «Фон»! Я могу всего лишь нажать на «Слой 0» на панели слоев и перетащить его наверх, чтобы тонкая светлая полоска появилась над «Слоем 1»:

Переместим «Слой 0» поверх «Слоя 1»

После этого я отпущу кнопку мыши, и программа Photoshop разместит «Слой 0» над «Слоем 1», как мне и нужно:

«Слой 0» теперь расположен над «Слоем 1». Этого нельзя было достичь, пока «Слой 0» назывался слой «Фон»

Раньше я не мог удалить белую область внутри рамки, пока изображение было на слое «Фон», но теперь, после того как я переименовал слой «Фон» на «Слой 0», это стало сделать нетрудно. Я выделю область внутри рамки, применяя инструмент «Волшебная палочка» , как я это сделал в первый раз:

Белая область внутри рамки опять стала выделенной

Затем я нажму клавишу Backspace (Win) / Delete (Mac), и на этот раз программа сделает все именно так, как я и ожидал, — вместо открытия диалогового окна параметра «Заполнить» она удалит область со слоя и отобразит фотографию под ней:

Область внутри рамки, наконец, удалена, и под ней видно другое изображение

Далее я нажму сочетание клавиш Ctrl+D (Win) / Command+D (Mac), чтобы снять выделение с области внутри рамки и убрать линию выделения. Затем для успешного завершения работы, я нажму на «Слой 1» на панели слоев и сделаю его активным:

Выбираем «Слой 1»

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

Перемещаем фотографию на нужное место внутрь фоторамки

Как мы с вами рассмотрели, слои заднего фона являются особым типом слоев в программе Photoshop, с наложенными на них ограничениями. Мы не можем перемещать их содержимое, удалять что-либо с них, и они всегда должны оставаться среди слоев документа в самом низу. В большинстве случаев, эти ограничения не причиняют нам особых неудобств, поскольку обычно мы не работаем напрямую со слоем «Фон». Но если вам нужно снять ограничения, просто переименуйте слой «Фон» и дайте ему любое другое имя. Это действие приведет к тому, что данный слой немедленно станет нормальным слоем, с которым вы сможете работать без ограничений!

И вот мы закончили! Ознакомьтесь с полным списком уроков по работе со слоями в программе Photoshop или посетите наш раздел «Основы программы Photoshop» для изучения инструментов выделения, принципов работы со шрифтом и других полезных навыков!

Перевод: Ксения Руденко

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

Рис. 3.51. Карты рядом друг с другом

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Рис. 3.53. Воображаемые координаты веб-страницы

Илон Маск рекомендует:  Что такое код gif
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL