+7 (812) 703-02-02 info@hse.spbstu.ru

Семестр 4. Векторная графика и анимация в веб-дизайне

C 8 класса | 13 занятий | Очно или онлайн

Длительность курса: 82 ак. часа (13 занятий по 4 ак. часа + 30 часов домашней работы)

О чём курс

Курс предлагает расширение инструментального набора веб-дизайнера с помощью программ векторной анимации Adobe AfterEffects и Adobe Animate.

Adobe AfterEffects — программа анимации, позволяющая создавать анимированные элементы интерфейса, которые потом встраиваются в обычный HTML-код. Позволяет создавать анимированные иконки, иллюстрации, логотипы ,рекламные баннеры и инфографику.

Adobe Animate — программа для создания векторной анимации и настройки интерактивных элементов сайта.

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

Чему научим

По окончании курса слушатели смогут эффективно работать в области 2D анимациив, будут иметь уверенные знания в следующих областях:

  • Создание интерактивных страниц.
  • Анимированин элементов средствами Animate с индивидуальными настройками.
  • Создание и настройка кнопок, загрузчиков, проигрывателей.
  • Конвертация и публикация документов Animate в веб- форматы.
  • Создание 2D-анимированных элементов в After Effects.
  • Создание 3D-элементов в After Effects.
  • Создание стикеров для социальных сетей в After Effects.
  • Экспорт анимации из After Effects в форматы, подходящие для внедрения в HTML-код и использования в соцсетях.

Занятие 1

Введение в векторную анимацию. Инструменты анимации. Adobe Animate

  • Введение в анимацию, основные принципы и приемы
  • Интерфейс Adobe Animate: окно программы, палитры, таймлайн. Понятие слоя.
  • Создание документа HTML.
  • Работа с геометрическими примитивами. Импорт векторных объектов из Illustrator.

Занятие 2

Основные типы анимаций (Classic, Motion, Shape)

  • Понятие символа. Типы символов. Зависимость свойств символа от его типа
  • Создание и настройка Classic Tween
  • Создание и настройка Motion Tween
  • Создание и настройка Shape Tween
  • Примеры использования анимаций в дизайне сайта

Занятие 3

Интерактивность: создание кнопок

  • Символ типа Button. Создание, особенности
  • Настройка состояний кнопки
  • Проверка кнопок в рабочем документе и в тестовом режиме

Занятие 4

Использование код-сниппетов для настройки интерактивности

  • Понятие фрагмента кода (код-сниппета). Основные элементы, заменяемые элементы, комментарии
  • Размещение кода на таймлайне
  • Имена экземпляров и использование их в коде
  • Наиболее востребованные действия, управляемые кодом: запуск, остановка, навигация, управление курсором

Занятие 5

Использование компонентов в HTML5 и создание собственных компонентов

  • Определение компонента: метаданные, источник, ресурсы
  • Структура папок в системе для набора пользовательских компонентов
  • Файл components.js
  • Использование компонентов в HTML5

Занятие 6

Конвертация и публикация интерактивного контента.

  • Публикация документа в формат HTML5. Основные и дополнительные настройки
  • Преобразование форматов с помощью конвертера Animate

Занятие 7

Разработка и публикация контента для приложений виртуальной реальности

  • Типы документов VR
  • Добавление анимации в документ VR
  • Проверка и публикация документов VR
  • Интерактивность в проектах VR

Занятие 8

After Effects

  • Дополнительный инструмент анимации интерфейса — After Effects. Особенности и отличия от Animate
  • Интерфейс программы. Окна Project, Composition, Timeline
  • Создание простых графических слоев. Основные свойства слоя

Занятие 9

Анимация основных свойств слоя

  • Точка привязки слоя и ее влияние на анимацию
  • Анимация размера, поворота, непрозрачности
  • Изинг. Настройка скорости анимации

Занятие 10

Шейп анимация. Иконки и стикеры

  • Шейп слой. Параметрические и непараметрические объекты
  • Анимация формы. Тримминг. Замена формы в ключевых кадрах
  • Анимация оформления
  • Особенности создания стикеров для соцсетей

Занятие 11

Создание 3D-анимированных иконок

  • Понятие трехмерного слоя
  • Создание трехмерной иконки как композиции объемных шейп слоев

Занятие 12

Экспорт анимированных элементов и внедрение в HTML документ

  • Формат JSON. Требования к анимации для вывода в этот формат
  • Модули экспорта в JSON, конвертеры в специфические форматы

Занятие 13

Экзамен

Стоимость

22 800 ₽

Социальные скидки для многодетных и других категорий семей.
Скидки по акциям.
Оплата материнским капиталом. Можно оформить налоговый вычет по расходам на обучение - 13%.

Как поступить

Для уже обучающихся в АИШ:

Как записаться на занятия

Если ребёнок уже обучается

оставьте заявку в Личном кабинете

Если ребёнок ещё не обучается

заполните форму

среда 25.09.2024 - 18.12.2024 18:00 - 21:30

Группа
111.04.01
Свободных мест: 9
Аудитория
№207
ул. Обручевых, д.1, вход с ул. Гидротехников

Выберите группу

Академия информатики для школьников в цифрах

20 лет

успешной работы
в Политехническом университете Петра Великого

10

направлений обучения

83

учебные программы

2 800

школьников
проходят обучение
ежегодно

151

выпускник АИШ
в 2023 году поступил
в Политехнический университет

4

учебные площадки

36

компьютерных классов