Меню сайта
Категории раздела
Самосовершенствование [3]
упражнения, разминки, планирование
Рисуем и моделируем [9]
путь новичка
Инструменты [4]
Изучаем всё то, с чем работаем
Мои ссылки
  • Новый проект Ufo&MIR
  • Дизайн-магазин
  • Поиск
    Статистика


    Воскресенье, 20.08.2017, 12:55ГлавнаяМой профильРегистрацияВыходВход
    Добро пожаловать в мой MIR!
    Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость | RSS
    Главная » Статьи » Развитие » Рисуем и моделируем

    Adobe Illustrator and After Effects. Импорт и простая анимация

    Adobe Illustrator and After Effects
    Импорт и простая анимация

    Привет. Сегодня на рассмотрении простая анимация в After Effects. 


     
    Ресурсы: Adobe Illustrator CC
                    Adobe After Effects CC

    Начнем изучение с рисования в Illustrator.

    Рисуем
    1) Нарисуем в качестве фона Прямоугольник желтого цвета

    Rect
    Рисунок 1 - Rectangle

    2) Нарисуем Круг и зальём градиентом
          Поработаем немного над кругом:
       - удалим нижнюю точку на контуре, получим дугу;
       - проведем прямую линию, закрыв низ дуги, получим полукруг

    Gradient circle
    Рисунок 2 -   1) draw circle; 2) gradient; 3) delete point

    3) Рисуем Прямоугольник и делаем его копию
        - один прямоугольник серый;
     - другой прямоугольник тёмно-серый
    4) Рисуем Треугольник из звездочки установив число лучей - 3

    Arrow
    Рисунок 3 - 1) rect light; 2) rect dark; 3)
    triangle

    5) Рисуем кота с помощью Pen и простых фигур
    draw cat
    Рисунок 4 - 1) head; 2) neck; 3) body; 4) leg; 5) tail

    А теперь самый ГЛАВНЫЙ момент
    Распределим картинки по слоям (то что будет анимировано - на отдельный слой) вот так:
    Layers
    Рисунок 5 - all pics (red mark important layers)

    Всё, теперь сохраняем.
    Посмотрим настройки сохранения

    Save

    Рисунок 6 - Save 

    А теперь следующий этап. Закрываем Adobe Illustrator и открываем  After Effects.

    Импорт в After Effects
    File - Import - File - выбираем наш сохраненный файл
     Illustrator.
    Выберем Composition, чтоб импортировать слои из Illustrator, если поставим footage, то получим картинку с объединенными слоями, а нам этого не нужно.
    Composition

    Рисунок 7 - Import As Composition
     

    Всё, импортировали.
    А теперь посмотрим, что у нас есть. Двойной щелчок по композиции, что б открылось и мы увидели слои (если все правильно сделали, то будет несколько слоев). Получим такое, см. рисунок

    Open composition

    Рисунок 8 - Open Composition

    А теперь то, для чего мы тут сегодня собрались - Анимация.

    Анимация в
    After Effects
    Установим точку вращения у стрелки вверху ее с помощью Pan Behind Tool (быстрая клавиша - Y). Просто берем точку и перемещаем туда куда требуется. В результате это будет выглядит так..
    Pan tool
    Рисунок 9 - Pan tool and Layers

    Ну всё, теперь переходим к слоям для анимации.
    Нам потребуется слой Arrow и Head_cat.
    Начнем с arrow.
    Раскроем список, найдем Rotation и нажмем на часы. Так мы поставили первую точку на нулевой секунде. Всего анимация будет длиться 2 секунды.
    Итак, вот такие настройки надо сделать (всего поставим 3 точки ) 
    Second 0 1 2
    Rotation +66 - 70 +66
    Вот так это будет выглядеть:

    Rotation

    Рисунок 10 - Rotation arrow

    А теперь анимируем голову кота.
    Раскроем head_cat и найдем Position.
    Тут будет 4 точки.
    Изменять будет только последнюю координату не трогая остальные.
    Second 0.1 0.17 1.12 2.0
    Position 689.3 729.3 729.3 689.3
    Смотрим на картинку.

    Position head
    Рисунок 11 - Position head 

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

    Заключительный этап

    Production
    Надо создать готовый продукт из своего произведения. 
    Идем в меню Composition - Add to Render Queue 
    Откроется панель Render и в Output Module ( два щелчка) выберем формат выхода. Я взяла *.mov


    Render
    Рисунок 12 -  Render

    Нажимаем на кнопку RENDER и получаем результат (только не забудьте указать путь).
    На этом всё.
    УДАЧИ!
    Категория: Рисуем и моделируем | Добавил: halenka (22.03.2016)
    Просмотров: 565 | Комментарии: 1 | Теги: Adobe Illustrator, draw, video, анимация, import, After Effects, cat, kitty, arrow, animation | Рейтинг: 5.0/1
    Всего комментариев: 1
    1  
    Интернет магазин запчастей для машин autocomponent63.ru - это качественные комплектеющие, готовые Вам помочь профессионалы и удобство заказа. Потребность купить запчасти возникает регулярно, ведь машины изнашиваются по частям. И с этим согласны все автовладельцы со стажем. Рынок запчастей для автомобилей сегодня – пестр и просторный, с этим также все согласятся. Именно из-за этого подбор запчастей для авто так же как и поиск запчастей по авторазборам может оказаться проблематичным. Но не для тех, кто обратился в наш магазин автозапчастей autocomponent63.ru. Если Вы ищете автозапчасти для определенных моделей авто, аналоги запчастей для иномарок, авторазбор, недорогие запчасти, автозапчасти в Кинеле, запчасти для иномарок Самара – будьте уверенны, что Вам очень повезло. Каталог запчастей для авто на сайте нашего магазина – прост и понятен. К тому же, здесь Вы увидите широчайший ассортимент. Единственное, чего чего здесь не встретить – это б/у запчасти для иномарок и детали сомнительного происхождения, поскольку мы гарнтируем высокое качество. Не нужно больше спрашивать у поисковика, где найти автозапчасти официальный сайт для иномарок, то, что Вы искали – это autocomponent63.ru.
    Авто запчасти: https://autocomponent63.ru - запчасти для иномарок в кинеле

    Имя *:
    Email *:
    Код *:

    Copyright MyCorp © 2017