Как сделать один слой маской для другого?

Коррекция изображений

• Повернуть на 15 градусов — Ctrl + T + Shift + колёсико мыши / Cmd + T + Shift + колёсико мыши.
• Обесцветить выделенную область или слой — Shift + Ctrl + U / Shift + Cmd + U.
• Залить — Shift + F5.
• Обрезать — использовать инструмент «Рамка» + Enter.
• Инвертировать изображение (отразить зеркально) — Shift + Ctrl + I / Shift + Cmd + I.
• Переключить режим прозрачности — «/».
• Перейти в режим свободного трансформирования — Ctrl + T / Cmd + T.
• Создать или отменить обтравочную маску — Ctrl + Alt + G / Cmd + Opt + G.
• Повернуть холст — R.
• Открыть окно «Кривые» — Ctrl + M / Cmd + M.
• Открыть окно «Уточнить край» — Ctrl + Alt + R / Cmd + Opt + R.
• Открыть окно «Цветовой тон» — Ctrl + U / Cmd + U.
• Открыть окно «Уровни» — Ctrl + L / Cmd + L.
• Открыть окно «Цветовой баланс» — Ctrl + B / Cmd + B.
• Применить «Автотон» — Shift + Ctrl + L / Shift + Cmd + L.
• Применить «Автоконтраст» — Alt + Shift + Ctrl + L / Opt + Shift + Cmd + L.
• Применить автоматическую цветовую коррекцию — Shift + Ctrl + B / Shift + Cmd + B.
• Переключиться из стандартного режима в режим «Быстрая маска» — Q.
• Переключить цвет холста вперёд — «пробел» + F.
• Переключить цвет холста назад — «пробел» + Shift + F.

Алгоритм добавления маски к слою

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

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

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

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

Второй способ гораздо проще, соответственно, на него следует обратить внимание тем, кто пока еще только осваивает программу Фотошоп

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

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

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

Вложенные группы

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

Зачем это может понадобится? Все с той же целью: для удобной и быстрой работы. Рассмотрим пример. Несколько кнопок и логотип с подложкой могут быть объединены в так называемую шапку сайта (на английском – header, читается хэдэ) – элемент дизайна, который повторяется на всех страницах и обычно содержит средства для быстрой навигации. В глазах Figma это просто группа с другими вложенными группами.

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

2 Соединение выделенных слоев

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

1. Выбрать на панели все необходимые слои. Для этого можно просто кликать по миниатюрам, не отпуская зажатую на клавиатуре клавишу «Ctrl».
2. Открыть контекстное меню.
3. Выбрать объединение слоев.

По умолчанию окажутся объединенными только выделенные слои, независимо от их количества. Помогут упростить задачу и быстрее объединить слои в Фотошопе горячие клавиши Ctrl + E. Их нажатие заменяет 2-й и 3-й пункт алгоритма.

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

Включение и выключение видимости слоев на панели «Таймлайн»

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

Значок в столбце «Переключатели» показывает является ли слой скрытым или видимым .

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

• Для переключения между невидимыми и видимыми слоями нажмите переключатель «Включение/выключение видимости» для слоя или выберите слой на панели «Таймлайн» и нажмите «Слой» > «Переключатели» > «Включение/выключение видимости».
• Для переключения между скрытием и отображение всех невидимых слоев выберите или снимите выделение с переключателя композиции «Скрыть слои, для которых выключена видимость» в верхней части панели «Таймлайн» или выберите «Скрыть слои, для которых выключена видимость» в меню панели «Таймлайн».

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

Ллойд Альварес (Lloyd Alvarez) предлагает на своем веб-сайте After Effects Scripts сценарий, с помощью которого можно отмечать слои тегами, а затем выбирать, скрывать и применять к слоям режим «Соло» в соответствии с их тегами. Теги добавляются к комментариям в поле комментариев на панели «Таймлайн».

Задавайте названия со смыслом

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

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

Вот небольшой список типичных названий слоев, чтобы у вас было представление:

• Header
• Footer
• Button-CTA
• Modal-Export
• Icon-Reload
• Img-Banner

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

Управление слоями и группами

Важно!

3D-функции Photoshop будут удалены в будущих обновлениях. Пользователям, работающим с 3D-функциями, рекомендуется ознакомиться с новой коллекцией Adobe Substance 3D, которая представляет собой новое поколение 3D-инструментов от Adobe.

Дополнительную информацию о прекращении поддержки 3D-функций Photoshop можно найти здесь: Photoshop 3D | Распространенные вопросы об упраздненных 3D-функциях.

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

Домашнее задание

1. Вернитесь к файлу с первым и вторым заданием из прошлого урока и наведите порядок: сгруппируйте и переименуйте слои (задайте осмысленные названия), чтобы в них было проще ориентироваться;
2. Зайдите на сайт Behance (тут дизайнеры делятся своими работами), прокручивайте страницу пока не найдете иллюстрации (не путать с фотографиями). Иллюстрации (смотрите пример в видео из предидущего раздела «Как поделиться проектом») нам идеально подходят, так как из них проще выделить основные цвета. Скопируйте себе 5 картинок, которые вам нравятся (чтобы стала доступна команда Copy Image, нужно предварительно кликнуть по работе, она увеличится). Для каждой картинки нарисуйте 4-8 кружков одинаковых размеров и покрасьте их в ключевые цвета иллюстрации (используйте пипетку);
3. Введите в поисковой строке Behance запрос «UI web app». Постарайтесь найти простенький дизайн сайта и перерисуйте его как можно более детально, насколько у вас получится (игнорируйте то, что пока не можете воссоздать). Иллюстрации и фото замените своими, ищите их на сайте Unsplash;
4. Тренируйте насмотренность. Заходите на сайт Awwwards и просматривайте размещенные там сайты не менее 10 минут в день – здесь собраны лучшие примеры веб-дизайна. Можете также использовать этот сайт для предыдущего задания;
5. Задание повышенной сложности (по желанию). Нарисуйте любую страницу из еще двух сайтов, которые вы найдете на Behance или Awwwards.

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

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

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

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

1. Основные (Basic).
2. Затемняющие (Darken).
3. Освещающие (Lighten).
4. Увеличивающие контраст (Contrast).
5. Сравнительные (Comparative).
6. Компонентные (HSL).

Референсы и мудборды

Референс, референсы (от англ. reference – рекомендация, эталон, намек, ссылка) — одно или несколько примеров изображений, которые предоставляет заказчик, чтобы показать, что он хочет получить в результате вашей работы. Референс может касаться не всего сайта, а лишь какого-то конкретного его аспекта. Например, цвета попросят, как на первом сайте, структура шапки – как на втором, навигационное меню мобильной версии – как на третьем. Референсы сопровождаю техническое задание и делают его более понятным. Референсом может выступать не только изображение, но и ссылка на сайт или даже фото/видео.

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

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

О слоях и векторных масках

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

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

Векторные маски создаются с помощью инструментов групп «Перо» и «Фигура» и не зависят от разрешения изображения.

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

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

Чтобы создать слой-маску или векторную маску на слое «Фон», его необходимо предварительно преобразовать в обычный слой (меню «Слой» > «Новый» > «Из фона»).

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

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

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

Объединение

При объединении двух фотоснимков придется немножко повозиться. Без паники, это не так сложно.

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

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

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

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

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

На основной фотке виден только контур сердца. «С чем это связано?» — спросите вы, но так и должно быть. Если скрыть основную картинку, (помните, что они легко скрываются? Стоит только нажать на глаз), то можно увидеть сам рисунок сердца.

Растрирование слоев

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

Растрирование текста в текстовом слое. Другие векторные данные слоя не растрируются.

Растрирование заливки слоя-фигуры с сохранением векторной маски.

Растрирование векторной маски с преобразованием ее в слой-маску.

Преобразование смарт-объекта в растровый слой.

Растрирование текущего видеокадра в слой изображения.

3D (только для Photoshop Extended)

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

Растрирование всех векторных объектов в выделенных слоях.

Растрирование всех слоев, содержащих векторные и производные объекты.

Чтобы растрировать связанные слои, выделите один из них, затем выберите меню «Слой» > «Выберите связанные слои». После этого можно произвести растрирование.

Копирование, вырезание и вставка слоя

Для копирования объекта выделите его и нажмите Command + C в MacOs или Ctrl + C в Windows.

Чтобы вырезать объект, выделите его и нажмите Command + X в MacOs или Ctrl + X в Windows.

Для вставки выберите объект или совсем уберите выделение и нажмите Command + V в MacOs или Ctrl + V в Windows.

Копирование, вырезание и вставка объектов, такие привычные по другим программам команды, некоторых новичков в Figma вводят в недоумение. Дело в том, что позиция, куда будет вставлен объект зависит от того, какой сейчас выбран тип объекта (примитив или группа) и на каком уровне вложенности он находится. Рассмотрим все на примерах:

• Если ничего не выбрать, то вставка произойдет в том же месте, где находится исходный объект;
• Если выбрать группу или примитив внутри группы, то вставка произойдет в центре этой группы;

Поначалу такое поведение кажется странным, но если понимать, как это работает, то со временем вы привыкните

Посмотрите видео, обратите внимание, какой тип объекта выбран перед вставкой и как от этого меняется позиция вставки

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

Свойства слоев

Все слои в совокупности имеют следующие свойства:

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

С помощью ползунка Opacity (Непрозрачность) при желании настроить непрозрачность слоя, то есть насколько сквозь последующее содержимое слоя будет просвечивать содержимое низлежащего слоя.

Опция Fill выполняет практически тоже что и Opasity, снижает непрозрачность слоя, но в отличии от Opasity, опция имеет одну замечательную особенность, снижая непрозрачность слоя, она оставляет видимыми все Стили слоя применяемые к изображению. Подробнее:

Удаление слоя или группы

Удаление ненужных слоев уменьшает размер файла изображения.

Чтобы быстро удалить пустые слои, выберите «Файл» > «Сценарии» > «Удалить все пустые слои».

Чтобы произвести удаление, получив запрос на его подтверждение, щелкните значок «Удалить» . Также можно выбрать меню «Слой» > «Удалить» > «Слой» или пункт «Удалить слой» или «Удалить группу» в меню панели «Слои».

Чтобы удалить слой или группу без запроса на подтверждение, перетащите его к значку «Удалить» или щелкните значок «Удалить», удерживая клавишу Alt (Windows) или Option (Mac OS). Также можно нажать клавишу Delete.

Чтобы удалить скрытые слои, выберите меню «Слой» > «Удалить» > «Скрытые слои».

Чтобы удалить связанные слои, выделите один из них, затем выберите меню «Слой» > «Выберите связанные слои». После этого можно производить удаление.

Создать новый слой в «Фотошопе»

Если вы сейчас установите самую первую версию программы Photoshop, то очень сильно ей удивитесь. Вы спросите: где в «Фотошопе» слои? Первые версии графического редактора мало отличались от современного Paint. Поддержка слоев появилась чуть позже. Теперь же без этой функции не обходится ни один профессиональный редактор изображений. В Photoshop можно свободно создавать до тысячи слоев, на скорости работы это никак не отразится. Но это уже экстремальный случай, на практике фотографы задействуют не более 20-30 слоев.

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

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

Где можно использовать обтравочную маску?

Пример обтравочной маски с текстом. Наложение эффектов стиля слоя на базовый слой, и наложение изображения на слой с текстом как маску.

Пример clipping mask виньетка. Простая виньетка фотография вписанная в фигуру облачка.

Пример использования в рисование.  Рассмотрим нарисованный объемный шар при помощи обтравочной маски. На скриншоте ниже можете видеть, как выглядит готовый вариант шара и раскадровку. Слой базы является окружность, все остальное рисуется поверх и заключается в группу clipping mask.

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

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

Как сгруппировать слои?

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

и нажмитеCTRL+G . В любой векторной программе этот шорткат группирует объекты в один блок. В Фотошопе этот шорткат создает специальную папку и складывает все слои в него.

Пустую папку можно создать и из панели слоев. Для этого нужно кликнуть по иконке папки. А слои перетащить в неё вручную. Чтобы разгруппировать слои нажмите CTRL+SHIFT+G

илиLayer > Ungroup Layers. При удалении группы Фотошоп интересуется, что именно нужно удалить? Группу и содержание или только Группу?

Ну и, конечно, ALT + клик

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