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

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

Анимации создаются в графическом формате GIF (Graphics Interchange Format). Главное отличие этого формата заключается в том, что он не статичен.

Для создания анимации из видео или картинок существует огромное количество программ, в интернете даже можно найти сайты, где в online-режиме можно создать анимацию. В сегодняшней статье я выбрал самое оптимальное приложение для этой задачи. Что касается создания анимации с нуля, то здесь стоит выбирать Photoshop CS (желательно, чтобы это была шестая версия).

Как сделать анимацию из видео?

Поможет в нашем деле видео конвертер Movavi. Ниже предоставлены ссылки для скачивания:

Для Windows.- http://www.movavi.ru/download-videoconverter

Для Mac. — http://www.movavi.ru/download-videoconvertermac

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

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

Теперь переходим в список с названием «Конвертировать в» и выбираем опцию «Изображения». Нам нужно указать формат – GIF, а затем определиться с размером анимации. К примеру, в социальных сетях обычно используют средний размер – 200х200.

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

Теперь можно нажимать «Старт», после чего запуститься процесс конвертации определенного участка из видео в GIF-анимацию. После окончания папка с сохраненным файлом откроется автоматически.

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

Как сделать анимацию с нуля в Photoshop CS6

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

Подготовка изображения для анимации

Открываем программу и создаем новый документ (нажимаем комбинацию Ctrl + N). В окне выбираем размеры 800х600 – это стандарт. Фон можно залить люблю цветом, у нас это черный. Теперь переходим в меню «Слои», далее «Стиль слоя» — «Наложение градиента» ((Layer> Layer Styles> Gradient Overlay). Устанавливаем следующие параметры: цвет от черного к синему, стиль Радиальный.

Нам нужно сделать новый слой, назовите его Noise Layer. Выбираем инструмент «Заливка» (Paint Bucket Tool). Выполняем заливку этого слоя черным цветом. Оставляем слой активным и переходим в меню «Фильтр», затем «Шум» — «Добавить шум». (Filter> Noise> Add Noise). В диалоговом окне нам необходимо задать следующие настройки: распределение (Uniform), Эффект (Amount) – 3%. Подтверждаем свое действием нажатием на «ОК».

Нажимаем «Ctrl + U» и выставляем в окне значение «Насыщенности» (Saturation) 100%. Нужно поменять режим наложения слою, выставляем «Мягкий свет» (Soft Light).

Вписываем любой текст на основной слой. В нашем случае – это 123RF. В стилях не забудьте выбрать «Обводку» (Stroke) для текста. Размер обводки можно выбирать по личному предпочтению.

Теперь нам нужно добавить светящийся эффект для нашего логотипа. Заходим в настойки слоя (два раза щелкаем на него). Здесь нам нужно выставить показатель «Тиснение» (Bevel & Emboss) точно так же, как на скриншоте ниже.

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

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

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

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

Тень (Drop Shadow).

После окончания переходим в стили слоя и убираем ему значение «Заливки» (Fill) на 0%.

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

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

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

В итоге у вас должно получиться примерно такое изображение.

Процесс создания анимации

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

Нажимаем на инструмент «Кисть» (Brush Tool), здесь нам нужно выбрать мягкую кисточку, показатель «Непрозрачность» (Opacity) меняем на 95%. На каждом слое из папки Light Spots поставьте бело пятнышко. На каждом знаке – в определенном месте.

Начинаем работать над анимацией. Заходим в «Окно», далее в «Шкалу времени» (Windows – Timeline). В левой части вы можете наблюдать свои слои. Вам нужно выделить слои из папки Light Sport. Проверьте индикатор – он должен стоять на 0. На каждом слое из группы нужно создать ключевой кадр – для этого нажимаем на «Позицию» (Position).

Теперь выставляем индикатор времени на отметку «01:00 F». Теперь перетаскиваем световое пятно на букве F по траектории.

Так создается анимация, отрезки должны небольшими.

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

После завершения работы заходим в меню «Файл» и выбираем «Сохранить для Web» (File – Save for Web). Измените настройки как на изображении ниже.

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