[Glo Academy] Артём Исламов - SVG-графика для сайта (2019)

[Виктор Неизвестный]

Чему научитесь?

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

Программа курса:

Подготовительный урок
Знакомство с курсом. Настройка рабочего пространства.

• Установка редактора кода
  
• Установка векторного редактора

Урок №1. Вставка SVG на страницу. Размеры SVG
Способы встраивания SVG графики в html структуру. Манипулирование с размерами изображения.

В этом уроке вы узнаете: как создавать svg-изображение, как размещать на странице

• Создаем и сохраняем svg для веба.
  
• Способы вставки SVG-изображения
  • Через тег <img>
    
  • Как background-image
    
  • Через тег <svg>
    
  • Через тег <object>
• Работа с SVG-документов
  • width, height
    
  • viewBox
    
  • preserveAspectRatio

Урок №2. Базовые фигуры SVG. Атрибуты и свойства
Создание базовый фигур. Работа с атрибутами и свойствами.

В этом уроке: вы познакомитесь с XML, научитесь редактировать svg прямо в html коде и познакомитесь с базовым синтаксисом.

• Настраиваем рабочее пространство
  
• Переходим к практике:
  
• <rect> подключение внешнего файла стилей
  
• <circle>
  
• <ellipse>
  
• <line>
  
• <polyline>
  
• path

Урок №3. Анимирование векторного изображения
Способы анимирования svg изображения, знакомство с библиотекой snap.js

В этом уроке вы узнаете: как анимировать векторное изображение с помощью css, js, SMIL.

• CSS анимирование
  
• SMIL
  
• JS (Snap.js)

Урок №4. SVG Preloader. Знакомство с библиотекой SVG.JS
Создаем свой собственный прелоадер с нуля.

В этом уроке вы узнаете: как сделать кастомный прелоадер для сайта.

• Создаем SVG-изображение
  
• Вставляем на страницу.
  
• Подключаем библиотеку SVG.js
  
• Анимируем, используя библиотеку SVG.js

Урок №5. SVG Фильтры
Фильтры svg и зачем их использовать.

В этом уроке вы узнаете: как пользоваться фильтрами svg и как их использовать на практике.

• Поддержка браузерами
  
• Фильтр цветовой матрицы. Меняем цвет карточки товара.
  
• Фильтр размытия. Создаем элемент с частичным размытием
  
• Смешивание фильтров. Создание элемента интерфейса - меню.

Продажник

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Скачать

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.