Создание анимированных изображений и программируемой анимации для веб-приложения

Задание 1. Создать Gif – анимацию в Photoshop.

Изучите порядок создания Gif – анимации описанный ниже и по аналогии создайте анимацию для своего сайта.

Шаг 1. Выберите фото, из которых хотите сделать GIF и по слоям откройте их в Photoshop.

 

Шаг 2. Откройте панель шкалы времени (Окно > Шкала времени). 

 

В раскрывающемся списке на панели Шкала времени выберите Создать анимацию кадра. Первое изображение появится на шкале времени.

 

Шаг 3. Выделите все слои, а затем в меню в правой части панели Шкала времени выберите пункт Преобразовать в покадровую анимацию.

 

А затем выберите пункт Создать кадры из слоев.

 

Шаг 4. Настройте скорость частоты кадров и убедитесь, что для опции Параметры повторов установлено значение Постоянно.

 

Шаг 5. Экспортируйте gif-анимацию (Файл > Экспортировать > Сохранить для Web).

 

В параметрах экспорта выберите GIF 128 с дизерингом и нажмите Сохранить.

 

Задание 2. Создать анимацию для своего сайта.

Некоторые виды анимаций на сайте позволяют завладеть вниманием посетителя, заинтересовать его, убедить остаться на странице и как результат — совершить конверсионное действие. Грамотно размещенные анимационные элементы мягко «продвигают» пользователя по всему лендингу, не давая ему скучать.

Виды анимации для сайта:

1. Анимация плавно появляющихся элементов при загрузке страниц. Демо-версию можно посмотреть здесь.

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

2. Анимация группы элементов. Демо-версию можно посмотреть здесь.

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

3. Анимация лид-формы.

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

4. Сложная анимация и параллакс Демо-версию можно посмотреть здесь.

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

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