Как сделать гифку в Photoshop. Пошаговая инструкция
Объясняем, как отредактировать видео и задать оптимальные настройки экспорта.
Иллюстрация: Polina Vari для 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 МБ:
Результат: