Баннер с простой анимацией

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

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

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

1. Выбираем фон баннера, не обязательно делать все свои баннеры с белым фоном, можно поэкспериментировать.

К примеру, в вконтакте существует группа посвященная конструктору, там можно найти различные фоны сохранить на свой ПК и потом загрузить в конструктор Баннерович. (слайд 1)

Загружаем фон

Загружаем фон

2. Чтобы наша анимация имела логичное начало, мы сразу установим первый кадр «Добавит кадр в анимацию», время — 0.5 сек.( слайд 2)

Добавляем кадр в анимацию, устанавливаем время

Добавляем кадр в анимацию, устанавливаем время

3. После нажатия кнопки «Добавить кадр в анимацию» появится специальное окно, в котором будут видны все кадры баннера, пока у нас только один – первый кадр. (слайд3)

Окно с кадрами

Окно с кадрами

4. Теперь нужно распределить текст по всему баннеру, мы сделаем простую анимацию, основной упор будет на текст.

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

Делаем текст большим и с красивым шрифтом. Устанавливаем белый цвет, так как фон у нас черный, белый цвет будет кидаться в глаза. Шрифт выбираем «Enigmatic Unicodе», размер 24,все с большой буквой, вы можете выбирать любой какой понравится вам. (слайд 4)

Оформляем текст

Оформляем текст

5. Располагаем первое слово посередине, так чтобы все предложение вместилось, не было лишнего пустого места, то есть заранее расположите весь текст, чтобы знать, как и где размещать каждое слово.

Когда все готово снова нажимайте кнопку «Добавить кадр в анимацию» врем — 0.5 сек.(слайд 5)

Добавляем кадр в анимацию, устанавливаем время

Добавляем кадр в анимацию, устанавливаем время

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

Пишем второе слово, добавляем кадр.

Пишем второе слово, добавляем кадр.

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

После каждого слова не забывайте устанавливать анимацию, кнопка «Добавить кадр в анимацию», время  — 0.5сек.(слайд7,8)

Размещаем третье слово, добавляем кадр

Размещаем третье слово, добавляем кадр

Пишем название магазина, размещаем на баннере. Добавляем кадр.

Пишем название магазина, размещаем на баннере. Добавляем кадр.

8. Дальше наша анимация продолжиться, таким образом, название магазина остается, а само предложение исчезает по очереди, причем быстрее, чем оно появлялось.

Для этого удаляем первое слово и нажимаем кнопку  «Добавить кадр в анимацию», вместо 0.5 сек. устанавливаем время — 0.2 сек. Повторяем так три раза, пока не уберем все слова, не забывайте «добавлять кадр в анимацию», иначе у вас будет баннер с пропущенными кадрами.(слайд,9, 10)

Продолжаем анимацию, даляем первое слово, добавляем кадр в анимацию.

Продолжаем анимацию, даляем первое слово, добавляем кадр в анимацию.

Убираем второе слово, добавляем кадр.

Убираем второе слово, добавляем кадр.

9. После того как убрали последнее слово нужно снова «добавить кадр в анимацию»  время — 0.2сек.( слайд 11)

Убираем третье слово, добавляем кадр в анимацию, устанавливаем время.

Убираем третье слово, добавляем кадр в анимацию, устанавливаем время.

10. Дальше нажимаем кнопку «Изображение»   добавляем картинку с девушкой с мегафоном.(слайд 12,13)

Добавляем в баннер изображение

Добавляем в баннер изображение

Выбираем из стандартных изображений нужное.

Выбираем из стандартных изображений нужное.

11. Картинка будет иметь размер больше чем рабочее поле, поэтому устанавливаем размер с помощью мышки и зажатым Shift.

Когда размер станет таким как нам нужно, приступаем к следующему шагу. Следите за анимацией, не забывайте, после того как разместили картинку, установите время 0,3 или такое какое нужно вам. (слайд 14, 15)

Редактируем картинку, размещаем на баннере.

Редактируем картинку, размещаем на баннере.

Добавляем кадр в анимацию, устанавливаем время

Добавляем кадр в анимацию, устанавливаем время

12. Пишем текст дальше, у нас всего два слова, поэтому мы можем разместить его как считаем нужным. Шрифт и размер тот же, как и в предыдущих словах.

Время анимации снова меняем на 0.5 секунд. Второе слово размещаем ниже, устанавливаем время 0.5 секунд. (слайд  16,17)

Если нужно еще время для анимации можно установить чуть больше, чтобы текст часто не мигал.

Пишем новое слово, добавляем кадр в анимацию.

Пишем новое слово, добавляем кадр в анимацию.

Пишем второе слово, размещаем на свое усмотрение. Добавляем кадр в аимацию.

Пишем второе слово, размещаем на свое усмотрение. Добавляем кадр в аимацию.

13. Удаляем два слова сразу, следующий текст должен появиться без задержек.

Устанавливаем шрифт цифры «20%» больше чем был у текста, на свое усмотрение, нужно сделать цифру заметней. Снова нажимаем на кнопку «Добавить кадр в анимацию» время 0.5 секунд. Дальше пишем текст под цифрой, он не должен быть слишком большим главное, чтобы он был читабельным. Здесь нужно задержать анимацию, поэтому установим время на 1,2 секунды.(слайд 18,19)

Добавляем 20%, увеличиваем размер, добавляемм кадр в анимацию.

Добавляем 20%, увеличиваем размер, добавляемм кадр в анимацию.

Размещаем на баннере последнее слово, добавляем кадр в анимацию.

Размещаем на баннере последнее слово, добавляем кадр в анимацию.

14. Теперь когда баннер готов нажимаем кнопку «Получить баннер» и следуем указаниям , заполняем данные, если они заполнены жмем «Получить баннер» и ожидаем время загрузки.  (слайд20)

Заполняем данные и ждем загрузки баннера.

Заполняем данные и ждем загрузки баннера.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
bannerovich_ru_file_5226_520x110(PRJ3157)