Добавляем морозный эффект на фотографию в фотошоп

Шаг 7

Идём в закладку Окно – Кисти (F5) (Window > Brushes (F5)). В окне настроек кисти выберите созданную кисть ‘Заморозка’, затем установите следующие настройки для кисти: в меню Форма отпечатка кисти (Brush Tip Shape), установите Интервал (spacing) на 10%. В менюДинамика формы (Shape Dynamics), установите Колебание размера (size jitter) 100%, а также установите Минимальный диаметр(minimum diameter) 20%. В меню Рассеивание (Scattering) установите Рассеивание (scatter) на 120%, а также Счётчик (count) на 5. В менюДругая динамика (Other Dynamics), установите Колебание непрозрачности (opacity jitter) на 50%, а Колебание количества краски (flow jitter) на 20%.

Шаг 12

Создайте новый слой прямо поверх слоя с эффектом заморозки и с помощью стандартной круглой кисти нарисуйте маленькие кружочки, эти кружочки мы превратим в капельки воды. Варьируйте размер кисти, при этом большинство капель должно быть маленького размера, а также добавьте пару крупных капель. Далее, идём Слой – Стили слоя – Тень (Layer > Layer Styles > Drop Shadow).

Примечание переводчика: 1. для создания капель воды вы можете использовать несколько слоёв: один слой — для мелких капель и один слой — для крупных капель 2. примените стили слоя к нарисованным кружочкам, чтобы создать эффект капель воды.

В настройках стиля слоя Тень (Drop Shadow), установите следующие настройки:

Непрозрачность (opacity) 40%
Режим наложения (blend mode) Затемнение основы (Color Burn),
Смещение (Distance) 1 px
Размер (size) 2 px

В настройках стиля слоя Внутренняя тень (Inner Shadow), установите следующие настройки:

Непрозрачность (opacity) 75%,
Угол (Angle) 90º
Смещение (distance) 0 px
Размер (size) 1 px

В настройках стиля слоя Тиснение (Bevel and Emboss), установите следующие настройки:

Глубина (depth) – 730%
Размер (size) – 4 px
Смягчение (soften) – 3 px
Угол (Angle) – 151º
Высота (altitude) – 37º
Режим тени (shadow mode) – Затемнение основы (Color Burn), Непрозрачность (opacity) 30%, цвет тёмно-красный.

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

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

Normal

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

Непрозрачность синего слоя выставлена на 50%, а под ним расположен красный слой

Dissolve и Dancing Dissolve

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

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

Dancing Dissolve делает то же самое, но обрабатывает каждый кадр по-разному, что создаёт некий самоанимирующийся «танцующий» (dancing) эффект.

Создание анимации первого экрана

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

Копируем Frame

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

Создание копии первого фрейма

Анимация в Figma работает следующим образом: фрейм проекта дублируется и на первом фрейме вносятся изменения, например можно передвинуть логотип и меню наверх. Затем с помощью режима Prototype создается связка со вторым фреймом и настраивается интерактив, то есть то как первый фрейм взаимодействует со вторым. Итог анимации в данном случае будет плавное появление логотипа и меню. Анимация в Figma это переключение между фреймами, здесь нет ключевых кадров как например в After Effects.

Сдвигаем объекты шапки первого фрейма

Убираем логотип и бургер меню вверх, за пределы фрейма:

Сдвигаем логотип и бургер меню на первом фрейме

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

Объекты вынесены за пределы фрейма на панели Layers

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

Возвращение элементов внутрь фрейма

Отлично, разобрались с объектами и фреймом, вернемся к анимации.
Чтобы посмотреть получившуюся анимацию нужно связать первый фрейм со вторым, настроить анимацию и перейти в режим просмотра прототипа в реальном времени (Present).

Режим Prototype

Справа на панели свойств выбираем вкладку Prototype (режим прототипирования), переходим на первый фрейм, в середине появится кружок с синей обводкой. Захватываем этот кружок мышкой и тянем появившуюся стрелку до второго фрейма, после того как стрелка прилипнет к нему, справа появится окно настройки интерактивного взаимодействия с интерфейсом и анимации (Interactive details & Animation).

Связываем два фрейма в режиме Prototype

Настраиваем анимацию

Выставляем следующие параметры:

Настройка анимации

В блоке Interaction Details (детали взаимодействия) выбираем After Delay (действие с задержкой) и напротив ставим тайминг 200ms, этого будет вполне достаточно чтобы не ждать появление элементов долго, но в тоже время чтобы они не появились мгновенно, нужно успеть все рассмотреть.
В блоке Animation (анимация) из выпадающего списка выбираем пункт Smart Animate (умная анимация), ниже указываем свойство анимации Ease Out (плавное затухание), а тайминг ставим 800ms, это нужно для того чтобы анимация была плавной.
Протестируем и посмотрим что получилось, для этого в верхнем правом углу есть кнопка Present (представлять).

Кнопка Present для перехода в режим просмотра прототипа

Тестируем анимацию

Нажимаем на кнопку Present и в режиме просмотра прототипа смотрим результат:

Получившаяся анимация в режиме просмотра прототипа

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

Настраиваем режим просмотра прототипа

Еще одна важная деталь: фон и корпус смартфона в режиме просмотра также можно поменять. Кнопка Show Prototype Settings (показать настройки прототипа) на вкладке Prototype:

Настройка фона и модели для режима просмотра прототипа

Вернемся к нашей композиции и продолжим настройку анимации первого экрана.

Настраиваем появление всех элементов первого экрана

Горы и нижние облака вместе с надписью опускаем чуть ниже, надпись не выносим за пределы фрейма, а в свойствах на вкладке Design устанавливаем прозрачность 0% также как фоновой картинке и верхнему небосводу, облако посередине сдвигаем влево.

Настройка прозрачности и перенос элементов

Тестируем анимацию первого экрана

Нажимаем на иконку Present для того чтобы протестировать анимацию.

Анимация появления первого экрана

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

Настройка прозрачности слоя с вагончиком

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

Matte режимы и Utility режимы

Все перечисленные режимы (за исключением Dissolve) влияют на цветовые значения. Оставшиеся же работают с прозрачностью. Все они работают по-разному и их назначение круто отличается от остальных режимов.

Matte режимы

4 режима используют исходный слой в качестве маски, что очень похоже на функцию Track Matte. Для создания маски используются значения Alpha (прозрачности) или Luma (яркости). Это полезно, поскольку слой может функционировать как маска для всех слоёв ниже, а не только для одного, как в случае с Track Matte.

Для этого примера я применяю режимы к шейпу на 50% серого цвета с красным градиентом под ним.

Stencil Luma и Silhouette Luma дают 50% непрозрачности, основанной на цвете круга.

Alpha Add

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

Тонкая линия по краю маски

Решением будет режим Alpha Add. Если кратко — он изменит математику, стоящую за anti-aliasing’ом для краев слоя и даст бесшовную картинку.

В итоге получаем сплошной объект

Luminescent Premul

Этот режим также предназначен для решения специфических проблем. Иногда при импорте исходника в After Effects, у которого premultiplied альфа-канал, края альфы могут быть слишком яркими. Если вы столкнулись с этим — попробуйте использовать Straight Alpha вместо Premultiplied и затем закомпозьте все в этом режиме. Если вы хотите больше узнать о разнице между straight и premultiplied альфа-каналами — на этой странице написано об этом.

Бонус — ролик по всем режимам наложения в Photoshop

Материал переведён и адаптирован с сайта School of Motion: https://www.schoolofmotion.com/blog/blending-modes-after-effects

Исходники

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

Поиск изображений

Изображения можно добыть разными способами. Например, купить в фотобанке или сфотографировать самому. Мы пойдем простым и быстрым путем — воспользуемся бесплатными из Unsplash и Pexels.
Для создания нашей композиции понадобятся фотографии гор, облаков и каких нибудь объектов на передний план — например, вагончика канатной дороги.

Мои фотографии для создания параллакс эффекта

Подготовка композиции в Photoshop

Дальше вырежем нужные фрагменты в фотошопе и создадим из них композицию с размером фрейма, который мы выбрали в Фигме.
Это можно сделать с помощью любой техники обтравки: лассо, волшебная палочка, маски, каналы и так далее. Просто вырезаем нужный фрагмент и размещаем его на новом слое Photoshop (Ctrl+J).

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

Точно так же с помощью лассо и каналов создается подвесной вагончик.

Отделение вагончика от фонового изображения

Исходник для основной части облаков вырезать не пришлось, потому что нашлась фотография сразу с прозрачным фоном.
Когда основные элементы готовы, создаем новый фрейм (артборд) в Photoshop с размерами 414 х 896 и переносим туда все вырезанные
фрагменты:

Готовая композиция в Photoshop

Сохраняем отдельно каждый слой в формате PNG и переходим в фигму, у меня получилось 8 PNG файлов:

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

Шаг 3

Теперь нам нужно создать ледяное основание, на котором будет стоять бутылка. Создайте новый слой, залейте его белым цветом. Далее, идём Фильтр — Оформление — Меццо-тинто (Filter > Pixelate > Mezzotint) и в окне настроек устанавливаем Тип (type) оформления наСредние точки (Medium Dots). Затем идём Фильтр – Размытие – Размытие в движении (Filter > Blur > Motion Blur). УстановитеСмещение (distance) на 80 px, а Угол (angle) на 0º. Вам, возможно, придётся применить небольшое масштабирование после применения фильтра Размытие в движении (Motion Blur filter), т.к. края не будут ровными, а также не будут совпадать с текстурой в середине слоя.

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

Шаг 10

Создайте ещё один слой, обработайте с помощью слой-маски, как описано в Шаге 8. Не забывайте, что прокрашивать нужно только поверх области с изображением бутылки. Выберите новую кисть, которую вы настроили, и начните прокрашивать кистью белого цвета поверх участков, которые должны быть заморожены. Варьируйте размер кисти, используя клавиши “”, чтобы создать неровный, более реалистичный эффект – начните прокрашивать большой кистью, а затем продолжите прокрашивать кистью очень маленького диаметра. Используйте слабый светло-серый оттенок для создания деталей, такие как тени прямо под крышкой бутылки, а также нижняя часть горлышка. Эти незначительные детали, нарисованные серой кистью, добавят настоящей глубины к создаваемому эффекту.

Сложные режимы

Эти режимы работают на основе яркости. Они будут делать что-то одно с областями, которые ярче 50% серого и что-то другое с областями, которые темнее чем 50% серого.

Overlay

Overlay определённо один из самых полезных режимов. Он применяет Multiply к тёмным областям и Screen к светлым частям верхнего изображения. Результат выглядит так же, как звучит название режима (Overlay = наложение). Порядок расположения слоев важен, так как верхний слой будет виден больше.

Наложение синего градиента на красный.

Soft Light

Немного похож на Overlay, но немного более утончённый. Любые пиксели ярче 50% серого на верхнем слое будут смешаны с нижним слоем. И все точки темнее 50% серого будут затемнены. Это некий микс осветления и затемнения.

Hard Light

Делает то же, что и Overlay, но намного более интенсивно. Верхний слой будет виден сильнее, чем нижний.

Больше синего (так как он верхний), чем красного (он нижний)

Linear Light

Ещё один шаг в сторону экстрима, даже больше, чем Hard Light. Математика Linear Light такая же, как и у Soft Light, но с большей интенсивностью. Этот режим также осветляет и затемняет картинку, основываясь на уровнях серого. Верхний слой также просвечивает больше нижнего.

Намного более интенсивный результат, большая «выгоревшая» белая область

Vivid Light

А этот режим еще более интенсивен, чем Linear Light. Он корректирует контраст нижнего слоя. В результате получаем очень контрастную картинку.

Pin Light

Pin Light делает выбор между верхними или нижними пикселями, основываясь на яркости. Это микс Darken и Lighten на уровне 50% серого для каждого пикселя.

Hard Mix

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

Один пример: дублируем слой и применяем Hard Mix к верхнему. Теперь изменение непрозрачности этого Hard Mix слоя повлечет изменение контрастности нижнего слоя.

Используем дубликат слоя с Hard Mix для управления контрастностью через непрозрачность

Добавляющие режимы (Additive)

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

Add

Как звучит — так и работает (Add = складывать). Цветовые значения каждого RGB канала складываются. Это всегда делает картинку ярче. Это один из самых полезных режимов. Если у вас есть футаж, отснятый на черном фоне (например, огонь), то этот режим зачастую отлично подходит для композа.

Больше половины изображения засвечено на 100%

Lighten

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

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

Противоположен Darker Color. Выбирает наиболее яркий общий цвет.

Screen противоположен Multiply. Он похож на проецирование нескольких фотографий на один экран.

Linear Dodge

Этот режим будет работать так же, как и Add при 100% непрозрачности слоя. Но если понижать её, тогда картинка будет менее насыщенной, чем с Add.

Непрозрачность синего слоя выставлена на 50% + режим Linear Dodge

Add и Linear Dodge выглядят одинаково при 100% непрозрачности

Color Dodge и Classic Color Dodge

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

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

Шаг 4

Идея данного шага заключается в том, чтобы создать пол, постепенно исчезающим в бесконечном пространстве заднего фона. Для этих целей мы используем быструю маску. Нажмите клавишу “Q”, чтобы войти в режим Быстрой маски (Quick Mask), выберите инструментГрадиент (Gradient Tool (E)). Потяните градиент от нижней точки рабочего документа и до середины. Область красного цвета в режиме быстрой маски означает, что эта часть изображения будет видна, а прозрачная область будет скрыта.

Когда вас устроит область выделения, ещё раз нажмите клавишу “Q”, чтобы перейти из режима быстрой маски в режим активного выделения. Далее, идём Слой – Слой-маска — Показать Выделение (Layer > Layer Mask > Reveal Selection).

Вычитающие режимы (Subtractive)

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

Darken

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

Синий слой с режимом наложения Darken и 100% непрозрачности

Darker Color

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

Multiply

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

Linear Burn

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

Color Burn и Classic Color Burn

Этот режим увеличивает контраст нижележащего слоя с помощью цветовой информации исходного слоя. Если верхний (исходный) слой белый, то ничего не изменится. Пожалуй, этот режим это что-то между Multiply и Linear Burn. Порядок следования слоёв имеет значение, поскольку нижний слой просвечивает больше.

Classic Color Burn унаследован от Ae 5.0 и более ранних версий. У него есть некоторые ограничения, поэтому обычно предпочитают обычный Color Burn.

Разностные режимы (Difference)

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

Difference и Classic Difference

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

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

нижний слой

Верхний, немного изменённый дубликат

Включаем Difference и видим разницу

Classic Difference заметно отличается только тогда, когда непрозрачность слоя меньше 100%. У Classic больше цветов на переходах, чем у Difference и поэтому картинка более насыщена в этих областях.

Заметна меньшая насыщенность в области перехода, она более серая

Exclusion

Во многом похож на Difference, за исключением того, что результат менее контрастный и цвета не такие насыщенные. Если один из слоёв на 50% серый — результатом будет серый, а не какой-либо измененный цвет. Не такой дикий, как Difference.

Видно больше серого цвета в правой части изображения

Subtract

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

Светлые области синего градиента (верхний слой) дали черную область в результате

Divide

Этот режим тоже немного странный. Он делит цветовые значения, и так как значения для черного и белого будут 0.0 и 1.0 соответственно, делиться будут числа, которые меньше единицы. Теперь немного математики…когда мы делим на дробь — результатом будет число больше исходного. Так, 1 разделенное на 0.5 идентично умножению на 2.

Короче, темные области Divide сделают изображение ярче.

HSL режимы

Что еще за HSL? Hue, Saturation и Luminance (Оттенок, насыщенность и яркость).

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