Как зациклить анимацию в фотошопе
Отправка видеофайлов будет занимать большую часть вашей полосы пропускания, особенно если вы повторно отправляете файлы через свой веб-сайт. Решение этой проблемы - преобразовать ваши видео в анимированные GIF-файлы с зацикливанием, чтобы значительно сократить размеры файлов. Создание цикла GIF требует только простых шагов с использованием сторонних инструментов, будь то на платформе Windows или Mac.
В этой статье мы покажем вам пошаговые инструкции о том, как сделать цикл GIF онлайн или офлайн с помощью нескольких инструментов. Затем мы дадим вам наиболее рекомендуемый инструмент для преобразования ваших зацикленных GIF-файлов в желаемые форматы, чтобы сделать их воспроизводимыми на любом из них, на котором вы собираетесь их отображать. Но сначала давайте обсудим причины, по которым ваши GIF-файлы не могут зацикливаться сами по себе, в следующем разделе.
Часть 1. Почему ваш GIF не зацикливается сам по себе
Обычно большинство мемов GIF, с которыми вы сталкиваетесь, перезапускаются с того места, где они заканчиваются. Если у вас нет, единственное решение - вернуться к приложениям, к которым вы привыкли. создать анимированный GIF. Напротив, некоторые люди предпочли бы, чтобы GIF-файлы останавливались только после однократного воспроизведения. Или же они смущаются или устают от этих энергичных изображений в формате GIF. Таким образом, некоторые инструменты или веб-сайты для создания GIF-файлов по умолчанию устанавливают ограничение на одноразовое воспроизведение сохраненных GIF-файлов.
Но не беспокойтесь. Чаще всего эти инструменты для создания GIF-файлов предлагают настройки для нескольких циклов воспроизведения, но вы просто не можете найти, где они находятся. Однако эта скрытая функция для зацикливания GIF различается в зависимости от веб-сайтов и программного обеспечения, поэтому нет возможности указать, где именно вы можете найти их на своем. В качестве альтернативы мы выбрали наиболее часто используемые инструменты для создания GIF, чтобы лучше показать вам, как вы можете создать зацикленный GIF из вашего собственного видео в следующем разделе.
Часть 2. Создание цикла GIF с помощью инструментов для создания GIF
Метод 1. Создание зацикленного GIF в автономном режиме
В этом методе мы собираемся использовать Photoshop, чтобы показать вам, как шаг за шагом создать зацикленный GIF из вашего собственного видео:
Шаг 1: Добавьте свое видео в Photoshop.
Шаг 2: Обрежьте видео до той части, где вы хотите превратить зацикленный GIF.
Шаг 3: Удалите лишние части видео.
Шаг 4. Преобразуйте оставшиеся кадры видео в зацикленный GIF.
Для этого просто следуйте подробным инструкциям ниже:
Добавьте свое видео в Photoshop
Чтобы открыть видеофайл, который вы хотите преобразовать в зацикленный GIF, сначала запустите Photoshop. Перейдите в раздел меню и нажмите Файл.. Из вариантов выберите Открыть. Найдите свое видео и дважды щелкните по нему.
Обрежьте видео там, где вы хотите превратить в зацикленный GIF
В строке меню Photoshop щелкните Окно и выберите Анимация из параметров, чтобы открыть палитру анимации. Сдвиньте синие маркеры на шкале времени фильма, пока они не будут установить в начале и в конце порции видео, которое вы хотите преобразовать в GIF. На палитре «Анимация» выберите «Обрезать продолжительность документа до рабочей области». Это позволит вырезать части вашего видео, которые находятся за пределами выбранных начальных и конечных точек.
Удалить лишние части видео
Снова вернитесь к палитре анимации, нажмите на Кнопка "Свести кадры в слои" для разделения видеокадров на отдельные. Щелкните правой кнопкой мыши активный слой видео и щелкните значок Опция удаления слоя из всплывающего меню. Это удалит лишние кадры из видео.
Преобразуйте оставшиеся кадры видео в зацикленный GIF
Вернитесь к палитре анимации снова и выберите Создание рамок из слоев. Перейдите в меню «Файл» Photoshop и щелкните по нему. Выберите из опций Сохранить для Интернета и устройств. Выберите GIF в качестве выходного формата. Нажать на Меню параметров зацикливания и выберите «Навсегда», чтобы получить непрерывный цикл GIF. Наконец, нажмите «Сохранить», чтобы преобразовать выбранное видео в зацикленный GIF.
Наконечник: Хотите сделать GIF со звуком? Звучит так круто. Просто нажмите правую ссылку, и вы узнаете как сделать GIF со звуком, Вы удивлены?
Метод 2. Создание зацикленного GIF в Интернете
Этот инструмент может создавать зацикленный GIF только из файлов изображений JPG, PNG или GIF. Чтобы создать непрерывно зацикленный GIF с помощью GIF Maker, выполните следующие действия.
Шаг 1. Запустите браузер и перейдите на сайт GIF Maker.
Шаг 2, Нажать на Кнопка "Загрузить изображения". Просмотрите файлы изображений, выделите их, а затем нажмите клавишу ввода на клавиатуре, чтобы загрузить их на веб-сайт. Подождите, пока каждый из выбранных вами файлов изображений не будет загружен.
Шаг 3. На панели управления, расположенной в правой части страницы, вы можете установить размер холста, скорость анимации, время повтора, время начала в секундах и даже добавить URL-адрес YouTube Music. Чтобы сделать результирующий GIF бесконечным циклом, не изменяйте значение по умолчанию для параметра Repeat times, равное 0.
Шаг 4. Наконец, нажмите на Кнопка создания анимации GIF для создания зацикленного GIF из выбранных файлов изображений.
Подобно GIF Maker, I Love Img также может создавать циклический GIF из изображений, но только JPG. Чтобы создать GIF с непрерывным циклом с помощью I Love Img, выполните следующие действия.
Шаг 1. Запустите браузер и перейдите на сайт I Love Img.
Шаг 3. Расположите файлы JPG в желаемом порядке в полученном GIF, перетащив каждое изображение в выбранное положение в порядке по умолчанию.
Шаг 4. На панели «Преобразовать в GIF» в правой части веб-страницы нажмите на опцию Анимированный GIF.
Шаг 5. Установите количество секунд, в течение которых каждое изображение должно отображаться в вашем GIF-файле, с помощью раскрывающейся кнопки «Секунд на изображение».
Шаг 6. Установите флажок Цикл. чтобы сделать цикл GIF.
Шаг 7. Наконец, нажмите синюю кнопку «Преобразовать изображение».
В отличие от GIF Maker и I Love Img, LunaPic может принимать в качестве входных данных файл GIF с одним циклом, который вы ранее создали. Чтобы создать непрерывно зацикленный GIF с помощью LunaPic, выполните следующие действия.
Шаг 1. Запустите браузер и перейдите на сайт LunaPic.
Шаг 2. Нажать на Кнопка просмотра , чтобы загрузить файл GIF, или введите URL-адрес GIF.
Шаг 3. Нажмите на опцию «Анимация» в верхнем меню.
Шаг 4. Нажмите на Редактировать анимацию GIF от выбора.
Шаг 5. Выберите количество раз, которое вы хотите, чтобы ваш GIF зацикливался, из раскрывающейся кнопки «Зацикливание».
Шаг 6. Нажмите Применить.
Часть 3. Рекомендуемый способ преобразования вашего зацикленного GIF в желаемый формат
Для этого метода мы рекомендуем использовать DumpMedia Video Converter. DumpMedia это мощный и высокоскоростной универсальный аудио и видео конвертер, загрузчик, редактор и проигрыватель. Наслаждайтесь удобством дружественного интерфейса, оснащенного множеством функций для удовлетворения всех ваших потребностей в видео. Программное обеспечение поддерживает множество форматов, включая MPEG, 3GP, FLV, MKV, AVI, WMV, MOV, MP4, а также другие обычные видеоформаты.
DumpMedia также позволяет улучшить качество видео за счет увеличения разрешения на преобразование из SD в HD разрешение и наоборот. Чтобы преобразовать повторяющийся GIF-файл в желаемый формат, сначала загрузите программное обеспечение и выполните следующие действия:
Шаг 1: Запустите DumpMedia Video Converter
Шаг 2. Добавьте ваш GIF-файл в приложение.
Шаг 3. Выберите желаемый выходной формат и папку назначения.
Шаг 4. Запустите процесс преобразования
Запустить DumpMedia Video Converter
После загрузки DumpMedia установщик, запустите приложение, выполнив следующие действия для операционных систем Windows и MacOS.
Для пользователей Windows:
- Перейдите к значку поиска (увеличительное стекло) рядом со значком Windows на панели задач вашего компьютера.
- Тип DumpMedia в текстовом поле.
- Нажмите на DumpMedia приложение в результатах поиска.
Для пользователей MacOS:
Добавьте свой файл GIF в приложение
Нажмите Кнопка "Добавить файлы" расположен в верхнем левом разделе интерфейса, чтобы импортировать файлы, или вы можете перетащить их прямо в основной интерфейс.
Выберите желаемый формат вывода и папку назначения
Ищите Преобразовать все задачи в текст в правом верхнем углу интерфейса. Выберите желаемый формат вывода. Внизу интерфейса нажмите кнопку "Обзор" и перейдите на свой компьютер в желаемую папку назначения для преобразованных файлов.
Начать процесс конвертации
Часть 4. В заключение
В этой статье мы обсудили причины, по которым созданный вами GIF не смог зациклиться сам по себе. Распространенная причина заключается в том, что большинство создателей GIF по умолчанию сохраняет ваши GIF-файлы с одним циклом, а настройки для нескольких циклов иногда трудно найти. Поэтому, чтобы помочь вам создать зацикленный GIF из вашего собственного видео или изображений, мы предоставили вам различные инструменты, которые вы можете использовать онлайн или офлайн:
- Photoshop (офлайн),
- Аниматрон,
- Я люблю Img, и
- Lunapic
После чего мы предоставили вам наиболее рекомендуемый инструмент, который вы можете использовать для преобразования полученных циклических GIF-файлов в другие форматы, DumpMedia Video Converter чтобы в них можно было играть на любой платформе, на которой вы планируете их разместить. Ну это все! Надеюсь, это руководство смогло ответить на то, что вы ищете.
По сценарию Рози
Редакционный директор DumpMedia, который регулярно пишет качественные руководства по продуктам, обзоры, советы и рекомендации.
3D-функции Photoshop будут удалены в будущих обновлениях. Пользователям, работающим с 3D-функциями, рекомендуется ознакомиться с новой коллекцией Adobe Substance 3D, которая представляет собой новое поколение 3D-инструментов от Adobe.
Дополнительную информацию о прекращении поддержки 3D-функций Photoshop можно найти здесь: Photoshop 3D | Распространенные вопросы об упраздненных 3D-функциях.
В версиях, предшествующих Photoshop CC, некоторые функциональные возможности, описанные в данной статье, могут быть доступны только при наличии Photoshop Extended. Photoshop не имеет специальной версии Extended. Все возможности Photoshop Extended доступны в Photoshop.
Чтобы анимировать содержимое слоя в режиме временной шкалы, ключевые кадры на панели «Шкала времени» устанавливаются при перемещении индикатора текущего времени к другому времени (или кадру), а затем изменяется положение, непрозрачность или стиль содержимого слоя. Последовательность кадров между двумя существующими кадрами автоматически добавляется или изменяется, равномерно меняя параметры слоя (положение, непрозрачность и стиль) между новыми кадрами, чтобы создать впечатление движения.
Например, если необходимо, чтобы слой постепенно исчезал, установите непрозрачность слоя в начальном кадре на 100 % и щелкните секундомер непрозрачности для этого слоя. Затем переместите индикатор текущего времени на время или кадр, который нужно считать конечным и установите непрозрачность того же слоя равной 0 %. Кадры между начальным и конечным будут автоматически интерполированы, и непрозрачность новых кадров будет равномерно снижена.
Кроме интерполяции кадров анимации можно также вручную создавать покадровую анимацию, рисуя в пустых видеослоях.
Для создания анимации в формате SWF используйте приложения Adobe Flash, Adobe After Effects или Adobe Illustrator.
Для создания анимации во временной шкале используется следующий общий рабочий процесс.
1. Создайте новый документ.
Задайте размер и содержимое фона. Убедитесь, что попиксельные пропорции и размерности соответствуют назначению анимации. Должен быть установлен цветовой режим RGB. Если нет особых причин для изменения, оставьте разрешение 72 ppi, битовую глубину 8 бит/канал и квадратную попиксельную пропорцию.
Убедитесь, что панель «Шкала времени» открыта. В случае необходимости нажмите стрелку вниз в середине панели, выберите «Создать временную шкалу для видео» в меню, а затем, нажмите кнопку слева от стрелки. Если панель «Шкала времени» находится в режиме анимации кадра, нажмите значок «Преобразовать в шкалу времени видео» в левом нижнем углу панели.
2. Задайте частоту смены кадров на шкале времени в меню панели.
Укажите длительность и частоту кадров. См. раздел Задание длительности и частоты кадров.
3. Добавьте слой.
Слои заднего плана нельзя анимировать. Если требуется анимировать содержимое, преобразуйте задний план в обычный слой или добавьте любой из следующих элементов:
Новый слой для добавления содержимого.
Новый видеослой для добавления видеосодержимого.
Новый пустой видеослой для клонирования содержимого или создания рисованной анимации.
4. Добавьте содержимое к слою.
5. Добавьте слой-маску (необязательно).
Слой-маска может использоваться для отображения части содержимого слоя. Слой-маску можно анимировать для отображения разных частей содержимого слоя в разное время. См. раздел Добавление слой-маски.
6. Переместите индикатор текущего времени на нужное время или номер кадра, где необходимо установить первый ключевой кадр.
7. Включите установку ключевых кадров для параметра слоя.
Щелкните треугольник рядом с именем слоя. Треугольник с основанием вниз выводит список параметров слоя. Затем щелкните значок «Секундомер», чтобы установить первый ключевой кадр для параметра слоя, который необходимо анимировать. Можно устанавливать ключевые кадры одновременно для нескольких параметров.
8. Переместите индикатор текущего времени и измените параметр слоя.
Переместите индикатор текущего времени на время или кадр, где свойство слоя изменяется. Выполните одно или несколько следующих действий.
Измените положение слоя, чтобы создать впечатление движения содержимого.
Измените непрозрачность слоя, чтобы содержимое постепенно возникало или исчезало.
Измените положение слой-маски, чтобы отобразить разные части слоя.
Включите или отключите слой-маску.
Для некоторых типов анимации, например для изменения цвета объекта или полного изменения содержимого в кадре, необходимы дополнительные слои с новым содержимым.
При анимации фигур с помощью значка «Секундомер» для свойств «Положение векторной маски» или «Включить векторную маску» анимируется векторная маска, а не слой фигуры.
9. Добавьте дополнительные слои с содержимым и при необходимости измените их параметры.
10. Переместите или отрегулируйте полосу длительности слоя, чтобы задать время появления слоя в анимации.
11. Просмотрите анимацию.
Для воспроизведения анимации используйте элементы управления панели «Шкала времени». Затем просмотрите анимацию в браузере. Просмотреть анимацию можно также в диалоговом окне «Сохранить для Web». См. раздел Просмотр видео или анимации по временной шкале.
12. Сохраните анимацию.
Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды «Сохранить для Web» или в виде последовательности изображений или видео с помощью команды «Просмотреть видео». Вы можете также сохранить ее в формате PSD, который можно импортировать в приложение Adobe After Effects.
Можно анимировать различные свойства слоя, например положение, непрозрачность и стиль. Каждое изменение может происходить независимо от других изменений или одновременно с ними. Если необходимо анимировать разные объекты независимо друг от друга, рекомендуется создавать их в разных слоях.
Ниже представлены примеры анимации параметров слоя.
Положение можно анимировать, добавив ключевой кадр к свойству «Положение», затем переместив индикатор текущего времени и перетащив слой в окно документа.
Непрозрачность слоя можно анимировать, добавив ключевой кадр к свойству «Непрозрачность», затем переместив индикатор текущего времени и изменив непрозрачность слоя на панели «Слои».
Можно анимировать 3D-свойства, например позицию объекта и камеры. (Дополнительную информацию см. в разделе Создание 3D-анимаций.)
Для анимации свойств с помощью ключевых кадров необходимо установить, по крайней мере, два ключевых кадра для этого параметра. В противном случае изменения остаются в силе на время длительности слоя.
Каждый параметр слоя имеет значок «Секундомер» , который необходимо щелкнуть для начала анимации. Если секундомер активен для конкретного параметра, новые ключевые кадры автоматически устанавливаются при каждом изменении текущего времени и значения свойства. Если секундомер для свойства неактивен, оно не имеет ключевых кадров. Если значение для параметра слоя вводится при неактивном секундомере, это значение остается в силе на время длительности слоя. Если остановить секундомер, все ключевые кадры для параметра безвозвратно удаляются.
Выбор метода интерполяции
Интерполяция (которую иногда называют вставкой промежуточных кадров) описывает процесс заполнения неизвестными значениями промежутков между двумя известными значениями. В цифровом видео интерполяция обычно означает создание новых кадров между двумя ключевыми кадрами. Например, чтобы постепенно переместить графический элемент на пятьдесят пикселов влево за 15 кадров, надо установить положение этого элемента в первом и пятнадцатом кадре, а затем пометить эти кадры как ключевые. Photoshop интерполирует кадры между двумя ключевыми кадрами. Интерполяция между двумя ключевыми кадрами может использоваться для анимации движения, непрозрачности, стилей и глобального освещения.
Внешний вид ключевого кадра на панели «Шкала времени» зависит от выбранного метода интерполяции.
Линейный ключевой кадр
Равномерно изменяет анимированное свойство при переходе от одного кадра к другому. (Единственным исключением является свойство «Положение слой-маски», которое может быть либо включено, либо выключено.)
Задержка ключевого кадра
Сохраняет текущую настройку свойства. Этот метод интерполяции используется для эффектов вспышки или для внезапного появления и исчезновения слоев.
Чтобы выбрать метод интерполяции ключевого кадра, выполните следующие действия.
На панели «Шкала времени» выберите один или несколько ключевых кадров.
Щелкните правой кнопкой мыши выделенный ключевой кадр и выберите в контекстном меню «Линейная интерполяция» или «Приостановить интерполяцию».
В меню панели выберите команду «Интерполяция ключевого кадра» > «Линейная» или «Приостановить».
Перемещение индикатора текущего времени на ключевой кадр
После установки начальных ключевых кадров для свойства отображается навигатор по ключевым кадрам, который можно использовать для перемещения по ключевым кадрам, их установки или удаления. Если навигатор по ключевым кадрам активен (желтый), индикатор текущего времени установлен точно на ключевом кадре параметра слоя. Если навигатор по ключевым кадрам неактивен (серый), индикатор текущего времени находится между ключевыми кадрами. Если на каждой стороне поля навигатора по ключевым кадрам появляются стрелки, с двух сторон от текущего времени существуют другие ключевые кадры для этого свойства.
На панели «Шкала времени» щелкните стрелку навигатора по ключевым кадрам. Стрелка влево перемещает индикатор текущего времени на предыдущий ключевой кадр. Стрелка вправо перемещает индикатор текущего времени на следующий ключевой кадр.
В версиях, предшествующих Photoshop CC, некоторые функциональные возможности, описанные в данной статье, могут быть доступны только при наличии Photoshop Extended. Photoshop не имеет специальной версии Extended. Все возможности Photoshop Extended доступны в Photoshop.
С помощью приложения Photoshop можно редактировать как отдельные кадры видео, так и файлы последовательности изображений. При редактировании и рисовании на видео кроме инструментов Photoshop можно также использовать фильтры, маски, трансформации, стили слоев и режимы наложения. После завершения редактирования можно сохранить документ как PSD-файл (который можно воспроизводить в других приложениях Adobe, например Premiere Pro и After Effects , или открывать как статичный файл в других приложениях), создать видео в формате QuickTime или сохранить в виде последовательности изображений.
В видеофайле можно работать только с визуальными изображениями, но не со звуком.
При открытии видеофайла или последовательности изображений в Photoshop кадры содержатся в видеослоях. На панели «Слои» видеослой обозначается значком фотопленки . Видеослои позволяют рисовать на отдельных кадрах с помощью инструментов «Кисть» и «Штамп», а также клонировать кадры. Как и при работе с обычными слоями, можно создавать выделенные области или применять маски, чтобы ограничить редактирование определенными областями кадра. Перемещение между кадрами в режиме временной шкалы выполняется на панели «Анимация» (меню «Окно» > Анимация»).
Слои видео не работают, когда панель «Анимации» находится в режиме «Кадр».
К видеослоям, как и к обычным слоям, можно применять режимы наложения, непрозрачность, позиционирование и стили слоев. На панели «Слои» можно также группировать видеослои. Корректирующие слои позволяют применять цветовые и тональные настройки, не внося изменений в видеослои.
Если необходимо редактировать кадры в отдельном слое, можно создать пустой видеослой. Пустые видеослои также позволяют создавать рисованную анимацию.
Видеослой ссылается на исходный файл, поэтому редактирование видеослоя не изменяет исходный видеофайл или файл последовательности изображений. Чтобы сохранить ссылку на исходный файл, удостоверьтесь, что его местоположение относительно PSD-файла осталось неизменным. Дополнительную информацию см. в разделе Замена материала в видеослое.
Можно открывать видеофайлы и последовательности изображений следующих форматов.
Форматы видео QuickTime
MPEG-1 (.mpg или .mpeg)
MPEG-4 (.mp4 или .m4v)
MPEG‑2 поддерживается, если установлен кодировщик MPEG‑2.
Форматы последовательности изображений
Cineon и JPEG 2000 поддерживаются при установленных внешних модулях.
Цветовой режим и битовая глубина
Видеослои могут содержать файлы следующих цветовых режимов и количеством бит на канал (бит/канал).
Градации серого: 8, 16 или 32 бит/канал
RGB: 8, 16 или 32 бит/канал
CMYK: 8 или 16 бит/канал
Lab: 8 или 16 бит/канал
Анимацией называется отображаемая последовательность изображений или кадров. Каждый кадр немного отличается от предыдущего, создавая иллюзию движения или других изменений при быстром последовательном просмотре кадров.
В стандартных выпусках более ранних версий Photoshop панель «Анимация» (меню «Окно», пункт «Анимация») появляется в покадровом режиме, отображая миниатюру каждого кадра анимации. Для перемещения по кадрам, установки параметров повтора, а также добавления, удаления и просмотра анимации используются инструменты в нижней части панели.
Меню панели «Анимация» содержит дополнительные команды для редактирования кадров и длительности временной шкалы, а также для настройки внешнего вида панели. Чтобы просмотреть доступные команды, щелкните значок меню панели.
A. Выбрать первый кадр B. Выбрать предыдущий кадр C. Запуск воспроизведения анимации D. Выбрать следующий кадр E. Создать кадры анимации F. Создание копии выделенных кадров G. Удаление выделенных кадров H. Переход в режим шкалы времени (только для Photoshop Extended) I. Меню панели «Анимация»
Панель «Анимация» можно использовать в покадровом режиме или режиме шкалы времени. В режиме временной шкалы отображается продолжительность кадра и свойства анимации для слоев документа. Для перемещения по кадрам, изменения масштаба временной шкалы, переключения в режим кальки, удаления ключевых кадров и просмотра видео используются инструменты в нижней части панели. Элементы управления на временной шкале используются для настройки длительности кадра для слоя, установки ключевых кадров для параметров слоя и выбора части видео в качестве рабочего участка.
A. Включить воспроизведение аудио B. Уменьшение масштаба C. Регулятор масштаба D. Увеличение масштаба E. Переключение кальки F. Удаление ключевых кадров G. Преобразование в покадровую анимацию
В режиме временной шкалы на панели «Анимация» отображается каждый слой документа Photoshop (за исключением заднего плана) и выполняется синхронизация с панелью «Слои». При добавлении, удалении, переименовании, группировании, дублировании слоя или присвоении ему цвета изменения отражаются в обеих панелях.
Если анимированные слои сгруппированы в виде смарт-объекта, информация об анимации из панели «Анимация» сохраняется в смарт-объекте. См. также раздел Работа со смарт-объектами.
Элементы управления в покадровом режиме
В покадровом режиме панель «Анимация» содержит следующие элементы управления.
Определяет количество повторов воспроизведения при экспорте анимации в виде анимированного GIF-файла.
Время отображения кадра
Определяет продолжительность отображения кадра во время воспроизведения.
Создание промежуточных кадров
Добавляет последовательность кадров между двумя существующими кадрами с интерполяцией (т. е. равномерно изменяя параметры слоя с каждым новым кадром).
Дублирование выделенных кадров
Добавляет кадр к анимации, создавая дубликат выделенного на панели «Анимация» кадра.
Преобразование в анимацию по шкале времени
Преобразует покадровую анимацию в анимацию временной шкалы, используя ключевые кадры для анимации свойств слоя.
Элементы управления в режиме шкалы времени
В режиме временной шкалы панель «Анимация» содержит следующие функции и элементы управления.
Индикатор «Кешированные кадры»
Отображает зеленую полосу, указывающую кадры, которые кешируются для воспроизведения.
Чтобы вставить комментарий в текущее время, в меню панели выберите команду «Редактировать комментарий временной шкалы». Комментарии выводятся в дорожке значков в виде значков . Наводите указатель мыши на значки, чтобы выводить всплывающие подсказки. Дважды щелкните на значке, чтобы изменить комментарий. Чтобы перейти от одного комментария к другому, нажмите кнопку «Перейти к предыдущему» или «Перейти к следующему» в левой части дорожки комментариев.
Для создания таблицы HTML, содержащей время, номер кадра и текст каждого комментария, установите на панели выбора параметров флажок «Экспортировать комментарии временной шкалы».
Преобразовать в покадровую анимацию
Используя ключевые кадры, преобразует анимацию временной шкалы в покадровую анимацию.
Отображение временного кода или номер кадра
Отображает временной код или номер кадра (в зависимости от параметров на панели) для текущего кадра.
Индикатор текущего времени
Перетащите индикатор текущего времени для перемещения по кадрам, изменения текущего времени или кадра.
Дорожка глобального освещения
Отображает ключевые кадры, в которых устанавливается или изменяется глобальный угол освещения для таких эффектов, как «Тень», «Внутренняя тень» или «Тиснение».
Навигатор по ключевым кадрам
Кнопки со стрелками слева от метки дорожки перемещают индикатор текущего времени на предыдущий или следующий ключевой кадр. Щелкните центральную кнопку, чтобы добавить или удалить ключевой кадр в текущем времени.
Полоса длительности слоя
Определяет временное положение слоя в видео или анимации. Чтобы переместить слой во времени, перетащите полосу. Для регулировки (настройки продолжительности) слоя перетащите любой конец полосы.
При работе с видеослоями показывает полосу длительности для измененных кадров. Для перехода к измененным кадрам используется навигатор по ключевым кадрам, расположенный слева от метки дорожки.
Измеряет продолжительность (или число кадров) по горизонтали в соответствии с продолжительностью документа и частотой кадров. (Для изменения продолжительности или частоты кадров выберите «Параметры документа» в меню панели.) На линейке появляются деления и числа, интервалы между ними определяются параметрами масштаба временной шкалы.
Включает или выключает установку ключевых кадров для свойства слоя. Установите этот флажок для вставки ключевого кадра и включения ключевых кадров для свойства слоя. Снимите флажок, чтобы удалить все ключевые кадры и отключить установку ключевых кадров для свойства слоя.
Меню панели «Анимация»
Включает функции, которые оказывают влияние на ключевые кадры, слои, внешний вид панели, применение кальки и настройки документа.
Индикаторы рабочей области
Перетащите синие метки на концах верхней дорожки, чтобы отметить часть анимации или видео, которую нужно просмотреть или экспортировать.
Изменение размера миниатюры
На панели «Анимация» можно изменить размер миниатюр, представляющих каждый кадр или слой.
- В режиме шкалы времени выберите «Не показывать», чтобы вывести только имена слоев.
Переключение единиц измерения шкалы времени
Шкалу времени на панели «Анимация» можно отображать с номерами кадров или с таймкодами.
- Чтобы выбрать единицы измерения, в меню панели «Анимация» выберите пункт «Параметры панели», а затем «Номера кадров» или «Временной код».
- Чтобы переключиться на другие единицы измерения, щелкните с нажатой клавишей «Alt» (Windows) или «Option» (Mac OS) отображение текущего времени в левом верхнем углу временной шкалы.
Отображение или скрытие параметров слоя на шкале времени
При добавлении слоев к документу они появляются в виде дорожек на шкале времени. Разверните дорожки слоев, чтобы показать параметры слоев, которые можно анимировать.
Отображение или скрытие слоев на шкале времени
Все слои документа отображаются на шкале времени по умолчанию. Чтобы показать только подмножество слоев, вначале следует установить их в качестве избранных.
В режиме временной шкалы выделите один или несколько слоев на панели «Анимация» и в меню «Показать» выберите команду «Задать избранные слои».
Чтобы определить, какие слои должны отображаться, в меню панели «Анимация» выберите пункт «Показать», затем «Все слои» или «Избранные слои».
Навигация по шкале времени
- Щелкните номер или местоположение на линейке времени, куда нужно поместить индикатор текущего времени.
- Перетащите отображение текущего времени (в левом верхнем углу временной шкалы).
- Дважды щелкните отображение текущего времени и введите номер кадра или время в диалоговом окне «Задать точное время».
- Используйте элементы управления воспроизведением панели «Анимация».
- В меню панели «Анимация» выберите команду «Перейти», затем параметр временной шкалы.
Панель «Анимация» можно использовать покадрово или в режиме анимации по шкале времени. В покадровом режиме кадры показываются по отдельности, что позволяет задавать уникальные свойства длительности и слоев для каждого из них. В режиме анимации по временной шкале кадры показываются на непрерывной временной шкале. Это позволяет анимировать свойства с помощью ключевых кадров и воспроизводить видеослои.
Перед запуском анимации рекомендуется выбрать нужный режим. Однако в открытом документе можно переходить от одного режима анимации к другому, преобразуя покадровую анимацию в анимацию по временной шкале и наоборот.
При преобразовании с заменой анимации по временной шкале покадровой анимацией можно потерять некоторые интерполированные ключевые кадры. Тем не менее внешний вид анимации при этом не меняется.
- В меню панели «Анимация» выберите команду «Преобразовать в покадровую анимацию» или «Преобразовать в анимацию по временной шкале».
При работе в режиме временной шкалы можно задавать продолжительность и частоту кадров документа, содержащего видео или анимацию. Продолжительность — это общая длина видеоклипа от первого указанного кадра до последнего. Частота кадров или число кадров в секунду (кадров/с) обычно определяется типом вывода: NTSC-видео имеет частоту кадров 29,97 кадров/с, PAL-видео — 25 кадров/с, а кинофильм — 24 кадров/с. В зависимости от системы вещания, DVD-видео может иметь одинаковую частоту кадров с NTSC- или PAL-видео или частоту кадров 23,976. Видео, предназначенное для CD-ROM или Web, обычно имеет частоту кадров от 10 до 15 кадров/с.
При создании нового документа продолжительность временной шкалы по умолчанию устанавливается равной 10 секундам. Частота кадров зависит от выбранного стиля документа. Если речь идет о стилях, не относящихся к видео (например, «Международный формат бумаги»), частота кадров по умолчанию равна 30 кадров/с. Если речь идет о стилях видео, частота кадров равна 25 кадров/с для формата PAL и 29,97 для формата NTSC.
В версиях, предшествующих Photoshop CC, некоторые функциональные возможности, описанные в данной статье, могут быть доступны только при наличии Photoshop Extended. Photoshop не имеет специальной версии Extended. Все возможности Photoshop Extended доступны в Photoshop.
В приложении Photoshop для создания кадров анимации используется панель «Шкала времени». Каждый кадр представляет собой структуру слоев.
Также можно создавать анимацию с помощью шкалы времени и ключевых кадров. См. раздел Создание анимации по временной шкале.
Пример анимации. Изображение одноколесного велосипеда находится в собственном слое. Положение слоя меняется в каждом кадре анимации.
Чтобы создать покадровую анимацию, в Photoshop используется следующий общий рабочий процесс.
Откройте новый документ.
Откройте панели «Шкала времени» и «Слои», если они еще не отображаются. Убедитесь, что панель «Шкала времени» находится в режиме покадровой анимации. В середине панели «Шкала времени» щелкните стрелку вниз, чтобы выбрать «Создать анимацию кадра», а затем нажмите кнопку рядом со стрелкой.
Добавьте слой или преобразуйте слой заднего плана.
Поскольку слой заднего плана анимировать нельзя, добавьте новый слой или преобразуйте слой заднего плана в обычный. См. раздел Преобразование фона и слоев.
Добавьте содержимое к анимации.
Если анимация включает несколько объектов, анимированных независимо друг от друга, или если нужно изменить цвет объекта либо полностью поменять содержимое в кадре, создавайте эти объекты в отдельных слоях.
Добавьте кадр к панели «Шкала времени».
Выделите кадр.
Отредактируйте слои выбранного кадра.
Выполните одно из следующих действий.
Включите или отключите видимость для разных слоев.
Измените положение объектов или слоев, чтобы создать впечатление движения содержимого.
Измените непрозрачность слоя, чтобы содержимое постепенно возникало или исчезало.
Измените режим наложения слоев.
Добавьте к слоям стили.
Приложение Photoshop предоставляет инструменты, которые помогают сохранить одинаковые характеристики слоя в разных кадрах. См. раздел Унификация атрибутов слоев в кадрах анимации.
По мере необходимости добавьте кадры и редактируйте слои.
Количество новых кадров ограничивается только системной памятью, доступной для Photoshop.
С помощью команды «Создать промежуточные кадры» можно создавать новые кадры с промежуточными изменениями между двумя существующими кадрами на панели. Это самый быстрый способ создать впечатление движения объекта по экрану или заставить его постепенно появляться и исчезать. См. раздел Создание промежуточных кадров.
Задайте параметры времени отображения кадра и повторов.
Время отображения можно назначить каждому кадру и задать число повторов, чтобы анимация выполнялась один раз, определенное количество раз или постоянно. См. раздел Указание времени отображения в покадровой анимации и Задание повторов в покадровой анимации.
Просмотрите анимацию.
Для воспроизведения анимации используйте элементы управления панели «Шкала времени». Затем с помощью команды Сохранить для Web просмотрите ее в веб-браузере.
Оптимизируйте анимацию для эффективной загрузки.
Сохраните анимацию.
Предусмотрены разные варианты сохранения анимации кадра.
Анимацию можно сохранить в виде анимированного GIF-файла с помощью команды «Сохранить для Web».
Сохраните файл в формате Photoshop (PSD) для дальнейшей работы с анимацией.
Сохраните последовательность изображений, видео в формате QuickTime или как отдельные файлы. См. также раздел Экспорт видеофайлов и последовательностей изображений.
Добавление кадров является первым шагом при создании анимации. Открытое изображение отображается на панели «Шкала времени» как первый кадр новой анимации. Каждый добавляемый кадр первоначально является дубликатом предыдущего кадра. После этого кадр редактируется с помощью панели «Слои».
Убедитесь, что панель «Шкала времени» находится в режиме покадровой анимации.
Прежде чем начать работу с кадром, необходимо выбрать его в качестве текущего кадра. Содержимое текущего кадра появляется в окне документа.
На панели «Шкала времени» на текущий кадр указывает узкая граница миниатюры кадра (внутри затененной подсветки выделения). Выделенные кадры обозначены затененной подсветкой вокруг миниатюры кадра.
Выбор одного кадра анимации
Выполните одно из следующих действий на панели «Шкала времени»:
Чтобы выбрать следующий кадр последовательности в качестве текущего, нажмите кнопку «Выбрать следующий кадр» .
Чтобы выбрать предыдущий кадр последовательности в качестве текущего, нажмите кнопку «Выбрать предыдущий кадр» .
Чтобы выбрать первый кадр последовательности в качестве текущего, нажмите кнопку «Выбрать первый кадр» .
Выбор нескольких кадров анимации
На панели «Шкала времени» выполните одно из предложенных ниже действий.
Чтобы выбрать несколько последовательных кадров, щелкните второй кадр с нажатой клавишей «Shift». Все кадры, находящиеся между первым и вторым включительно, добавятся к выделенным кадрам.
Чтобы выбрать непоследовательные кадры, щелкайте кадры, которые нужно добавить к выделенным, с нажатой клавишей «Ctrl» (Windows) или «Command» (Mac OS).
Чтобы выбрать все кадры, в меню панели выберите команду « Выделить все кадры».
Чтобы отменить выделение одного кадра из нескольких выбранных, щелкните этот кадр с нажатой клавишей «Ctrl» (Windows) или «Command» (Mac OS).
На панели «Шкала времени» выберите один или несколько ключевых кадров.
- Содержимое объектов в кадрах анимации редактируется с помощью панели «Слои», в которой можно изменять слои изображения, влияющие на этот кадр.
- Чтобы изменить положение объекта в кадре анимации, на панели «Слои» выберите слой, содержащий этот объект, и перетащите его в новое положение.
Можно выбрать несколько кадров и изменить их расположение. Однако, если перетащить несколько несмежных кадров, они размещаются последовательно в новом местоположении.
- Чтобы изменить порядок кадров анимации, в меню панели выберите команду «Обратный порядок кадров».
Кадры, которые нужно разместить в обратном порядке, не обязательно должны быть смежными, можно изменить порядок любых выделенных кадров.
Чтобы удалить выделенные кадры, в меню панели «Шкала времени» выберите команду «Удалить кадр» или щелкните значок «Удалить» и нажмите кнопку «Да», чтобы подтвердить удаление. Можно также перетащить выделенный кадр на значок «Удалить».
Кнопки унификации («Унифицировать положение слоя», «Унифицировать видимость слоя» и «Унифицировать стиль слоя») на панели «Слои» определяют, как изменения атрибутов в активном кадре анимации применяются к остальным кадрам того же слоя. При выбранной кнопке унификации этот атрибут меняется во всех кадрах активного слоя, если кнопка не выбрана, изменения применяются только к активному кадру.
Флажок «Распространить кадр 1» на панели «Слои» также определяет, как изменения атрибутов в первом кадре применяются к остальным кадрам того же слоя. Если этот флажок установлен, изменения атрибута первого кадра затронут все последующие кадры активного слоя относительно первого кадра (сохранив уже созданную анимацию).
Унификация видимости слоя
На панели «Шкала времени» измените атрибут для одного кадра.
На панели «Слои» нажмите кнопку «Унифицировать положение слоя» , «Унифицировать видимость слоя» или «Унифицировать стиль слоя» , чтобы применить измененный атрибут к остальным кадрам активного слоя.
Распространить кадр 1
На панели «Шкала времени» измените атрибут для первого кадра.
Измененный атрибут применяется (относительно) ко всем последующим кадрам слоя.
Можно также распространять кадры, выделив группу смежных кадров с помощью клавиши «Shift», и изменив атрибут в одном из выделенных кадров.
Отображение или скрытие кнопок унификации слоев
Отображает кнопки унификации слоев, если панель «Шакала времени» открыта.
Отображает кнопки унификации слоев независимо от того, открыта или закрыта панель «Шкала времени».
Скрывает кнопки унификации слоев независимо от того, открыта или закрыта панель «Шкала времени».
Чтобы понять, что происходит при копировании и вставке кадра, думайте о кадре как о дубликате изображения с заданной конфигурацией слоя. При копировании кадра копируются конфигурации слоев (включая видимость, положение и другие свойства каждого слоя). При вставке кадра конфигурация этого слоя применяется к целевому кадру.
На панели «Анимация» выберите один или несколько кадров для копирования.
Заменяет выделенные кадры копируемыми. Новые слои не добавляются. Свойства всех существующих слоев в целевых кадрах заменяются свойствами копируемых слоев. При вставке кадров между изображениями новые слои добавляются к изображению, но в целевых кадрах видны только вклеенные слои (существующие слои скрыты).
Вклеить поверх выделенной области
Добавляет содержимое вклеенных кадров как новые слои изображения. При вклеивании кадров в то же самое изображение использование этого параметра удваивает количество слоев в изображении. В целевых кадрах вклеенные слои видны, а исходные скрыты. В нецелевых кадрах вклеенные слои скрыты.
«Вставить перед выделенной областью» или «Вставить после выделенной области»
Добавляет копируемые кадры перед целевым кадром или после него. При вклеивании кадров между изображениями новые слои добавляются к изображению, но в новых кадрах видны только вклеенные слои (существующие слои скрыты).
Чтобы связать вклеенные слои, на панели «Слои» выберите команду «Связать добавленные слои» (необязательно).
Этот параметр вступает в силу только при вставке кадров в другой документ. Выберите его, если планируете изменить положение вставленных слоев как единого целого.
Термин твининг (вставка промежуточных кадров) происходит от английского «in betweening», традиционного термина анимации, описывающего процесс создания плавного перехода от одного ключевого кадра к другому с помощью промежуточных кадров. Вставка промежуточных кадров (которую также называют интерполяцией) значительно сокращает время, необходимое для создания таких анимационных эффектов, как постепенное появление или исчезновение, или перемещение элемента в кадре. После создания промежуточные кадры можно редактировать по отдельности.
Команда «Создать промежуточные кадры» используется для автоматического добавления или изменения последовательности кадров между двумя существующими, равномерно меняя параметры слоя (положение, непрозрачность или параметры эффекта) между новыми кадрами, чтобы создать впечатление движения. Например, если нужно, чтобы слой постепенно исчезал, установите непрозрачность слоя в начальном кадре 100 %, а в конечном — 0 %. При создании промежуточных кадров между этими двумя кадрами непрозрачность слоя снижается равномерно во всех новых кадрах.
При выборе одного кадра можно выбрать, между каким кадром создавать промежуточные кадры — предыдущим или последующим.
Если выделить два смежных кадра, новые кадры создаются между ними.
Если выделить несколько кадров, операция создания промежуточных кадров изменит существующие кадры между первым выбранным кадром и последним.
Если выделить первый и последний кадры в анимации, предполагается, что они смежные, поэтому промежуточные кадры добавляются после последнего кадра. (Этот метод полезен, если анимация настроена на повтор несколько раз.)
Анимация картинок в Фотошопе позволяет создавать интерактивные изображения, которые можно использовать в баннерах и презентациях. Также это один из самых простых способов показать дизайнеру идею своего проекта.
Как сделать анимацию в Фотошопе и что для этого нужно знать – разберемся в сегодняшней статье.
Шаг 1: Создаем проект
В качестве примера я буду использовать Adobe Photoshop 2022, вы же можете использовать и более ранние версии, но учтите, что названия некоторых настроек могут отличаться. Сам функционал анимации был доступен еще в версии CS6.
Анимация работает следующим образом – например, с помощью использования нескольких картинок, когда одна накладывается на другую. Поверх картинок мы можем добавлять собственный текст, который также можно анимировать.
Итак, первым делом запускаем программу и создаем в ней файл, который потребуется нам для последующих действий.
- В верхней части программы выбираем «Файл» и жмем «Создать…».
- Теперь нужно выбрать размер файла, можно установить как свои значения, так и выбрать шаблонные. Для примера давайте укажем ширину и высоту в 1080 пикселей – сделать это можно в правой части окна. В завершение нажимаем на «Создать».
- Теперь перед нами отображается холст – рабочая область, в которой мы будем прорабатывать все элементы для их дальнейшей анимации.
Шаг 2: Включаем временную шкалу
Для анимации в Photoshop используется временная шкала. Чтобы ее включить, выполняем следующее:
- В верхней части программы открываем вкладку «Окно» и находим пункт «Временная шкала», который по умолчанию не отмечен галочкой. Также обратите внимание на то, чтобы в этой вкладке был отмечен пункт «Слои» – он потребуется нам в дальнейшем.
- В результате в нижней части окна перед нами отображается временная шкала.
Подробнее о временной шкале мы поговорим на 4 шаге, а пока давайте наполним наш холст для дальнейшей анимации.
Шаг 3: Добавляем контент
На этом этапе вы добавляете свои элементы, которые хотите анимировать. Я же добавлю свои – это будет елка формата PNG и два текстовых слоя «Новый» и «2022 год». Я сделаю что-то вроде новогодней заставки.
Что ж, приступим:
- Добавляем изображение – для этого просто переносим его в область холста.
- Для вставки текста используем инструмент «Горизонтальный текст» – найти его можно в левой части программы. Также можно воспользоваться горячей клавишей «T».
- Для изменения текста используется меню справа – там можно изменить шрифт и задать ему размер. Чтобы появилось это меню, необходимо предварительно выбрать нужный текст. Больше не будем заострять на этом внимание, просто знайте, где и как это можно сделать.
Готово. Мы добавили временную шкалу и вставили весь нужный нам контент. Пора создавать анимацию – о том, как это сделать, поговорим далее.
Шаг 4: Создаем анимацию в Photoshop
Анимация в Фотошопе может создаваться двумя путями:
- В формате видео – это анимация без зацикливания.
- Покадровая анимация – более сложная анимация, можно делать зацикливание и создавать полноценное GIF-изображение.
Давайте рассмотрим оба случая и попытаемся добиться максимальных результатов.
Вариант 1
Данный вариант у нас открыт по умолчанию – это все инструменты временной шкалы, которые появляются при ее активации. Работать с ними крайне просто:
- Самая базовая анимация, которую мы можем сделать – это появление объектов. Предположим, что нам нужно сделать так, чтобы изначально никаких элементов не было и они появлялись постепенно – сначала елка, затем надпись «Новый» и только в конце «2022 год». Для этого на шкале необходимо сдвинуть каждый из слоев в правую часть с учетом того, что первый будет длиннее второго, а второй – длиннее третьего.
- Чтобы запустить анимацию, достаточно нажать на кнопку запуска в левой части шкалы времени.
- Давайте теперь немного усложним анимацию – сделаем так, чтобы елка появлялась снизу, а надписи слева и справа. Первым делом раскрываем на шкале слой с елкой, в моем случае он называется «Без названия», и нажимаем на иконку, расположенную слева от надписи «Перспектива».
- В результате под слоем с елкой у нас появляется оранжевый ромбик. Важно, чтобы он горел и был расположен в начале слоя – только в этом случае мы можем изменять положение объекта. Если все так, то просто перемещаем елку в нужное положение – в моем случае в самый низ, за границы холста. Убедитесь, что нужный объект выбран в слоях справа. Управлять приближением и отдалением холста можно с помощью клавиши «ALT» и колесика мышки – это поможет вам проще работать с объектами вне холста.
- Теперь выбираем то время, когда у нас будет появляться елка. В этой точке возвращаем елку в привычное состояние, то есть в центр холста. Таким образом, у нас появится вторая точка, но уже не закрашенная.
- Можете проверить – теперь елка появляется снизу. Аналогичным образом мы можем поступить с другими объектами.
- Также мы можем работать и с прозрачностью объекта. Например, можно сделать так, чтобы елка выходила снизу, постепенно проявляясь. Для этого необходимо добавить еще один ромбик, но уже с функцией «Непрозрачность». А в правой части увести в ноль непрозрачность выбранного объекта.
- Вот таким образом мы можем создавать анимацию в Фотошопе. Чтобы ее экспортировать в формат GIF, необходимо в верхнем левом углу выбрать «Файл» -> «Экспортировать» -> «Сохранить для Web (старая версия)».
- В отобразившемся окне выбрать «Сохранить…».
В итоге мы получаем анимированную картинку. Если, например, добавить еще кнопку и проиллюстрировать ее нажатие, то получится некий функционал сайта – при нажатии на кнопку показывается елка с текстом.
Как я уже говорил выше, анимация в Photoshop – это один из самых быстрых способов показать дизайнеру свою задумку. Если же нужна полноценная гифка для использования в интернете, стоит использовать покадровую анимацию. Как с ней работать – поговорим далее.
Вариант 2
Покадровая анимация строится так, будто мы создаем мультфильм. В целом, если посидеть подольше, то можно действительно создать небольшой мультик.
Давайте разбираться, как все это работает. Чтобы стало более понятно, я вернусь к изначальному варианту, когда анимация не была настроена.
Вот такими несложными действиями можно создать анимацию в Фотошопе. Да, она не подойдет для каких-то сложных сценариев, которые, например, можно реализовать в Adobe Animate, но для реализации простых гифок или презентации идей – в самый раз.
Читайте также: