«Что позволило остаться GIF, это - циклическое проигрывание анимации, которое добавил Netscape. Если бы Netscape не добавил поддержку GIF в свой браузер, GIF умер бы в 1998 »Александр Тревор (Alexander Trevor),
руководитель команды по созданию GIF в CompuServe
Формат GIF в июне этого года отпраздновал свое 25-летие, и является сегодня самым старым графическим форматом, который распространен в интернете. Посвящая выходные просмотру смешных анимированных гифок понимаешь, что некоторые из них были бы в разы лучше со звуком. Все текущие решения для циклической анимации со звуком (например: coub.com , gifsound.com) предлагают отказаться от GIF, но это - не выход. И я решил пожертвовать просмотром гифок на выходных для решения этой крайне важной проблемы.
Первая в интернете гифка со звуком по ссылке . Надо нажать на синюю кнопку, а потом на гифке. Плеер должен работать во всех современных браузерах (тестировался в последнем Firefox и Chrome).
Гифок под катом не будет, а будет процесс создания расширения для стандарта, написания конвертера и плеера.
С 1987 формат GIF пережил всего два существенных изменения:
- В 89 году вышла вторая версия формата (названная GIF 89a). Стало возможным указывать задержку между картинками (нескольких картинок в одном файле было в первом формате GIF 87a). Сторонние разработчики теперь смогли добавлять свои собственные блоки в файл (Application Extension Block).
- В 90 году компания Netscape добавила свой блок, который позволял указывать сколько раз будет повторяться анимация.
Разработка расширения формата
Как было сказано выше, стандарт GIF 89a позволяет приложениям размещать в GIF файле свои данные. Формат блока расширения для приложений:Попробуем уместить сюда заголовка WAVE файла:
Так как размер блока контролируется форматом GIF, выкинем из заголовка поле с размером данных, а в идентификатор приложения запишем «RIFFWAVE». Остаток WAVE файла запишем как вложенные GIF блоки.
Блок со звуком будем вставлять прямо перед первым блоком с изображением (на самом деле можно его вставить в любом месте).
Разработка конвертера
Конвертер на входе принимает GIF и WAVE файлы, а на выходе выдает GIF с RIFFWAVE блоком. Исходный код можно посмотреть посмотреть на .Код довольно простой, читаем WAVE файл, создаем из него GIF блок. Потом читаем гиф файл и записываем все блоки, как только находим первый блок с картинкой, перед ним вставляем блок со звуком. Самый важный участок кода - конвертация WAVE файла в GIF блок:
Def get_wav_block(file): # читаем данные из фала (signature, size, format) = unpack("4sI4s", file) if signature != "RIFF": raise Exception("Not a RIFF file") if format != "WAVE": raise Exception("Not a WAVE file") data = file.read(size - 4) # Готовим заголовок блока wave_block_header = struct.pack("BBB8sBBB", 0x21, 0xff, 11, "RIFFWAVE", 0, 0, 0) data_subblocks = ; # разбиваем данные на блоки из 255 байт for i in range(0, len(data) // 255): data_subblocks.append(chr(0xff)) data_subblocks.append(data) if (len(data) % 255) > 0: rest = len(data) % 255 data_subblocks.append(chr(rest)) data_subblocks.append(data[-rest:]) # добавляем сивол окончания блока data_subblocks.append(chr(0)) return "".join(data_subblocks)
Делаем гифку со звуком
Делаем анимированный гиф:# ffmpeg получаем отдельные кадры ffmpeg -ss 0:00:9.73 -t 2.86 -i warlus.webm -s 500x280 -r 10 frames/image%03d.png # делаем анимированный GIF convert -delay 10 -loop 0 frames/*.png source.gif
Получаем звук и проверяем, что все выглядит (и звучит), как мы запланировали:
mplayer -ss 0:00:9.73 -endpos 2.86 warlus.webm -ao pcm:file="source.wav" -vo null mplayer -loop 0 -audiofile source.wav source.gif
Конвертируем в GIF со звуком
python wave2gif.py example/source.gif example/source.wav result.gif
Делаем плеер
За основу плеера возьмем jsgif - плеер для анимированных GIF на JavaScript. jsgif разбирает gif и проигрывает рисуя каждый кадр на Canvas. Добавим в него функцию, которая при обнаружении «RIFFWAVE» блока:- преобразовываем данные из блока обратно в формат WAVE файла;
- конвертируем полученный файл в data: URL и передаем в элемент Audio.
jsgif работает не быстро, а с добавлением звука стал еще медленнее. Так же, чтобы получить данные файла, плеер вызывает XMLHttpRequest, поэтому плеер работает только с картинками с одного домена. Но разве это помехи для искусства.
Что дальше?
Радоваться гифкам со звуком. Можно реализовать плагин для браузеров, который бы позволял проигрывать такие гифки без дополнительного XMLHttpRequest, и который возможно будет быстрей работать. Если кто-то сталкивался с подобной задачей, буду признателен за указание в какую сторону смотреть, чтобы написать плагин который обрабатывает определенные типы файлов .
«Что позволило остаться GIF, это - циклическое проигрывание анимации, которое добавил Netscape. Если бы Netscape не добавил поддержку GIF в свой браузер, GIF умер бы в 1998 »Александр Тревор (Alexander Trevor),
руководитель команды по созданию GIF в CompuServe
Формат GIF в июне этого года отпраздновал свое 25-летие, и является сегодня самым старым графическим форматом, который распространен в интернете. Посвящая выходные просмотру смешных анимированных гифок понимаешь, что некоторые из них были бы в разы лучше со звуком. Все текущие решения для циклической анимации со звуком (например: coub.com , gifsound.com) предлагают отказаться от GIF, но это - не выход. И я решил пожертвовать просмотром гифок на выходных для решения этой крайне важной проблемы.
Первая в интернете гифка со звуком по ссылке . Надо нажать на синюю кнопку, а потом на гифке. Плеер должен работать во всех современных браузерах (тестировался в последнем Firefox и Chrome).
Гифок под катом не будет, а будет процесс создания расширения для стандарта, написания конвертера и плеера.
С 1987 формат GIF пережил всего два существенных изменения:
- В 89 году вышла вторая версия формата (названная GIF 89a). Стало возможным указывать задержку между картинками (нескольких картинок в одном файле было в первом формате GIF 87a). Сторонние разработчики теперь смогли добавлять свои собственные блоки в файл (Application Extension Block).
- В 90 году компания Netscape добавила свой блок, который позволял указывать сколько раз будет повторяться анимация.
Разработка расширения формата
Как было сказано выше, стандарт GIF 89a позволяет приложениям размещать в GIF файле свои данные. Формат блока расширения для приложений:Попробуем уместить сюда заголовка WAVE файла:
Так как размер блока контролируется форматом GIF, выкинем из заголовка поле с размером данных, а в идентификатор приложения запишем «RIFFWAVE». Остаток WAVE файла запишем как вложенные GIF блоки.
Блок со звуком будем вставлять прямо перед первым блоком с изображением (на самом деле можно его вставить в любом месте).
Разработка конвертера
Конвертер на входе принимает GIF и WAVE файлы, а на выходе выдает GIF с RIFFWAVE блоком. Исходный код можно посмотреть посмотреть на .Код довольно простой, читаем WAVE файл, создаем из него GIF блок. Потом читаем гиф файл и записываем все блоки, как только находим первый блок с картинкой, перед ним вставляем блок со звуком. Самый важный участок кода - конвертация WAVE файла в GIF блок:
Def get_wav_block(file): # читаем данные из фала (signature, size, format) = unpack("4sI4s", file) if signature != "RIFF": raise Exception("Not a RIFF file") if format != "WAVE": raise Exception("Not a WAVE file") data = file.read(size - 4) # Готовим заголовок блока wave_block_header = struct.pack("BBB8sBBB", 0x21, 0xff, 11, "RIFFWAVE", 0, 0, 0) data_subblocks = ; # разбиваем данные на блоки из 255 байт for i in range(0, len(data) // 255): data_subblocks.append(chr(0xff)) data_subblocks.append(data) if (len(data) % 255) > 0: rest = len(data) % 255 data_subblocks.append(chr(rest)) data_subblocks.append(data[-rest:]) # добавляем сивол окончания блока data_subblocks.append(chr(0)) return "".join(data_subblocks)
Делаем гифку со звуком
Делаем анимированный гиф:# ffmpeg получаем отдельные кадры ffmpeg -ss 0:00:9.73 -t 2.86 -i warlus.webm -s 500x280 -r 10 frames/image%03d.png # делаем анимированный GIF convert -delay 10 -loop 0 frames/*.png source.gif
Получаем звук и проверяем, что все выглядит (и звучит), как мы запланировали:
mplayer -ss 0:00:9.73 -endpos 2.86 warlus.webm -ao pcm:file="source.wav" -vo null mplayer -loop 0 -audiofile source.wav source.gif
Конвертируем в GIF со звуком
python wave2gif.py example/source.gif example/source.wav result.gif
Делаем плеер
За основу плеера возьмем jsgif - плеер для анимированных GIF на JavaScript. jsgif разбирает gif и проигрывает рисуя каждый кадр на Canvas. Добавим в него функцию, которая при обнаружении «RIFFWAVE» блока:- преобразовываем данные из блока обратно в формат WAVE файла;
- конвертируем полученный файл в data: URL и передаем в элемент Audio.
jsgif работает не быстро, а с добавлением звука стал еще медленнее. Так же, чтобы получить данные файла, плеер вызывает XMLHttpRequest, поэтому плеер работает только с картинками с одного домена. Но разве это помехи для искусства.
Что дальше?
Радоваться гифкам со звуком. Можно реализовать плагин для браузеров, который бы позволял проигрывать такие гифки без дополнительного XMLHttpRequest, и который возможно будет быстрей работать. Если кто-то сталкивался с подобной задачей, буду признателен за указание в какую сторону смотреть, чтобы написать плагин который обрабатывает определенные типы файлов .
Сделать гифку онлайн может каждый пользователь. Такая анимация – это набор упрощенных кадров, которые переведены в формат изображения.
Пользователи интернета используют гифки для того, чтобы обмениваться ими, как смешными шутками или отдельными стоящими моментами из фильма или мультика.
Благодаря стремительному росту спроса на интернет, появился и спрос на услуги провайдеров соответственно.
Сегодня пользователи глобальной сети используют в процессе общения бесчисленное количество разнообразных стикеров, смайликов, открыток и гифок.
Анимацию можно сделать двумя способами:
- Используя видеоролик в качестве входящих данных;
- Сопоставление одного файла из нескольких выбранных фотографий .
Сервис Минимультик
Сервис Минимультик является одним из самых крупных и распространенных во всем интернете стран СНГ. Главное направление работы сайта – создание гифок из картинок.
Также в конечный результат может быть добавлена надпись и визуальные эффекты .
Создание проводится абсолютно бесплатно.
Чтобы преобразовать набор обычных картинок в анимационную гифку, следуйте инструкции:
- Зайдите на официальный сайт разработчика сервиса. Ссылка: http://minimultik.ru/
- Вы увидите три условно разделенных столбика, информацию в которых необходимо заполнить. Для начала загрузите картинки на сервер сайта, используя клавишу «выбор фотографии и картинки…», которая имеет бежевый цвет на рисунке ниже;
- После выбора картинок можно приступать к редактированию данных анимации. Для этого в меню, которое указано на рисунке 1 укажите необходимый размер гифки, ее ориентацию, цвет фона, тип углов, максимальную длину и частоту кадров в секунду;
- В поле «Текст» можно добавить надпись на один из кадров гифки. Пропустите это поле, если вам не нужно этого делать;
- Точно так же, по желанию пользователя, можно выбрать наличие каких-либо визуальных эффектов;
- Нажмите на клавишу создания анимации из фото. Скорость создания зависит от количества кадров, применяемых эффектов и от частотности показа составляющих изображений.
Также на сервисе поддерживается возможность создания короткой гифки со звуком.
Анимация со звуком – это уже своеобразный видеоролик, который современные пользователи интернета называют вайном (от английского слова “vine”).
Создание анимации прямиком с веб-камеры – с эффектами
Многие пользователи задаются вопросом о том, где создать красивую гифку с вебки.
На самом деле, существую не так много сервисов, которые способны превратить в гифку в режиме реального времени. Одним из таких сервисов является сайт fungif.ru .
Его суть заключается в том, что абсолютно все пользователи могут создать собственную гифку, которая будет размещена в топе на первой странице ресурса.
Следует заметить, что для создания качественного изображения и четкой анимации с камеры необходимо иметь качественную вебку, которая не искажает изображение и звук (в том случае, если пользователю необходимо сделать гифку со звуком).
Примеры созданных гифок с веб камер пользователями сервиса в режиме реального времени
Совет! Чтобы создать собственную анимацию нужно всего лишь разрешить сервису доступ к камере и записать короткое видео, которое в дальнейшем преобразуется в анимационное изображение.
Готовую гиф-картинку можно скачать на компьютер, а уже с компьютера ее можно распространять в интернете.
Использование сервиса Buildgif
С помощью данного сервиса можно из видео youtube сделать гифку. Так как сервис имеет достаточно узкую направленность работы, пользовательский интерфейс сайта очень простой.
Следуйте короткой инструкции, чтобы создать собственное анимационное изображение с ютуб:
- Зайдите на официальную страницу приложения в интернете. Ссылка: http://buildgif.com/
- В текстовом поле вставьте ссылку на веб-страницу с видео, которая ведет на сайт «Ютуб»;
- Если поиск проведен успешно, ниже появится само видео, как показано на рисунке выше;
- Проставьте объем анимации в настройках и нажмите на клавишу «Создать анимацию».
Процесс создания анимации с видео на видеохостинге Ютьюб
Зачем вообще может понадобиться сделать гифку из видео?
Почему просто не использовать видео?
Видео — тяжелое. Видеоролик будет весить несколько Мб, а аналогичная гифка в 10-100 раз меньше.
Да, интернет-каналы толстеют, но ведь есть еще и мобильный интернет, есть медленные компьютеры и прочее.
У GIF-анимации есть 2 функции…
Для чего используют GIF?
Я вижу 2 функции. Первая — показать какой-то процесс наглядно.
Вот, например, моя гифка, показывающая как работает программа Punto Switcher:
Можно было долго описывать, как работает программа, но гораздо проще засунуть такую вот гифку. И всем все понятно. Ее вес — всего 29 Кб.
Кстати, второй вариант — сделать крутой скриншот со стрелками. О том, как это делать я писал .
Вторая функция — просто ФАН (развлечение, шутка и т. д.).
Когда в статье нужно показать какую-то эмоцию лучше средства, чем GIF-анимация не найти.
Например, эта гифка отлично показывает злость (499 кб):
а это — скуку (392 кб):
а вот задумчивость (385 кб):
Вставив такую картинку в статью вы сразу сполна передадите вашу эмоцию. Разве не здорово?
Но как найти подходящую гифку онлайн?
Например, я с его помощью смастерил за 5 минут такую гифку из видео на YouTube. Размер -всего 390 Кб:
Ее можно использовать, когда нужно показать, например, излишний формализм и гламур в абсолютно неподходящих для этого обстоятельствах.
О том, как я сделал эту анимацию, а также о том, как вообще уменьшать размеры GIF — моя пошаговая инструкция .
Вариант 2. Гифка со съемки экрана
Если вы хотите записать гифку с каким-то процессом (например, чтобы послать коллеге наглядное пособие), то вы можете просто снять скринкаст любой программой.
Я же для этого пользуюсь удобным программой-комбайном ShareX (ссылка).
Она, конечно, позволяет снять и видео с экрана, но может и сразу создать гифку из всего процесса.
Не гифом единым. Coub!
Картинка — хорошо. Но иногда со звуком все еще лучше. Гифка со звуком — это Coub.
В Интернете полно смешных кубов.
Моя любимая — «Ну и пожалуйста! Не очень то и хотелось!»
А вот про наших народных умельцев, которые дадут жару любому Масачусетскому технологическому:
А этот куб про дороги России. Мы такие сцены видим каждую весну, к сожалению:
Лесной стриптиз. Ни разу не был на стриптизе, теперь знаю, как это бывает:
Ну, а в этом состоянии, я уверен, каждый бывает в пятницу вечером.
Как известно, видео весит достаточно много, аналогичная гифка в 10-100 раз меньше. К тому же, это помогает наглядно описать что-то или выразить эмоции.
В данной статье мы рассмотрим различные способы и варианты создания гифки.
В том случае, если вы не находите подходящую гифку, вы можете легко ее сделать самостоятельно.
Используем для этого необходимое видео.
Во-первых, вам необходимо найти подходящее видео, например, на Youtube.
Используя данный сервис ezgif.com, мы сможем создать любую гифку онлайн.
Загружаем видео, затем, указываем, сколько секунд должна длиться эта гифка (отмечаем, где находится нужный отрезок в видео).
Из предложенных методов выбираем legacy (old) – наиболее оптимальный (так как качество изображения лучше).
Пару минут – и ваша гифка готова.
Если же размер все-таки большой, его с легкостью можно уменьшить. Для этого необходимо просто нажать «optimize» и убрать каждый второй (третий или четвертый) фрейм.
Скорость также можно настраивать, нажав на «speed», а далее – «apply».
Как же создать гифку со съемки экрана?
Это действие не вызовет никакого труда. Все, что нужно сделать – это скринкаст. Для этого вы можете воспользоваться данной программой .
Подойдет в этом случае и данная программа Licecap.
Как создать гифку со звуком?
Для этой цели нам нужно воспользоваться сайтом Coub.Com.
Для начала, проходим регистрацию.
После этого, подбираем необходимое звуковое сопровождение и также загружаем его на coub.
Гифка со звуком готова!
Как создать гифку из картинок?
Для этого мы можем воспользоваться сервисом ezgif.com, о котором мы уже упоминали в данной статье выше. Сайт представлен на английском языке, но это не вызовет много сложностей, разобраться можно довольно быстро. Плюсом является большое количество функций и эффектов, которые можно применить к гифке.
Еще один вариант сайта gifovina.ru.
Как сделать гифку с помощью фотошопа?
Если вы не хотите использовать всевозможные онлайн-сервисы, отличный вариант – фотошоп.
Начало процедуры полностью совпадает с уже описанными в статье: первое, мы находим видео на сайте и скачиваем его.
Далее, используем Windows Movie Maker или же Киностудию для того, чтобы вырезать нужный фрагмент из видео (желательная длительность – 2-3 секунды, чтобы файл не получился слишком тяжелым). Если вы захотите добавить какие-либо записи, воспользуйтесь этими же программами.
Затем открываем этот отрезок из видео в фотошопе. Нажимаем по порядку Файл – Импортировать – Кадры видео в слои.
Изменяем размеры, если это нужно, выбираем файл – Сохранить для Web и сохраняем полученную гифку.
Как создать гифку не выходя из приложения «Вконтакте»?
Данный способ также является абсолютно простым.
Для этого вам нужно найти приложение Вконтакте, которое носит название «Создание GIF (гиф) из видео онлайн? Легко!», или же «Создание GIF (гиф) анимации | Мультимедиа», существуют и другие приложения, которыми вы сможете воспользоваться.
Затем выбираем необходимый отрезок, который вы хотите вырезать. После этого нажимаем «создать анимацию», и далее, «сохранить в документы».
Итак, выше гиф анимация сохранена.
Как создать гифку на Android?
Gif Camera, GifBoom, Gif Камера - бесплатные мобильные приложение для Android, которые помогут вам с легкостью создавать GIF-анимацию.
Gif Камера является наиболее функциональным и минималистичным приложением. Посудите сами, ничего лишнего, даже главного экрана не предусмотрено - мгновенный запуск камеры.
Приложение не имеет ограничений по длительности создаваемого ролика, все зависит от вашего терпения и объема встроенной памяти.
GIF сохраняются в галерее. Редактор позволяет наложить на анимацию обильное количество эффектов, а также нанести текстовую пометку.
Стоить упомянуть о еще одной интересной возможности приложения - умении масштабировать и поворачивать ролики.
С помощью GIF Camera производится непосредственная съемка камерой смартфона заданного в настройках количества фреймов.
Оценивайте аппаратные возможности своего телефона, т.к. большое количество сделанных кадров вполне может привести к зависанию приложения или операционной системы.
Второй метод - выборка из снимков, ранее сделанных вами. Клик по миниатюре изображения придает ему порядковый номер в будущей анимации.
Процесс создания занимает совсем незначительное время.
Ваши труды сохраняются в галерее, любая из GIF впоследствии может быть отредактирована.
Еще одно приложение –GifBoom.
Очень напоминает всеми известное проложение – Инстаграм. В использовании все крайне просто и понятно. Думаю, разобраться в этом не составит ваи никакого труда.
Как же сделать гифку на iPhone?
Приложение GifMill, которое великолепно справляется с этой задачей. К тому же оно абсолютно бесплатно.
Хотя интерфейс GifMill не очень привлекательны, программа довольно универсальна и ей на удивление легко и удобно пользоваться. GIF-файлы можно запросто создавать как из картинок и фотографий, так и из видео-файлов. После того как творение создано, его можно экспортировать в приложение Фото и отправить через iMessage, электронную почту или любым другим удобным способом.
Порядок создания гифки на iPhone:
Надеюсь, данная статья оказалась полезной и интересной для вас!
