Анимация: живая фотография в Фотошоп. Урок 2.

Здравствуйте! На дворе солнечные деньки, украинских школьников отправили на двойные каникулы, а я с вами буду сегодня реанимировать и пересаживать цветочки :-) .

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

как сделать живую фотографию в Фотошоп из видео

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

Видео обрезано, открываю его в Фотошоп Файл => Открыть (File => Open) (Ctrl+O).

1. Настройка скорости смены кадров и их количества.

Одновременно с открытием видеофайла должна открыться панель Шкала времени (Timeline), если нет — открываем Окно => Анимация (в CS6 — Шкала времени). В верхнем правом углу Шкалы времени нажмем значок контекстного меню и выберем команду Задать скорость смены кадров. В открывшемся окне ставим вместо 25 значение 7.

шкала времени при открытии видео в Фотошопе

2. Тоновая коррекция видео.

Теперь нужно немного откорректировать картинку. Создадим корректировочный слой Уровни, нажав кнопку  корректировочный слой кнопка или Ctrl+L и переместим правый и средний движок влево, а крайний слева — вправо.

тоновая коррекция синемаграфии

Этим мы сделали изображение более контрастным.

3. Создание слоев из видео.

В контекстном меню Шкалы времени выбираем: Создать СЛОИ из кадров. У меня было 26 кадров видео, соответственно появилось 26 слоев с картинками. Подумав, я решила, что их слишком много, и удалила 7 последних слоев. Осталось 19.

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

удаление исходного и корректировочного слоя

4. Создание маски для каждого слоя.

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

Чтобы не кликать мышью много раз, поступим иначе: зажав Alt, кликнем на глаз у слоя »Кадр 0″, эта команда сделает видимым только этот слой. А затем обычным кликом по глазу откроем видимость слоя «Кадр 1″.

Скрывать под маской явно придется больше, чем оставлять, поэтому, находясь на втором слое — «Кадр 1″ - создадим инвертированную маску, черную, нажимая значок маски  Добавить маску (Add mask) внизу палитры Слои и удерживая при этом Alt. Черный цвет маскирует, белый — возвращает видимость, поэтому в данный момент весь второй слой исчез, скрылся под маской. Кстати, при создании маски автоматически устанавливается основной цвет — черный, фоновый — белый.

Теперь мы будем «проявлять» на маске цветы кистью белого цвета, поэтому нажмем Х для смены основного и фонового цветов и выберем круглую кисть с непрозрачностью 100% и жесткостью около 70%.

создание маски слоя для синемаграфии

Рисуем по маске, пока полностью не проявятся цветы и стебли на слое «Кадр 1″. Возможно, понадобится делать невидимым нижний слой, чтобы правильно оценить границы. Получается вот так:

создание синемаграфии в Фотошоп

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

Практически это делается так. После создания самой первой маски на слое «Кадр 1″:

  • включаем видимость слою «Кадр 2″;
  • удерживая Ctrl, кликаем по маске слоя «Кадр 1″, загружается выделение;
  • редактируем выделение инструментом Лассо;
  • активируем слой «Кадр 2″ и нажимаем кнопку Добавить маску слоя;
  • выключаем видимость слою «Кадр 1″ и при необходимости редактируем маску слоя »Кадр 2″ кистью. 

Черный цвет кисти делает изображение невидимым, белый — видимым.

Что же происходит? Когда мы сделали видимым слой »Кадр 2″ и загрузили выделение маски слоя »Кадр 1″, нам стали хорошо видны все отклонения границ цветков на двух слоях. Они не должны совпадать полностью, ведь цветы двигаются, на каждом слое немного отклоняясь от предыдущего положения.

загрузить и редактировать выделение для синемаграфии

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

Получаем уточненную картинку с цветками на слое «Кадр 2″.

синемаграфия в Фотошоп: маска для каждого слоя

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

5. Перевод видео в покадровую анимацию.

Когда маски на всех слоях, кроме нижнего, готовы, пора создавать покадровую анимацию из слоев. В нижнем левом углу Шкалы времени нажмем кнопку в виде трех квадратиков или выберем аналогичную команду в контекстном меню Шкалы времени: Преобразовать в покадровую анимацию. После этого на Шкале времени вместо слоев видео мы увидим один кадр с длительностью нашего видеоролика. Теперь в контекстном меню выбираем команду Создать КАДРЫ из слоев. Нажатием на треугольник в правой нижней части первого кадра открою меню выбора времени отображения кадра и поставлю «Без задержки». Внизу шкалы вместо значения параметра цикла Однократно выбираю Постоянно.

6. Редактирование фона.

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

Для этого, находясь на первом кадре анимации (на Шкале времени) нашей будущей синемаграфии и на нижнем слое в палитре Слои, активируем выделение цветка, удерживая Ctrl и кликнув по маске второго слоя. Затем в меню выберем Выделение (Select) =>  Модификация (Modyfi) => Растушевка (Feather) (Shift+6) и введем значение растушевки 10. Видим при этом, что выделение расширилось. Далее идем в меню Редактирование (Edit) => Выполнить заливку (Fill) (Shift+5) и в выпадающем окне Содержимое (Contents) выбираем С учетом содержимого (Content-Aware). Выделенная область заполнилась рисунком, подобранным программой автоматически из окружающих пикселей.

заполнить с учетом содержимого: синемаграфия

Правда, эта функция доступна лишь начиная с версии Photoshop CS5. Если версия ниже, или эффект от заливки вас не устроил, придется для закрашивания фона воспользоваться Штампом или Заплаткой.

7. Сохранение живой фотографии (синемаграфии).

Наши кадры готовы к движению. Теперь включим видимость слоя «Кадр 0″ во всех кадрах анимации, ведь это наш фон. Для этого выделим с помощью клавиши Shift все кадры, начиная со второго, и включим видимость нижнего слоя. Нажмем кнопку воспроизведения на шкале времени, чтобы убедиться, что все в порядке. Если нужно, корректируем время отображения кадров.

 Остается только сохранить анимацию в формате gif. Для этого идем в Файл => Сохранить для Web (File => Save for Web) (Alt+Shft+Ctrl+S) и выбираем формат файла GIF. Необходимые параметры подробно указаны в Уроке 1 по созданию синемаграфии.

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

Я сама до этого додумалась!..:-)

Вот, к примеру, моя самая первая и любимая живая фотография с бабочками.

синемаграфия: бабочки на цветах

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

как разместить анимацию в фотографию

А это уже знакомые нам колокольчики.

синемаграфия

И романтичный таинственный вариант…

синемаграфия: анимируем Сумерки

Моя любимая сцена в фильме!..

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

Пусть осенние листья, цветы, воспоминания и фильмы радуют вас и вдохновляют на новые творческие свершения!

Удачной работы!

23 комментарий на «Анимация: живая фотография в Фотошоп. Урок 2.»

    • Спасибо, Николай, детки — это чудо… Вряд ли удивлю тебя, заметив, что в ней сочетается замечательным образом и ангел, и чертенок))))
      Фотоальбомы я нежно люблю и коплю, коплю фотографии)

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

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

    • Надежда, я уверена, что с Вашей организованностью и силой воли реально достижение любой поставленной цели!

    • Я тоже недавно узнала, Ольга! Совершенно не представляла себе, что видео можно открывать в Фотошопе. Сколько же еще открытий предстоит!

    • Татьяна, благодарю! Очень приятно слышать такой отзыв, хотя мастером меня пока считать рановато… Буду стараться радовать вас новыми картинами!

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

    • Отлично, заходите, Алла, и спасибо за комментарий. Надеюсь, Вам понравится этот удивительный процесс!

  2. Приветствую Эмили! Давненько не был на Вашем сайте и вот сегодня у меня побольше времени. Я хочу Вас пригласить по участвовать в конкурсах. Один конкурс «Комментаторов» с отличными призами, а второй конкурс с участием детей. Буду рад Вас видеть на своем сайте. До встречи, Спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>