Как улучшить качество гифки в фотошопе
В этом уроке мы внимательно рассмотрим все доступные варианты для преобразования видео в GIF-анимацию, и как оптимизировать размер файла.
Формат GIF (Graphics Interchange Format) - формат сохранения изображений, поддерживающий до 256 цветов и в настоящее время применяется, в основном, для показа изображений на страничках сайтов интернета.
Это довольно-таки старый формат, практически вытесненный более современными, например, PNG, но, тем не менее, он используется до сих пор из-за одной свой особенности - он поддерживает анимацию.
Если линейный размер картинки большой, а кадров в анимации много, то значительно разрастается объём файла (1Мб и выше), что недопустимо для показа на страницах сайтов, т.к. большой объём файла замедляет, а при плохом соединении и делает невозможным, загрузку страницы сайта.
Соответственно, при сохранении GIF-анимации, пользователь Photoshop должен оптимизировать анимацию так, чтобы объём готового файла минимальным при максимальном качестве.
В этом материале я дам несколько советов по уменьшению веса выходного GIF-файла с минимальными потерями качества.
1. Обрезка исходного видеоролика
Если Вы создаёте анимацию из видеоролика, то для начала его необходимо открыть в Photoshop и посмотреть его длину на панели Окно --> Шкала времени (Window --> TimeLine). Как правило, большая часть кадров ролика для анимации не нужна, поэтому нужно выбрать необходимый участок, обрезав ролик сначала и с конца:
2. Уменьшение линейного размера изображения
Уменьшение ширины и высоты кадра анимации существенно уменьшает объём выходного файла. Это можно сделать в последнюю очередь, в окне "Сохранить для Web" (Save for Web), но я рекомендую уменьшать размер кадра с помощью команды Изображение --> Размер изображения (Image --> Image Size), особенно, если Вы работfте с версией выше CS6, у обновлённого инструмента появилось несколько дополнительных опций, в т.ч. окно предварительного просмотра. Подробнее о новшествах команды "Размер изображения" здесь.
Подробнее о сохранении для Web здесь, подробнее об уменьшении линейного размера изображения для публикации в Web здесь.
3. Уменьшение количества кадров при сохранении продолжительности и скорости воспроизведения
Уменьшить количество кадров можно только на шкале покадровой анимации. Если Вы делаете анимацию из видео, Вы должны сначала сохранить видео как GIF, затем заново открыть его в Photoshop и преобразовать шкалу времени в покадровую анимацию:
Внимание! Перед преобразованием запомните время продолжительности показа!
Затем вручную выделяем и удаляем, к примеру, каждый третий кадр (выделяем с зажатой Ctrl, затем нажимаем Delete).
Затем выделяем все кадры на шкале (клик по первому кадру, зажать Shift, клик по последнему), клик по треугольничку в правом нижнем углу любого кадра, выбираем "Другое", откроется окно, где вводим старую продолжительность клипа делённую на новое количество кадров:
4. Уменьшение количества цветов
5. Отключение опции "Чересстрочно" (Interlaced)
Включенная опция "Чересстрочно" даёт указание браузеру загружать изображение за несколько проходов. И при этом увеличивает объём файла примерно на 10 процентов!
Что это значит? При медленном соединении и/или большом объёме файла полная загрузка изображения происходит медленно, т.е. пользователь после открытия веб-странички вначале лицезреет пустое место там, где должно быть изображение. Если же изображение загружается за несколько проходов, сначала подгружается "облегчённая" низкокачественная версия картинки, где рисунок состоит из крупных квадратов (низкое разрешение), и по мере подгрузки картинка приобретает свой обычный вид.
Для обычных картинок это неплохо, но для анимации совершенно ни к чему. Поэтому снимаем галку с опции и уменьшаем размер файла на 10 процентов.
Это далеко не все способы уменьшения размера готового анимированного файла, об остальных я расскажу в следующем материале.
В этом разделе рассматриваются различные параметры экспорта изображений и анимированных файлов GIF.
Форматы веб-графики могут быть битовыми (растровыми) или векторными. К битовым форматам относятся GIF, JPEG и PNG, которые зависят от разрешения, то есть от размеров растрового изображения. Использование различных разрешений экрана монитора может привести к изменению качества. К векторным форматам относятся SVG и SWF, которые не зависят от разрешения и поддерживают масштабирование без потери качества изображения. Векторные форматы могут также содержать растровые данные.
Формат JPEG является стандартом сжатия нерастрированных изображений, например фотографий. Оптимизация изображения в формате JPEG основана на сжатии с потерями вследствие выборочного удаления данных.
Определяет уровень сжатия. Чем выше значение параметра «Качество», тем больший уровень детализации сохраняется при сжатии. Однако чем выше значение параметра «Качество», тем больше размер файла. Чтобы определить наилучшее соотношение качества и размера файла, рекомендуется просмотреть оптимизированное изображение с различными настройками качества.
Создается улучшенный файл JPEG с незначительно меньшим размером файла. Формат «Оптимизированный JPEG» рекомендуется для максимального сжатия. Однако некоторые браузеры старых версий могут не поддерживать эту функцию.
Изображение в веб-браузере отображается прогрессивно. Изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки. Для параметра «Прогрессивный» необходимо использование формата Оптимизированный JPEG.
Отображение формата «Прогрессивный JPEG» требует большего объема оперативной памяти, этот формат поддерживается не всеми браузерами.
Задает степень размытия изображения. При выборе этого параметра создается эффект, аналогичный фильтру «Размытие по Гауссу», и обеспечивается дополнительное сжатие, что уменьшает размер файла. Рекомендуется использовать значение от 0,1 до 0,5.
Встроенный профиль (Photoshop) или ICC-профиль (Illustrator)
Сохраняет цветовые профили в оптимизированном файле. В некоторых браузерах для цветокоррекции применяются цветовые профили.
Задается цвет заливки для пикселей, которые в исходном изображении были прозрачными. Чтобы выбрать цвет в палитре цветов, щелкните «Образец цвета подложки» или укажите параметр в меню «Подложка»: «Цвет пипетки» (для использования цвета в поле образцов пипетки), «Основной цвет», «Цвет фона», «Белый», «Черный» или «Другой» (для использования палитры цветов).
Полностью прозрачные пиксели исходного изображения заполняются выделенным цветом. Частично прозрачные пиксели исходного изображения смешиваются с выбранным цветом.
Формат GIF является стандартом сжатия для изображений с цветами смесевых красок и четкой детализацией, например, для штриховых рисунков, логотипов или иллюстраций с текстом. Аналогично GIF, формат PNG‑8 эффективно сжимает сплошные области цвета с сохранением четкости деталей.
Кроме приведенных ниже параметров, можно задать количество цветов в таблице цветов изображения. См. Настройка таблицы цветов для изображений GIF и PNG‑8.
Потери (только GIF)
Уменьшение размера файла путем выборочного удаления данных. Чем выше значение параметра «Потери», тем больший объем данных удаляется. Обычно сохранить качество изображения позволяет установка для параметра «Потери» значения в диапазоне от 5 до 10, иногда до 50. Изменение значения параметра «Потери» может привести к уменьшению размеры файла на 5 — 40%.
Параметр «Потери» нельзя использовать одновременно с параметром «Чересстрочно», алгоритмами «Дизеринг шума» или «Регулярный дизеринг».
Цвета и метод редукции цвета
Определяет метод создания таблицы цветов изображения и необходимое количество цветов в таблице. Доступны следующие методы редукции цвета.
Перцепционная Создает пользовательскую таблицу цветов, отдавая предпочтение цветам, к которым человеческий глаз наиболее чувствителен.
Селективная Создает таблицу цветов, аналогичную таблице «Перцепционная», но отдавая предпочтение областям большого размера и сохранению веб-цветов. Обычно при использовании этой таблицы получаются изображения с наибольшей достоверностью цветов. Значение «Селективная» задано по умолчанию.
Адаптивная Создает таблицу путем выборки цветов из преобладающего спектра в изображении. Например, для изображения, в котором есть только зеленый и синий цвета, таблица цветов будет состоять в основном из оттенков синего и зеленого. В большинстве изображений цвета сосредоточены в определенных областях спектра.
Заказная Применяется палитра цветов, созданная или измененная пользователем. При открытии существующего файла GIF или PNG‑8 в нем будет пользовательская палитра цветов.
Таблица цветов изображения настраивается с помощью палитры Таблица цветов в диалоговом окне «Сохранить для Web и устройств».
«Черно-белый», «Оттенки серого», Mac OS, Windows Используется заданная палитра цветов.
Определяет метод и степень дизеринга. Дизеринг позволяет имитировать цвета, которые отсутствуют в системе цветного изображения компьютера. Более высокий процент дизеринга позволяет передавать больше цветов и деталей, но также приводит к увеличению размера файла. Для оптимального сжатия рекомендуется использовать наименьший процент дизеринга, обеспечивающий необходимую детализацию цвета. К изображениям, состоящим преимущественно из сплошных тонов, дизеринг можно не применять. В изображениях с непрерывными оттенками (особенно градиентами) дизеринг может быть нужен для того, чтобы избежать полошения цветов.
Доступны следующие методы дизеринга.
Диффузия Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели.
Узор Для имитации цветов, отсутствующих в таблице цветов, применяется квадратный узор наподобие полутонового.
Шум Применяется случайный узор, подобный методу дизеринга «Случайный», но без распространения на смежные пиксели. При использовании метода дизеринга «Шум» швы не возникают.
«Прозрачность» и «Подложка»
Определяет способ оптимизации прозрачных пикселей в изображении.
Чтобы сделать полностью прозрачные пиксели прозрачными и смешать частично прозрачные пиксели с цветом, выберите «Прозрачность» и укажите цвет подложки.
Чтобы заполнить полностью прозрачные пиксели цветом и наложить их на частично прозрачные пиксели того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».
Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).
Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.
A. изображение B. Прозрачность выбрана с цветом подложки C. Прозрачность выбрана без подложки D. Прозрачность отключена с цветом подложки
При выборе параметра «Прозрачность» можно указать метод дизеринга частично прозрачных пикселей.
При выборе параметра «Без дизеринга прозрачности» дизеринг к частично прозрачным пикселям в изображении не применяется.
Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели. При выборе этого алгоритма необходимо указать процент дизеринга, управляющий степенью дизеринга, который применяется к изображению.
В режиме «Регулярный дизеринг прозрачности» применяется квадратный узор наподобие полутонового для частично прозрачных пикселей.
В режиме «Шумовой дизеринг прозрачности» применяется случайный узор, подобный узору в режиме «Случайный дизеринг», но без распространения на смежные пиксели. При использовании алгоритма «Шум» швы не возникают.
До полной загрузки файла изображение в браузере отображается в низком разрешении. Чересстрочное отображение позволяет уменьшить время ожидания полной загрузки и показать пользователям процесс загрузки изображения. Однако чересстрочноое отображение также увеличивает размер файла.
Привязка к веб-цветам
Определяется уровень изменения цветов на ближайшие эквивалентные цвета палитры Web (с отменой дизеринга в браузере). Чем выше значение, тем больше изменяется цветов.
Прозрачность позволяет создавать непрямоугольные изображения для Интернета. Прозрачность фона сохраняет в изображении прозрачные пиксели.
Это позволяет видеть фон веб-страницы через прозрачные области изображения. Подложка фона имитирует прозрачность путем заполнения или слияния прозрачных пикселов с цветом подложки, который может совпадать с фоновым цветом веб-страницы. Подложка фона выглядит лучше всего при сплошном фоне веб-страницы, если известен его цвет.
Настроить оптимизацию прозрачных пикселей в изображениях GIF и PNG можно с помощью параметров «Прозрачность» и «Подложка» в диалоговом окне «Сохранить для Web и устройств».
- (GIF и PNG‑8) Чтобы сделать полностью прозрачные пиксели прозрачными и наложить частично прозрачные пиксели на цвет, выберите «Прозрачность» и укажите цвет подложки.
- Чтобы заполнить полностью прозрачные пиксели цветом и наложить их на частично прозрачные пиксели того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».
- (GIF и PNG‑8) Чтобы сделать все пиксели с прозрачностью более 50% полностью прозрачными, а все пиксели с прозрачностью 50% и менее полностью непрозрачными, установите флажок для параметра «Прозрачность» и укажите «Нет» в меню «Подложка».
- (PNG‑24) Чтобы сохранить изображение с многоуровневой прозрачностью (до 256 уровней), установите флажок для параметра «Прозрачность». Параметр «Подложка» станет недоступен, поскольку многоуровневая прозрачность позволяет накладывать изображение на любой фоновый цвет.
В браузерах, не поддерживающих прозрачность PNG‑24, прозрачные пиксели могут отображаться на фоновом цвете по умолчанию, например на сером.
Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).
Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.
Таблица цветов для фрагмента отображается на панели Таблица цветов диалогового окна «Сохранить для Web и устройств».
Выберите фрагмент, оптимизированный в формате GIF или PNG‑8. Таблица цветов для выбранного фрагмента отобразится на палитре «Таблица цветов» диалогового окна «Сохранить для Web и устройств».
Цвета в оптимизированных изображениях GIF и PNG-8 настраиваются с помощью таблицы цветов в диалоговом окне «Сохранить для Web и устройств». Сокращение количества цветов часто позволяет сохранить качество изображения при одновременном уменьшении размера файла изображения.
Цвета в таблице цветов можно добавлять или удалять, заменять выбранные цвета на безопасные Web-цвета, а также блокировать выделенные цвета, чтобы предотвратить их удаление из палитры.
Сортировка таблицы цветов
Выберите порядок сортировки в меню палитры «Таблица цветов».
- При выборе параметра «Без сортировки» восстанавливается исходный порядок.
- Команда «Сортировать по тону» сортирует цвета по положению на стандартном цветовом круге (в градусах от 0 до 360). Нейтральным цветам присваивается тон 0 и они помечаются красным.
- Команда Сортировать по светимости сортирует цвета по светимости.
- Команда «Сортировать по частоте использования» сортирует цвета по частоте их использования в изображении.
Добавление нового цвета в таблицу цветов
В таблицу цветов можно добавить цвета, которые отсутствовали при ее создании. При добавлении цвета в динамическую таблицу на него заменяется ближайший цвет в палитре. При добавлении цвета в фиксированную или пользовательскую таблицу в палитру добавляется дополнительный цвет.
Если в таблице цветов выделены какие-либо цвета, выберите в палитре Таблица цветов пункт Отменить выделение всех цветов, чтобы отменить выбор этих цветов.
Выберите цвет, выполнив одно из следующих действий.
В диалоговом окне «Сохранить для Web и устройств» щелкните значок «Цвет пипетки» и выберите цвет из палитры.
В диалоговом окне «Сохранить для Web и устройств» выберите инструмент «Пипетка» и щелкните изображение.
Выполните одно из следующих действий.
Нажмите «Новый цвет» в таблице цветов.
Выберите команду Создать цвет в меню палитры Таблица цветов.
Чтобы переключить таблицу цветов на палитру «Заказная», удерживайте при добавлении нового цвета нажатой клавишу «Ctrl» (Windows) или «Command» (Mac OS).
Новый цвет отобразится в таблице цветов со значком в виде небольшого белого квадрата в правом нижнем углу. Такой значок показывает, что цвет заблокирован. В динамической таблице цветов исходный цвет отображается в левом верхнем углу, а новый цвет — в правом нижнем углу.
Выбор цветов в таблице цветов
Вокруг выделенного цвета появляется белая рамка в Таблица цветов.
- Чтобы выбрать цвет, щелкните его в таблице цветов.
- Чтобы выбрать в таблице цветов несколько цветов, удерживайте нажатой клавишу «Shift». Будут выбраны все строки между первым и вторым выделенными цветами. Чтобы выбрать несмежную группу цветов, нажмите клавишу «Ctrl» (Windows) или «Command» (Mac OS) и щелкните нужные цвета. Кроме того, в меню палитры «Таблица цветов» доступны команды выбора цветов.
- Чтобы выбрать цвет в изображении предварительного просмотра, щелкните его инструментом «Пипетка» в диалоговом окне «Сохранить для Web и устройств». Чтобы выбрать несколько цветов, удерживайте нажатой клавишу «Shift».
- Чтобы отменить выбор всех цветов, выберите в меню палитры «Таблица цветов» пункт «Отменить выделение всех цветов».
Замена цвета
Выделенный цвет в таблице цветов можно изменить на любое другое значение цвета RGB. При повторном выводе оптимизированного изображения выделенный цвет будет заменен на новый цвет в тех областях изображения, где он присутствует.
Для отображения палитры цветов по умолчанию дважды щелкните цвет в таблице цветов.
Формат GIF предназначен для сжатия изображений с большими областями сплошного цвета и чёткими элементами, вроде рисунков, логотипов или текста. Будучи форматом изображения 8 битовой глубины он давно бы исчез с просторов Интернета после введения форматов JPEG и PNG, GIF, но несмотря на это он по прежнему является излюбленным форматом среди веб-разработчиков благодаря своей функции покадровой анимации.
Кстати, если вам часто приходится работать с анимированными GIF файлами, то возможно вам будет интересно просмотреть автоматизированное решение – Photoshop экшен « Gift Export », доступный на Envato, который берёт несколько изображений, автоматически загружает их в Photoshop и экспортирует в формат GIF.
1. Обрезка анимации
Для начала откройте видео-файл в Photoshop. Большая часть видео для всей последовательности GIF анимации нам не нужна, поэтому можете обрезать её, прибегнув к помощи панели Timeline (Временная шкала). Просмотрите видео и найдите подходящий фрагмент, а остальное удалите.
2. Уменьшение размера изображения
Вы можете уменьшить размер изображения с помощью меню Image (Изображение), либо сделать это чуть позже в диалоговом окне Save for Web (Сохранить для Web). Лично я предпочитаю уменьшать изображение в начале работы в диалоговом окне Image Size (Размер изображение), потому как вы сэкономите время, нежели будете делать это в конце при сохранении. При изменении размера изображения, видео-слой необходимо преобразовать в смарт-объект, но не стоит беспокоиться, это никак не повлияет на рабочий процесс.
3. Save for Web (Сохранить для Web)
Что я люблю в этом процессе, так это то, что вам не нужно делать каких-либо преобразований на панели Timeline (Временная шкала) для сохранения покадровой анимации, так как диалоговое окно Save for Web (Сохранить для Web) сделает всю работу за вас, как только при выходе вы выберите формат GIF. Посмотрите, в правом нижнем углу диалогового окна появились параметры анимации. Если вы захотите уменьшить размер изображения, то сделать это можно в данном окне.
4. Уменьшение количества кадров
При необходимости, вы можете ещё больше уменьшить размер GIF-анимации, для этого понадобится повторно открыть экспортированный GIF файл в Photoshop и удалить каждый второй либо третий кадр во временной шкале. Далее вам необходимо выбрать оставшиеся кадры и увеличить их продолжительность для компенсирования удалённых кадров. Если не проделать эту работу, то анимация будет воспроизводиться быстрее, чем оригинал. После того, как вы закончите, сохраните GIF-анимацию, по размеру она должна быть меньше оригинала.
5. Количество цветов
6. Алгоритм сокращения цветов
- Perceptual (Перцепционный) предназначен для создания пользовательской таблицы цветов, отдавая предпочтение тем тонам, которые чётко распознаёт глаз человека.
- Selective (Селективный) создаёт таблицу цветов, аналогичную Перцепционной таблице, но созданную на ключевых оттенках изображения. В этом алгоритме предпочтение отдаётся web-цветам. В Photoshop он установлен по умолчанию.
- Adaptive (Адаптивный) предназначен для создания пользовательской таблицы цветов спектра, преобладающих в изображении. К примеру, для изображения, в котором больше всего преобладает синих и зелёных цветов, будет создана таблица из синих и зелёных оттенков. Большинство оттенков изображения собирается в определённой области спектра.
- Restrictive (Ограниченный) применяет стандартную палитру, состоящую из 216 безопасных web-цветов. Этот параметр гарантирует, что ни один браузер не применит дизеринг к цветам изображения с 8 битовой глубиной цвета. Если изображение имеет менее чем 216 цветов, то неиспользуемые цвета удалятся из таблицы.
- Custom (Заказная) палитра цветов выбранных пользователем.
7. Dithering (Дизеринг)
Так как GIF-файлы содержат ограниченное количество цветов, вы можете имитировать недостающие цвета доступными при помощи сглаживания. Для этого в меню Dithering (Дизеринг) необходимо выбрать один из алгоритмов. Метод Diffusion (Случайный) предназначен для регулирования количества смешения. Методы Pattern (Регулярный) и Noise (Шум) не предназначены для этого. Чем больше сглаживание на изображении, тем больше будет размер файла. Смешение добавляет разноцветные пиксели вблизи друг от друга для имитации вторичных цветов или гладких градаций в цвете. Чтобы получился хороший результат, некоторые изображения должны содержать сглаживание. Но если вы хотите сохранить маленький размер файла, то сглаживание нужно использовать как можно меньше.
8. Другие опции
- Web Snap (Web-оснастка) помогает предотвратить размытие в браузере. Делается это путём привязки некоторых цветов к безопасным web-цветам. Чем больше web-цветов, находящихся в GIF, тем меньше браузером будет использоваться сглаживание. При значении 0% цвета будут не затронуты, а при значении 100% все цвета в изображении изменятся для Web-безопасности.
- Lossy (Потери) – данная опция контролирует степень потерь визуальной информации, которая способна уменьшать размер файла.
- Если в изображении содержится прозрачность, то поставьте галочку возле опции Transparency (Непрозрачность) для сохранения прозрачных пикселей. Убрав галочку, тем самым частично или в полной мере прозрачные пиксели заполнятся матовым цветом.
- При активной опции Interlaced (Чересстрочно) файлы формата GIF в браузере будут загружаться в несколько проходов.
9. Сравнение оригинала и оптимизированных версий
В результате добавления множества пользовательских изменений можно сравнить разницу в качестве и размере файла при помощи режима 2-Up (Два варианта).
10. Просмотр, сохранение настроек и оптимизация размера файла
Если в результате оптимизации GIF файла вы довольны окончательными настройками с возможностью предварительного просмотра в браузере, то не забудьте сохранить их в как пресет. Кроме того, вы можете указать ограничение на размер GIF файла при помощи дополнительной настройки Optimize to File Size (Оптимизация по размеру файла). После того, как вы её примените, программа Photoshop автоматически попытается подогнать размер с наилучшим качеством изображения.
В этом уроке вы узнаете, как превратить серию изображений в циклическую анимацию при помощи Photoshop.
Чтобы создать анимацию вам понадобится:
Данный метод хорошо работает для создания покадровой анимации, используя серию снимков, сделанных с помощью DSLR, компактной камеры или мобильного устройства. В этом примере мы будем использовать серию снимков, сделанных в режиме серийной съёмки с iPhone. Скачайте и разархивируйте серию изображений (смотрите ссылку в начале урока). Так же вы можете использовать собственную серию фотографий.
Совет: данный метод можно также использовать для создания GIF анимации из короткого видео. Давайте приступим!
Импортируем серию фотографий
Откройте Photoshop и перейдите в меню File > Scripts > Load Files into Stack (Файл – Сценарии – Загрузить файлы в стек).
Кликните по кнопке Browse (Обзор) и найдите фотографии, с которыми будете работать. Удерживая нажатой клавишу Shift, выберите все файлы и нажмите Open (Открыть).
Кликните OK, чтобы импортировать выбранные фотографии в один многослойный файл.
Обратите внимание на панель слоёв в правой части рабочего пространства, здесь создано несколько новых слоёв. Эти отдельные слои мы превратим покадровую анимацию.
Как импортировать видео (необязательно)
Если вы начинаете с короткого видео, то вам сначала следует преобразовать кадры видео в отдельные слои. Для этого перейдите во вкладку File > Import > Video Frames to Layers (Файл – Импортировать – Кадры видео в слои).
Найдите и выберите видеофайл, который хотите использовать, и нажмите «Открыть».
Кликните OK, чтобы преобразовать видеофрагменты в один многослойный файл.
Примечание: возможно, Photoshop не сможет импортировать слишком длинное видео. Используйте опцию в окне импорта, чтобы ограничить количество импортированных кадров. Вы можете импортировать всё видео или какую-нибудь часть. Помимо этого, можно ограничить количество импортируемых кадров в заданный интервал, например, каждые 2 кадра.
Открываем шкалу времени
Перейдите в меню Window > Timeline (Окно – Шкала времени).
В середине панели шкалы появится кнопка, нажмите на стрелку справа от кнопки и выберите Create Frame Animation (Создать анимацию кадра). Затем кликните по кнопке, чтобы создать новую анимацию кадра.
Преобразование слоёв в кадры
В правом верхнем углу панели «Шкала времени» кликните по значку меню. Из выпадающего списка выберите Make Frames From Layers (Создать кадры из слоёв). В результате все слои преобразуются в отдельные кадры для анимации.
Примечание: если ваша анимация воспроизводится в обратном порядке, снова кликните по значку меню на панели «Шкала времени» и выберите Reverse Frames (Обратный порядок кадров).
Устанавливаем цикл для анимации
В нижней части панели «Шкала времени» имеется меню повтора, кликните по маленькой стрелочке, чтобы раскрыть список, и выберите Forever (Постоянно). Этим мы создадим циклическую анимацию.
Экспортируем анимацию как GIF
Перейдите в File > Export > Save for Web (Legacy). (Файл – Экспортировать – Сохранить для Web (Старая версия) …).
- В параметре Preset (Набор ) выберите GIF 128 Dithered (Gif 128 с дизерингом).
- Для Colors (Цвета) установите 256.
- Если вы используете GIF для web или хотите ограничить размер файла анимации, внесите изменения в поля Width (Ширина) и Height (Высота) в разделе «Размер изображения».
- Чуть ниже в разделе «Анимация» для опции Looping Options (Параметры повторов) установите Forever (Постоянно).
Нажмите на кнопку «Предварительный просмотр» в левом нижнем углу диалогового окна «Экспортировать», чтобы просмотреть анимацию в веб-браузере.
Нажмите Save (Сохранить) и выберите место для анимированного GIF-файла.
Мои поздравления! Вы только что создали свой анимированный GIF-файл. Разместите его в интернете, чтобы показать всему миру. Обращаю ваше внимание на то, что вы так же можете использовать эту технику для любого многослойного файла Photoshop.
Читайте также: