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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 11: Объедините картинки

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

margin-bottom=-20px!important

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *