Как устроена гиф-анимация

fotovivo — 10.12.2022

Как сделать мини-мультик в фотошопе: 

— Неужели вручную, картинка к картинке, 24 кадра в секунду?
Начнем по порядку. Сначала, как это все работает.

Примерно вот так:

Тут люди изощряются с отрисовкой, у нас в детстве была забава попроще, «палка-палка-огуречик» на двух полосках бумаги, на одном слое прыгалка верх, на другом вниз; верхнюю полоску накручивали на карандаш - потом водишь им туда-сюда, человечек «прыгает» :

Не нужно 24 кадра :)
И двух  хватит.

А теперь — существенный момент:

Что если  хотим добавить в анимацию дождик?
(Это не сложно, два кадра с каплями вразброс дают эффект мороси).

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

Очевидный выход — пририсовать капли в каждый кадр по отдельности.

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

Как открыть «шкалу времени» с кадрами мы уже знаем https://fotovivo.livejournal.com/535981.html

• У тех, кто умеет работать со слоями в ФШ, покадровая развертка порой вызывает некоторое замешательство.
  Кадры «фильма» делаются  из привычных слоев, экспортом на таймлайн.
  Но, загрузили — всё! Дальше слои ведут себя совсем иначе, не так как при редактировании графики.
  Обычный стек слоев в ФШ похож на стопку кальки, нижние слои просвечивают сквозь вышележащие — их фон для этого оставляют прозрачным.
  А открыли режим анимации — («кадры из слоев»), ситуация изменилась: каждый кадр в окне предпросмотра отображается сам по себе. Нельзя что-то добавить к картинке, создав новый слой поверх нижележащего.  
  

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

Сделаем копию слоя, 

1. CTRL+T —  вызываем функцию трансформации. Задаем 70% процентный ресайз, жмем галочку (обязательно! результат получится и просто по щелчку, а нам нужно чтобы настройки запомнились).
2. CTRL+J — создаем новый слой с той же картинкой.
Повторять с первой цифры сколько угодно раз.
Получим пачку слоев, все меньше и меньше:

Готовимся к анимации: выключаем видимость всех слоев кроме нижнего (и фон можно оставить).  Это тоже существенно (не просто так ритуальное действие =)

Вызываем таймлайн (в панели «Окна» —> «Шкала времени»): 

Пока что на нем единственный кадр, тот, на котором была включена видимость.

Фон у меня из двух частей — «земля» и «небо».
(В конце поста я дам ссылки на графику, можете попробовать воспроизвести процесс, открыв ФШ, будет нагляднее)

Потренируемся: нажали «глаз» на слое с «небом» — оно появилось в кадре. Нажали глазок у «земли» — слой скрылся и исчез из кадра.

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

Можно вставить объект в несколько кадров, хоть ко всем сразу, для этого:
1.Выделим нужные кадры на шкале анимации.
2. В палитре слоев сделаем их видимыми.  

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

• Отступление: вообще говоря, советы по анимации предполагают пользователя, в общих чертах знакомого с фотошопом.
  Уточним на всякий случай — я называю «слоями»  отдельные изображения  в панели «слои», Windiw -> Laers.
  Есть и другая панель, «Timeline», для анимации: для пущей ясности ряд изображений в них будем называть «кадрами».
  Кадры взаимодействуют со слоями однозначным, не сложным (но не сказать чтобы совсем уж юзерфрендли) образом.

Проделав операцию «кадры из слоев» перенесем на шкалу времени толпу разновеликих оленей. Выделим все и  щелкнем по слоям фона, сделав его видимыми, «земля» и «небо» отобразится по всей раскадровке:

Кстати. Нередко возникает необходимость 

поменять последовательность слоев

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

Идем дальше. Следующий номер программы: анимация движения.

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

Но мы познакомимся с более интересным функционалом:

Анимация движения посредством ключевых кадров

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

• В режиме покадровой анимации «ключевые» никак не выделены, ничем не отмечены — всё на глазок. (Отчасти так даже понятней, «ниже порог вхождения». В режиме редактирования видео на ФШ инструментарий более продвинутый)

1.На таймлайне выделяем кадр — начало движения.
2. Делаем его копию — плюсик внизу.  (Так и только так; самостоятельные кадры, экспортированные из слоев, не могут служить узлами одной и той же траектории).
3. Просто берем и перетаскиваем объект в следующую ключевую точку — куда нам хочется. Если перетащить сразу в конец — итоговое движение будет по прямой. Для небольшого «виража» добавим посередине «ключевую точку»:

4. Сделаем еще одну копию кадра и снова перетащим объект — в конец маршрута.

Внимание фокус!
Создаем промежуточные кадры. Нет, не 24 =)  пять-шесть хватит (хотя в особо изысканных случаях бывают гифки с сотнями слоев).
На промежуточных кадрах будет плавно меняться положение объекта, программа рассчитает одинаковый интервал для каждого отрезка пути.

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

Для этого: 

5. Выделяем на шкале времени пару кадров — начало движения и следующую ключевую точку.
6. Клик по значку Tweens :

Появится окошко настроек, укажем количество промежуточных кадров.

6. Точно так же добавим промежуточный кадры между «ключевым» и конечным:

Готово!
Можно запустить анимацию )

Вошла во вкус, решила не останавливаться и сделать анимированное небо. Двигаться оно никуда не будет — тем же способом можно получить плавное изменение цветов.

Анимация стиля и цвета

Для этого:

1. Сделаем копию кадра.

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

Шесть штук сделала, небо плавно меняет цвет от синего до сиреневого:

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

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

Итак:
1. Выделили кадры «неба» вместе с промежуточными. 8 штук их у нас.
2. Вызвали палитру опций временной шкалы —> Copy.
3. Вернулись к нашей «кинопленке». Выделили первые 8 кадров.
4. Меню —> Past
(Приклеили. Намертво — откатить можно будет только вообще со всеми действиями, если через N шагов вам что-то не понравится)
5. Выделили следующие 8 кадров — опять Past. Обратите внимание на настройки вклеивания: «Поверх содержимого» :

6. Лишние, пустые кадры с небом теперь выделим и удалим — перетаскиванием в корзину внизу временной шкалы (обычный delit — тут не работает!)

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

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

Как добавить новый кадр в анимацию

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

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

1. Создадим новый слой в стеке слоев (плюсик внизу,  Fram 17 появился):

— И как его добавить на шкалу времени?
— Никак. Зато его содержимое — можно.

2. В таймлайне тоже создадим новый кадр — скопировав соседний (опять плюсиком под шкалой).
3. Выделим его и только его.
4. В стеке слоев отключим для него вообще всё (протавщив мышку по глазкам сверху вниз). Скопированный кадр станет пустым.

5. Включим для него видимость свежесозданного Fram 17. В нем пока ничего нет, экран останется пустым. (я подключила «землю», чтоб ориентироваться, потом отключу).

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

Мы получили новый кадр.

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

• Скопируем кадр со снегом (+ под шкалой).
• Выделим скопированный кадр. Включим для него видимость слоя с рисунком щелчком по глазку в панели слоев.
• Сдвинем рисунок вниз.
Теперь:
• Выделим исходный кадр и его копию.
• Применим к ним Твинс, задав количество промежуточных слоев.

Можно зациклить анимацию, сделав плавный переход (ряд промежуточных кадров) от конечного кадра — к начальному:

Осталось уже известным образом скопировать все кадры анимации снега —> Copy   в меню анимации. И Past их на такое же количество кадров нашего фильма. Будет олень бежать под цветным небом и под снегом.

Кто не устал, добавим еще прибамбасов?

Анимация текста

Все шаги уже знакомы: 

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

—  Вроде бы тот же самый слой с текстом, как в исходном кадре? Именно его мы его трансформировали...
— Тот, да не тот. Если вернуться на кадр назад по шкале времени — обнаружим текст в первозданном виде. 

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

Enjoy!

* Для практикума: футаж и персонаж

Как сохранить гиф — тут. Куда загрузить, где хранить увесистые файлы — тут

Кст. смонтированные вручную «мувики» не такие уж тяжелые. Всего 17  слоев, полтора мега. Обычные размашистые «фото дня» у меня и побольше весят. 

Оставить комментарий

Популярные посты:

macrinus

Расчет производительности шнекового транспортера

jjnatt

Пишут, что жарко

serg07011972

Сегодня на 55-м году жизни умер Михаил Борисович Смолин, выдающийся русский

salmaksoff

Но есть и озадачивающие новости...

kondratea

Суть моря

ru-hidden

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

naina555

Нищеброды

pr0xboct

Смертельная таки схватка - 2018

anonim_from_rus

Хохлы начали откровенно стебаться над своими нациками

• Ранее
• Архив