Всем доброго времени суток!

Довольно часто мне задают вопросы относительно картинок. Я, правда, не специалист по рисованию и редактированию фото и пр., но базовые мало-мальские приемы мне знакомы ☺.

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

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

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

И так, перейдем к делу...

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

Из видео

Используемая программа - Видео Мастер

(прим. : программа"Видео Мастер"входит в пакет "Видео Студия")

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

Что касается нашей задачи: в ее комплексе функций есть одна нужная нам - "Создание GIF". Именно ее ниже я и рассмотрю...

И так, вопрос скачивания и установки программы Видео Мастер я опускаю (думаю, с этим проблем не будет ☺).

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

Примечание! Желательно не делать анимацию длиннее 30 сек. Если Вы добавите большое видео, например, целый фильм - то мы из него выберем конкретный 20-30 секундный момент из которого и сделаем гифку...

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

Когда отрывок из видео будет выбран, нажмите кнопку "Далее".

Теперь необходимо выбрать размер анимации. В этом плане программа достаточно гибка: можно задать как стандартный размер для аваторки, например, 250 на 250 пикселей, 200 на 200, так и указать конкретный размер в ручном режиме (что я и сделал в своем примере).

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

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

Чем больше количество кадров - тем более плавная картинка, и тем больше места она будет занимать. Длинные GIF-анимации могут достигать до нескольких десятков МБ!

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

Готовая "гифка"...

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

Из фото и картинок (на компьютере)

Рекомендовать здесь как создавать анимации в больших графических редакторах (типа Photoshop или Gimp) - я не буду. Во-первых, далеко не у всех они есть (а пакеты все-таки большие оп размеру), а во-вторых, пользоваться ими не так просто, даже для создания простейшей гифки. Здесь и сейчас я приведу очень просто способ создания гифки из картинок и фото, буквально за несколько кликов мышкой!

Требующаяся программа: Photo Scape

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

Что касается анимаций - то в Photo Scape с ними работать одно удовольствие. Здесь, конечно, нет сотен инструментов, зато те, что есть - позволяет создать гифку за пару минут (даже тому, кто первый раз запустил программу)!

И так, перейдем к делу.

После запуска программы Photo Scape - перед вами предстанет целое колесо возможностей: редактор, вьювер, шаблоны страниц, комбинация, пакетный редактор, конвертер RAW и пр. Выберите опцию (см. скриншот ниже).

В центре экрана во время редактирования - Вы всегда будете видеть, как меняется ваша анимация (она будет проигрываться автоматически).

Справа вы сможете задать основные настройки анимации: время ее проигрывания (например, 1, 2, 3 сек.), задать эффект (чтобы картинка растворялась на фоне другой или съезжала, ниже у меня приведено два примера), указать размер картинки, цвет фона, по чему выравнивать и пр.

Конечно, в программе не так много инструментов редактирования, зато они все детально проработаны и пользоваться ими легко! Собственно, когда ваша гифка будет доведена до "ума" - просто нажмите кнопку "Сохранить" (в меню справа) .

Кстати, Photo Scape делает гифки достаточно маленькими по размеру, оптимизированными для веб-страничек сайтов. Чуть ниже я привожу пару примеров анимаций с разными эффектами, сделанными в этой программе. По-моему, очень здорово!

Эффект 1. Залить кадр фоном

Эффект 2. Сдвинуть кадр вниз

Из фото и картинок (онлайн способ)

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

От вас лишь потребуется указать ширину и высоту картинки, и скорость ее проигрывания. Далее можно скачать полученную анимацию. Также хочу отметить одну деталь: сервис понимает PNG картинки с прозрачным фоном: т.е. при анимации - он не будет "убирать" предыдущую картинку полностью, а совместит обе картинки (пример ниже).

Кстати, лого для этой записи я сделал как раз на этом сервисе.

Еще один сайт с простым и быстрым созданием анимации. Всё что потребуется от Вас - это загрузить последовательно несколько картинок (или хотя бы одну). Затем выберите размеры будущей анимации (например, 200 на 200 пикселей), и нажмите кнопку "Создать". Через пару мгновений - увидите полученный результат (который можно скачать к себе на ПК).

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

Эффекты к анимации: сердечки, оттенки серого, рамочки

Пример созданной GIF-анимации с сердечками на этом сайте.

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

В общем - огромный пакет инструментов, как в самом настоящем большом редакторе картинок (пример на скрине ниже).

Всем удачи!

Существует несколько способов коммуникации, способных очень точно передать ваше настроение, состояние и даже внутренний монолог. Одним из таких способов является 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) из видео всего лишь за несколько минут, но и провести ряд других полезных операций с видеофайлами, например, изменить формат или улучшить качество видео. Об этом и многом другом вы узнаете из текста далее.

Также вы можете посмотреть подробный видеоурок:

Шаг 1. Установите программу

Нажмите «Добавить» и укажите путь к нужному вам видеофайлу

Шаг 3. Редактируйте ролик

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

Применяйте к видео оригинальные эффекты

Благодаря встроенной библиотеке эффектов у вас есть огромное поле для креатива. Вы сможете сделать изображение ярче с помощью увеличения насыщенности или превратить видео в черно-белый шедевр. Также вы сможете добавить в видео уточняющий комментарий или водяной знак. И, конечно, вам доступна опция для поворота видео на 90°, 180° и 270°.

Шаг 4. Как сделать гиф из видео

Кликните по иконке GIF, расположенной в верхнем углу справа, или выберите опцию «GIF-анимация», которая находится в каталоге форматов. Еще один вариант – выбрать функцию «Создать GIF» в меню «Обработка». Затем обозначьте границы обрезки видео с помощью черных маркеров. Они находятся по краям полосы прокрутки. Теперь укажите размер изображения. Чтобы ваш кусочек видео полностью вошел в кадр, воспользуйтесь опцией «Уместить видео». Кроме того, область кадрирования вы сможете задать самостоятельно, вручную. Просто выберите необходимый пресет и жмите кнопку «Далее».

Настраивайте параметры будущей GIF-картинки

Шаг 5. Как сохранить GIF

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

Вот вы и узнали, как сделать гифку из видео используя программу «ВидеоМАСТЕР». Теперь у вас в руках есть инструмент, с помощью которого вы сможете удивить друзей, создавая уникальные, веселые и эксклюзивные анимированные картинки. Для этого нужен только исходный материал – любимый фильм, клип или видео из личного видеоархива. Гиф используют многие компании для рекламных баннеров. Формат GIF наиболее удобен для хранения и передачи данных, ведь он занимает гораздо меньше места, чем объемные видеофайлы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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