GIF-анимация появилась еще на заре зарождения интернета. Особую популярность гифки получили среди веб-мастеров и форумчан, так как именно они больше всего использовали GIF-картинки в работе с сайтами и в общении. С появлением Flash-анимации о гифках немного позабыли, но до сих пор файлы в GIF-формате встречаются на сайтах в качестве баннеров. Вам потребовалось создать анимацию, а вы не знаете, как делать гифки? Данная статья поможет разобраться в обилии программ и способов создания GIF-файлов.
По сути, в гифке содержится несколько картинок, которые плавно сменяют друг друга. Таким образом, гиф-анимация – это своеобразный видеоролик без звукового сопровождения, не требующий плеера для воспроизведения, так как все браузеры поддерживают GIF-анимацию. Благодаря гифкам можно «оживить» страницу, сделать ее более интересной и информативной.
Мир софта не стоит на месте, и с каждым днем в интернете появляются новые программы для решения тех или иных задач. Для создания GIF-анимации разработано множество приложений, среди которых можно выделить следующие программы: GIF Animator, Jasc Animation Shop, Bannershop GIF Animator, CyD GIF Studio Pro, 2D&3D Animator, ImageReady CS, CoffeeCup GIF Animator. Xara3D. Часть из них – самостоятельные программы, а некоторые, к примеру ImageReady CS, являются лишь дополнением к популярному Adobe Photoshop CS. Конечно, вы можете делать гифки в Фотошопе, но для этого вам придется его приобрести одновременно с надстройкой ImageReady CS.
Несомненно, почти весь софт для создания гиф-анимации платный. Но вы можете воспользоваться программой Easy GIF Animator, у которой есть определенный триальный период работы. Так, программа Easy GIF Animator запускается бесплатно 20 раз, после чего требует ввода ключа. Утилита проста в управлении и слегка русифицирована, что облегчит ее освоение.
Создание GIF-анимации в программе Easy GIF Animator
Для начала вам нужно скачать программу EGA с официального сайта http://www.easygifanimator.net . Открываем ссылку в браузере и кликаем по зеленой кнопке «Download now». Запускаем скачанный инсталлятор программы и устанавливаем его на компьютер.
После успешной установки запускаем «Гиф Аниматор». Откроется небольшое окошко с тремя кнопками:
- Если вы готовы купить программу, кликаем «Buy Now», переходим на сайт и оплачиваем покупку.
- Вы уже приобрели Easy GIF Animator? Кликните «Activate» и введите ключ.
- Желаете воспользоваться триальной версией (20 запусков)? Нажимаем кнопку «Evaluate» и переходим в основное окно программы.
Итак, пора приступить к созданию гифки. Кликаем кнопку «Создать новую анимацию».
В новом окошке добавляем фоновое изображение. Если вы уже определились с размером GIF-анимации, то лучше загрузить уже готовую обрезанную картинку, так как в программе нет инструментов для обрезки фона. После загрузки кликаем «Далее» и переходим к следующему этапу создания гиф-анимации.
Во вкладке «Цикл и задержка» устанавливаем время воспроизведения кадров анимации и количество циклов ее показа.
Если фоновое изображение, загруженное вами, имеет большой размер, то «мастер анимации» во вкладке «Позиция изображения» попросит вас определиться с местом размещения.
По окончании кликаем кнопку «Завершить» и переходим к этапу «нанесения текста» на изображение.
Пока вы не добавите текст, слева в программе будет отображаться лишь 1 кадр. Добавляется текст кнопкой «Animated Text».
При создании текстового эффекта вы можете указать, как должен начаться показ текста и как его скрыть. Помимо этого, есть возможность выбрать шрифт, его цвет и место расположения текста.
Когда текст введен и все настройки к нему применены, кликаем кнопку «ОК».
В левой части экрана появится множество кадров (фреймов). Из них, собственно говоря, и состоит создаваемая вами анимация. Информация о количестве кадров, размере анимации и времени ее воспроизведения находится в нижней левой части программы.
В итоге гифка, сделанная в программе Easy GIF Animator, может выглядеть следующим образом:
При этом качество анимации и ее красота зависят от ваших предпочтений и умения работать с программой. Подробно и наглядно об Easy GIF Animator рассказано в этом ролике:
Другие способы создания GIF-анимации
Впрочем, вы также можете использовать различные сервисы для создания gif-анимации. К примеру, сконвертировать гифки из видео онлайн можно на сервисе http://www.yt2gif.com , который поддерживает YouTube-ролики. Кроме этого, сделать из видео GIF-анимацию можно в программе Format Factory. Популярная «Фабрика форматов» позволяет конвертировать любые видеоролики в файлы формата.gif. Достаточно лишь выбрать в качестве конечного файла.gif, добавить видеоролики и нажать кнопку «Старт». Правда, Format Factory не может конвертировать в гиф большие по времени видеофайлы.
Помните, что любая гиф-анимация ограничивается лишь вашей фантазией. Анимацию по сути создаете вы, а не программа. Утилита является лишь инструментом в работе и ничем большим.
Гифка – анимированное изображение в формате.gif. Оно было разработано почти 30 лет назад специально для использования в сети, и до сих пор широко распространено. С 2004 года существует альтернативный формат APNG от Mozilla. Если описывать гифку кратко – это картинка, представляющая собой определенную последовательность кадров, которые сменяют друг друга. Их мы и научимся делать.
Чтобы создать гифку, нам понадобится графический редактор, который поддерживает функцию анимирования. Из бесплатных можно взять GIMP с официального англоязычного сайта или даже посмотреть его онлайн (потребуется флешплеер). Если у вас Windows выше XP-версии, ОС имеет встроенный удобный инструмент для создания рисунков различной сложности – Paint.NET В принципе можно использовать любой графический редактор с поддержкой слоев, но мы остановимся на самых популярных и доступных. Ищем программу в “Стандартных” меню “Пуск”. Здесь же разместился хорошо известный нам “Пейнт”. Итак, открываем картинку в Paint.NET или рисуем ее прямо в программе – например так.
Как сделать GIF из видео - создаём гиф
Гиф анимация в последние несколько лет стала пользоваться большим спросом среди интернет-пользователей. Подходящая анимированная гифка хорошо передает эмоции и придает комментарию больше веса. Очень популярны гифки, созданные на основе сцен из популярных сериалов или фильмов. Как сделать GIF из видео? Да, вы можете самостоятельно создать оригинальную гифку (гиф, gif) из видео - такую, как вы хотите. Все, что нужно для этого - специальная программа, например, «ВидеоМАСТЕР».
С помощью данного приложения вы не только сможете самостоятельно сделать прикольный гиф (gif) из видео всего лишь за несколько минут, но и провести ряд других полезных операций с видеофайлами, например, изменить формат или улучшить качество видео. Об этом и многом другом вы узнаете из текста далее.
Также вы можете посмотреть подробный видеоурок:
Шаг 1. Установите программу
Нажмите «Добавить» и укажите путь к нужному вам видеофайлу
Шаг 3. Редактируйте ролик
Перед тем как сделать gif (гиф) из видео, можно улучшить качество исходного изображения или просто разнообразить видео спецэффектами, надписями, а также при необходимости развернуть видеозапись. Чтобы всё это сделать перейдите в меню «Эффекты» . Скорректировать основные параметры изображения, т.е. контраст, яркость, цветовой тон и насыщенность можно вручную или воспользовавшись автоматической настройкой.
Применяйте к видео оригинальные эффекты
Благодаря встроенной библиотеке эффектов у вас есть огромное поле для креатива. Вы сможете сделать изображение ярче с помощью увеличения насыщенности или превратить видео в черно-белый шедевр. Также вы сможете добавить в видео уточняющий комментарий или водяной знак. И, конечно, вам доступна опция для поворота видео на 90°, 180° и 270°.
Шаг 4. Как сделать гиф из видео
Кликните по иконке GIF, расположенной в верхнем углу справа, или выберите опцию «GIF-анимация», которая находится в каталоге форматов. Еще один вариант – выбрать функцию «Создать GIF» в меню «Обработка». Затем обозначьте границы обрезки видео с помощью черных маркеров. Они находятся по краям полосы прокрутки. Теперь укажите размер изображения. Чтобы ваш кусочек видео полностью вошел в кадр, воспользуйтесь опцией «Уместить видео». Кроме того, область кадрирования вы сможете задать самостоятельно, вручную. Просто выберите необходимый пресет и жмите кнопку «Далее».
Настраивайте параметры будущей GIF-картинки
Шаг 5. Как сохранить GIF
Можно приступать к завершающему этапу создания гифки из видео – настройке параметров. Выберите частоту кадров и количество повторов. На этом этапе вы также можете уменьшить или увеличить скорость воспроизведения. Когда все параметры будут выбраны, рекомендуем просмотреть результат еще раз. Если все получилось именно так, как вы хотели, нажмите кнопку «Создать GIF» . Не забудьте указать папку, в которой сохранится ваш файл.
Вот вы и узнали, как сделать гифку из видео используя программу «ВидеоМАСТЕР». Теперь у вас в руках есть инструмент, с помощью которого вы сможете удивить друзей, создавая уникальные, веселые и эксклюзивные анимированные картинки. Для этого нужен только исходный материал – любимый фильм, клип или видео из личного видеоархива. Гиф используют многие компании для рекламных баннеров. Формат GIF наиболее удобен для хранения и передачи данных, ведь он занимает гораздо меньше места, чем объемные видеофайлы.
Ранее на сайте мы рассматривали сторонние , однако большинство из них запросто может заменить обычный Фотошоп. Анимированные GIF файлы с его помощью делаются достаточно легко и быстро. Они, как правило, состоят из нескольких изображений (кадров), которые при пошаговой смене и образуют финальный результат. Сегодня постараемся максимально детально рассмотреть данный вопрос от А до Я:
Скриншоты ниже представлены из Photoshop СС, но работа с GIF анимацией в CS6 и других версиях программы плюс-минус аналогична. Возможно, визуально инструменты будут немного отличаться, но в целом, принцип и алгоритм действий похожие. В качестве примера рассмотрим тривиальную задачу как создать GIF анимацию в Фотошопе из фотографий, сменяющих друг друга. Недавно с помощью этого руководства сделал гифку о своих приключениях для итогового поста за 2016 год в персональном блоге.
Процесс занял буквально минут 5-10. Тут важно просто внимательно выполнять все шаги. В конце поста найдете англоязычный видеоурок по данной теме.
Добавление изображений GIF анимации в Photoshop
Первым делом нужно загрузить в графический редактор все картинки/фото, которые будут участвовать в анимации. Добавьте их в один проект разными слоями — этот будут кадры для результирующего GIF файла. Проверьте размеры картинок и их отображение чтобы все было как вам нужно. Слои можно скрывать (с помощью иконки глаза слева от слоя) дабы просматривать все объекты.
В центре данной панели есть выпадающий список, где нужно выбрать вариант «Create Frame Animation» и кликнуть по кнопке. В результате этого действия Timeline немного преобразится, и вы должны увидеть в качестве первого кадра картинку из самого верхнего слоя.
На следующем шаге выделяете все слои в проекте (кликаете по ним удерживая клавишу Ctrl). После этого открываете контекстное меню в правом верхнем углу окна Timeline и по выбираете «Make Frames From Layers».
Из всех видимых и выделенных слоев Adobe Photoshop создаст кадры анимированного GIF. В результате увидите их в панели Timeline.
Настройки GIF анимации в Фотошопе
Здесь вам нужно будет указать 2 вещи: продолжительность отображения разных кадров + число повторений гифки. Начнем с первого. Под каждым объектом-картинкой в Timeline найдете время показа и стрелочку вниз. Кликаете по ним и во всплывающем меню выбираете длительность карда.
Элементам можно указывать разное время либо задать параметр одновременно для нескольких из них (совместное выделение как и в слоях — с помощью Ctrl).
Чтобы «зациклить» GIF в Фотошопе при создании анимации выбираете значение Forever в соответствующей настройке как показано на скриншоте ниже.
Тамже есть возможность указать любое нужное вам число повторений. Рядом находится кнопка Play, позволяющая проиграть анимированный GIF и посмотреть как будет выглядеть итоговый результат.
Сохранение GIF анимации в Фотошоп
В финальной части нашего руководства рассмотрим как правильно сохранить GIF анимацию в Фотошопе. Для этой цели используется знакомый всем инструмент Save for Web, однако в последних версиях Adobe Photoshop СС он располагается в новом месте меню (File — Export). К счастью Alt + Shift + Ctrl + S все еще работает.
В открывшемся окне настроек надо выбрать формат GIF, а также убедиться, что настройка Looping Options установлена в Forever. В нижнем правом углу окна есть возможность запустить созданный вами анимированный GIF в Photoshop для предпросмотра.
Если все функционирует так, как нужно, кликаете Save и сохраняете файл на локальном компьютере. Чтобы проверить работоспособность GIF требуется открывать его в браузере, т.к. встроенный просмотрщик Windows анимацию не проигрывает.
Кстати вы также легко можете экспортировать ваш проект в видео формат. Порядок действий аналогичный как при сохранении GIF анимации, но в Фотошоп меню выбираете пункт File — Export — Render Video.
В открывшемся окне будут разные настройки видео, но ничего дополнительно менять не нужно, просто кликаете по кнопке Render. В итоге получите mp4 файл со слайдшоу фотографий/изображений.
Напоследок предлагаем глянуть англоязычный видеоурок про создание анимированных GIF в Photoshop. Алгоритм работы там такой же, как и в статье, но возможно, вам будет проще воспринимать информацию по видео.
Если у вас остались еще какие-то вопросы о том как сделать GIF анимацию в Фотошопе или есть дополнения, пишите в комментариях.
У нас в 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 анимация сделает акцент на одном аспекте.От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!
