Как уменьшить объём файла анимации GIF в Photoshop
Продолжение советов по оптимизации и уменьшению объёма анимированного файла GIF, начало смотрите здесь.
Содержание
1. Подбор оптимальной модели редукции цвета
Всего в Photoshop имеется четыре модели:
Перцепционная (Perceptual) — для создания пользовательской таблицы цветов, наиболее гармоничных для восприятия
Селективная (Selective) — по умолчанию создает таблицу цветов, схожую с перцепционной, но основанную на ключевых цветах изображения, причём предпочтение отдается web-цветам. Эта таблица обычно делает изображение с наибольшей достоверностью цветов. Эта модель выбрана по умолчанию.
Адаптивная (Adaptive) — для создания пользовательской таблицы цветов спектра путём выборки из тех цветов,которые чаще повторяются в изображении. Например, изображение только с оттенками зеленого и синего цвета создаёт таблицу в основном из оттенков синего и зеленого.
Большинство цветов изображения концентрируется в определённой области спектра
Ограниченная (Restrictive) — использует стандартную палитру из 216 безопасных Web-цветов.
Справка: Безопасные веб-цвета рекомендуются для экранного дизайна. Они всегда неизменны при переходе от одного браузера к другому, от одного монитора к другому, или от одной платформы к другой, с их различными разрешениями и возможностями цветопередачи.
Если ваше изображение имеет меньше, чем 216 цветов, неиспользуемые цвета удаляются из таблицы.
Ели говорить откровенно, то я всегда подбираю эти модели методом научного тыка.
2. Замена цветов анимации на Web-цвета
Выше мы рассмотрели модели редукции цвета, последней из которых является «Селективная», меняющая ве цвета изображения на Web-безопасные. Это уменьшает объём файла, но и почти всегда ухудшает качество изображения.
Есть другой вариант — использовать одну из первых трёх моделей и заменять не все цвета на Web, а только часть.
Делается это с помощью опции «Web-цвета» (Web Snap).
Чем больше значение процентов, тем меньше размер выходного файла, но и хуже качество. Вё зависит от исходных цветов, а, самое главное, переходов между цветами и светами изображения. Так что опять-таки, значение опции определяется эмпирически, в зависимости от каждого конкретного изображения.
3. Дизеринг (сглаживание, Dithering)
В официальных русскоязычных версиях Photoshop с незапамятных времён опция «Dithering» переводится как «Дизеринг», что является, мягко говоря, неточностью. В данном контексте «Dithering» означает «сглаживание», сглаживание переходов от одного цвета к другому.
Поскольку GIF-файлы содержат ограниченное количество цветов, для улучшения вида рисунка может понадобиться создание переходов между отдельными цветами, а для этого нужно имитировать недостающие цвета. Для создания этих цветов и существует опция «Дизеринг». Всего имеется четыре алгоритма для подобной имитации сглаживания — «Без дизеринга», «Случайное», «Регулярный» и «Шум»:
Рассмотрим алгоритмы подробнее (надеюсь, с режимом «Без дизеринга» всё понятно).
Используя алгоритм «Случайное» (Diffusion), мы, можем регулировать количество сглаживания.
В алгоритмах «Регулярный» (Pattern) и «Шум» (Noise) настройки отсутствуют, Photoshop всё делает автоматически.
Для некоторых изображений «Дизеринг» просто необходим, но следует помнить, что чем больше его значение, тем больше размер файла, т.к. он добавляет разноцветные пиксели в непосредственной близости друг от друга, для имитации вторичных цветов или гладких цветовых градаций.
4. Другие настройки
«Потери» (Lossy) — управление уровнем потерь визуальной информации при сглаживании, которые могут уменьшить размер файла, но также и ухудшить качество картинки. Доступна при отключенной опции «Чересстрочно» (Interlaced).
«Прозрачность» (Transparency) — имеет смысл включить в том случае, если изображение содержит прозрачные участки. Алгоритмы сглаживания работают по принципу опции «Дизеринг» (Dithering) и называются так же.
5. Сравнение исходной и оптимизированной версий
После того, как Вы добавили свои настройки в диалоговое окно сохранения для Web, с оптимизированной версией произошли изменения, и, почти всегда, в сторону ухудшения качества. Тщательно проверьте полученный результат, сравните его с исходником:
Вы можете просмотреть анимацию, а также задать параметры повторов — один раз, постоянно или задать собственное количество повторов:
Если результат Вас удовлетворил, переходите к следующему действию — сохранению анимации.
6. Подогнать оптимизацию анимации под указанный объём файла
Такая опция тоже имеется при сохранении анимации в Photoshop. Вы можете задать размер выходного файла, и исходя из этого Photoshop сам произведёт оптимизацию, подогнав размер файла под указанный Вами.
Нажимаем на кнопку в правом верхнем углу и выбираем строку «Оптимизировать по размеру файла» (Optimize to File Size)
7. Предварительный просмотр анимации в браузере, сохранение параметров оптимизации
После того, как Вы подобрали нужные настройки, сохраните их в наборе.
Кликните по значку в правом верхнем углу окна сохранения для Web и нажмите на строку «Сохранить настройки»:
Анимацию с нашими настройками мы можем предварительно просмотреть в браузере, нажав на кнопку в левом нижнем углу окна:
Будет показана не только анимация, но и все данные по файлу GIF — объём, линейные размеры и т.д., а также HTML-код. Для примера я взял анимацию из этого урока:
Если всё нравится, то сохраняем файл. Для этого нажимаем кнопку «Сохранить» в правом нижнем углу диалогового окна. Открывается новое окно, где выбираем путь, ставим настройки, как показано на рисунке (это настройки по умолчанию), нажимаем кнопку «Сохранить»:
Анимация будет сохранена. Если сё-таки что-то не понравится, то можно будет произвести оптимизацию заново, используя сохранённый набор настроек.
Как создавать анимацию в Photoshop?
Cодержание
- Покадровая анимация
- Анимация по ключевым кадрам
Photoshop — многозадачный, многофункциональный инструмент, который позволяет создавать профессиональные анимации для визуального сторителлинга.
Поскольку борьба в медиа пространстве идет, в первую очередь, за внимание, анимация позволяет зацепить глаз читателя или читательницы, который быстрее всего реагирует именно на движущиеся объекты.
Функционала Photoshop обычно достаточно, чтобы создать анимацию, способную не только привлечь внимание к контенту, но также повысить юзабилити и помочь читателю продвинуться в материале.
Для этого Photoshop позволяет создавать как покадровую анимацию, так и с использованием ключей. Рассмотрим оба варианта, а вы решайте, какой вам подходит больше.
Покадровая анимация
Этот вид анимации создается с помощью кадров, роль которых в Photoshop играют слои.
Такая анимация лучше всего подходит, когда вы наснимали много фото в похожих декорациях и хотите отобразить получившееся в формате гиф.
Для начала задайте для документа, в котором будете делать анимацию, размеры в пикселях, подходящие для ресурса, куда поместите анимацию. Конечно, это можно сделать и в самом конце, но так вы рискуете потерять важные элементы анимации.
Включаем режим покадровой анимации.
Для этого во вкладке «Окно» выбираем пункт «Шкала времени» (Timeline), которая отобразится под фото. Убедитесь, что шкала находится в режиме покадровой анимации. Кадрами в такой анимации, как мы уже отметили, выступают слои, а движение создается путем включения каждого слоя по очереди. Поэтому сперва расположите каждую фотографию серии на отдельном слое в хронологической последовательности.
Здесь ваша главная задача — разместить слои таким образом, чтобы при переключении кадров получился цельный клип. Чтобы удачно совместить один кадр с другим, работая на определенном слое, включите предыдущий, временно изменив его прозрачность. Так вы сможете подогнать изображение пиксель к пикселю.
Как только все готово, сохраняем анимацию: «Файл» — «Экспортировать» — «Для веб»: там можно изменить показатели шума и зернистость. Сохраняем наш шедевр в формате GIF. Чтобы сохранить видео, то есть если ваша анимация не зациклена, выбираете «Экспорт» — «Рендер видео» и выбираете его формат: для наилучшего качества советуем остановиться на MOV.
Для соцсетей, куда загрузить тяжелый файл может быть проблематично, отлично подойдет MP4.
Если анимацию будем делать, манипулируя с исходными объектами изображения, сначала нам следует переместить их на отдельные слои. Для выделения объектов удобно использовать прямоугольное или магнитное лассо, а отправить получившую область на новый слой можно при помощи сочетания клавиш CTRL + J. Далее можно поиграться с объектом: дублировать его, переставлять, отражать, включив опцию «Трансформация» во вкладке «Редактирование».
Чтобы добиться эффекта перехода изображения из размытого в четкое, продублируйте несколько раз слой с объектом, и определите для каждого слоя разные уровень размытия. Полученную анимацию можно зациклить, выбрав соответствующую опцию в таймлайне, а на последнем кадре — задержаться.
Чтобы зациклить анимацию плавно, сделайте самый четкий кадр в середине таймлайна, продублируйте его, чтобы немного задержать, а потом опять уйдите в размытие (последний и первый кадр в таком случае должны быть одинаково размыты).
Анимация по ключевым кадрам
Чтобы создать анимацию по ключам, в пункте «Шкала времени» переключитесь на «видео».
Этот вид анимации подразумевает анимирование в конкретных слоях, которое будет происходить за счет перемещение или изменения объектов на одном слое.
Каждый из слоев здесь имеет свою ленту в таймлайне, а значит все элементы, которые вы собираетесь анимировать, необходимо переместить на отдельные слои (или создать их в разных слоях). Также слой, в котором работаем, желательно сделать смарт-объектом.
Расставлять ключевые кадры просто. Например, работая в слое в первом кадре, поставьте ваш элемент в исходное положение, а в 10-м — в то, которое он должен прийти через 9 кадров. После сделайте 10-й кадр ключевым (это можно сделать, нажав на треугольник рядом с названием слоя и затем выбрав значок секундомера). Движение объекта с 1-го по 10-й кадр Photoshop плавно сделает сам. Аналогично расставляйте ключевые кадры так, как требует этого задумка. Проделайте то же самое на всех слоях, которые будут двигаться.
Учтите, что чем дальше ключи стоят друг от друга, тем медленнее происходит движение.
Таким образом менять можно: положение объекта, его прозрачность, форму, стили, цвета. Закрепляя ключевые кадры, объект сможет плавно перемещаться и трансформироваться, появляться в кадре и исчезать из него. Все зависит от вашей фантазии и поставленной задачи.
Сохраняем такой клип как видео: «Файл» — «Экспорт» — «Рендер видео» и выбираем подходящий формат.
Помните, что главное при создании анимации — пробовать и примерять, ведь никакая композиция не станет в кадр сама собой.
Так что вперед к творчеству: добавляйте, удаляйте, экспериментируйте, а главное — делайте клип по душе, и тогда он обязательно найдет отклик у аудитории.
Конспект подготовлен на основе занятия дизайнерки Каролины Поляковой.Как превратить фотографии в GIF с помощью Photoshop
Каспарс Гринвальдс/Shutterstock
Автор: Фейсал Расул/25 июля 2022 г.
, 11:39 по восточному стандартному времени
Фотошоп часто считают инструментом для обработки неподвижных изображений. Но это надежное, сложное приложение также может обрабатывать анимацию. Вы можете создавать анимированные GIF-файлы и настраивать их по своему вкусу, выполнив несколько простых шагов. Как только вы изучите эту технику, создание GIF-файлов в Photoshop станет смехотворно быстрым и легким. В Photoshop есть набор инструментов, которые позволяют создавать рекламные баннеры, создавать GIF-файлы из кадров с интервальной съемкой и превращать неподвижные изображения в анимированные GIF-файлы.
Анимированные файлы GIF состоят из последовательности неподвижных изображений (или кадров), оживающих при воспроизведении одного за другим. Photoshop делает именно это с набором фотографий по вашему выбору. Анимация становится более плавной, когда вы используете больше фотографий, и становится более прерывистой при меньшем количестве кадров.
Вы можете редактировать каждый кадр, настраивать размеры, добавлять текст и выбирать, сколько раз будет повторяться ваш GIF.
Сегодня мы рассмотрим самые простые пошаговые инструкции по созданию GIF из стопки изображений.
Загрузите кадры
Прежде чем начать, вам потребуется полная версия Photoshop для настольных ПК. В бесплатном Photoshop для Интернета отсутствуют инструменты для анимации. В Photoshop есть специальный скрипт для загрузки нескольких изображений в виде слоев. После импорта все файлы будут размещены на панели слоев. Вы начнете с подготовки к загрузке изображений в стек.
- Начните с создания нового документа Photoshop с желаемыми размерами и разрешением.
- Чтобы загрузить последовательность неподвижных изображений, перейдите в «Файл», «Сценарии», затем «Загрузить файлы в стек».
- Когда появится окно «Загрузить слои», нажмите «Обзор», выберите файлы изображений и нажмите «Открыть».
- Нажмите OK, чтобы загрузить все изображения в слои.
SlashGear
Изображения должны иметь одинаковое разрешение и размеры.
- Выберите «Окно», «Временная шкала», чтобы открыть панель «Временная шкала».
- Щелкните значок стрелки рядом с кнопкой «Создать временную шкалу видео» и выберите «Создать анимацию кадра».
- Когда кнопка изменится на «Создать покадровую анимацию», щелкните ее.*
- Выберите все слои на панели слоев.
- Нажмите кнопку с четырьмя полосками в углу панели «Таймлайн».
- Нажмите «Создать кадры из слоев», чтобы преобразовать каждый слой в кадр анимации.
- Нажмите маленькую кнопку воспроизведения, чтобы просмотреть анимацию.
*Если при открытии панели «Временная шкала» отсутствует кнопка «Создать временную шкалу видео», возможно, потребуется нажать кнопку в левом нижнем углу панели «Временная шкала».
Эта кнопка (та, что с тремя квадратами) преобразует в покадровую анимацию. Перейдите к шагу 4 выше.
Зацикливание и экспорт GIF в Photoshop
По умолчанию задержка между каждым кадром установлена на ноль секунд. Но вы можете щелкнуть, удерживая клавишу Shift, чтобы выбрать все кадры, и щелкнуть стрелку вниз, чтобы изменить продолжительность. Панель «Таймлайн» также позволяет настроить количество циклов. По умолчанию он зацикливается навсегда. Нажмите кнопку «Навсегда» рядом с элементами управления проигрывателем и выберите, сколько раз вы хотите, чтобы GIF повторялся, прежде чем он остановится на неподвижном изображении. Предустановки могут зацикливаться один раз, три раза или навсегда, а «Другое» позволяет ввести собственный номер.
Когда вы закончите, вам нужно будет экспортировать GIF на свой компьютер. Мы будем использовать предустановку, уже доступную в Photoshop, для оптимизации анимации и размера файла GIF (через Adobe).
- Перейдите в меню «Файл», «Экспорт» и «Сохранить для Интернета (предыдущая версия)», чтобы открыть окно «Сохранить для Интернета».
- В раскрывающемся меню Preset выберите GIF 128 Dithered. Введите 256 для цветов.
- Вы также можете изменить размер изображения или количество циклов.
- Нажмите кнопку предварительного просмотра в левом нижнем углу, чтобы увидеть, как ваш GIF выглядит в окне браузера.
- Нажмите «Сохранить» и выберите папку и имя для вновь созданного GIF-файла.
После сохранения файла GIF окно «Сохранить для Интернета» автоматически закроется. Теперь ваш GIF готов к использованию.
рекомендуемые
Как превратить фотографии в GIF – узнайте, как я оживляю свои фотографии
Привет, я Эшли.
Я свадебный фотограф из Калифорнии. В блоге есть прошлые свадьбы, советы по планированию, фотообразование и многое другое!
Узнать больше
Поиск
ШАГ ПЕРВЫЙ: Предварительно
p Ваши изображения- Используя Adobe Lightroom, выберите серию фотографий, которые вы хотите использовать для своего gif.
:max_bytes(150000):strip_icc()/howtomakegif02-20fbacc5ff9e4bcdb725ecc540cd66f8.jpg)
Для этого урока я выбрал кадрирование 1×1, хотя подойдет любое соотношение.
- Примените выбранную обрезку ко всем своим фотографиям. Сделайте это: command+a — после того, как они все будут выбраны, выберите синхронизацию. (На фото ниже)
- Выберите Обрезать, угол выпрямления и Соотношение сторон. Затем нажмите синхронизировать.
- Теперь, когда все фотографии обрезаны одинаково, экспортируйте их на рабочий стол.
- Откройте фотошоп
- Выберите первую фотографию в серии экспортированных фотографий
- Перетащите фотографию в приложение Photoshop на рабочем столе.
- Теперь ваш холст в фотошопе автоматически соответствует размеру изображения.
- Перейдите в окно и выберите временную шкалу
- Щелкните: Создать временную шкалу видео
- Перетащите красный курсор в конец первого клипа на временной шкале.
- Затем нажмите значок плюса справа от полосы временной шкалы
- Перейдите в папку с обрезанными изображениями и выберите все фотографии , кроме первого изображения, которое вы открыли в фотошопе. Нажмите открыть
- Теперь все ваши изображения должны быть загружены на временную шкалу.
- Затем «Преобразовать в покадровую анимацию», щелкнув три поля в левом нижнем углу окна Photoshop
- Выберите все миниатюры на временной шкале, чтобы они были выделены
- Убедитесь, что выбрано навсегда
- измените время первых эскизов, щелкнув стрелку рядом с 5 сек.
- В раскрывающемся списке выберите 0,01 секунды или количество времени, которое вы хотите между кадрами.
- Нажмите кнопку воспроизведения, чтобы убедиться, что вам нравится темп
- Перейти к: Файл/Экспорт/Сохранить для Интернета
- (Обратите внимание, что я нашел, что работает для меня, я знаю, что есть множество отличных способов сохранить GIF)
- Скопируйте эти настройки, также изображенные ниже):
- GIF
- Цвета: 256
- Дизеринг: 100%
- Варианты зацикливания: Навсегда