Движущиеся изображения привлекают больше внимания. Но анимированные 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 строку кода, чтобы убрать разрыв:
margin-bottom=-20px!important
Теперь при просмотре веб-страницы браузер загружает GIF-анимацию с бесконечно движущейся водой, которая весит менее 2 МБ.
Пожалуйста, оставляйте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, отклики, подписки, лайки, дизлайки!
Дайте знать, что вы думаете по данной теме в комментариях. За комментарии, лайки, дизлайки, отклики, подписки низкий вам поклон!
The post Создание компактных анимированных GIF-файлов в Photoshop first appeared on Adobe Photoshop – уроки, статьи, фишки.
