Как сделать гифку в фотошопе и сохранить анимацию

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

Настройки цветов, размера и дизеринга помогут уменьшить вес готового файла.

Как сделать гифку в фотошопе из картинок и слоев

Для простой покадровой анимации подготовьте отдельное изображение каждого состояния. Например, сделайте 3 картинки с разными положениями объекта. Так можно сделать гиф из подготовленных изображений: Photoshop превратит их в последовательность кадров.

Пример готовой анимации:

Шаг 1. Подготовьте изображения в одном документе

Если у вас уже есть изображения. Сохраните нужные изображения в отдельную папку. Желательно заранее привести картинки к одинаковым размерам: так объект не будет случайно смещаться между кадрами.

1. Откройте «Файл» → «Сценарии» → «Загрузить файлы в стек».
2. Нажмите «Обзор» и выберите подготовленные изображения.
3. Нажмите «ОК». Photoshop создаст отдельный слой для каждого добавленного изображения.

Если вы рисуете кадры самостоятельно. Создайте документ и добавляйте состояния объекта на отдельных слоях. Для нового слоя используйте «Слой» → «Создать» → «Слой».

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

Назовите слои по порядку, например «Кадр 1», «Кадр 2», «Кадр 3».

Для первого опыта используйте полные изображения кадров с одинаковым фоном. Сборка отдельных деталей потребует дополнительной настройки видимости слоев.

Шаг 2. Включите покадровую анимацию

1. Откройте «Окно» → «Шкала времени». В рабочей области появится панель анимации.
2. В раскрывающемся списке в центре панели выберите создание анимации кадров.
3. Нажмите появившуюся кнопку создания. На панели появится первая миниатюра кадра.

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

Шаг 3. Создайте кадры из слоев

1. Выделите подготовленные слои на панели «Слои». Для последовательного диапазона нажмите первый слой, затем последний с зажатой Shift.
2. Откройте меню в правой части панели «Шкала времени».
3. Выберите «Создать кадры из слоев». На панели появятся миниатюры последовательных состояний.

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

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

Шаг 4. Задайте длительность кадров

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

1. Нажмите значение задержки под нужной миниатюрой.
2. Выберите длительность из списка или задайте свою через «Другое».
3. Запустите воспроизведение и оцените скорость смены изображений.

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

Чтобы задать одну задержку всем кадрам, выделите весь диапазон миниатюр. Нажмите первый кадр, затем последний с зажатой Shift. После этого измените задержку под любой выделенной миниатюрой.

Задержите последний кадр на 1 секунду, чтобы зритель успел рассмотреть результат.

Шаг 5. Настройте повторы и просмотрите анимацию

Список повторов находится внизу панели «Шкала времени». Для непрерывной анимации выберите «Постоянно». Для одного прохода используйте «Однократно», для заданного числа воспроизведений – «Другое».

Не полагайтесь на исходное значение списка: задайте нужный режим самостоятельно.

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

Как добавить промежуточные кадры для плавного движения

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

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

1. Создайте первый кадр с исходным положением объекта.
2. Продублируйте кадр кнопкой дублирования на панели «Шкала времени».
3. Выберите второй кадр и переместите тот же слой в конечную точку.
4. Выделите оба кадра на панели с зажатой Shift.
5. Нажмите кнопку «Создание промежуточных кадров» внизу панели.
6. Задайте число добавляемых кадров, например 5, и включите изменение положения.
7. Подтвердите действие. Между исходными миниатюрами появятся промежуточные состояния объекта.

Для плавного появления измените во втором кадре прозрачность того же слоя. При создании перехода включите изменение непрозрачности. После добавления кадров заново оцените общую длительность анимации.

Если результат не подходит, отмените добавление командой отмены. Большее число кадров делает переход плавнее, но может увеличить вес GIF.

Как сделать GIF в фотошопе из видео

Для гифки из ролика импортируйте короткий фрагмент как слои. Photoshop превратит выбранные видеокадры в основу покадровой анимации.

Звук в GIF не сохраняется.

1. Откройте «Файл» → «Импортировать» → «Кадры видео в слои».
2. Выберите видеофайл на компьютере. Откроется окно импорта с предпросмотром.
3. Выберите импорт отдельного диапазона и задайте начало и конец фрагмента.
4. Для первого опыта оставьте короткий фрагмент, например 3 секунды.
5. Включите ограничение импорта каждым N-м кадром, если хотите сократить последовательность. Например, значение 2 оставит каждый второй кадр.
6. Подтвердите импорт. Photoshop загрузит выбранные видеокадры в слои документа.

Откройте «Окно» → «Шкала времени» и проверьте наличие миниатюр кадров. Если последовательность не появилась, включите режим анимации кадров кнопкой в центре панели. Затем выберите «Создать кадры из слоев» в меню панели.

Запустите воспроизведение и проверьте скорость движения. После прореживания при необходимости скорректируйте задержки: удаление кадров может изменить темп анимации.

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

Если вы ищете, как сохранить видео в фотошопе именно в виде гифки, используйте экспорт GIF через «Сохранить для Web».

Как сохранить гиф в фотошопе и уменьшить вес файла

Сохраните рабочий документ в PSD, чтобы оставить слои и настройки анимации. Для публикации экспортируйте отдельный GIF через «Сохранить для Web».

Откройте экспорт анимированного GIF

1. Выберите «Файл» → «Экспорт» → «Сохранить для Web (старая версия)».
2. В списке форматов выберите GIF. В предпросмотре появится изображение с выбранной палитрой.
3. Запустите воспроизведение внутри окна экспорта. Убедитесь, что программа показывает всю последовательность кадров.

В пресете «GIF 128 с дизерингом» число 128 обозначает количество цветов палитры. Это не процент сглаживания и не число кадров.

Дизеринг имитирует недостающие оттенки узором из доступных цветов. Он помогает передать градиенты, но может добавить заметный шум.

Подберите настройки сжатия

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

Для сравнения попробуйте палитры на 128 и 64 цвета.

У простой схемы разница может быть незаметной. У фотографии уменьшение палитры способно сильно исказить оттенки.

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

Оценку размера файла смотрите в информационной области под предпросмотром.

После изменения настроек дождитесь обновления значения и сравните вес вместе с качеством изображения.

Параметр «Повторы» управляет воспроизведением и почти не влияет на вес. Для непрерывного цикла выберите «Постоянно». Сокращение числа повторов не заменяет уменьшение размеров или количества кадров.

Как сохранить гифку в фотошопе на компьютер

1. Нажмите «Сохранить» в окне «Сохранить для Web».
2. Выберите папку назначения и задайте имя файла с расширением .gif.
3. Подтвердите сохранение. В выбранной папке появится готовый файл.
4. Перетащите GIF в окно браузера. Просмотрите анимацию и проверьте повтор после последнего кадра.

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

Пример итогового GIF:

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

Ошибки при сохранении GIF в Photoshop

Какой исходник выбрать для GIF

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

Совет от нашей редакции: сохраняйте PSD отдельно от экспортированного GIF. Рабочий документ позволит исправить задержку или размер без повторной сборки анимации.