Создание GIF-анимации. Как создавать гифки: самое полное руководство

Скройте слои, чтобы редактировать нижние слои (если хотите). Если вы планируете редактировать изображения или добавлять к ним текст, в списке скройте все слои, расположенные над слоем, который вы редактируете. Есть два способа сделать это (в окне «Слои»):

• Нажмите на значок в виде глаза рядом со слоем, чтобы скрыть его. Нажмите на тот же значок, чтобы отобразить слой.
• Или выделите слой и задайте уровень непрозрачности (в верхней части окна «Слои»). Низкое значение непрозрачности сделает слой более прозрачным. Это полезно, если вы хотите добавить текст или другие дополнения в несколько кадров.

Редактирование изображений (по желанию). или просто выполните следующие действия. Выберите изображение, которое вы хотите отредактировать, в окне «Слои» (справа), а затем используйте следующие инструменты:

• В окне «Панель инструментов» (слева) выберите инструмент «Масштаб», чтобы изменить размер изображения. Сделайте все слои одинакового размера.
• В окне «Панель инструментов» (слева) выберите инструмент «Текст», чтобы добавить текст. Введите текст и используйте всплывающую панель инструментов, чтобы задать размер, тип и цвет шрифта. По окончании нажмите «Слой» - «Объединить», чтобы объединить слой с текстом со слоем, расположенным под ним.

Просмотрите анимацию. После того, как вы завершили редактирование, нажмите «Фильтры» - «Анимация» - «Воспроизвести». Нажмите на значок воспроизведения в открывшемся окне для просмотра анимации.

Задайте скорость анимации. Откройте окно «Слои» и щелкните правой кнопкой мыши (или Control+ правая кнопка мыши на некоторых компьютерах Mac) по слою. Выберите «Редактировать атрибуты слоя». После имени введите (XXXXms), заменив ХХХХ на число миллисекунд, в течение которых данный слой должен отображаться. Сделайте это с каждым слоем. Воспроизведите анимацию еще раз, чтобы просмотреть ее с внесенными изменениями.

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

Оптимизируйте анимацию для ускорения ее загрузки. Нажмите «Фильтр» - «Анимация» - «Оптимизировать (для GIF)». Это приведет к созданию копии исходного файла гораздо меньшего размера. В следующих шагах работайте с уменьшенной копией исходного файла.

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

Навигация

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

Что представляет собой 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-анимацию или «гифку» из видео самому с помощью интернет-сервисов?

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

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

Вот одна из анимашек которую я сделала в PixMix за 5 минут

Как начать пользоваться онлайн фоторедактором PixMix

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

Картиночки анимашки, которые вы будете размещать на картинке — не двигаются и не уменьшаются, они просто замостятся, то есть рядами поместятся на фоне. И чтобы оставить одну или несколько в нужных местах, вам надо будет просто подтереть их инструментом «Стирательная резинка».

Вы можете написать блестящий или однотонный текст с обводкой на своём анимированном шедевре. Для этого надо кликнуть на букву «T» (жёлтая стрелочка). Написать текст (синяя стрелка). Наверху выбрать стиль шрифта (Бирюзовая стрела) и обводку (сиреневая) или без обводки (красная).

Выбрать чернила слева (то есть заливку текста), когда вы нажимаете на текст в онлайн фоторедакторе автоматически выставляется раздел «Чернила»

Жмите на слово «Хорошо» и увидите текст на своей анимационной картинке.

Вокруг текста вы увидите прямоугольную рамку и инструменты в каждом углу этой рамки:

1. Крестик – удалить
2. Стрелочка с двумя наконечниками – сделать надпись больше или меньше
3. Стрелочка закруглённая – наклонить в одну, либо в другую сторону
4. Прямоугольник в кружке – размножение текста

Вы можете менять «чернила», обводку и стиль текста, не меняя самого текста. Нажимать «Хорошо» и смотреть что у вас получится.

А после того как вы создадите свой шедевр – нужно нажать на зелёную галочку внизу слева от картинки. Когда сервис сгенерирует картинку, вас перекинет на страницу где нужно ввести название картинки. Описание – не обязательно.

Там же вы можете выбрать скорость анимации. По умолчанию там выставлена средняя.

И в заключении надо нажать на зелёную кнопку «Реестр».

После этого фоторедактор PicMix сгенерирует вашу блестящую анимированную картинку. И под своей анимационной картинкой вы увидите вот такие функции:

А ещё вы сможете добавить использованные в этой анимационной картинке блестяшки к себе в избранное. И они у вас появятся в разделе «Мои любимые марки» и вы их увидите когда начнёте создавать новую gif картинку. Для этого наводим на марку мышку и в выпавшем окне кликаем на слова «Добавить в избранное».

Марки вы можете так же добавить в избранное в разделе STAMPS на главном меню сайта ПикМикс.

Когда нас перекинет на другую страницу — нажимаем на слова «Версия без логотипа»

И наша анимированная картинка открывается в новом окне.

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

Скорее всего на Фейсбуке картинка будет прочитана не сразу, а сначала появится вот такая публикация

Не спешите нажимать на слово «Опубликовать». Обновите страницу и поставьте ссылку туда ещё раз. Если опять появится то же самое, то опять обновите страницу. И только когда появится ваша красавица анимированная картинка, кликайте на слово «Опубликовать».

Красиво смотрится анимированная картинка на Фейсбуке. Гугл+ и Одноклассниках. А вот ВКонтакте картинка получается маленькая и чтобы увидеть анимашку во всей красе надо кликать на неё. Мне это не очень нравится, если честно.

А ещё в разделе «Мой PicMix» вы можете установить аватар для вашей учётной записи в качестве любой, из созданных вами Gif картинок, для этого сервиса.

Теперь вы сможете создавать потрясающие анимационные картинки в онлайн фоторедакторе PicMix и выкладывать их в социальных сетях.

А если вам не слишком то понятны скриншоты и объяснения в моей статье, то предлагаю посмотреть видеоурок

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

Разработка персонажей

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

Раскадровка

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

Аниматик

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

Готовый мультфильм

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

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

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

• плавность и реалистичность движений;
• большой размер файла;
• длительность разработки.

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

Программы для создания анимации

Animate от Adobe

Данный продукт является наследником Flash Professional и позволяет создавать анимации с частотой 24 кадра в секунду . Принципиальных отличий от своего предшественника Animate CC не имеет. Существует возможность прорисовывать каждый кадр самостоятельно. Кроме того, так как это довольно затратно по времени, был разработан инструмент «Анимация движения », которому задаются начальное и конечное положение анимируемого объекта.

Toon Boom Studio

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

After Effects

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

Anime Studio

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

Synfig Studio

Хоть программа и обладает несколько урезанным набором инструментов, например, не поддерживает работу с 3D объектами, она доступна для скачивания абсолютно бесплатно. Ее возможности позволяют решать все задачи невысокой сложности.

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

Подготовка холста и слоев

Для начала необходимо создать документ.

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

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

Эти слои в будущем будут кадрами вашей анимации.

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

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

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

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

Теперь добавляем столько кадров, сколько вам необходимо, нажатием на кнопку «Добавить кадр».

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

Все! Анимация готова. Вы можете просмотреть результат, нажав на кнопку «Запуск воспроизведения анимации». А после этого можете сохранить ее в формате *.gif.

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