Как сделать параллакс из фотографии
Добавил пользователь Евгений Кузнецов Обновлено: 05.10.2024
Уроки по Фотошопу. Как сделать 2.5D Параллакс эффект в фотошопе. Мы привыкли, что в фотошопе редактируются изображения, но возможности этой программы значительно шире, поэтому помимо параллакс эффекта можно посмотреть еще и как создать небольшой видеоролик. Подобные эффекты можно создавать и при помощи экшенов, за некоторые из них даже деньги просят. Этот эффект часто используют в заставках телепередач, клипах, оживших картинках.
Как вариант, подобное можно реализовать используя эффекты слайдеров для WordPress, изменение масштабов объектов реализовано в часто встречающихся Revolution Slider и Master Slider.
Об оживлении (анимировании) фона Главного экрана методом parallax мы уже описали в статье Как сделать объёмные обои с эффектом движения на Samsung. (Для перехода к статье нажмите здесь)
И сделать это можно очень даже просто. Вернее было очень просто.
Поэтому сейчас установить на смартфон обои с параллакс эффектом можно только установив соответствующее приложение.
А что такое обои с паралакс эффектом?
А как установить параллакс обои на смартфон Samsung Galaxy?
В магазине приложений таких программ очень много, так как эффект параллакса являются не просто самой популярной тенденцией в веб-дизайне, а даже очень востребованной и зачастую необходимой, особенно при создании веб-сайтов.
Такие приложения, как правило, имеют в своей коллекции очень большое количество готовых обоев, которые удовлетворят каждого, и механизмы, которые позволяют владельцу смартфона создать собственные обои из личных фотографий оживлённых параллакс эффектом.
Далее мы опишем процесс установки одного из таких приложений на редакционный смартфон Samsung Galaxy A50 с ОС Android 10.
Инструкция по установке parallax обоев на экран смартфона Samsung.
1. Запускаем с Главного экрана магазин приложений Google Play Маркет.
Скрин №1 – нажать на значок приложения Play Маркет.
2. На основной странице приложения активируем строку поиска в верхней части экрана, нажав не неё.
Сейчас в списке готовых обоев более 350 официальных 4K обоев с эффектом глубины 4D. И все эти варианты имеют возможность индивидуальной настройки.
А далее определить его положение, выбрав одно из двух:
— Главный экран;
— Главный экран и экран блокировки.
Положительной особенностью этого приложения является ещё и то, что все обои адаптированы под AMOLED экраны, которыми оснащены большинство смартфонов Samsung Galaxy.
При малейшем повороте смартфона фон экрана начинает оживать, создавая эффект глубокой перспективы.
8. Давайте, в качестве эксперимента, установим ещё один вариант обоев.
Наше внимание привлекла фотография дикого рыжего кота.
Скрин №19 – вид Главного экрана с живым диким Котом в виде параллакс-обоев.
Эффект Параллакса также известен как Эффект Кена Бернса, который назван в честь режиссера, который сделал этот эффект своим фирменным визуальным стилем в своих документальных фильмах. Этот метод представляет собой эффект панорамирования и масштабирования, который используется для создания чего-то вроде видео из неподвижных изображений. Масштабирование и панорамирование на фотографиях создает ощущение движения, благодаря которому зритель визуально активен.
Вот пример эффекта параллакса в действии, чтобы проиллюстрировать то, что я пытаюсь описать.
И вот еще один хороший пример:
Эффект также можно назвать эффектом параллакса 2.5D. 2.5D относится к визуальному восприятию глубины в двухмерном изображении или виде. Если вы хотите применить этот эффект параллакса на своих фотографиях, вы можете с помощью Photoshop.
Мы собираем одни из лучших уроков по параллаксу в фотографии. Для некоторых из них может потребоваться дополнительное программное обеспечение для редактирования видео, например Adobe After Effects. Если у вас его нет, вы можете обратиться к руководству, которое создает эффект параллакса с открытым программным обеспечением.
Взрыв из прошлого: более 40 уроков по Photoshop, чтобы проверить свои навыки
Эффект параллакса — 2-минутный дизайн
Это видео с 2-минутного канала Design покажет вам, как добиться эффекта параллакса, используя только Photoshop CC. Видео короткое (отсюда и 2-минутный таймфрейм), но оно дает нам много уловок о том, как добиться этого эффекта.
Анимированные фотографии в фотошопе — Майкл Тирни
Используя только слои Photoshop и панель временной шкалы, Майкл Тирни рассказывает нам, как анимировать более сложные фотографии параллакса, содержащие здания и мост в кадре. Через 12 минут вы узнаете больше о создании эффекта параллакса, чем раньше.
2.5D Учебник по эффекту параллакса Photoshop — Spoon Graphic
На этот раз Крис из блога Spoon Graphic покажет нам, как создать эффект параллакса, на трех классных примерах. Это не обычное пошаговое руководство по фотошопу (отсюда 6 минут), но оно дает нам много полезных советов и приемов.
Эффект Кена Бернса — обучающий канал Photoshop
Учебный канал Photoshop дает нам этот удивительный 30-минутный пошаговый урок Photoshop. То, что эти парни делают по-разному — это анимация панорамирования и масштабирования одновременно, что очень круто. В этом уроке они используют Photoshop CS6.
Учебник по эффекту параллакса — Lankapu Chen
Этот учебник, созданный Ланкапу Ченом, состоит из двух частей, каждый менее пяти минут. В нем рассказывается об основах совместной работы Photoshop и After Effects для создания простого эффекта параллакса с двумя патчами цветов.
Создать 2.5D видео с параллаксом — Брэндон Брэдли
В этом 12-минутном видеоуроке Брэндон Брэдли проведет вас по необходимым шагам, чтобы превратить вашу стандартную 2D-фотографию в забавное 3D-видео с параллаксом.
2.5D эффект параллакса с использованием бесплатного программного обеспечения — Патрик Дэвид
Вдохновленный работами Джо Феллоу для WWF, Патрик Дэвид поиграл с открытым исходным кодом для достижения эффекта параллакса 2.5D. Как вы уже догадались, он успешно объединил Blender и Gimp для достижения эффекта параллакса. Вы можете прочитать его полное пошаговое руководство Вот,
Проверьте его работу в этом видео ниже:
И это все на сегодня. Что вы думаете о нашем списке? Вам интересно попробовать любой из них? Если вы считаете, что есть еще один классный учебник, который мы забыли добавить, поделитесь им в разделе комментариев.
Параллакс анимация в Figma
Используя возможности Figma, можно быстро и просто продемонстрировать заказчику сложную интерактивную анимацию типа параллакс эффекта. Это делается буквально в несколько шагов.
Что будет в этом уроке
Мы сделаем такой красивый, эффектный и простой параллакс эффект:
Что такое параллакс эффект в веб-дизайне
Параллакс эффект — это специальный прием при котором объекты переднего плана движутся быстрее относительно фонового изображения когда страница прокручивается вверх или вниз, за счет чего создается иллюзия объема который часто применяется в веб-дизайне.
Подготовка рабочего пространства в Figma, выбор фрейма
На основной панели инструментов Figma или с помощью клавиши F выберите нужный вам Frame — то рабочее пространство, где вы будете работать над созданием проекта.
Выбор фрейма на основной панели инструментов
Я выбрал для примера фрейм iPhone 11 Pro Max с размерами 414 х 896.
Рабочее пространство в Figma готово
Исходники
Теперь нужно подобрать исходные изображения из которых состоит проект, вырезать нужные части в Photoshop и создать красивую композицию для реализации параллакс-эффекта.
Поиск изображений
Изображения можно добыть разными способами. Например, купить в фотобанке или сфотографировать самому. Мы пойдем простым и быстрым путем — воспользуемся бесплатными из Unsplash и Pexels. Для создания нашей композиции понадобятся фотографии гор, облаков и каких нибудь объектов на передний план — например, вагончика канатной дороги.
Мои фотографии для создания параллакс эффекта
Подготовка композиции в Photoshop
Дальше вырежем нужные фрагменты в фотошопе и создадим из них композицию с размером фрейма, который мы выбрали в Фигме. Это можно сделать с помощью любой техники обтравки: лассо, волшебная палочка, маски, каналы и так далее. Просто вырезаем нужный фрагмент и размещаем его на новом слое Photoshop (Ctrl+J).
Изображение гор из двух фрагментов: горы на фоне и горы, которые ближе к зрителю. В итоге получилось два отдельных слоя
Точно так же с помощью лассо и каналов создается подвесной вагончик.
Отделение вагончика от фонового изображения
Исходник для основной части облаков вырезать не пришлось, потому что нашлась фотография сразу с прозрачным фоном. Когда основные элементы готовы, создаем новый фрейм (артборд) в Photoshop с размерами 414 х 896 и переносим туда все вырезанные фрагменты:
Готовая композиция в Photoshop
Сохраняем отдельно каждый слой в формате PNG и переходим в фигму, у меня получилось 8 PNG файлов:
Получившиеся изображения на прозрачном фоне готовы к экспорту в Figma для дальнейшей работы
Размещение элементов на фрейме в Figma
Теперь все полученные PNG изображения нужно аккуратно разместить на созданном ранее рабочем пространстве в Figma.
Повторяем композицию в Figma
Возьмите за правило давать четкие и простые названия слоям, чтобы при работе с ними было проще ориентироваться в созданной композиции.
Когда композиция готова можно приступать к созданию анимации параллакс-эффекта. Но так как мы делаем анимацию для мобильного устройства, то для большей достоверности можно добавить еще несколько элементов — логотип, бургер меню и какую-нибудь надпись на темном фоне. Например вот так:
Добавление элементов — логотип, бургер меню и надпись
Frame готов, можно приступать к созданию анимации первого экрана.
Создание анимации первого экрана
На самом деле этот шаг можно пропустить, но он дает понимание работы анимации в 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 для того чтобы протестировать анимацию.
Анимация появления первого экрана
Можно сделать еще анимацию вагончика, например выезжает слева или сверху, или вообще оставить на месте и поиграть с прозрачностью:
Настройка прозрачности слоя с вагончиком
Первый экран готов, уже сейчас можно сказать что эффект параллакса имеет место быть, но в большей степени он проявит себя при прокрутке страницы вверх или вниз. Переходим к интерактиву, сделаем так чтобы при прокручивании страницы, изображения двигались с разной скоростью создавая полноценный красивый эффект параллакса.
Создание интерактивной анимации
Для создания интерактивной анимации понадобится третий фрейм. Его легко создать из второго фрейма сделав копию — зажимаем мышкой левый верхний угол второго фрейма и тянем его вправо с зажатой клавишей Alt. Далее на третьем фрейме делаем те же манипуляции что и на первом: смещаем слои и используем прозрачность. Затем связываем фреймы в режиме прототипа и настраиваем интерактив и анимацию.
Настраиваем появление элементов третьего фрейма
Слои на третьем фрейме в этот раз сдвигаем вверх: вагончик уезжает за пределы фрейма, темная гора доезжает до логотипа, фоновая гора чуть смещается вверх, облака практически исчезают, надпись смещается вслед за темной горой:
Элементы третьего фрейма
Связываем второй и третий фрейм в режиме Prototype и настраиваем анимацию
Переходим на вкладку Prototype и стрелочкой связываем второй и третий фрейм. В появившемся справа окне указываем следующие параметры:
В первом блоке выбираем On Drag (перетаскивание), это нужно для интерактивного взаимодействия с прототипом, ну как будто мы пальцем сдвигаем страницу вверх, во втором блоке скорость анимации меняем на 1100ms, все остальное оставляем без изменений. Тестируем:
Тестирование интерактивной анимации в режиме просмотра прототипа
Можно еще поиграть со скоростью перемещения элементов, а также с их расположением, но и сейчас все выглядит достаточно неплохо. Вернуть экран в исходное положение пока не получится потому что не настроена связь третьего фрейма с чем бы то ни было, на нем анимация заканчивается.
Настраиваем обратную связь для возврата на предыдущий фрейм
В режиме прототипа перемещаем стрелку обратно на второй фрейм, таким образом создаем возврат с третьего фрейма на второй при пролистывании.
Связываем третий фрейм со вторым в обратном порядке
Далее в настройках выбираем On Drag, а анимацию на возвращение делаем чуть быстрее — 1000ms, все остальное без изменения:
Тестирование интерактивной анимации скроллирования вверх и вниз
Отлично, для финального варианта не хватает контента на темном фоне. Добавьте его самостоятельно, можно добавить блок текста или карточки:
Финальное тестирование интерактивной анимации
При добавлении карточек принцип тот же самый — добавляем карточки, сдвигаем за пределы фрейма, возвращаем во фрейм на панели Layers, используем прозрачность. Все просто.
Финальный результат
Финальный результат с появлением первого экрана и интерактивной анимацией
Получился отличный параллакс эффект — за счет того что передние элементы движутся быстрее фоновых создается некий объем. Интересен эффект еще тем что запускается во время взаимодействия с интерфейсом, то есть во время пролистывания страницы.
P/S/ Запилю чуть позже гайд по созданию верхней иллюстрации (если будет лень то не запилю), которая готовилась специально для этого урока
Читайте также: