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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

margin-bottom=-20px!important

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

Данная публикация представляет собой перевод статьи «Making Lightweight Animated GIFs in Photoshop» , подготовленной дружной командой проекта Интернет-технологии.ру