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

В конце концов люди начали спрашивать нас: «Как вы создаете GIF анимации?». Пришло время раскрыть секрет.

Дизайн GIF изображений

1. Секретный ингредиент

Вот мой небольшой секрет: все мои GIF анимации сначала были видео-файлами. Обычно я использую ScreenFlow , который я кстати также применяю для создания видео наших продуктов. Это простая программа, которая в то же время содержит множество полезных анимационных инструментов.
После того как я сохраняю анимацию как видео файл, я импортирую его в Photoshop через File > Import > Video Frames As Layers.

Совет: Если ScreenFlow или After Effects вам не по карману, то создайте анимацию в Keynote, и экспортируйте ее как видео. Наконец-то, хоть какое-то применение этой функции в Keynote.

2. Меньше цветов = больше веселья

Если вы хотите делать крутые GIF анимации, то нужно с особым трепетом подойти к выбору цвета. Это повлияет не только на размер файла, но и позволит создать более продолжительные анимации с маленьким размером файла. (Для меня маленький - это менее 1MB)

3. Используйте размытие в движении (motion blur), если возможно

Такие программы как ScreenFlow и After Effects позволяют экспортировать видео с применением размытия в движении. Это не только придаст вашей анимации профессиональный вид, но и упростит процесс уменьшения размера файла в Photoshop.

4. Будьте (отчасти) ленивыми

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

Экспорт GIF анимаций

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

5. Удалите кадры-дубликаты

Скорее всего ваша анимация останавливается или остается неподвижной на какой-то момент времени. Присмотревшись, можно заметить, что этот момет состоит из нескольких одинаковых кадров. Если таких кадров 10 штук, то удалите 9 из них и установите длительность оставшегося кадра на, например, 1 секунду.

Если это не поможет, попробуйте заново импортировать видео, но на этот раз выберите параметр Limit To Every 2 Frames. Это должно значительно уменьшить размер файла.

Совет: Если ваша анимация состоит из более 150 кадров, то возникнут проблемы при попытках уменьшить размер файла.

6. Меньше цветов

Когда вы сохраняете GIF анимацию в Photoshop, то увидете выпадающее меню возле параметра Colors. Поэкспериментируйте со значениями, попробуйте максимально малое количество цветов, которое не превратит весь файл в мусор.

7. Измените параметр Lossy* (потери)

Если честно, то я даже не знаю, что этот параметр означает. Но я точно знаю, что если вы поставите его на уровне между 1 и 10, то избавитесь от лишних килобайтов без потери качества.

*«Потери» (Lossy) - допустимый уровень потери графической информации в растровом файле, позволяющий уменьшить файловый размер изображения

Ничего не изменилось! Помогите!

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

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

Тип сжатия

Выбирает компрессор видеосигнала (кодек) для сжатия видео.

Кадров в секунду

Задает число отдельных изображений, отображающихся за одну секунду. Стандартный видеоформат NTSC имеет частоту кадров 29,97 кадр/сек. Европейский видеоформат PAL имеет частоту кадров 25 кадр/сек. Стандарт для кинофильмов - 24 кадр/сек. Фильм QuickTime иногда создается с более низкой частотой кадров, чтобы снизить пропускную способность и нагрузку на процессор.

Фильмы с более высокой частотой кадров лучше передают движение, но имеют большой размер файла. Если выбрать частоту кадров меньше текущей, кадры удаляются. Если выбрать частоту кадров больше текущей, существующие кадры дублируются (не рекомендуется, поскольку в этом случае увеличивается размер файла без повышения качества). В большинстве случаев ваш ролик будет выглядеть лучше, если вы выберете число, на которое его частота кадров делится без остатка. Например, если частота источника составляет 30 кадров в секунду, необходимо выбрать частоту кадров 10 или 15. Не следует выбирать частоту, превышающую частоту исходного материала.

Частота ключевых кадров

Указывает частоту ключевых кадров. Увеличение частоты ключевых кадров (меньшее число) улучшает качество видео, но увеличивает размер файла. Некоторые кодеки автоматически вставляют дополнительные ключевые кадры, если изображение слишком сильно изменилось по сравнению с предыдущим кадром. Обычно достаточно одного ключевого кадра на каждые 5 секунд (умножьте количество кадров в секунду на 5). Если создается файл для потоковой передачи данных по протоколу RTSP, и возникают сомнения по поводу надежности связи, можно увеличить частоту ключевых кадров до одного ключевого кадра на каждую секунду или две секунды.

Ограничить скорость передачи данных до

Задает значение скорости передачи данных при воспроизведении (в килобитах в секунду). Большее значение скорости передачи данных обеспечивает более высокое качество воспроизведения, однако не рекомендуется превышать значение предельной пропускной способности.

Глубина

Задает количество цветов в экспортируемом видео. Это меню недоступно, если выбранный кодек поддерживает только одну глубину цвета.

Качество

Если параметр доступен, перетащите ползунок или введите значение, чтобы настроить качество экспортируемого видео, и, соответственно, размер файла. При использовании одного и того же кодека для захвата и экспорта и при наличии отрендеренной последовательности (для предварительного просмотра) можно сократить время рендеринга. Для этого настройки качества экспорта и исходные настройки качества захвата должны совпадать. Если качество превышает исходный уровень качества записи, то качество создаваемого видеоряда не улучшится, а время обработки может увеличиться.

После создания анимации в Фотошопе ее необходимо сохранить в одном из доступных форматов, одним из которых является GIF . Особенностью данного формата является то, что он предназначен для отображения (воспроизведения) в браузере.

Если Вас интересуют другие варианты сохранения анимации, то рекомендуем прочитать вот эту статью:

Процесс создания GIF анимации был описан в одном из предыдущих уроков, а сегодня мы поговорим о том, как сохранить файл в формате GIF и о настройках оптимизации.

Для начала повторим материал и ознакомимся с окном настроек сохранения. Открывается оно нажатием на пункт «Сохранить для Web» в меню «Файл» .

Окно состоит из двух частей: блока предпросмотра

и блока настроек.

Блок предпросмотра

Выбор количества вариантов просмотра выбирается в верхней части блока. В зависимости от потребностей, можно выбрать нужную настройку.

Изображение в каждом окне, кроме оригинала, настраивается отдельно. Это сделано для того, чтобы можно было выбрать оптимальный вариант.

В левой верхней части блока находится небольшой набор инструментов. Мы будем пользоваться только «Рукой» и «Масштабом» .

При помощи «Руки» можно перемещать изображение внутри выбранного окна. Выбор также производится данным инструментом. «Масштаб» выполняет одноименное действие. Приближать и удалять картинку можно и кнопками в нижней части блока.

Чуть ниже находится кнопка с надписью «Просмотр» . Она открывает выбранный вариант в браузере по умолчанию.

В окне обозревателя, кроме набора параметров, мы можем также получить HTML код гифки.

Блок настроек

В данном блоке происходит настройка параметров изображения, рассмотрим его подробнее.

1. Цветовая схема. Данная настройка определяет, какая таблица индексированных цветов будет применена к изображению при оптимизации.

   

   • Перцепционная , а попросту «схема восприятия». При ее применении Фотошоп создает таблицу цветов, руководствуясь текущими оттенками изображения. По мнению разработчиков, эта таблица максимально приближена к тому, как человеческий глаз видит цвета. Плюс – наиболее приближенное к оригиналу изображение, цвета максимально сохранены.
   • Селективная схема похожа на предыдущую, но в ней преимущественно используются цвета, относящиеся к безопасным для web. Здесь также сделан упор на отображение оттенков, приближенных к исходным.
   • Адаптивная . В данном случае таблица создается из цветов, которые чаще встречаются в изображении.
   • Ограниченная . Состоит из 77 цветов, часть образцов которых заменены белым цветом в виде точки (зерна).
   • Заказная . При выборе этой схемы появляется возможность создать собственную палитру.
   • Черно-белое . В этой таблице используются только два цвета (черный и белый), также с использованием зернистости.
   • В градациях серого . Здесь применяются различные 84 уровня оттенков серого цвета.
   • MacOS и Windows . Данные таблицы составляются на основании особенностей отображения картинок в браузерах под управлением этих операционных систем.

   Вот несколько примеров применения схем.

   

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

2. Максимальное количество цветов в цветовой таблице.

   

   Количество оттенков в изображении напрямую влияет на его вес, а соответственно и на скорость загрузки в браузере. Чаще всего применяется значение 128 , поскольку такая настройка почти не влияет на качество, при этом уменьшая вес гифки.

   

3. Web-цвета. Данная настройка устанавливает допуск, с которым оттенки преобразуются в эквивалентные из безопасной Web-палитры. Вес файла определяется значением, выставляемым ползунком: значение выше – файл меньше. При настройке Web-цветов не стоит также забывать и о качестве.

   

   

4. Дизеринг позволяет сгладить переходы между цветами с помощью смешивания оттенков, которые содержатся в выбранной таблице индексирования.

   

   Также настройка поможет, насколько возможно, сохранить градиенты и целостность однотонных участков. При применении дизеринга увеличивается вес файла.

   

5. Прозрачность. Формат GIF поддерживает только абсолютно прозрачные, либо абсолютно непрозрачные пиксели.

   

   Этот параметр, без дополнительной подстройки, плохо отображает кривые линии, оставляя пиксельные лесенки.

   

   Подстройка называется «Матовый» (в некоторых редакциях «Кайма» ). С ее помощью настраивается смешивание пикселей картинки с фоном страницы, на которой она будет расположена. Для наилучшего отображения выбирают цвет, соответствующий цвету фона сайта.

   

6. Чересстрочно. Одна из самых полезных для Web настроек. В том случае, если файл имеет значительный вес, позволяет сразу показывать картинку на странице, по мере загрузки улучшая ее качество.

   

7. Преобразование sRGB помогает сохранить максимум оригинальных цветов изображения при сохранении.

   

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

Для наилучшего понимания процесса настройки сохранения гифки в Фотошопе, необходимо попрактиковаться.

Практика

Цель оптимизации изображений для интернета – максимальное снижение веса файла при сохранении качества.

1. После обработки картинки переходим в меню «Файл – Сохранить для Web» .
2. Выставляем режим просмотра «4 варианта» .

   

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

   Настройки параметров следующие:

   

   Сравним полученный результат с оригиналом. В нижней части окна с образцом мы можем видеть текущий размер гифки и скорость ее загрузки при указанной скорости интернета.

   

4. Переходим на картинку ниже только что настроенной. Попробуем ее оптимизировать.

   Размер гифки снизился с 36,59 КБ до 26,85 КБ.

   

5. Поскольку на картинке уже присутствует некоторая зернистость и небольшие дефекты, попробуем увеличить «Потери» . Данный параметр определяет допустимый уровень потери данных при сжатии GIF . Меняем значение на 8.

   

   Нам удалось еще уменьшить объем файла, при этом немного потеряв в качестве. Гифка теперь весит 25,9 килобайт.

   

   Итого, мы смогли снизить размер картинки примерно на 10 КБ, что составляет более 30%. Весьма неплохой результат.

6. Дальнейшие действия весьма просты. Нажимаем на кнопку «Сохранить» .

   

   Выбираем место для сохранения, даем название гифке, и снова жмем «Сохранить» .

   

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

   

   В результате получим страницу и папку с изображением.

   

Совет: при присвоении имени файлу старайтесь не использовать кириллические символы, поскольку не все браузеры в состоянии их прочитать.

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

Действительно проблема только в том, что она у вас не читается. А сохранить-то сохраняется правильно. Главное сохранить как изображение и выбрать формат файла с расширением gif. Теперь можно ее выкладывать, куда нужно, она будет просматриваться верно. А вот для просмотра на компьютере нужно ставить специальные программы.

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

Скорее всего при сохранении файла вы указываете не тот формат, вернее выбираете тот который выскакивает по автомату. Когда нажимаете на картинку анимацию, то после выбора сохранить как, убедитесь, что в пути сохранения после точки в расширении стоит именно gif.

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

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

На всякий случай, перед сохранением, проверьте тип сохраняемого файла, должен быть GIF или GIF Image.

Проблема скорее всего не с сохранением анимации, а с программой, в которой вы эту анимацию пытаетесь просматривать. Не все просмотрщики графики сторонних разработчиков, впрочем также как и встроенный в Windows диспетчер рисунков и Microsoft Office Picture Manager, поддерживают воспроизведение анимации в формате GIF.

Вам нужно установить программой по умолчанию, для просмотра GIF анимации, какой-нибудь браузер (любой), или скачать и установить программу-просмотршик сторонних разработчиков, которая анимацию воспроизводит.

Как установить программу по умолчанию, для воспроизведения гиф-анимации, можете посмотреть в ответах вот на этот вопрос Как скачать gif анимацию?

Анимированная картинка подлежит сохранению по то же схеме, что и простой рисунок, то есть нажимаем правую кнопку мыши и выбираем Сохранить изображение как. Затем, в открывшимся окне присваиваем данному файлу нужное имя и выбираем тип .gif.

Доброго времени суток.

Сохраняется картинка - анимация (анимированная картинка) также, как и обычная картинка.

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

В вашем случае проблема скорее кроется не в неправильном способе сохранения, а в открытии сохраненной картинки. Попробуйте открыть с помощью Chrome.

Обычно, все операционные системы windows поддерживают формат анимационных картинок, без установки каких то дополнительных программ. Вероятно вы сохраняете файл не в том формате, например по умолчанию у вас стоит JPEG, тогда когда вы нажимаете сохранить как, выберите формат GIF.

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

Кликните по картинке правой клавишой мыши затем - открыть с помощью Google Chrome либо другой браузер.

Вы сохраняете правильно. А вот просмотреть пытаетесь средствами винды, насколько я понял. А винда не умеет смотреть гифки. Открыть картитнку или с помощью браузера, или с помощью программы просмотра от Fast Stone - программа так и называется Fast Stone Image(кстати очень удобная прога для просмотра и редактировая изображений разных форматов. Рекомендую.

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

Файл в формате.gif представляет собой ряд схожих изображений, сжатых и «склеенных» в один видеоролик

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

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

Сохранение анимации на компьютер

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

Из сети интернет

Для сохранения большинства гифок используется простой метод в несколько кликов. Как сохранить анимацию:

Примечание! Случается, что анимация на странице представлена в виде видеоролика. Тогда сохранение описанным способом может не сработать.

Сохранение ролика показано на примере сайта Одноклассники:

Со страницы Вконтакте

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

На заметку! Чтобы анимированную картинку достаточно нажать «Сохранить документ на диск», и картинка будет сохранена на ПК. Чтобы ее найти кликните правой кнопкой мышки на скачанный файл и выберите пункт «Показать в папке».

Как вставить gif анимацию в комментарии Вконтакте

Сохраненную анимацию можно не только проигрывать на компьютере, но и вставлять в комментарии во Вконтакте.

Для этого:

Для этого:

Из Моего Мира

В социальной сети, созданной Mail.ru, пользователи часто делятся забавными анимированными картинками. Нередко у пользователей «Мой Мир» возникает желание сохранить гифку к себе на компьютер, чтобы использовать в других социальных сетях.

Шаг 1.

Шаг 2. Когда картинка начнет «проигрываться» в отдельном окне, нажимаем на нее правой кнопкой мыши. В появившемся контекстном меню ищем пункт «Копировать URL картинки».

Шаг 3. Теперь необходимо перейти по скопированному адресу. Для этого открываем пустую вкладку браузера и вставляем в адресную строку «урл» из буфера обмена - нажимаем в строке правую кнопку мыши и выбираем «Вставить из буфера и перейти».

Шаг 4. После этих действий искомая гифка проиграется на белом фоне, где ее можно сохранить привычным методом - нажав правую кнопку мыши и выбрав «Сохранить картинку как».

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

Установка Gif на рабочий стол

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

Функцию анимированных обоев поддерживает несколько версий Windows, например, Виста и 7. Перед установкой анимации на рабочий стол необходимо активировать функцию DreamScene, а также скачать сам гиф-файл на компьютер.

Для этого нужно следовать пошаговой инструкции:

Шаг 1. Необходимо скачать приложение DreamScene Activator.

Шаг 2.

Шаг 3. Перезагружаем компьютер.

Шаг 4. Открываем папку с сохраненной гифкой и кликаем по ней правой кнопкой мыши. В появившемся меню выбираем пункт «Set as Desktop Background».

Скачивание на смартфон

Если анимированную картинку необходимо скачать на портативное устройство, пригодятся простые методы сохранение гифок. В зависимости от источника анимации, существует несколько способов скачивания файла.

Со стандартных страниц

На заметку! В зависимости от используемого , пункт «Сохранить» может иметь несколько иное название.

Из социальных сетей

Чтобы скачать анимацию, необходимо:

Шаг 1. Запустить ее. Когда гифка проигрывается, касаемся экрана и нажимаем на три точки, появившиеся в верхнем углу.

Шаг 2. В выпадающем меню ищем пункт, соответствующий сохранению файла.

Как просмотреть файл

Программы, которые помогут создать или открыть гиф.

Гифки - удобный формат графического изображения, позволяющий сохранять набор кадров в виде компактного видеоролика. Чтобы скачать такой файл на свой ПК или смартфон, понадобится всего несколько кликов.

Видео — Как скачать гифки с интернета