Анимация

Урок по зацикливанию анимации, наложенной на основной фон.

(Примечание: все скриншоты можно увеличить, кликнув по ним правой кнопкой мыши и выбрав Открыть изображение)

Речь идёт о наложенной анимации (будь то готовая гифка, скачанная с интернета, или кусочек видео, вырезанный самостоятельно).

Разберём конкретный пример, возьмём изображение и наложим на него капли дождя:

Гифка, взятая на просторах интернета

Открываем в фотошопе наше изображение, кадрируем и уменьшаем до нужного размера (150х150). Чтобы качество не было потеряно при уменьшении, дублируем основной слой и применяем к нему фильтр Масляная живопись (Фильтр - Галерея фильтров - Масляная живопись) с параметрами (Размер кисти:1; Резкость: 1; Кисть: простая).

Далее, открываем нашу гифку в фотошопе как отдельный файл. В панели Слои выделяем первый слой, зажимаем клавишу Shift и кликаем левой кнопкой мыши на нижний слой так, чтобы все слои оказались выделены. И нажимаем сочетание клавиш Ctrl + G, чтобы сгруппировать слои в одну папку. Или можно в верхней панели найти вкладку Слои и там найти кнопку Сгруппировать слои.

Далее, открываем оба документа (Изофражение и гифку) в окне Фотошопа так, чтобы они оказались одновременно видны.

Кликаем левой кнопкой мыши по окошку гифки, чтобы именно он был активен в данный момент. Выделяем сгруппированные слои левой кнопкой мыши в панели Слои, и не отпуская её, перетаскиваем их на окошко с нашим изображением.

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

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

Выделяем Группу слоёв с анимацией и ставим режим наложения Перекрытие, Непрозрачность 60%.

Выделяем группу слоёв с анимацией и добавляем к ней слой-маску.

Выбираем инструмент Кисть, черного цвета, непрозрачность 100%, жёсткость 0%, размер примерно 150 пикс. Выделяем белый квадрат маски слоя (Группа слоёв) и начинаем рисовать по нашему изображению. Мы увидим, что те места, где прошла кисть, Группа слоёв с анимацией (капли дождя) исчезают (маскируются). Уберём капли с лица. Если мы затёрли что-то лишнее, то можно выбрать белый цвет кисти и пройтись по тем местам, которые надо вернуть (выбрав размер кисти поменьше). Мы видим на маске слоя, что те места, которые закрашены черным цветом, становятся не видны.

Верхним слоем создаём корректирующий слой Карта градиента. Выберем из стандартных градиентов фиолетово-оранжевый, поставим режим наложения Перекрытие, непрозрачность 30%.

Затем, на панели Шкала времени кликаем по кнопке Создать временную шкалу для видео. И в левом нижнем уголке Шкалы нажать на кнопочку Преобразовать в покадровую анимацию. 

В правом верхнем уголке Шкалы времени, выбрать из раскрывающегося списка Создать кадры из слоёв.

Теперь, во временной шкале отразились все слои из панели Слои. Далее, в панели Шкала времени нужно удалить лишние кадры (оставить только кадры с анимацией дождя).

У нас осталось 29 кадров анимации. Выделяем первый кадр в Шкале времени. Переходим в панель Слои, убеждаемся, что стоит галочка на фразе Распространить кадр 1 и включаем слои с нашим изображением и корректирующим слоем Карта градиента.

На всех кадрах под каплями дождя должно отобразиться наше изображение.

Задаём время показа всем кадрам  по 0,1 сек. Можно выделить сразу все кадры, зажав клавишу SHIFT и кликнуть по времени любого из кадров. Из раскрывающегося списка выбрать 0,1 сек.

Удаляем последние кадры из Шкалы времени анимации, чтобы осталось 18 кадров (просто потому, что 29 кадров для аватарки слишком много и весить она будет много). Удаляем также лишние слои с удалёнными кадрами из панели Слои (чтобы они нам не мешали).

На Шкале времени анимации переходите на последние кадры (я обычно беру 3 последних кадра для зацикливания).

Выделяете последний кадр (18-й) в Шкале времени. Затем, выделяете верхний (18-й) слой своей анимации (капли дождя) в панели Слои. Ставите прозрачность последнего слоя 25%. Затем, выделяете третий (3-й) слой анимации (нижний) и включаете его 100% непрозрачность.

Выделяете предпоследний кадр (17-й) в панели Шкала времени анимации. Выделяете предпоследний слой 17-й (второй сверху) анимации в панели Слои, ставите прозрачность 50%. Выделяете второй снизу слой анимации в панели Слои (2-й), включаете его на непрозрачность 100%.

Выделяете 3-й кадр с конца в Шкале времени анимации (16-й). Переходите в панель Слои, выделяете третий сверху слой анимации (16-й), ставите прозрачность 75%. Выделяете первый снизу слой анимации (1-й), включаете его (непрозрачность 100%).

Переходите в панель Шкала анимации, удаляете три первых кадра. У нас остаётся 15 кадров.

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

Для получения более плавного перехода, можно зациклить последние 4 кадра (с прозрачностью 80%, 60%, 40%, 20%), тогда соответственно, потом удаляются первые 4 кадра из Шкалы анимации. Или зациклить 5 кадров (с прозрачностью 85%, 70%, 55%, 38%, 17%), соответственно, удаляются потом 5 первых кадров.

Далее, сохраняем анимацию. Файл - Сохранить для Web. Чтобы уложится в разрешенные 100Кб, во-первых, выберем пункт Без дизеринга, Прозрачность, Без дизеринга прозрачность, Цвета 128. Убедимся, что вес не превышает необходимый (он виден в левом нижнем уголке окна). Тут же в окне просмотра можно проверить, не потерялось ли качество у анимации, проиграв её. Теперь можно сохранить

Результат:

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

Пример:

С промежуточными кадрами	С изменением прозрачности слоёв