Делаем простую анимацию в конструкторе Баннерович

Начинаем работу с «Конструктора баннеров»

1. У нас открылось окно, где расположена рабочая зона конструктора, сдесь мы должны ввести размеры нашего баннера – 340˟240, мы можем ввести числа в ручную или же с помощью шкалы, удобней будет в ручную, жмем кнопку «Сделать баннер». (слайд 1).

Размер баннера

Размер баннера

2. Так как мы уже определились, какой тематики будет баннер – Языковая школа, нам нужно придерживаться определенного стиля.

Старайтесь сделать так, чтобы тема баннера и его внешний вид имели что-то общее, а иначе вы запутаете ваших клиентов.





—  Выбираем фон, не яркий, сдержанный подойдет  фон под названием «Легкая плитка» в разделе «Добавить фон». (слайд 2)

Добавляем фон

Добавляем фон

—  Так как тема  у нас обучение, мы добавим картинку с изображением студента, найдем такую картинку под кнопкой «Изображения», если у вас есть своя на вашем ПК, нажмите кнопку «Загрузить фон» и выберете из своего списка.

—  После того как вы выберете изображение оно появится в рабочей области. Размер ее может превышать саму область, поэтому ее надо уменьшить, наводим на уголок картинке, пока не появится стрелка, зажимаем клавишу Shift и уменьшаем ее, следите, чтобы изображение не пропало из поля, так как ее вытянуть назад нельзя она исчезает. Если картинка слишком большая уменьшайте пока позволяет поле, потом передвиньте наверх и снова стрелкой с зажатым Shift уменьшайте ее. (слайд 3).

Устанавливаем размер изображения

Устанавливаем размер изображения

3. Изображение стоит на своем месте, дальше мы пишем нужный текст «Добавить текст».

Появится пример текста, мы его удаляем и пишем свой вариант. (слайд 4 )

Добавить текст

Добавить текст

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

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

(слайд 4, 5).

Добавить текст, установить размер, цвет

Добавить текст, установить размер, цвет

4. Устанавливаем кнопку.

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

Весь баннер является большой кнопкой, куда бы ваш клиент ни нажал он переедет по ссылке. Такую уловку делают для профессиональных баннеров, а кнопка лишь служит для того чтобы сказать пользователям о том, что баннер кликабельный. (слайд 6, 7).

Добавить кнопку

Добавить кнопку

Добавть кнопку, цвет, размер, шрифт.

 

Добавть кнопку, цвет, размер, шрифт.

5. Пришло время для анимации, в данном примере сделаем простую анимацию.

Сбоку у нас есть кнопка «Добавить кадр в анимацию» сразу на нее нажимать не нужно, наведите курсором на кнопку, появится окошко в графе «Время показа анимации» нужно установить время, это время за которое кадр будет меняться.

Идея такая: текст и кнопку мы не будем трогать, мы добавим стрелки, которые будут указывать на кнопку, эти стрелки будут меняться, привлекая внимания к кнопке.

6. Анимация.

— Оставляем первый кадр неизменным, для этого в графе «Время показа анимации» устанавливаем время -0,5сек, (слайд 8).

Добавить анимацию

Добавить анимацию

Для нас кажется, что это слишком мало, но для анимации достаточно. Теперь можно нажать на саму кнопку «Добавить кадр в анимацию» появилось вот такое окно (слайд 9). В этом окне будут показаны все наши кадры, пока у нас только 1 кадр, закрываем окно.

Окно расположение кадров

Окно расположение кадров

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

Второй кадр

Второй кадр

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

Окно с кадрами, добавлен второй

Окно с кадрами, добавлен второй

— Так мы повторили три раза, теперь жмем кнопку «Получит баннер», заходим в свой кабинет и скачиваем баннер к себе, копируем ссылку и устанавливаем на своем сайте. (слайд 8, 9, 10, 11).

Готовый баннер

Готовый баннер

Готово.

 

гиф баннер

гиф баннер




5
6
7
8
9
10
11
12
bannerovich_ru_file_226_240x240(PRJ4930)
1
устанавливаем размер баннера
2
3
4