Как делают гифки. Создаем gif анимацию из видео или фото

Гифка – анимированное изображение в формате.gif. Оно было разработано почти 30 лет назад специально для использования в сети, и до сих пор широко распространено. С 2004 года существует альтернативный формат APNG от Mozilla. Если описывать гифку кратко – это картинка, представляющая собой определенную последовательность кадров, которые сменяют друг друга. Их мы и научимся делать.

Чтобы создать гифку, нам понадобится графический редактор, который поддерживает функцию анимирования. Из бесплатных можно взять GIMP с официального англоязычного сайта или даже посмотреть его онлайн (потребуется флешплеер). Если у вас Windows выше XP-версии, ОС имеет встроенный удобный инструмент для создания рисунков различной сложности – Paint.NET В принципе можно использовать любой графический редактор с поддержкой слоев, но мы остановимся на самых популярных и доступных. Ищем программу в “Стандартных” меню “Пуск”. Здесь же разместился хорошо известный нам “Пейнт”. Итак, открываем картинку в Paint.NET или рисуем ее прямо в программе – например так.

Чтобы сделать анимашку, нам потребуется как минимум еще один кадр. Рисуем его или находим в интернете:

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

Не отчаивайтесь, если у вас нет программы Photoshop. В конце статьи мы рассмотрим ещё один способ, который позволит сделать гифку из фоток (с видео не прокатит) в бесплатной программе PhotoScape.

Как сделать гифку из фото в фотошопе?

Открываем Photoshop. Во вкладке «Файл» выбираем «Сценарии», а потом «Загрузить файлы в стек…». В появившемся окне выбираете изображения (фото, картинки), из которых будет состоять анимация.

После того, как слои появились в списке справа, кликните на верхнюю вкладку «Окно», далее «Шкала времени». В центре появившейся панели выберите «Создать анимацию кадра».

Первый слой сделайте видимым, остальные – скройте, нажав на «глаз». Вы получите первый кадр гифки с нужный изображением.

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

Теперь делаем следующее: нажимаем на второй слой в панели анимации – делаем видимым ТОЛЬКО второй слой в основном рабочем списке слоев. Третий кадр анимации – делаем видимым ТОЛЬКО третий слой видимым, остальные – скрыты.

Там, где «о сек.» устанавливаем любое нужное время для воспроизведения напротив каждого кадра.

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

Можно сказать, что гифка из фото готова. Осталось только правильно сохранить её. Для этого во вкладке «Файл» нажимаем «Экспортировать», далее выбираем «Сохранить для Web (старая версия)…». Откроется окно, в верхней части которого выбираем нужный формат – GIF. Внизу можно отредактировать исходный размер, если сделать меньше (в процентном соотношении), то вес тоже уменьшится.

Как сделать гифку из видео в фотошопе?

Открываем Photoshop, во вкладке «Файлы» выбираем «Импортировать», потом «Кадры из видео». В открывшемся окне выбираем диапазон видео, которое хотим переделать в GIF. Если хотите преобразовать видео полностью, выберите «От начала до конца», если определенную часть – «Только выделенный диапазон». Во втором случае правее нужно выбрать отрезок видео, который будет конвертироваться в слои.

Если видео тяжеловесное, лучше в графе «Оставить каждый…» поставить значение 2. Если больше, чем 2, то плавность переходов кадров пострадает. Если не принципиально, то можно 4, как в моём случае.

Дальше во вкладке «Окно» выбираем «Шкала времени». В выплывшей панели выйдут все слои для будущей анимации. Примечательно, что в данной случае мы не выделяем слои на видимый/невидимый, как это было при создании гифок из фото. Т.е. уже сразу слои в панели анимирования должны быть разными и, конечно, в правильной очередности. Мы просто выставляем время воспроизведения кадров (при необходимости) и время параметров цикла на «Постоянное». Нажимаем «Play». Гифка из видео на превью в фотошопе уже будет работать как надо.

Теперь сохраняем так же, как и обычную гифку из фото: Для этого во вкладке «Файл» нажимаем «Экспортировать», далее выбираем «Сохранить для Web (старая версия)…». Откроется окно, в верхней части которого выбираем нужный формат – GIF. Внизу можно отредактировать количество цветов (чем больше, тем качественнее), исходный размер… Если сделать меньше (в процентном соотношении), то вес тоже уменьшится. Не забываем нажать «Сохранить», выбрать место хранения файла. Всё, готово!

Как сделать гифку из фото легко и просто?

Если вариант с Photoshop вам не подходит: что-то не получается или просто он не установлен, то можно пойти другим путём. В одной из наших старых статей мы разбирали . Там как раз упоминалась программа PhotoScape. Не могу не повториться, но она действительно одна из лучших в своём роде. Помимо редактирования фото в ней можно сделать гифку из фото (из видео не получится). И могу сказать, что процесс создания анимации в этом редакторе займёт в разы меньше времени, чем в фотошопе.

PhotoScape – бесплатная программа, её без труда можно скачать на официальном сайте. Установка быстрая и не требует никаких ключей активации. Когда запустите программу, в верхних вкладках найдите «Gif-анимация». Добавьте фото, а дальше без труда можно разобраться с дополнительными настройками, например, параметрами перехода. И сохраняете ваш готовый файл.

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

На этом наша статья заканчивается. В целом же, сделать гифку из фото и из видео – дело не такое трудное, как оказалось. Если у вас остались вопросы по поводу статьи или самого процесса, пишите в комментариях. Будем рады помочь. Удачи!

Любите новые технологии? Подписывайтесь на наш канал на Дзене!
У нас всегда найдется, что почитать и чем вас удивить. Читать нас на Дзене

Вы дочитали до самого конца?

Была ли эта статься полезной?

Да Нет

Что именно вам не понравилось? Статья была неполной или неправдивой?
Напишите в клмментариях и мы обещаем исправиться!

Задумывались ли вы, как создаются анимированные GIF-файлы? Автор урока предлагает вам за одну ночь освоить некоторые секреты анимации с помощью этого урока. Так же вы научитесь использовать Шкалу времени (Timeline) , которая доступна в версии Photoshop CS6. А теперь начнём!

Результат урока.

Шаг 1

Создайте новый документ (Ctrl + N ) с размерами файла 800 х 500 пикселей. Залейте фон любым цветом, который вы хотите. Теперь идём в меню Слои - Стиль слоя - Наложение градиента (Layer> Layer Styles> Gradient Overlay). Примените следующие настройки: Стиль Радиальный (Radial), цвета от чёрного (# 000000) к синему (# 54799b), который будет использоваться в центре.

Шаг 2

Создайте новый слой и назовите его Noise Layer . Выберите инструмент Заливка (Paint Bucket Tool) и залейте созданный слой тёмным цветом (# 231f20). Оставьте активным слой Noise Layer и идите в меню Фильтр - Шум - Добавить шум (Filter> Noise> Add Noise). В диалоговом окне настроек фильтра поставьте такие значения: Эффект (Amount) 3%, распределение Равномерное (Uniform) и нажмите ОК.

Шаг 3

Нажмите комбинацию клавиш (Ctrl + U) и в появившемся диалоговом окне настроек коррекции введите значения Насыщенности (Saturation) 100%: Измените этому слою режим наложения на Мягкий свет (Soft Light).

Примечание переводчика: для того чтобы добиться такого цвета как у автора на скриншоте, можно при коррекции Цветовой тон / Насыщенность (Hue/Saturation) значение Цветового тона (Hue) поставить на - 140.

Шаг 4

Добавьте любой текст, который вы хотите. Здесь мы будем использовать текст логотипа сайта 123RF. В стилях слоя используйте Обводку (Stroke). Значения размера обводки выберите по своим предпочтениям.

Примечание переводчика: На скрине автора уже растрированный текст вместе со стилем Обводка. Чтобы у вас получилось так же, после того как применили обводку, уберите Заливку (Fill ) слоя с текстом на 0%, преобразуйте этот слой в смарт объект, а затем растрируйте его.

Шаг 5

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

Тиснение (Bevel & Emboss)

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Наложение цвета (Color Overlay)

Внешнее свечение (Outer Glow)

Тень (Drop Shadow)

Шаг 6

Как только вы закончите создавать световые эффекты с помощью стилей слоя, перейдите в палитру слоёв и уменьшите этому слою значение Заливки (Fill) на 0%.

Шаг 7

Дублируйте слой, который вы создали в шаге 5 и отключите этой копии все стили слоя. Настройте теперь стили так:

Внутренняя тень (Inner Shadow)

Внутреннее свечение (Inner Glow)

Шаг 8

Ниже результат после того как вы применили стили слоя.

Шаг 9

Теперь мы создадим движущиеся световые пятнышки. Создайте 5 слоев поверх существующих, и переименуйте их как 1,2,3, R и F. Если у вас свой текст создайте слои в соответствии с вашими буквами. Сгруппируйте эти слои в папку, которой дайте название Light Spots и смените режим наложения на Осветление основы (Color Dodge).

Активируйте инструмент Кисть (Brush Tool), выберите мягкую кисточку, установите Непрозрачность (Opacity) на 95% и белым цветом нарисуйте пятнышки поверх текста. Для каждой буквы отдельное световое пятно на своём слое. Ниже на скриншоте вы можете рассмотреть, как слои выглядят у автора в палитре слоёв.

Шаг 10

Теперь идём в меню Окно - Шкала времени (Window > Timeline). Вы заметите, что ваши слои уже построены в этой палитре в левой её части. Выделите каждый из пяти слоёв со световыми пятнами, которые находятся в группе Light Spots и убедитесь что индикатор текущего времени (голубой слайдер) стоит на нулевом кадре. Теперь на каждом слое в группе, при его активности, нажмите на опцию Позиция (Position), чтобы создать ключевой кадр.

Примечание переводчика: Для того чтобы активировать шкалу времени, нажмите кнопку Создать временную шкалу для видео (Create Video Timeline) и все ваши слои загрузятся в шкалу времени. Выделен в ней будет тот же слой или группа, что и в палитре слоёв.

Шаг 11

Установитеиндикатор текущего времени (голубой слайдер) на отметке 01:00 F и переместите слои со световыми пятнами по траектории их движения относительно контура буквы.

Шаг 12

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

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

Навигация

Однако сегодня до сих пор многие задаются вопросом: «Как создать гифку самому?». Именно на этот вопрос мы и постараемся дать развернутый ответ в данной статье.

Что представляет собой GIF-анимация или «гифка»?

Что представляет собой GIF-анимация или «гифка»?

• Гифка (GIF) – анимированная картинка, в которой поочередно меняются кадры, создавая тем самым движущееся изображение. Если сказать другими словами, то это маленький видеоролик, преобразованный в графический формат, который просматривается стандартной программой для просмотра изображений и отображается на всех web-страницах.
• Так же гифка весит в 10-100 раз меньше видео, в зависимости от частоты показанных в ней кадров и размера изображения. Именно поэтому GIF-анимацию стали широко использовать разнообразные интернет-ресурсы ещё в середине 2000-х годов в качестве рекламных баннеров.

Пример поздравительной новогодней гифки

• Так как формат GIF является графическим, то для просмотра гифок не требуется каких-либо дополнительных плагинов или кодеков. Например, таких как Flash Player. Однако существует ряд программ, которые не поддерживают GIF-анимацию. Одной из таких программ является стандартный графический редактор Paint. Если открыть в нём гифку, то на экране отобразится только первый её кадр. Если случайно или специально сохранить через Paint гифку, то она перестанет двигаться и будет выглядеть как стандартное изображение.

Как создать GIF-анимацию или «гифку» из видео самому с помощью программы?

• Мы разобрались, что такое «гифка» и теперь перейдём непосредственно к её созданию. Существует огромное количество программ, с помощью которых можно преобразить видео в GIF-анимацию. У каждой из них есть свои достоинства и недостатки. Некоторые программы обладают большим количеством настроек и функций, позволяющих создавать гифки высочайшего качества не только из видео, но и из простых изображений.
• Однако такие программы относятся к профессиональным, занимают много места на жестком диске и требует специальных творческих навыков. Поэтому мы рассмотрим самую простую, удобную и доступную программу для создания GIF-анимации из видео под названием «ВидеоМАСТЕР », скачать которую можно с официального сайта .

Рисунок 1. Как создать GIF-анимацию или «гифку» из видео самому с помощью программы?

• Программа представляет собой компактный и удобный видеоконвертер с множеством полезных функций. С его помощью можно преобразовывать видеоролики не только в GIF-анимацию, но и в другие форматы, такие как AVI, MPG4, MPG-2, 3GP, DivX, XviD, DVD и многие другие.

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

• Шаг 1 . Скачайте программу с официального сайта , установите её и запустите. В программе нажмите на вкладку «Файл » и далее на пункт «Открыть ». В открывшемся окне загрузите с компьютера видео, из которого Вы хотите сделать GIF-анимацию.

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

• Шаг 3 . На следующем этапе необходимо выбрать размер конечного изображения. Внизу можно увидеть несколько рекомендуемых вариантов. Выберите один из них или установите собственные параметры в пикселях. Чтобы видео полностью уместилось в указанные рамки, поставьте галочку напротив «Уместить видео ». Если Вас всё устраивает, нажмите кнопку «Далее ».

• Шаг 4 . Конечным шагом будет настройка скорости воспроизведения, установка необходимого количества кадров для показа (FPS) и количество повторов. Количество повторов рекомендуется выставить «Повторять всегда », чтобы анимация автоматически обновлялась. После выставления нужных параметров нажмите «Создать GIF » и сохраните полученный файл к себе на компьютер.
• Дело сделано. Теперь в вашем распоряжении есть анимационное изображение, которое Вы можете загрузить к себе на страницу ВКонтакте, отправить на стенку друзьям и знакомым. На некоторых ресурсах такие изображения можно использовать в качестве аватаров.
• Подробную инструкцию по пользованию программой «ВидеоМАСТЕР » можно посмотреть на видео в конце статьи.

Как создать GIF-анимацию или «гифку» из видео самому с помощью интернет-сервисов?

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

Но в этой статье мы поговорим о зарубежном ресурсе Gifs.com , основным отличием которого является возможность создания GIF-анимации из видео с YouTube, Instagram, Facebook и других популярных социальных сетей, без необходимости их скачивать. Ресурс полностью на английском языке, однако разобраться в нём не составит большого труда. И так, приступим:

• Шаг 1 . Перейдите на сайт gifs.com . В открывшемся окне Вам предлагают загрузить видео с компьютера (Drag & Drop or select file ), либо вставить ссылку на видео с YouTube или другого ресурса (Search or paste a URL ). Попробуем создать гифку из популярного сериала «Теория большого взрыва». Вставьте ссылку на видео с YouTube в соответствующее поле и дождитесь окончания загрузки.

Рисунок 1. Как создать GIF-анимацию или «гифку» из видео самому с помощью интернет-сервисов?

• Шаг 2 . После окончания загрузки откроется редактор с видео. Выберите на временной шкале отрезок, который хотите конвертировать в GIF и по необходимости добавьте различные эффекты из меню слева.

• Шаг 3 . После того, как Вы выбрали отрезок, наложили текст и дополнительные эффекты, нажмите кнопку «Create GIF », дождитесь окончания конвертации и сохраните полученный файл в любое место на жестком диске. На выходе у нас получилась вот такая гифка:

Рисунок 3. Как создать GIF-анимацию или «гифку» из видео самому с помощью интернет-сервисов?

ВИДЕО: Учебник по конвертации видео в программе «ВидеоМАСТЕР»

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

С развитием анимации появились мультфильмы которые практически все смотрели, смотрим и будем смотреть. Дальнейшее развитие привело к появлению фильмов вместе с анимацией. Отличным примером этого является картина «Кто подставил кролика Роджера». С развитием технологий появилась компьютерная анимация которая вывела фильмы и мультики на качественно новый уровень. В этой статье мы научимся создавать простенькие GIF анимации.

Способ хорош тем, что не нужно скачивать и/или устанавливать дополнительные программы.

Существует множество сервисов для создания Gif-анимации. На себе попробовал три из них и из этих трех мне понравился http://gifovina.ru/

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

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

Так же в правом верхнем углу изображения появляется крестик позволяющий удалить картинку .

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

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

После выбора эффекта будет доступна длительность этого эффекта которую так же можно настроить.

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

Можно задать цвета фона, текста и границ фигуры.

Справа в окошке редактирования анимации доступны следующие возможности .

Размер . Есть возможность задать размер анимации. Из выпадающего списка выбираете нужный или выбираете Настроить… и во всплывающем окошке задаете необходимый размер.

Чем больше размер анимации, тем больше вес GIF файла.

GIF анимация создана.

Из видео

Что бы сделать GIF анимацию из видео потребуется установить какую-нибудь программку. Мне понравилась iWisoft Free Video Converter . Скачать эту бесплатную программу можно с официального сайта http://www.iwisoft.com/videoconverter/ .

Скачиваете, устанавливаете и запускаете.

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

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

Сразу открывается папочка с нашей анимацией. У меня получился GIF файл размером 33 МБ при том что исходное видео весит < 19 МБ).

Из видео онлайн

В поле вставляем ссылочку на видео из YouTube и нажимаем Показать видео .

На видео можно будет выбрать любые 10 секунд для создания GIF анимации. Задается это перетягиванием ползунка на шкале ниже видео.

Время начала и конца анимации можно точно указать вручную. Для этого нажимаем ссылку «введите время вручную « и задаем.

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

Когда все готово нажимаем Продолжить.

Вот так просто можно создать Gif анимацию онлайн из видео на YouTube.

GifCam.exe

Есть простенькая программка позволяющая создавать GIF анимации. Скачать ее можно по ссылке

Там же на английском описаны основные возможности утилиты.

Программка не требует установки. Скачиваете архив распаковываете и запускаете GifCam.exe

Открывается окошко программы которое будет снимать то, что вы хотите видеть в своей GIF анимации.