Простой баннер с непростыми элементами

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

В примере мы создадим баннер с простой анимацией, но будем использовать стандартные элементы в нестандартной манере.

Для начала откроем конструктор Баннерович. Устанавливаем размер баннера, введите нужные цифры в специальные ячейки, после чего нажмите на кнопку «Сделать баннер».

На первом слайде (1)  красными кружками выделено размер, который использовался для создания этого баннера — 588 на 70. Вы можете указать любой другой размер.  Дальше у нас появляется рабочая зона. 

 

Теперь у нас есть баннер, который нужно заполнить информацией ( картинками, текстом, кнопкой и прочее). С правой стороны размещены кнопки, которые нам в этом помогут. Для начала нужно загрузить фон, это можно сделать использовав стандартные фоны нажав на кнопку «Добавить фон». Также можно загрузить собственную картинку из своего компьютера нажав на кнопку «Загрузить фон», как это показаа на втором слайде (2).

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

На третем слайде (3) загружена картинка, ее размещаем так как нам удобно. Дальше нажимаем на кнопку «Добавить фон» чтобы выбрать дополнительный элемент для баннера. 

 

После нажатия на кнопку появится окно в котором представлены все стандартные фоновые рисунки конструктора Баннерович. Выбираем фон, который совпадет с нашей цветовой гаммой. На четвертом слайде (4) указаный красной стрелкой.

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

На шестом слайде (6) на примере продемнстрировано как должен быть повернутый фон. При наведении мышки на сам фон стрелка становится такой как выделено в касном кружке, так можно двигать фоновый рисунок в рабочей области. Дальше снова нажимаем на кнопку «Добавить фон», чтобы выбрать новый элемент.

Теперь в появившемся окне выбираем новый рисунок. На седьмом слайде (7) красной стрелкой  указанный какой фон мы использовали в качестве нового элемента. 

Нам нужно чтобы этот элемент лежал под тем же уголм что и предыдущий. На восьмом слайде (8) в красном кружке выделена стрелка с помощью которой нужно повернуть этот фон. Это сделать теперь легче так как такой же метод мы применяли на пятом слайде (5).

Слайд девятый (9), угол наклона сравнивайте с предыдущим зеленым фоном, старайтесь сделать так, чтобы они стали паралельны друг другу. 

На десятом слайде (10) красной стрелкой выделено растояние между зеленым и кремовым фоном. Если они попрежнему не паралельны друг к другу с помощью стрелки выровняйте кремовый фон.

Этот фон мы используем чтобы создать нестандартный элемент, он будет находиться под углом. На одиннадцатом слайде (11) кремовый фон лежит паралельно к зеленому фону, поднимите его немного вверх. Чтобы дополнить этот элемент снова нажмите а кнопку «Добавить фон» и опять выберите кремовый фон.

На двенадцатом слайде (12) красной стрелкой указан тот фон, который мы выбрали, наведите на него мышкой и подвинте вверх. 

Разместите этот фон так как показано на тренадцатом слайде (13). Проследите за тем, чтобы углы совпали с предыдущим кремовым фоном. 

Нажимаем на кнопку «Добавить фон» из списка выбираем фон под названием «Темный шум». Уменьшаем новый фон до размера маленького прямоугольника, как это показано на четырнадцатом слайде (14).  Размещаем его сбоку, так чтобы до границ баннера оставался небольшой зазор. 

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

 

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

 

На семнадцатом слайде (17) пример того как нужно разместить текст. Стоит учитывать то, анимированным будет только нижний текст, поэтому размещайте информацию так, чтобы баннер нес нужный информационный смысл. 

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

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

У  нас есть первый кадр, теперь создаем второй кадр. На примере девятнадцатого слайда (19), меняем текст. ВАЖНО ЗНАТЬ — когда вы меняете текст стерайте ненужный текст с помощью кнопки Backspace , если вы удалите текст с помощью полного его выделения и нажатия Delete может исчезнуть весь фон. 

Теперь у вас есть новый текст для второго кадра. Как и в предыдущем слайде, наведите на кнопку «Добавить кадр в анимацию», установите время 4 секунды, столько будет длиться вторая анимация, то есть первй текст будет виден 4 секунды, второй текст тоже 4 секунды

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

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

На двадцат втором слайде (22) красной стрелкой отмечена кнопка, которую мы создали. Установили ее на уровне текста. 

Дальше устанавливаем время анимации для кнопки, текст не удаляем, просто добовляем время для кнопки чтобы общее время совпадало с предыдущими кадрами. Слайд двадцать тертий (23).

Это был последний кадр, теперь чтобы получить баннер нажимаем на кнопку «Получить баннер», заходим в личный кабинет и скачиваем. 

В результате мы имеем анимированный баннер, с размером 588 на 70.

bannerovich_reklama_post_58