Параллакс — эффект в Фотошоп. Параллакс в фотошопе


PhotoshopSunduchok - Как сделать параллакс эффект

 

В этом уроке мы рассмотрим, как можно в программе Photoshop CC 2015 или в любой другой версии, самостоятельно выполнить эффект ПАРАЛЛАКС – изменение видимого положения объекта относительно удалённого фона.

Проще это эффект приближения (наезда) или отдаления (отката). 

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

 

 

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

2

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

Для этого применяя инструмент быстрое выделение (клавиша W) или любой другой удобный для Вас, выделяем нашу героиню.

3

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

4

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

5

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

6

Появляется окно выбора настроек «Заполнить», в нем выбираем Содержание: «С учетом содержимого» и ставим галочку, задавая тем самым применение функции «Цветовая адаптация». Нажимаем клавишу «Ок».

7

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

8

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

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

9

Основные настройки:

˗ Ширина 1920 пикс.,

˗ Высота 1080 пикс.,

˗ Разрешение 72 пикс/дюйм.

Нажимаем «Ок». Теперь в программе открыто два документа.

10

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

11

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

12

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

13

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

14

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

15

Перенесем оба слоя изображения на новый документ. Для этого переместим курсор мышки на палитру слоев (на один из слоев), его вид со стрелки поменяется на изображение кисти руки с выставленным указательным пальцем. Зажав ЛКМ, тащим на название созданного нового документа. При появлении в окне просмотра изображения нового документа, не отпуская ЛКМ, опускаем наши слои на это изображение.

16

В момент, когда полупрозрачное изображение слоев окажется на изображении нового документа отпускаем ЛКМ.

17

В меню «Редактирование» выбираем пункт «Свободное трансформирование» или нажимаем комбинацию клавиш Ctrl+T.

18

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

19

Для того чтобы вписать изображение снимка в размеры созданного документа пропорционально и относительно центра, уменьшаем его размеры. Зажимаем клавиши Alt и Shift тянем к центру один из уголков рамки инструмента. Далее поместив маркер мышки на область изображения, выравниваем его относительно центра до появления вспомогательных линий. Нажимаем клавишу «Enter» (Ввод).

20

Теперь необходимо создать панель «Шкала времени». В меню «Окно» выбираем соответствующий пункт.

21

Ниже окна просмотра на основном поле экрана появляется панель «Шкала времени». На ее поле нажимаем на надпись «Создать шкалу времени для видео».

22

На панели отображаются все наши слои с элементами управления и регулировок.

23

Переходим сначала к слою с изображением фона. Раскрываем его, нажав на стрелочку слева от названия.

24

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

25

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

26

Нажатием комбинации клавиш Ctrl+T, вызываем команду свободного трансформирования. Проверяем, чтобы был активным слой с фоном. Увеличиваем размер ≈ на 20% процентов, нажав одновременно Alt и Shift, тянем от центра один из уголков рамки инструмента трансформирования. Нажимаем клавишу «Enter» (Ввод).

27

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

28

Переводим бегунок временной шкалы в начало (в левую сторону). Создаем маркер, нажав на значок «Часики».

29

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

30

Зажимаем Ctrl+T и проделываем те же процедуры, увеличения размера изображения, что и с изображением фона. Увеличивать размер можно, насколько хотите, чтобы получить конечное изображение переднего плана по Вашему желанию. Нажимаем клавишу «Enter» (Ввод).

31

Барабанная дробь! Нажимаем значок «Выполнить».

32

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

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

33

Появляется окно настроек экспорта. На данный момент самым оптимальным и рекомендуемым видеосервисами YouTube и Vimeo вариантом экспорта для Web, является кодек Н.264. Все наборы для этого формата сгруппированы в логические блоки: название ресурса + размер кадра + частота кадров, например YouTube + HD 1080p + 29,97. Выбираем необходимые Вам настройки, также можно определить имя файла. Нажимаем клавишу «Рендеринг».

34

После выполнения экспорта видео  

35

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

36

Творческих успехов!

 

 

 

Если Вы не хотите пропустить интересные уроки по обработке фотографий - подпишитесь на рассылку.

Форма для подписки находится ниже.

 

www.photoshopsunduchok.ru

Параллакс — эффект в Фотошоп

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

Параллакс - эффект в Фотошоп-01

Создаем новый слой с такими же размерами.

Параллакс - эффект в Фотошоп-02

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

Параллакс - эффект в Фотошоп-03

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

Параллакс - эффект в Фотошоп-04

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

Параллакс - эффект в Фотошоп-05

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

Параллакс - эффект в Фотошоп-06

Далее можно приступать к созданию анимации.

Параллакс - эффект в Фотошоп-07

Нажимаем на создание шкалы времени.

Параллакс - эффект в Фотошоп-08

Появится следующая шкала.

Параллакс - эффект в Фотошоп-09

Далее следует стать на нижний слой и раскрыть слой.

Параллакс - эффект в Фотошоп-10

Далее следует нажить на часики. Маркер движения должен быть вначале. Далее следует нажать на «Добавление или удаление ключевого кадра в точке указателя воспроизведения» — ромб между переходами к ключевым кадрам. Ромб должен стать желтым.

Параллакс - эффект в Фотошоп-11

В конце слоя нужно нажать на уголок «Движение» и установить значение, как показано на рисунке.

Параллакс - эффект в Фотошоп-12

Далее следует сдвинуть маркер движения в конец.

Параллакс - эффект в Фотошоп-13

После этого снова нажать на ромбик, чтобы он стал желтого цвета.

Параллакс - эффект в Фотошоп-14

После этого необходимо увеличить слой. Комбинацией клавиш Ctrl + T активируем «Масштабирование», а чтобы уменьшить слои пропорционально, удерживая нажатыми клавиши Shift + Alt кнопкой мыши расширить слой.

Параллакс - эффект в Фотошоп-15

Переходим к следующему слою. Переводим в начало маркер движения. Обратите внимание, что нижний слой вернется к исходному положению. Раскрываем слой. Нажимаем на часики. Также устанавливаем тип движения.

Параллакс - эффект в Фотошоп-16

Передвигаем маркер движения в конец и нажимаем на ромбик.

Параллакс - эффект в Фотошоп-17

Слой с девушкой увеличиваем.

Параллакс - эффект в Фотошоп-18

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

Параллакс - эффект в Фотошоп-19

Если все получилось, то анимацию можно сохранить в формате видео. Для этого следует нажать на иконку экспорта.

Параллакс - эффект в Фотошоп-20

На экране появится окно о ходе выполнения экспорта.

Параллакс - эффект в Фотошоп-21

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

Параллакс - эффект в Фотошоп-22

Далее установить формат.

Параллакс - эффект в Фотошоп-23

Далее нажать на рендеринг.

Параллакс - эффект в Фотошоп-24

На экране появится окно о ходе выполнения экспорта.

Параллакс - эффект в Фотошоп-25

Также анимацию можно сохранить в формате gif.

Параллакс - эффект в Фотошоп-26

Параллакс - эффект в Фотошоп-27

РЕЗУЛЬТАТ

parallax

www.fotokomok.ru

Плюсы Параллакса Для Веб-Дизайна И Полезность Photoshop

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

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

Загадочный параллакс

Термин «параллакс» относится к движению объектов, на которые смотрят с разных позиций. Изначально его применяли в 2D-играх, где фоновые изображения перемещались значительно медленнее изображений, находившихся на переднем плане. Таким образом создавался эффект глубины. Сейчас в игровой индустрии чаще используется понятие «2,5D» (AC Chronicles), когда речь заходит о типе проекта. Это не трехмерный вариант и не плоский двухмерный, а с иллюзией глубины. Впервые такая иллюзия была использована в проекте Moon Patrol в 1982 году. И кто бы тогда мог знать, что спустя три десятилетия этот эффект станет популярен в среде веб-дизайнеров!

Для сайтов это был долгий путь от обычного вида к почти трехмерному. Благодаря  HTML5, CSS3 и технологиям современных браузеров параллакс стал применяться чаще. Это такие яркие примеры, как madebyfew, Myriad, firewatch, madwell.

Мобильность

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

  

Не для галочки

Не стоит использовать параллакс в любом варианте только ради того, чтобы он был на сайте. Greensplashdesign или r-magazine могли обойтись и без этого эффекта. Смысл и визуальная красота не потерялись бы все равно, да и пользовательского опыта от использования не прибавляется. С другой стороны, проектам lebledor  и highway-one-roadtrip наличие параллакса только на пользу, ибо становится чуть более интересней изучать информацию и осознавать некоторые детали.

Сюжетный путь

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

 

Предзагрузка изображений

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

Реализация параллакса

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

Для реализации на сайте обычно учитывают факторы:

  • Начальная точка (наблюдатель)
  • Объект
  • Фон
  • Действие, которое активирует движение в случае, если создается интерактивность.

Например, проекты spaceneedle, kasatkavodka, parallax.js красивейшие примеры работы самого что ни на есть «настоящего» параллакса. Причем с прокручиваемым эффектом и без. Но в действительности параллакс-скроллинг выглядит очень круто, поскольку все слои движутся с разной скоростью и создается псевдотрехмерный эффект.

Если создавать интерактивный проект нет желания/смысла, но включить эффект параллакса все же хочется, то некоторые веб-дизайнеры используют для этого видео в удобном формате. То есть, фон создается как видео, но в нем показывается анимация 2,5D. Уже поверх него накладывается текст, кнопки, секции и прочее.

Плагины для параллакс-скроллинга

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

  • Scrolldeck – описание работы, примеры
  • Scrolling Parallax – функциональный плагин с подробным описанием как создать, где прописать изображения, во сколько слоев и пр.
  • jParallax – позволяет элементам страниц двигаться за курсором мышки.

Использование Photoshop

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

Зачем?

Как минимум для того, чтобы подготовить красивые фоновые фотографии, видео, оформить элементы. Описывать все и всегда через javascript/jQuery может быть не вариант, а вот оснастить фото-, видеоэффектом – проще и быстрее. Например, проект Аimiam.com как раз и используют легкую анимацию параллакса на фоне, её также используют при панорамных проектах, 3600. Примеры мы приводили в соответствующих наших материалах.

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

Вариации 2,5D эффекта. Совсем иное исполнение и иной смысл.

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

Открываем нашу фоточку и аккуратно Пером или Магнитным Лассо, или иным выделением обводим самолет. Причем обвести нужно все детали. Кликаем ПКМ и копируем выделение на новый слой.

Теперь кликаем по слою с объектом и выполняем Загрузить выделенную область (Ctrl+лкм). У нас появится выделение этого самолётика. Не снимая выделения, переходим на слой с фоном (нижний) и выбираем Выделение ->Модификация -> Расширить. Таким образом, мы увеличиваем границу выделения. Делается это для повышения качества заливки фона.

Все еще оставаясь на нижнем слое и не отменяя выделения, переходим Редактирование - > Выполнить заливку. В появившемся окне выбираем «с учетом содержимого». Таким образом, мы очистили задний план изображения и разделили фотографию на части. У нас отдельно есть самолет и небо с взлетно-посадочной полосой. Если объектов много и все они будут участвовать в движении, то эти  действия по разделению нужно повторить.

Создаем новый документ, размером чуть меньше, чем само изображение. Если фотка у нас 800 по ширине, мы взяли 500 для примера. Копируем имеющиеся слои в новый документ. ПКМ по ним и в списке выберите Дублировать слои.

В новом документе (холсте) если вы подвигаете, например Слой 1, то он будет свободно «ходить» и не будет полностью умещаться на фоновом слое. Иными словами, ему есть, где уменьшаться.

Переведите оба слоя в смарт-объект и открывайте Шкалу времени или Анимация.

Теперь пофантазируем. Кликаем по Слой 1 слева и появляется список возможных свойств. Выбираем Перспектива и устанавливаем первый маркер в начале шкалы видео. Выделяем слой Ctrl+T и уменьшаем этот слой до границ холста. Подтверждаем трансформирование.

Синюю стрелку времени перемещаем в конец и устанавливаем второй маркер Перспектива. В свободном трансформировании оный слой увеличиваем. Насколько? Как вам нравится, но не сильно. Мы почти скрыли взлетно-посадочную полосу.

Аналогично проделайте трансформацию и перемещение объекта на слое 2, установив две точки, но объект должен иметь большее увеличение.

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

Теперь сохраните анимацию в GIF или MP4 и можно использовать.

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

Эффект все равно будет создавать ощущение того, будто наблюдатель хочет посмотреть за край объекта, увидеть что там. Такие изображения интригуют и посетитель, разумеется, дольше остается всегда на сайте. А как же не посмотреть?!

Эффективность создания параллакса – плавность движения объектов. Фон – медленней, передний план – быстрее (поэтому мы увеличивали самолетик).

Еще некоторые красивые примеры: pollenlondon, soundscape, zameckezahrady

Собственный опыт

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

Вы сидите перед монитором, а за ним пусть будет стена/окно/горшок с цветком на подоконнике. Важно, что еще один объект, крупный.

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

Как почувствуете, что зрение расслаблено, чуть поверните голову, смотря на грань и немного улавливая стенку. Плавно, туда-сюда. Вам покажется, что монитор тоже двигается, немного. То есть, и монитор, и стена в разные стороны. Это и есть параллакс. Представьте перед монитором бегущего человечка или еще один объект в движении…

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

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

Именно по этому принципу и создается параллакс в веб-дизайне, в Photoshop. Объекты плавно двигаются, создавая чувство глубины, в противном случае, это будет обычное наслоение секций и инфоблоков.

 Завершение

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

Главное, представлять и понимать суть эффекта; понимать, что означает «параллакс» и как он реализуется. Затем остается разложить объекты на слои и задать объектам нужную скорость. Какую и как? Снова в деле фантазия дизайнера. Еще один вариант дизайн-стиля, который просто заставляет веб-мастеров фантазировать и играть со скоростями, объектами, эффектами.

Расскажите друзьям!

3112

20 Июль 2017

wayup.in


Смотрите также