Как сделать GIF в PhotoShop из видео

Если вы пришли сюда с вопросом, как создать GIF в Photoshop, вероятно, это потому, что видео, которое вы загрузили на свой веб-сайт, замедляло время загрузки. Что ж, вы пришли в нужное место. В этом руководстве мы покажем вам, как сделать GIF в Photoshop из видеозаписи. Он будет отлично смотреться на вашем сайте и будет намного более оптимизирован по скорости, чем видеофайл!

С помощью GIF вы можете представить любой тип видео на веб-сайте в цикле. Это может быть отрывок из рекламного материала, запись экрана для учебного пособия или почти все, что вы действительно хотите.

Для этого урока вам потребуются видеоматериалы и Adobe Photoshop. Если у вас нет подписки на Photoshop, вы можете воспользоваться бесплатной пробной версией, впоследствии вы можете обнаружить, что наличие Photoshop очень помогает в веб-дизайне! Если ваше видео очень длинное, вы можете сначала сократить его в видеоредакторе, таком как iMovie или Adobe Premiere. В Photoshop также есть опция обрезки при импорте, но видеоредактор лучше, если исходный материал очень длинный.

Давайте начнем.

Предварительный просмотр окончательного результата

Это окончательный результат GIF, который мы создали для этого урока, он идеально подходит для фона раздела или модуля.

Для начала импортируйте видео в Photoshop.

Чтобы импортировать видеоклип в Photoshop, вам нужно сначала войти в редактор Photoshop. Оттуда нажмите File> Import> Video Frames to Layers. Выберите видео, которое хотите использовать, и нажмите «Открыть».

Во всплывающем диалоговом окне у вас есть два варианта выбора; 1. От начала до конца - использовать видео целиком или 2. Только выбранный диапазон - использовать опцию обрезки и использовать только часть видео.

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

Для этого урока мы выбираем «От начала до конца» и «Ограничить каждые 3 кадра». Убедитесь, что нажата кнопка «Сделать анимацию кадра».

Внесите коррективы в видеоряд

Это идеальное время для любых корректировок видеозаписи, от обрезки размера до настройки уровней цвета. Например, в углу видео может быть неприглядный объект или видео во всю высоту слишком велико для того места, где вы хотите разместить его в дизайне своего веб-сайта. В качестве альтернативы, если видеоматериал чрезмерно насыщен, вы можете использовать панель настроек, чтобы настроить насыщенность сразу для всех слоев.

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

Совет от профессионала: убедитесь, что какую бы корректировку вы ни делали, вы выбрали все слои.

Как обрезать сразу все слои

Выберите все слои, щелкнув слой 1, затем, удерживая нажатой клавишу Shift, щелкните самый верхний слой. Выберите инструмент «Прямоугольная область» и выберите область видео, которую вы хотите сохранить (а не то, что вы хотите удалить). Щелкните Изображение> Обрезать, и области за пределами выделения исчезнут. В нашем видео мы выделяем всю область видео, оставляя немного в верхней части невыделенной. Мы хотим сделать все видео менее высоким и убрать белый край горизонта.

Как настроить цвета в GIF

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

Этот GIF загружен размером 211 МБ без цветных фильтров и 312 МБ с настройками цвета. Если вам действительно нужна корректировка цвета, вам нужно обрезать кадры, чтобы окончательный файл стал меньше. Подробнее об этом в следующем разделе.

Используйте шкалу времени для редактирования кадров

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

Чтобы получить доступ к окну шкалы времени и посмотреть, как GIF работает в цикле, нажмите «Окно»> «Временная шкала». В нижней части экрана откроется длинная горизонтальная панель. В левом нижнем углу есть несколько элементов управления. Выберите вариант цикла «Навсегда» и нажмите кнопку воспроизведения, чтобы посмотреть, как выглядит GIF. В нашем случае наш GIF выглядит неплохо, но все равно слишком длинный. С более чем 200 кадрами и с настройкой цвета конечный файл имеет колоссальные 312 МБ. Вы можете проверить размер окончательного файла, выполнив действия, описанные в разделе «Сохранить как GIF» ниже. После того, как вы посмотрите, просто нажмите «Отмена» вместо сохранения. Вы также сможете уменьшить размер файла с помощью параметров «Экспорт в Интернет».

Как удалить рамки, чтобы уменьшить размер файла GIF

Чтобы сделать наш GIF намного меньше, мы вынимаем последние 200 кадров. Во всем видео есть фрагмент, в котором камера дрона поворачивается и панорамирует налево, в сторону парка за пляжем. Нам это было не нужно. Теперь наш GIF весит 160 МБ. Все еще довольно большой. Мы больше не удаляем фреймы, потому что они будут нестабильными, поэтому мы оставляем их как есть, чтобы оптимизировать их позже с помощью опций «Сохранить для Интернета».

Чтобы удалить кадры, вы можете выбрать один и нажать значок корзины, который находится под функциями воспроизведения в окне временной шкалы. Точно так же вы можете выбрать последовательную группу кадров, щелкнув один, а затем кадры до или после, нажав Shift + щелчок. Если вы не хотите обрезать отснятый материал с начала или конца GIF-изображения, но хотите сделать его короче, удалите альтернативные кадры, нажав на один, а затем Ctrl + щелкнув каждый второй кадр.

Нам нравится, как когда вы создаете GIF в Photoshop с видео, вы можете вырезать части отснятого материала как при импорте, так и после него! Так практично.

Как изменить скорость GIF

Окно временной шкалы также дает вам возможность замедлить или ускорить GIF. Под каждым кадром на временной шкале находится регулятор скорости. Измерение по умолчанию - «без задержки» или «0», но может случиться так, что для видео, которое вы использовали, уже была регулировка скорости. Так обстоит дело с нашим видео. Если вы посмотрите на снимок экрана выше, где мы удаляем кадры, вы увидите, что наши кадры имеют задержку 0,04 секунды. Когда мы просматриваем GIF, похоже, что он ускорен. Мы этого не хотим.

Мы выбираем все кадры на временной шкале, щелкая три линии в верхнем левом углу окна временной шкалы и нажимая «Выбрать все кадры». На любом из кадров мы нажимаем маленькую стрелку вниз и выбираем «без задержки». Это сделает наш GIF плавным. Чтобы создать GIF, который выглядит так, как будто он движется в замедленном темпе, выберите любое значение больше 1 секунды.

Сохранить как GIF и оптимизировать

Когда все будет готово, самое время сохранить проект в формате GIF. Нажмите «Файл»> «Экспорт»> «Сохранить для Интернета» (устаревшая версия) и выберите вариант «GIF» во всплывающем диалоговом окне. Проверьте размер файла и подумайте о его выводе. Есть несколько способов уменьшить размер файла.

• Уменьшите количество цветов.
• Уменьшите или удалите дизеринг.
• Уменьшите высоту и ширину.

Чтобы проверить, как настройки изменяют ваш GIF, нажмите кнопку «Предварительный просмотр». Используйте вкладки «2 варианта» и «4 варианта», чтобы увидеть различные варианты. Возможно, вам придется вернуться и удалить другие кадры, если он все еще слишком большой. Стремитесь к размеру файла менее 20 МБ. Если вы создавали GIF для полноразмерного раздела, вам нужно будет действительно урезать кадры, чтобы иметь возможность получить его подходящего размера для Интернета.

Хорошее практическое правило - размер файлов GIF должен составлять не более 20 МБ. Более того, это слишком велико. Если вам удастся уменьшить его до менее 10 МБ без потери качества, то у вас есть победитель.

В итоге мы удалили больше кадров из нашего GIF, чтобы уменьшить его до 18 МБ. Потом прогнали через GIFCompressor, уменьшили на 55%. GIFCompressor - это бесплатный онлайн-инструмент, который уменьшает размер GIF без потери качества. Вы можете загрузить GIF размером до 50 МБ.

Заключение

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

Лучшее изображение через emojoez / shutterstock.com