в каком формате гифки сохранять
Сравнение анимации GIF, WebP, APNG, BPG
Чтобы создать эффект движения нужно повторить слегка измененную картинку с достаточно высокой скоростью. Например в кино эта скорость составляет 24 кадра в секунду. Чем она выше, тем движение выглядит плавнее.
Как создается анимация
Соседние кадры не должны сильно отличаться. Когда мы снимаем на видеокамеру, то это получается само собой, а вот если рисовать в редакторе, то можно об этом забыть, и Мальвина будет ходить, как Буратино.
Этот принцип используется в анимированных графических файлах. Они содержат не одно изображение, а серию картинок-кадров. Каждый кадр знает, сколько миллисекунд он должен отображаться.
И тут есть одна проблема. Размер одной секунды анимации с 24 кадрами будет весить в 24 раза больше статической картинки. Чтобы исправить ситуацию, применяют сжатие изображения.
Пример абстрактного алгоритма сжатия
Итак, есть файл. В нем только два цвета – черный и синий. Тогда цвет можно закодировать одним битом. Размер по горизонтали — 20, по вертикали — 1. Всего он занимает 20х1х1 = 20 бит.
В строке первые семь точек имеют первый цвет, затем шесть точек — второй, и оставшиеся в строке точки опять окрашены в первый цвет. Записать можно так: повторить цвет 1 — 7 раз, цвет 2 – 6 раз, цвет 1 – 7 раз (1х7 2х6 1х7).
Выгода кажется не очевидной, но если растянуть файл-строку в 1000 раз до 20 килобит, то запись увеличится совсем незначительно: 1х7000 2х6000 1х7000. С увеличением размера исходного файла выгода от сжатия будет только расти.
Сжатие применяется для каждого кадра анимации. Если в секунде 24 кадра, то оно сработает 24 раза. Без этого файлы анимации были бы очень большими.
Форматы с возможностью анимации
GIF формат
Это очень старый формат. Его показывают все браузеры. У него есть прозрачный слой, т.е. под картинкой будет виден фон, на котором она лежит. Для анимации сохраняет серию полноценных картинок. Это минус. Файл с 24 кадрами будет в 24 раза больше исходного статичного. Частично можно исправить тем, что некоторые кадры могут содержать прозрачный слой плюс изменения предыдущего кадра.
GIF показывает только 256 цветов. Это можно исправить при помощи анимации. Мы создаем две картинки с разным набором цветов. Демонстрируем их с задержкой 0. В итоге получаем 256 + 256 = 512 цветов.
Формат хорошо сжимает изображение без потерь. Для маленьких картинок это важно.
APNG формат
Этот формат (Animated PNG) является расширением распространенного формата PNG. Однако разработчики последнего не включили это расширение в спецификацию. Получилось, что немногие программы могут его правильно отображать. Большинство браузеров покажет первый кадр статичной картинкой, а про анимацию забудет.
Маловероятно, что формат будет широко использоваться. Тем более, что появились новые мощные конкуренты.
WEBP формат
Этот формат появился в 2010 году. Разработчик, компания Google, позиционирует его как замену GIF и других форматов. WEBP имеет все возможности GIF, но только в улучшенном варианте:
BPG формат
BPG — самый новый. Он был предложен в конце 2014 года. Формат позиционируется как замена JPEG со значительными улучшениями. Сжатие изображения будет эффективнее, чем у предка. Появится поддержка анимации (JPEG не умеет этого делать). Но формат только начинает свое развитие, рекомендовать его для использования еще нельзя, а вот следить за ним можно.
Работа с GIF, APNG и WEBP в CLI
Есть два замечательных пакета ImageMagick и GraphicsMagic. С помощью ImageМagic создается анимация из *.gif картинок:
Команда convert подхватывает все файлы *.gif в директории, сортирует их по алфавиту и последовательно вставляет в новый файл animated.gif.
Проверка (запустится маленький графический контейнер с мультиком):
Конвертация мультика в APNG формат:
Если использовать GraphicsMagic, то команды такие:
На этот раз выходной формат WEBP. Аналогично обрабатывается и BPG.
Также возможно вытащить анимацию в GIF из видеофайлов. Например, с использованием пакета libav-tools импортируется видео из MP4:
Посмотреть разницу между анимацией GIF, WebP и APNG в разных форматах можно тут. А вот пример.
Как сделать и сохранить GIF анимацию в фотошопе
Всем привет. Расскажу, как быстро сделать простую GIF анимацию для баннера, логотипа, да и друзей можно порадовать, например поздравлением, сделанным своими руками. Сегодня мы будем создавать анимацию в Adobe Photoshop.
Вчера занималась доработкой нового шаблона баннера для блога. Нужно было сделать собственный уникальный баннер, который придаст блогу индивидуальности. В ходе разработки, было много идей, но все таки остановилась на одной, особо ничего нового не придумывая.
Сам баннер не сильно «за мудрен», но захотелось сделать небольшую анимацию, для привлекательности. Анимацию делала в Adobe Photoshop CS5.
В других версиях фотошопа, принцип создания анимации такой же. Не хотелось прибегать к другим программам, так как в основном работаю с Фотошопом.
Заодно и возникла идея сделать урок, по созданию анимации в Фотошопе. Вот что у меня получилось, правда в увеличенном размере.
По началу сама немного спотыкалась, так как раньше не использовала Adobe Photoshop, для изготовления анимации, но оказалось все очень просто. Самое главное желание, немного знаний и идеи для GIF.
Создание GIF анимации в фотошопе
Начинаем с самого простого, это создания нового документа, нужного нам размера. Я использовала 730*410 пикселей, с разрешением 72 пикселей на дюйм.
Полезно знать! Всегда, для работы в Фотошопе, создавайте рабочее пространство, разрешением не менее 70 пикселей на дюйм. В дальнейшем его можно уменьшить, если понадобиться. А вот при увеличении, может пострадать качество, так как пикселя растянуться.
Теперь нужно продумать, дизайн будущей GIF и набросать заготовки картинок, которые будут использоваться в анимации. При чем каждый объект на новом слое. Примерно вот так, как у меня…
В дальнейшем, при создании анимации, очень удобно пользоваться слоями, и не нужно будет рыться в них, в поисках нужного.
Далее, нам нужно будет открыть «Анимацию», с ее помощью мы и будем создавать GIF. По умолчанию она выключена.
Включаем ее в верхнем меню на вкладке «Окно» — «Анимация» и отмечаем этот пункт птичкой.
Теперь она у нас появится внизу, под файлом. Приступаем к ее наполнению, для начала перетаскиваем нужные слои и располагаем их в порядке появления. Каждому слою, своя дорожка.
Снимаем замок с нулевого слоя и начинаем создавать свой шедевр.
Далее, что бы заставить изображения двигаться, нужно задать параметры движения, а также начальное и конечное положение.
Делается это очень просто. Возле каждого слоя есть изображение глазика, выключаем их все, кроме самого первого слоя и этот слой уже есть в нижней панели.
Затем, внизу, нажимаем на значок копирования, и во втором файле включаем глазик. Далее, копируем второй файл и включаем, при помощи глазика третий слой. Так поступаем со всеми последующими слоями.
Для проверки, что получилось, можно нажать на значок проигрывания на панели внизу. Вы, наверное заметили, что кадры двигаются слишком быстро.
Чтобы сделать плавный переход между слоями, следует задать интервал анимации в каждом слое. Я поставила по 0. 5 секунды, просмотрела, меня это устроило, Вы можете задать свои интервалы.
Вот так мы быстро создали GIF анимацию, без особых навыков и знаний фотошопа. Но это еще не все, нужно уметь правильно сохранить файл в нужном нам формате.
Как сохранить GIF и уменьшить его вес без потери качества в фотошопе
Для сохранения созданной нами GIF анимации, вверху, в панели жмем на «Файл», далее находим пункт «Сохранить для Web и устройств…». Но сохранять пока не торопимся.
Перед нами появилась таблица, в которой следует указать тип файла, конечно выбираем GIF.
Далее, внизу под файлом мы видим вес нашей анимации и если он слишком большой, то будем уменьшать его до нужного. Для этого обращаем внимание на пункт «Потери», обычно там установлено нулевое значение. Для уменьшения веса, всего лишь следует передвинуть бегунок, пока нас не устроит размер файла, да и визуальная потеря качества анимации при этом не страдает. Я установила значение 62.
Можно еще раз просмотреть, что у нас получилось, нажав на кнопку проигрывателя. Если все понравилось, нажимаем на «Сохранить».
Откроется окно, где следует указать имя папки, в которую будет помещен файл. Задать имя нашей GIF анимации и в пункте «Формат» выбрать как будет сохранен файл, а именно «Только изображения» или в формате HTML, я выбрала первый пункт, нажала на кнопку «Сохранить».
Просматривала сохраненный файл с помощью Яндекс браузера.
Если вдруг вам не понятно, что я рассказала, посмотрите это видео, в котором видно полное создание анимации.
Друзья, сегодня мы с вами рассмотрели, как можно быстро создать GIF анимацию и как правильно ее сохранить. Надеюсь, этот урок был для вас полезен.
А если вы не работаете с фотошопом, то можно сделать красивый баннер вот в этой программе, о которой было рассказано немного раннее.
Думаю я не сильно намудрила с уроком, как вы считаете? И при длительной тренировке, у нас с вами будут получаться хорошие ролики. До новых встреч.
Как сохранить гифку на компьютер
Небольшие анимированные изображения формата GIF в народе называют гифками. Они часто встречаются на форумах и в социальных сетях. Компьютер воспроизводит картинки данного формата через браузер, поэтому каждый пользователь может сохранить понравившуюся гифку и смотреть ее в любое время. А о том, как выполнить скачивание, мы и расскажем в этой статье.
Сохраняем GIF на компьютер
Выполняется процесс скачивания довольно просто, но некоторые ресурсы требуют выполнения других действий, а также предоставляют возможность преобразования видео в GIF. Давайте подробно разберем несколько простых способов различного сохранения гифок на компьютер.
Способ 1: Сохранение GIF вручную
Если вы на форуме или в разделе «Картинки» поисковика нашли изображение формата GIF и хотите скачать его себе на компьютер, то вам потребуется выполнить всего несколько простых действий, с которыми справится даже неопытный пользователь:
В зависимости от веб-обозревателя название этого пункта может незначительно различаться.
Данный способ очень простой, но подходит далеко не всегда, а также присутствуют другие варианты сохранения. Давайте их рассмотрим далее.
Способ 2: Скачивание GIF с ВКонтакте
Анимированные изображения могут использоваться не только на территории социальной сети VK и храниться в документах, каждому пользователю доступно бесплатное скачивание любой гифки. Конечно, подойдет и первый способ, но тогда будет утеряно изначальное качество. Чтобы этого избежать, рекомендуем воспользоваться следующей инструкцией:
Способ 3: Сохранение GIF в Photoshop
Если у вас есть готовая анимация, созданная в Adobe Photoshop, то ее можно сохранить в формате GIF, выполнив всего несколько простых действий и настроек:
Способ 4: Преобразование видео на YouTube в GIF
С помощью видеохостинга YouTube и дополнительного сервиса можно превратить почти любое короткое видео в гифку. Способ не требует много времени, является очень простым и понятным. Все выполняется за несколько шагов:
Кроме этого данный сервис предоставляет набор дополнительных инструментов, с помощью которых осуществляется создание и настройка гифок из видео. Присутствует функция добавления текста, обрезка изображения и различных визуальных эффектов.
Мы расписали четыре различных инструкции, с помощью которых выполняется сохранение гифок на компьютер. Каждый из них будет полезен в разных ситуациях. Ознакомьтесь подробно со всеми способами, чтобы определить наиболее подходящий для себя.
Помимо этой статьи, на сайте еще 12371 инструкций.
Добавьте сайт Lumpics.ru в закладки (CTRL+D) и мы точно еще пригодимся вам.
Отблагодарите автора, поделитесь статьей в социальных сетях.
Экспорт изображений и анимированных файлов GIF
В этой статье рассматривается экспорт изображений и анимированные файлы GIF.
При подготовке изображений для публикации в Интернете или в качестве других электронных материалов часто приходится искать компромисс между качеством и размером файла изображения.
Для предварительного просмотра оптимизированных изображений в различных форматах и с применением различных атрибутов файлов можно использовать возможности оптимизации, задаваемые в диалоговом окне «Экспорт изображения». Одновременного можно просматривать несколько вариантов изображения и изменять их настройки оптимизации для выбора наилучшего сочетания параметров в соответствии с текущими требованиями. Кроме того, можно задать параметры прозрачности и обработки краев, настроить дизеринг, изменить размер изображения (в пикселях или процентах от исходного размера).
При сохранении оптимизированного файла с помощью команды «Экспорт изображения» можно задать создание файла HTML для изображения. Этот файл будет содержать всю информацию, необходимую для отображения изображения в веб-браузере.
В Animate для сохранения изображений в форматах GIF, JPEG и PNG используется команда «Сохранить как». В зависимости от формата файла можно задать качество изображения, настроить прозрачность фона или обработку краев, отображение цветов и способ загрузки. Однако любые добавленные в файл веб-функции (например, ссылки и анимация) не сохраняются.
Кроме того, с помощью команды Обработчик изображений Animate в можно сохранить папку копий изображений в формате JPEG. С помощью команды «Обработчик изображений» также можно изменять размер изображений и преобразовывать цветовой профиль изображений в веб-стандарт sRGB.
Экспорт изображения
Диалоговое окно «Экспорт изображения» («Файл» > «Экспорт» > «Экспорт изображения» и «Файл» > «Экспорт» > «Экспортировать анимированный GIF»), чтобы выбрать параметры оптимизации и предварительно просмотреть оптимизированную монтажную область.
A. Параметры отображения B. Всплывающее меню «Оптимизация» C. Параметры набора настроек D. Параметры «Размер изображения» E. Параметры анимации F. Просмотр G. Панели инструментов
Просмотр изображений в диалоговом окне
Чтобы выбрать вариант отображения, щелкните вкладку над областью изображения.
Отображение изображения без оптимизации.
Отображение изображения, к которому применены текущие настройки оптимизации.
Одновременное отображение двух вариантов изображения.
Навигация в диалоговом окне
Если в диалоговом окне «Экспорт изображения» графический объект отображается не полностью, то с помощью инструмента «Рука» можно перемещать область просмотра, чтобы отобразить другую часть объекта. Для увеличения или уменьшения масштаба изображения используется инструмент «Масштаб».
Кроме того, можно задать процент масштабирования, введя нужное значение с помощью клавиатуры или выбрав значение в нижней области диалогового окна.
Просмотр информации об оптимизированном изображении и времени загрузки
В области комментариев, расположенной под изображениями в диалоговом окне «Экспорт изображения», приводится информация об оптимизации. В комментариях к исходному изображению указываются имя и размер файла. В комментариях к оптимизированному изображению указываются текущие настройки оптимизации, размер оптимизированного файла и предполагаемое время загрузки при выбранной скорости модема. Скорость модема можно указать в раскрывающемся меню «Просмотр».
Просмотр гаммы изображения с различными значениями
Значение гаммы монитора компьютера влияет на отображение светлых и темных тонов в браузере. Можно посмотреть, как ваши изображения будут смотреться на системах с различными значениями гамма-коррекции и подправить изображение, чтобы компенсировать этот эффект. Включение параметра просмотра не влияет на окончательный вывод изображения.
Цвет на экране монитора
Гамма изображения не изменяется. Значение «Цвет на экране монитора» задано по умолчанию.
Старая версия Macintosh (без управления цветом)
Моделирует стандартную гамму 1.8, применявшуюся в Mac OS 10.5 и ранее.
Windows (без управления цветом)
Моделирует стандартную гамму 2.2, использованную в Windows и Mac OS 10.6 и позже.
Использовать профиль документа
Задает значение гаммы в соответствие с цветовым профилем прикрепленного документа, использующего систему управления цветом.
Оптимизация изображения для Интернета
Выберите «Файл» > «Экспорт изображения» или «Файл» > «Экспортировать анимированный GIF».
Чтобы выбрать вариант отображения, щелкните вкладку в верхней части диалогового окна: «Оптимизированный» или «2 варианта».
(Необязательно) Если изображение содержит несколько фрагментов, выберите для оптимизации нужные.
В меню «Наборы параметров» выберите предопределенные настройки оптимизации или укажите собственные. Доступность параметров зависит от выбранного формата файла.
Подберите настройки оптимизации, чтобы добиться нужного баланса качества изображения и размера файла. Если изображение содержит несколько фрагментов, убедитесь, что все они оптимизированы.
Чтобы вернуть оптимизированное изображение в окне предварительного просмотра к исходному варианту, выберите изображение, затем в раскрывающемся меню «Наборы параметров» выберите пункт «Исходное».
Чтобы цвета оптимизированного изображения гарантированно выглядели одинаково в разных браузерах, преобразуйте цвета изображения в sRGB.
Метаданные вывода соответствуют стандартам Рабочей группы Метаданных поэтому некоторые метаданные JPEG хранятся форматах EXIF и IIM, а не XMP.
Параметры оптимизации для изображений и анимированных файлов GIF
В этом разделе рассматриваются различные параметры экспорта изображений и анимированных файлов GIF.
Форматы веб-графики могут быть битовыми (растровыми) или векторными. К битовым форматам относятся GIF, JPEG и PNG, которые зависят от разрешения, то есть от размеров растрового изображения. Использование различных разрешений экрана монитора может привести к изменению качества. К векторным форматам относятся SVG и SWF, которые не зависят от разрешения и поддерживают масштабирование без потери качества изображения. Векторные форматы могут также содержать растровые данные.
Формат JPEG является стандартом сжатия нерастрированных изображений, например фотографий. Оптимизация изображения в формате JPEG основана на сжатии с потерями вследствие выборочного удаления данных.
Определяет уровень сжатия. Чем выше значение параметра «Качество», тем больший уровень детализации сохраняется при сжатии. Однако чем выше значение параметра «Качество», тем больше размер файла. Чтобы определить наилучшее соотношение качества и размера файла, рекомендуется просмотреть оптимизированное изображение с различными настройками качества.
Создается улучшенный файл JPEG с незначительно меньшим размером файла. Формат «Оптимизированный JPEG» рекомендуется для максимального сжатия. Однако некоторые браузеры старых версий могут не поддерживать эту функцию.
Изображение в веб-браузере отображается прогрессивно. Изображение выводится как последовательность наложений, что позволяет отобразить изображение с низким разрешением до полной его загрузки. Для параметра «Прогрессивный» необходимо использование формата Оптимизированный JPEG.
Отображение формата «Прогрессивный JPEG» требует большего объема оперативной памяти, этот формат поддерживается не всеми браузерами.
Задает степень размытия изображения. При выборе этого параметра создается эффект, аналогичный фильтру «Размытие по Гауссу», и обеспечивается дополнительное сжатие, что уменьшает размер файла. Рекомендуется использовать значение от 0,1 до 0,5.
Встроенный профиль (Photoshop) или ICC-профиль (Illustrator)
Сохраняет цветовые профили в оптимизированном файле. В некоторых браузерах для цветокоррекции применяются цветовые профили.
Задается цвет заливки для пикселей, которые в исходном изображении были прозрачными. Чтобы выбрать цвет в палитре цветов, щелкните «Образец цвета подложки» или укажите параметр в меню «Подложка»: «Цвет пипетки» (для использования цвета в поле образцов пипетки), «Основной цвет», «Цвет фона», «Белый», «Черный» или «Другой» (для использования палитры цветов).
Полностью прозрачные пиксели исходного изображения заполняются выделенным цветом. Частично прозрачные пиксели исходного изображения смешиваются с выбранным цветом.
Параметры оптимизации для форматов GIF и PNG‑8
Формат GIF является стандартом сжатия для изображений с цветами смесевых красок и четкой детализацией, например, для штриховых рисунков, логотипов или иллюстраций с текстом. Аналогично GIF, формат PNG‑8 эффективно сжимает сплошные области цвета с сохранением четкости деталей.
Файлы PNG‑8 и GIF поддерживают 8-разрядную глубину цвета, то есть до 256 цветов. Процесс определения используемых цветов называется индексированием, поэтому изображения в форматах GIF и PNG‑8 иногда называют изображениями индексированных цветов. Чтобы преобразовать изображение в индексированные цвета, для хранения и индексации цветов в изображении используется таблица цветов изображения. Если в таблице цветов исходного изображения отсутствует нужный цвет, то приложение подбирает ближайший цвет из таблицы или имитирует цвет с помощью сочетания доступных цветов.
Кроме приведенных ниже параметров, можно задать количество цветов в таблице цветов изображения. См. Настройка таблицы цветов для изображений GIF и PNG‑8.
Уменьшение размера файла путем выборочного удаления данных. Чем выше значение параметра «Потери», тем больший объем данных удаляется. Обычно сохранить качество изображения позволяет установка для параметра «Потери» значения в диапазоне от 5 до 10, иногда до 50. Изменение значения параметра «Потери» может привести к уменьшению размеры файла на 5 — 40%.
Параметр «Потери» нельзя использовать одновременно с параметром «Чересстрочно», алгоритмами «Дизеринг шума» или «Регулярный дизеринг».
Цвета и метод редукции цвета
Определяет метод создания таблицы цветов изображения и необходимое количество цветов в таблице. Доступны следующие методы редукции цвета.
Перцепционная Создает пользовательскую таблицу цветов, отдавая предпочтение цветам, к которым человеческий глаз наиболее чувствителен.
Селективная Создает таблицу цветов, аналогичную таблице «Перцепционная», но отдавая предпочтение областям большого размера и сохранению веб-цветов. Обычно при использовании этой таблицы получаются изображения с наибольшей достоверностью цветов. Значение «Селективная» задано по умолчанию.
Адаптивная Создает таблицу путем выборки цветов из преобладающего спектра в изображении. Например, для изображения, в котором есть только зеленый и синий цвета, таблица цветов будет состоять в основном из оттенков синего и зеленого. В большинстве изображений цвета сосредоточены в определенных областях спектра.
Ограниченная (Web) Используется стандартная таблица из 216 цветов, применяемая в Windows и Mac OS в палитрах с 8-разрядной глубиной цвета (256 цветов). При выборе этого параметра дизеринг в браузере не применяется при отображении с 8-разрядной глубиной цвета (такая палитра также называется «безопасной палитрой Web»). Использование палитры Web может приводить к увеличению размера файла, и рекомендуется только в тех случаях, когда крайне важно исключить дизеринг в браузере.
Заказная Применяется палитра цветов, созданная или измененная пользователем. При открытии существующего файла GIF или PNG‑8 в нем будет пользовательская палитра цветов.
Таблица цветов изображения настраивается с помощью палитры Таблица цветов в диалоговом окне «Сохранить для Web и устройств».
«Черно-белый», «Оттенки серого», Mac OS, Windows Используется заданная палитра цветов.
Определяет метод и степень дизеринга. Дизеринг позволяет имитировать цвета, которые отсутствуют в системе цветного изображения компьютера. Более высокий процент дизеринга позволяет передавать больше цветов и деталей, но также приводит к увеличению размера файла. Для оптимального сжатия рекомендуется использовать наименьший процент дизеринга, обеспечивающий необходимую детализацию цвета. К изображениям, состоящим преимущественно из сплошных тонов, дизеринг можно не применять. В изображениях с непрерывными оттенками (особенно градиентами) дизеринг может быть нужен для того, чтобы избежать полошения цветов.
Доступны следующие методы дизеринга.
Диффузия Применяется случайный узор, менее заметный, чем в режиме «Регулярный дизеринг». Эффекты дизеринга распространяются на смежные пиксели.
Узор Для имитации цветов, отсутствующих в таблице цветов, применяется квадратный узор наподобие полутонового.
Шум Применяется случайный узор, подобный методу дизеринга «Случайный», но без распространения на смежные пиксели. При использовании метода дизеринга «Шум» швы не возникают.
«Прозрачность» и «Подложка»
Определяет способ оптимизации прозрачных пикселей в изображении.
Чтобы сделать полностью прозрачные пиксели прозрачными и смешать частично прозрачные пиксели с цветом, выберите «Прозрачность» и укажите цвет подложки.
Чтобы заполнить полностью прозрачные пиксели цветом и наложить их на частично прозрачные пиксели того же цвета, выберите цвет подложки и отмените выбор параметра «Прозрачность».
Для выбора цвета подложки щелкните стрелку рядом с образцом цвета «Подложка» и выберите требуемый цвет в палитре цветов. Второй способ: выберите параметр в меню «Подложка»: Цвет пипетки (для использования цвета в поле образцов пипетки), Основной цвет, Цвет фона, «Белый», «Черный» или «Другой» (для использования палитры цветов).
Параметры «Основной цвет» и «Цвет фона» доступны только в Photoshop.