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

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

Facebook, iPhone сообщения, Android-платформы — все они имеют клавиатуру со встроенным набором анимированных изображений. Осмелимся сказать, что GIF-анимация — это новые (emoji).

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

Создание гифки, которую вы видите ниже, заняло всего 75 секунд:

Создание анимированного GIF-изображения

1. Зарегистрируйтесь в Canva

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

2. Выберите изображения

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

Также бесплатную графику вы можете найти на таких ресурсах как Vecteezy.com, HubSpot (если вы являетесь их клиентом) и Creative Market.

За основу было взято следующее изображение из библиотеки Canva:

3. Создайте слои

Анимированные GIF-изображения выглядят «анимированными» за счет того, что они объединяют несколько статичных изображений/слоев в циклы. Вам необходимо создать каждый из этих слоев.

Чтобы создать гифку как в примере с текстом в качестве анимированной части, вам необходимо:

  • Убрать с исходной картинки все надписи и оставить только фон, границы, и т.д.
  • Добавить первую строку текста: «Только представьте!» (Guess what!)
  • Скачать полученное изображение.

После этого:

  • Больше ничего не трогайте. Это важно! Если передвинуть элементы или текст между слоями, у вас не получится плавной анимации.
  • Добавьте вторую строку текста: «Я создал этот GIF» (I made this GIF).
  • Скачайте полученное изображение (теперь у вас их два).

Повторите эти шаги еще раз с последней строкой текста «За 75 секунд» (In 75 seconds) и снова скачайте полученное изображение.

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

  • Вы рассказываете историю.
  • Обеспечьте соответствие элементов между слоями.
  • Когда это возможно, используйте готовую графику.
  • Canva позволяет вам загружать свои собственные изображения.

4. Создайте анимированное GIF-изображение

Для создания анимированного GIF-изображения рекомендуем вам воспользоваться сервисом GIPHY.

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

С помощью этого инструмента вы можете создать видео или анимированное GIF-изображение и сохранить его на своем компьютере в любом из предложенных форматов.

Вот как им пользоваться:

1. Перейдите на сайт GIPHY и нажмите кнопку «Create» («Создать»).

2. Для создания анимированного GIF-изображения перейдите на вкладку Slideshow:

3. Загрузите ваши слои.

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

7. Поздравляем! Вы только что создали анимированное GIF-изображение за считанные секунды.

Создание GIF-анимации из видео

В GIPHY вы можете создать GIF-анимацию не только из изображений, но также из видеофайлов. Вот как это можно сделать:

1. Загрузите видеофайл

2. Выберите нужный фрагмент видео

3. Сохраните полученный файл

Дополнительные возможности

GIPHY позволяет сделать вашу GIF-анимацию еще привлекательнее за счет добавления различных фильтров, стикеров и текста.

Для этого перейдите на вкладку GIF Editor и вставьте в поле ввода ссылку на ваш GIF-файл.

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

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

3. Ищем свою папку с подготовленными фото и кликаем левой кнопкой мыши на первую фотографию, зажимаем клавишу Shift, и кликаем по последней, тогда они выделяются все. Жмем ОТКРЫТЬ.

4. В вашем фотошопе открываются все фотографии. Начинаем создавать слои, которые нам понадобятся для анимации или создания gif картинки . Я открыла специально широкую фотографию. И она будет 1-ым слоем.

Чтобы преобразовать фото в слой, кликаем по нему два раза левой кнопкой мыши.

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

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

7. После этого вокруг картинки начнут бегать маленькие тире, это и есть выделение. Теперь идем в меню — редактирование — скопировать.

8. Возвращаемся к нашей первой фотографии, которая уже со слоями, идем в меню — редактирование — вставить. И наша узенькая фотка вставляется на новый слой. Но она не может оставаться такой узкой. Нам нужно добавить фон под нее. Для этого кликаем по иконке (1), перетаскиваем слой под узкое фото, затем пипеткой (2) подбираем любой понравившийся вам цвет, кликнув курсором по фото. Я выбрала светло-зеленый. И заливаем новый слой, для чего мы активизируем инструмент заливка (3) и потом кликаем левой кнопкой мыши по рабочему полю фотографии. Обратите внимание, что в этот момент активным должен быть новый прозрачный фон. Активные слои выделяются синим цветом. После ваших действий прозрачный слой окрасится.

9. Теперь нам надо объединить два слоя (узкую фотографию и фон). Наступаем левой кнопко мыши на первый слой. Зажимаем клавишу Shift и кликаем по второму слою. Они выделились синим цветом. Идем в меню — слои — объединить слои.

10. Получаем такую картинку.

11. Повторяем пункты 6 — 10 моего урока, чтобы создать слой с еще одной узкой фотографией. Он у меня слой 2. И создаем еще один новый прозрачный слой для размещения там последней широкой фотографии (слой 3).

12. Для этого выполняем пункты урока 6, 7, 8. Все. Готово. Слои для нашей gif картинки мы создали.

13. Можно начинать анимирование и с вашими слоями, но я решила создать подложку под нашу картинку. Для этого топаем в меню — изображение — размер холста. Увеличиваем наш холст на 50 пк по ширине и высоте. Жмем ОК.

14. У нас получилось вот так.

15. Создаем новый слой (у меня слой 4), перетаскивам его в самый низ под все фотографии, вы можете сделать подложку того же цвета, что и фон в ваших узких фотографиях. Я выбрала цвет подложки немного темнее.

Оформляете вашу подложку любым способом. Надеюсь, что вы знаете, как выставляются параметры слоя, но если нет, то это просто. Наступаете на нужный слой и кликаете по нему дважды левой кнопкой мыши и у вас открывается окно с параметрами вашего слоя, а там отдельно открываете каждый отдельный параметр и вы применяете или изменяете его настройки. Я применила эффект в параметрах слоя Внутренняя тень и Внутреннее свечение с параметром слоя Умножение… Цвет тени немного темнее тона подложки. Но здесь я не берусь навязывать вам мое мнение. У вас есть свое видение. Пробуйте, меняйте настройки. Это не страшно. Всегда можно вернуться к первоначальному результату, для чего идете в меню — редактирование — вернуться назад.

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

16. Настало время поставить свой логотип, особенно это важно, если ваша картинка будет располагаться на вашем сайте. Для обычных пользователей это можно не применять. Напомню, что я делала урок фотошопа о . Пробегусь вкратце: идем в меню — файл — поместить. Ищем свой файл PSD с подготовленным заранее логотипом, наступаем на него и кликаем по кнопке Поместить.

17. Перетаскиваем слой с логотипом на самый верх, как у меня. При необходимости увеличиваем логотип до нужного размера, для чего идем в меню — редактирование — масштабирование. С зажатой клавишей Shift растягиваем или уменьшаем логотип. Активируем инструмент «перемещение» (самый верхний инструмент со стрелкой и + в панели инструментов) и перемещаем логотип на нужное место.

Все подготовлено с созданию анимации.

17. В самом первом кадре анимации у вас должна быть открыта видимость со слоем подложки, первый слой с вашей фотографией (в моем случае слой 0) и логотип (позиция 1). Для хорошего просмотра вашей фотографии устанавливаем время задержки 5 сек (позиция 2). После определения времени задержки и установки его в первом кадре, все последующие кадры будут с заданным временем 1 кадра, т.е. 5 сек в моем случае. Для создания второго кадра жмем на иконку, показанную на позиции 3.

18. Во втором кадре меняем видимость слоя с первой картинки на вторую, так же, как показано на моем скрине.

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

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

Рассмотрим небольшой обзор программ, которые сможет освоить начинающий gif-аниматор.

Создание gif анимации из видео

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

Заходим на сайт и скачиваем . Устанавливаем программу на ПК. Открываем.

Программа будет на английском языке. Для смены языка нажмите «Вид» и далее как на картинке.

Загружаем видео. Нажимаем Ctrl+Shift+V -открывается проводник Windows выбираем видео.

Внизу ползунком отмечаем начало гиф -анимации. И вверху делаем отметку начала нажимая на кнопку начала (стрелочка смотрит влево).

Внизу отмечаем ползунком конец анимации. И нажимаем кнопку конца (стрелочка смотрит вправо).

Затем нажимаем вверху на кнопку извлечения gif (на кнопке синяя стрелка вниз).

Производится обработка.

Нажимаем на кнопку сохранения файла и сохраняем файл себе на компьютер. Вот что у нас получилось.

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

Easy GIF Animator

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

GIF Movie Gear

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

Создание gif анимации из фотографий

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

Но мы только учимся и начнём не с монстра фотошопа, а с редактора попроще, например, бесплатного t. Совершенно не важно в каком редакторе делать кадры (картинки)

Начинаем создавать. Сначала подготовим картинки.
1. Все картинки должны иметь одинаковые параметры, размер, разрешение.
2.Все сохраняется в формате файлов gif. Именно это и обозначает анимацию.
3.Все картинки желательно пронумеровать. Можно дать название каждому слою, но с нумерацией, путаницы будет меньше. Т.е. самое простое — это дать цифровые названия файлов и в такой последовательности они и будут прокручиваться, например, 1.gif 2.gif 3/gif и т.д.

Например, так:

Все готово. Отправляем все картинки в редактор UnFREEz, он достаточно простой и новичок с легкостью справится.

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

В этой статье вы узнаете как создать анимированную GIF-картинку.

Из чего сделаны GIF-картинки

Гифы создают из серии изображений или видео. Объединяете несколько фотографий или видеокадров в анимированное изображение. Аудиодорожка при этом не сохраняется.

Гифки можно создавать на базе профессионального оборудования (например, Adobe After Effects) и на специализированных сайтах. Многие поддерживают интеграцию с Facebook и Twitter и предлагают забавные штуки (стикеры, например).

Инструменты для создания GIF

Giphy

Популярный, простой и бесплатный инструмент.

Чтобы создавать гифки, регистрироваться не обязательно. Но аккаунт позволяет сохранять результаты на ресурс и выкладывать в собственный канал вида www.giphy.com/channel/username .

Итак, проходите простую регистрацию. Затем жмете Create в правом верхнем углу.

  • GIF Maker. Создать гифку из видео с YouTube или компьютера.
  • Slideshow. Создать гифку из нескольких изображений.
  • GIF Caption. Добавить титры и текст к гифке.
  • GIF Editor. Добавить стикеры, фильтры и анимацию.

Первые два варианта создают гифку с нуля.

GIF из видео

Теперь установите время старта и длительность:

Примите условия соглашения и нажмите Create:

Вот что у нас получилось:

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

Нажмите Slideshow → Browse и загрузите изображения, которые хотите объединить. Максимальный размер - 100 МБ.

Выберите скорость переключения между кадрами:

Можно добавить титры, изменить порядок показа, убрать или добавить изображения, а также добавить теги. Теперь жмите Create Slideshow.

Вот что у нас получилось:

Гифку можно сразу выгрузить в Twitter, Facebook и Instagram. Но лучше предварительно загрузить ее, чтобы при выгрузке видеть анимацию, а не ссылку на нее.

За секунды поможет сделать смешное видео или картинку. Можно загрузить видео из Facebook или Instagram. Далее все просто: задайте время, длительность и скорость воспроизведения. К готовой гифке можно добавить титры или стикеры.

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

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

Позволяет жонглировать скриншотами экрана: делать гифки и обмениваться ими. Тарифы - от $10 в месяц. Бесплатный пробный период - 14 дней.

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

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

Как использовать GIF

Скажите «Спасибо!»

Благотворительная организация Red Nose Day благодарит всех, кто участвовал в сборе средств для бедных.

«Спасибо! Мы собрали больше тысячи фунтов!»

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

Покажите продукт

Например, вот такие аппетитные блинчики:

«Блины с начинкой - что может быть лучше этой весной?»

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

Покажите, как использовать продукт

Одна анимированная картинка заменит строки текста и сократит время работы.

Наполняйте блог и генерируйте трафик

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

General Electric показывает часть рабочего процесса по созданию суперэффективной экологичной турбины:

Можно сделать серию забавных гифок для обучающих курсов.

В сети популярны блоги с рецептами или советами в формате анимированных картинок.

Покажите характер бренда

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

Giphy позволяет от имени компании регистрироваться, создавать и выкладывать гифки на внутренний канал. Эти гифки - часть поискового процесса во всех интегрированных в Giphy соцсетях и мессенджерах (Twitter, Facebook, WhatsApp, iMessage).

Используйте уникальные теги, чтобы ваши гифки легко находили.

Вдохновения и успехов!

Gif анимация или гифка - формат картинки, изобретенный в далеком 1987 для интернета. Возможно, никто и не думал, что он в наше время будет таким популярным для так называемой gif анимации. Но с помощью таких сайтов, как tumblr и пабликов ВКонтакте вроде #other дошел до массовой культуры.

Рассмотрим в статье как сделать GIF анимацию, чтобы быть в тренде интернета.

Следуем инструкции как создать Gif анимацию

  1. Скачиваем программу на свой компьютер. (666кб)
  2. Запускаем. Программа автоматически будет поверх всех окон со своей рамкой.
  3. Выделяем область для записи, просто изменив размер рамки, и жмем REC.
  4. После записи жмем Save.

Интерфейс программы GifCam

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

Чтобы создать ГИФ анимацию из видео, запустите какое-нибудь видео и выделите нужную область.

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

Можно запустить несколько программ GifCam одновременно, чтобы записать интерфейс программы в виде гиф, например.

Можно добавить кадры самому, нажав FRAME. Чем больше кадров, тем больше весит наша картинка. Программа оптимизирует картинку: когда картинка статичная, вместо того, чтобы добавлять новые кадры, добавляются задержки (delays). Программа GifCam не рисует постоянно новые кадры. Неизменяемая область становится неким зеленым экраном для экономии пикселей.

Есть возможность редактирования. Заходим в Edit и видим кадры в горизонтальной прокрутке. Нажав правой кнопкой можно вызывать контекстное меню. В нем доступно удаление: одного кадра, выбранного кадра до начала или конца, удаление всех кадров. Добавлять или удалять задержки. «Delete even frames» нужно, чтобы удалить половину кадров и сохранить анимацию (для уменьшения размера). Есть галочка показывать зеленый экран или нет.

Сохранения возможны в 5 форматах разных по качеству: 256 цветов, 12, серый и так далее.

  • При записи видео с веб-сайта вы можете уменьшить масштаб страницы браузера для захвата GIF меньшего размера.
  • Чем меньше цветов GIF, тем он меньшего размера. Старайтесь делать не более 15 мб.
  • Нажав кнопку STOP, можно будет запись возобновить, где вы остановились. Если надо начать все заново нажмите NEW в подпунктах кнопки SAVE
  • Прежде чем отправлять GIF спросите себя: «Это хороший GIF?» Если нет, то не отправляйте. Если да, то можете оставить в комментариях.
  • Многих людей раздражает анимация.

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

В комментариях жду ваши любимые Gif картинки.