Как зациклить анимацию в фотошопе

Обновлено: 04.07.2024

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

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

Узнайте, как я создал этот GIF! Фото через Грэма Уизардо.

Без лишних слов, вот как создать анимированный GIF в Photoshop.

Шаг 1. Настройте размеры и разрешение документа Photoshop
—

Подготовьте документ заранее. Даже если ваша единственная цель — создать GIF-файл, которым можно поделиться с друзьями в социальных сетях, если размер ваших фотографий или видео диктует размер вашего документа, это может привести к тому, что файл будет больше, чем вам нужно, что приведет к плохому качеству. GIF. В целом, где-то в районе 600–800 пикселей нормально для квадратного изображения.

Настройте размеры, разрешение и цветовой режим документа Photoshop

Размеры

Для этого проекта мы работаем с рекламным баннером в формате GIF, который имеет стандартные рекомендации по размеру. Я выбрал макет 720×300. Убедитесь, что ваши единицы измерения указаны в пикселях.

Разрешение

Чтобы размер файла был как можно меньше, подойдет разрешение 150 пикселей. Я выбрал 300, так как знаю, что мой GIF не будет таким большим. Убедитесь, что ваши единицы измерения указаны в пикселях на дюйм.

Цветовой режим

Наконец, анимированные GIF-файлы создаются для экрана, поэтому установите цветовой режим на цвет RGB. Нажмите «Создать», чтобы открыть новый документ.

Шаг 2. Импортируйте файлы изображений в Photoshop
—

Файл > Скрипты > Загрузить файлы в стек…

Создание GIF из неподвижных изображений

Выберите «Файл» > «Сценарии» > «Загрузить файлы в стек» и нажмите кнопку «Обзор» в появившемся окне «Загрузить слои». Откроется окно Finder/Explorer, в котором вы можете просмотреть свои файлы и выбрать все, что вам нужно. Когда вы закончите, нажмите «Открыть», а затем «ОК» в следующем окне. Файлы будут импортированы в отдельный документ, из которого вы сможете выбрать все слои и перетащить их в свой рабочий документ.

Создание GIF из видео

Если вы конвертируете видео в GIF, выберите «Файл» > «Импорт» > «Видеокадр в слои».

Шаг 3. Откройте окно временной шкалы
—

Окно > Временная шкала

Настроить окно временной шкалы для покадровой анимации

Выберите «Окно» > «Временная шкала». Это откроет панель в нижней трети холста. В центре панели нажмите на стрелку, чтобы открыть раскрывающееся меню, и выберите «Создать анимацию кадра».

Шаг 4. Преобразуйте слои в кадры
—

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

Ваш первый кадр уже будет настроен и состоит из всех видимых слоев (это означает, что видимость слоя или значок глаза включена) в вашем документе. Теперь все, что вам нужно сделать, это заполнить временную шкалу несколькими кадрами, чтобы имитировать движение. Есть два способа сделать это: импортировать уже подготовленные кадры или создать свою анимацию с нуля в Photoshop.В этом разделе рассматривается первый сценарий.

Если вы уже заранее настроили неподвижные последовательные изображения (или работаете с импортированными видеокадрами, см. шаг 2), щелкните значок меню-гамбургера в правом верхнем углу панели временной шкалы. Выберите «Создать кадры из слоев». Вы увидите, как временная шкала заполняется кадрами из ваших слоев.

Шаг 5. Дублируйте кадры для создания анимации
—

Под временной шкалой находится панель инструментов, которая содержит (среди прочего) настройку цикла, кнопку предварительного просмотра и кнопку дублирования кадра

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

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

Шаг 6. Установите время задержки каждого кадра
—

Настройка длительности находится внизу каждого кадра

Вы можете найти таймер задержки в нижней части каждого кадра (время в секундах со стрелкой раскрывающегося списка рядом с ним).

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

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

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

Шаг 7. Установите, сколько раз анимация будет повторяться
—

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

Шаг 8. Предварительный просмотр и повторение анимации
—

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

Шаг 9. Экспортируйте документ Photoshop в формате GIF
—

Файл > Экспорт > Сохранить для Интернета (предыдущая версия)…

Прежде всего, не забудьте сохранить рабочий PSD!

Когда вы будете готовы экспортировать окончательный вариант GIF, выберите «Файл» > «Экспорт» > «Сохранить для Интернета (предыдущая версия)». (Примечание: если вы работаете с более старой версией Photoshop, скорее всего, это будет «Файл» > «Сохранить для Интернета и устройств»). Откроется окно экспорта.

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

Уменьшить размер файла

Ваша основная цель с оставшимися параметрами – сохранить небольшой размер файла за счет уменьшения количества деталей в GIF без ущерба для качества изображения. Помните, что большой размер файла означает медленную загрузку, что может быть особенно неприятным для маркетинговых целей, таких как рекламные баннеры, когда зритель не искал ваш контент и не будет ждать его загрузки. Стремитесь оставаться ниже 1 МБ. До 5 МБ выполнимо на большинстве веб-сайтов, но это необходимо. Вы можете увидеть размер файла GIF в левом нижнем углу панели, содержащей изображение для предварительного просмотра.

Это параметры, на которые следует обратить внимание в окне "Сохранить для Интернета"

Уменьшить информацию о цвете

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

Преобразовать в sRGB

sRGB или «Стандартный RGB» имеет более узкий диапазон цветов, чем Adobe RGB по умолчанию, поэтому обязательно установите этот флажок.

Когда вас устраивают разрешение и размер файла, нажмите кнопку "Сохранить" в нижней части окна. Чтобы убедиться, что все в порядке, вы можете предварительно просмотреть готовый GIF-файл, перетащив его в поле URL-адреса браузера.

Мой готовый рекламный баннер GIF. Фото через Грэма Уизардо.

Шаг 10. Поделитесь готовым GIF-файлом Photoshop!
—

Вот и готово ваше GIF-изображение, готовое к публикации во всемирной паутине. Теперь, когда у вас есть навыки создания базовых анимаций в Photoshop из видео и неподвижных изображений, вы можете оживить практически все!

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

Ищете профессиональную помощь в создании анимации?

Поработайте с одним из наших талантливых дизайнеров!

Эта статья изначально была написана Ребеккой Крегер и опубликована в 2013 году. В нее добавлена новая информация и примеры.

В этом уроке мы придадим вашему видео органичный вид, нарисованный от руки, с помощью Photoshop и After Effects.

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

В этом уроке мы будем использовать пример простой волнистой линии, нарисованной вручную:

Настройка вашего проекта

Размер проекта Photoshop полностью субъективен (в зависимости от проекта After Effects, над которым вы работаете). Как человек, который обычно работает с файлами высокой четкости в Photoshop с разрешением около 300–400 dpi, импорт файла такого размера обычно не нужен и замедляет работу приложения.

Я пошел дальше и установил для этого проекта разрешение 1920 x 1080 при 100 dpi. Нажмите на любое из изображений ниже, чтобы увеличить его:

Настройте слои и фреймы

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

Рисование на фреймах

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

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

Подготовка к экспорту

Затем измените частоту кадров анимации, выделив все кадры и щелкнув правой кнопкой мыши внизу одного из них. Вы захотите перейти на пользовательский .08 на кадр, что соответствует 12 кадрам в секунду (это стандартная частота кадров анимации). Перед экспортом вам необходимо сделать видимыми все слои, кроме фонового.

Слои из Photoshop

Выделите папку на своем компьютере для этого проекта и выберите «Файл»> «Сценарии»> «Экспорт слоев в файлы…», затем установите флажок «Только видимые слои». Выберите имя файла и экспортируйте.

Импорт кадров в After Effects

Откройте After Effects и выберите «Файл»> «Импорт»> «Файл…», затем перейдите в свою папку и выберите первое изображение. Установите флажки «Последовательность Photoshop» и «Использовать алфавитный порядок» перед импортом. Затем импортируйте его как видеоряд с объединенными слоями.

Теперь, когда у вас есть файл анимации в After Effects, внесите несколько быстрых изменений, щелкнув файл правой кнопкой мыши и выбрав «Интерпретировать кадры»> «Главное…»

Открыв это окно, измените частоту кадров на 12 кадров в секунду и зацикливайте анимацию столько, сколько вам нужно.

В этом примере мы использовали простое разбрызгивание, но эту технику можно применить и к простой анимации персонажей или показу заголовков. Поэкспериментируйте с Photoshop и After Effects, чтобы создать собственную уникальную анимацию.

У вас есть потрясающая сцена из вашего любимого сериала или фильма, которую вы хотите воссоздать в виде анимированного GIF-файла? В этом уроке вы точно узнаете, как создать анимированный GIF в Photoshop — это так быстро и просто, что даже новичок сможет справиться!

Создать новый документ

Чтобы начать процесс обучения созданию анимированного GIF в Photoshop, нажмите кнопку «Создать новый».

На панели Предустановленные сведения задайте желаемые значения ширины и высоты. Установите разрешение на 72 пикселя на дюйм, чтобы оно было удобно для Интернета.

В разделе Дополнительные параметры установите цветовой профиль на sRGB IE61966-2.1.

Затем нажмите кнопку "Создать".

Импорт видео

Чтобы импортировать видео, выберите «Файл» > «Поместить встроенный», найдите видеофайл на своем компьютере и нажмите кнопку «Поместить».

Это поместит ваше видео в окно документа.

Преобразуйте видео, чтобы оно соответствовало холсту.

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

Затем нажмите значок галочки, чтобы применить изменения.

Использование панели временной шкалы для обрезки видео

Выберите «Окно» > «Временная шкала».

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

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

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

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

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

Нажмите и перетащите видеослой к начальной точке 00.

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

Затем нажмите и перетащите противоположный край видео к указателю воспроизведения, пока он не встанет на место.

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

Повторный просмотр видео

Нажмите значок "Параметры" > "Зацикленное воспроизведение".

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

Экспорт видеослоя Photoshop как анимированного GIF

Выберите «Файл» > «Экспорт» > «Сохранить для Интернета (предыдущая версия)».

Окно «Сохранить для Интернета» иногда может открываться медленно в зависимости от вычислительной мощности вашего компьютера, размера файла и сложности анимации.

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

Проверьте Размер изображения и убедитесь, что оно имеет соответствующие размеры.

В разделе Анимация установите для параметра "Зацикливание" значение "Навсегда".

Просмотрите GIF, нажав кнопку воспроизведения.

Когда вы будете готовы, просто нажмите кнопку "Сохранить", назовите файл и нажмите кнопку "Сохранить", чтобы завершить работу над GIF!

Моя новая видеосерия в Adobe

Если вы пропустили это, Adobe и Photoshop Training Channel объединились для серии из 6 частей, которая знакомит пользователей Photoshop с Adobe Illustrator и Premiere Pro!

Он включает в себя 3 видеоролика для Adobe Illustrator, посвященные созданию логотипа, масштабируемому тексту и дизайну визитной карточки!

В Adobe Premiere вы узнаете, как корректировать цвета, анимировать графику и даже изменять размер видео для публикации в социальных сетях!

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

Научитесь оживлять свои иллюстрации с помощью 2D- и 3D-анимации

100 % положительных отзывов (44)

927 учащихся
Онлайн и в удобном для вас темпе
Аудио: португальский
Уровень: начальный

27 уроков (6ч 47мин)
Доступно в приложении
Испанский , английский , португальский , немецкий , французский , итальянский , польский , нидерландский
Неограниченный доступ навсегда
Сертификат по окончании курса

Об этом курсе

Содержание курса

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

Теперь приготовьтесь расправить крылья! Вместе с Джонасом в качестве второго пилота приступайте к созданию трехмерного персонажа. Оживите свое творение с помощью текстур и освещения в Cinema 4D и Photoshop. Он научит вас создавать анимацию с нуля, используя раскадровку, прежде чем переходить к ретуши и рендерингу.

Посмотрите, как комбинировать 2D- и 3D-эффекты в After Effects. Теперь пришло время Катарине показать вам, как выполнять базовые настройки и использовать такие эффекты, как смещение, хроматическая аберрация, деформация и зацикливание текстуры. В завершение она даст вам несколько ключевых советов, как найти себя в мире анимации.

Какой проект этого курса?

Создайте циклическую анимацию, сочетающую двухмерные и трехмерные элементы.

Для кого это?

Иллюстраторы, дизайнеры, художники и все, кто хочет расширить свои знания о 2D- и 3D-анимации и соединить эти два мира, чтобы воплотить в жизнь единственную в своем роде работу.

Что вам нужно

Для этого курса необходимы базовые знания о 2D- и 3D-анимации в Photoshop, Cinema 4D, After Effects или подобных программах.

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

Читайте также: