Создание компактных анимированных GIF-файлов в Photoshop

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

Шаг 1: Оригинальное видео

Это видео со стремительной рекой можно скачать здесь. Откройте его в Photoshop и перейдите в меню Окно> Временная шкала. В ней вы увидите, что это видео длится 20 секунд. Но нам нужно всего четыре секунды.

Шаг 2: Обрежьте видео

Чтобы выбрать нужный фрагмент видео, перетащите левый маркер рабочей области на 1 сек., а правый на 5 сек. После этого при нажатии кнопки «Выполнить» будет воспроизводиться только этот фрагмент.

Нажмите на значок шестеренки в окне временной шкалы, чтобы активировать циклическое воспроизведение видео (параметр «Цикл воспроизведения»).

Шаг 3: Продублируйте видео

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

Шаг 4: Уберите переход

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

Перетащите ползунок временной шкалы на 4 секунды и установите непрозрачность слоя на 0. Затем переместите ползунок на 5 секунд и установите непрозрачность на 100%.

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

Шаг 5: Сохранить для интернета

Войдите в меню Файл> Экспортировать> Сохранить для Web и настройте экспорт видео в формате GIF. Уменьшите ширину до 600 пикселей. Со стандартными настройками GIF небо выглядит неестественно, а размер файла составляет 3,5 МБ.

Шаг 6: Сохранить для интернета, часть 2

Чтобы созданный ролик выглядел лучше, необходимо изменить количество цветов на 256 и добавить диффузное сглаживание. Но из-за этого размер файла превысит 11 Мб.

Шаг 7: Сохранение с обрезкой

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

Шаг 8: Сохранить для интернета, часть 3

Откройте диалог «Сохранить для Web», уменьшите количество цветов до 32 и увеличил количество потерь до 40%. При этом вы не заметите ухудшение качества видео, а размер файла уменьшится до 2 Мб. Теперь экспортируйте файл.

Шаг 9: Инвертировать обрезку

Затем снова используйте инструмент «Рамка». Захватите нижний маркер и переместите его к верхней части изображения.

Шаг 10: Сохранить для интернета, часть 4

Еще раз откройте диалоговое окно «Сохранить для Web». На этот раз сохраните новое изображение (верхнюю часть сцены) в виде статического файла формата JPEG. Даже при качестве в 40% вы получите изображение размером всего 26 КБ.

Шаг 11: Объедините изображения

В HTML-коде веб-страницы разместите два изображения непосредственно друг над другом, не оставляя зазора между ними. Если вы используете WordPress, добавьте в CSS строку кода, чтобы убрать разрыв:

Теперь при просмотре веб-страницы браузер загружает GIF-анимацию с бесконечно движущейся водой, которая весит менее 2 МБ.

Источник