Как сделать гифку в Photoshop. Пошаговая инструкция

Объясняем, как отредактировать видео и задать оптимальные настройки экспорта.

Иллюстрация: Polina Vari для Skillbox Media

Редакция «Дизайн» Skillbox Media

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

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

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

Эту задачу можно решить гораздо быстрее и удобнее в Figma:

Подготовка видео

Чтобы добавить видео в Photoshop, просто перетащите его правой кнопкой мыши на холст, как вы делаете с обычными картинками. В статье разберём, как сделать гифку на примере этой утки.

Если ваше видео идёт долго, его можно обрезать прямо в Photoshop с помощью таймлайна. Чтобы его включить, перейдите в меню Window («Окно») → Timeline («Шкала времени») — снизу появится подобие линейного редактора, как в Premiere Pro.

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

Настройки экспорта

Как только вы обрежете видео, перейдите в меню File («Файл») → Export («Экспорт») → Save for Web («Сохранить для Web»). Перед вами появится меню с настройками экспорта гифки.

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

Мы советуем использовать такой алгоритм оптимизации гифок:

1. Уменьшите количество цветов. Если на гифке только рисованный персонаж, цвета можно смело урезать с 256 до 64. Но следите за тем, чтобы в результате изображение не ухудшилось.

2. Поменяйте алгоритм смешения Diffusion («Диффузия») на Noise («Шум»). Diffusion вам придётся настраивать самостоятельно, а Noise — автоматический, хотя выдаёт практически тот же результат.

3. Уменьшите разрешение изображения на 50%. Гифки обычно смотрят в небольшом размере, поэтому использовать высокое разрешение 1920×1080 необязательно.

4. Включите Transparency («Прозрачность»). Photoshop лучше оптимизирует гифки, если эта настройка активирована. Даже если фактически никакой прозрачности в вашей гифке нет :-)

По этим настройкам гифку из примера удалось «сжать» с изначальных 8,8 МБ до 1,7 МБ: