Урок для конструктора Баннерович. Анимированный баннер, добавляем тень для текста.

Конструктор Баннерович имеет много различных функций: в нем можно создавать баннеры разных размеров, существует своя база фоновых рисуоков, тематических картинок, с помощью функции «Загрузить фон» можно выбрать свой вариант изображения, добавить логотип и прочее. Благодаря простому интерфейсу работать в конструкторе легко. 

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

В этом уроке мы сделаем баннер в конструкторе с размером 468 на 60. Баннер будет анимированным, также мы создадим эффект тени для текста. 

Работу в конструкторе начинаем с конпки «Конструктор баннеров», после ее нажатия открывается начальная сраница конструктора. Сдесь нужно выбрать размер баннера, на слайде внизу выделено красными кружками ширина баннера (468) и его высота (60). Дальше нажимаем на кнопку «Сделать баннер», на которую указыает красная стрелка на примере. (1)

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

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

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

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

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

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

Текст будет располагаться на квадрате, который у нас уже готов. Чтобы он подходил по размеру увеличьте его с помощью мышки, при этом зажмите Shift чтобы текст увеличивался пропорционально.(8)

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

Размещаем его рядом с квадратом, увеличиваем в размере так как это показано на сладе. (10)

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

Теперь нужно добавить фон для левой стороны, нажимаем на кнопку «Добавить фон».

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

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

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

Увеличиваем текст чтобы он заполнил все пространство фона, размещаем его на уровне предыдущего текста. (15)

Снова нажимаем на кнопку «Добавить текст», повторяем текст и устанавливаем те же настройки, только кроме красного цвета выбираем белый. (16)

Аккуратно разместите текст с белой заливкой так, чтобы нижний текст был виден немного, подвинте верхний текст вправо как это показано на слайде внизу. (17) 

Теперь заполним баннер другим элементами. Для этого нажмите на кнопку «Добавить фон».

В всплывшем окне выберете фон с названием «Синие клеточки», нажмите на него. (18)

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

Выбираем из списка фоновых изображений тот что показан красной стрелкой внизу на слайде, называется «Крем», нажимаем на него. (20)

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

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

В списке изображений мы выберем синюю стрелку, на которую указывает красная стрелка на слайде внизу. (22)

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

На слайде указано на курсор мышки, когда его навести на угол нашей стрелки. Зажмите Shift, наведит курсор мышки на угол и уменьшайте размер стрелки пока она не опустится до нижней части области баннера. Если она исчезнет внизу придется снова ее выбирать в разделе «Разное». (24)

Перемещать стрелку стоит так, чтобы не задеть другие элементы баннера. Уменьшайте с помощью мышки с зажатим Shift, потом поднимайте стрелку в верх, как это видно на слайде внизу. (25)

Когда стрелка будет внизу, как это видно на слайде (26), старайтесь ее не потерять из виду. Наведите мышкой на элемент и стрелка будет выглядеть как на слайде. Поднимите вверх этот элемент и снова уеньшайте.

На слайде (27) наша стрелка уже уменьшина, но не на столько как нужно нам, мы разместим ее так чтобы не задеть другие элементы и снова уменьшим.

Когда она станет нужного размера, переверните ее как на слайде внизу (28)

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

Чтобы добавить первй кадр нужно навести курсор мышки на кнопку «Добавить кадр в анимацию», не нажимать на нее, только навести. Высветится окно, как на слайде внизу, в первой строчке, которорая выделена  красным кружком, введите число — 0,1 секунд. Когда время установлено нажмите на кнопку «Добавить кадр в анимацию» (30)

Теперь тоже самое нужно повторять до тех пор пока наша стрелка не окажется в конце оранжевого фона, указано красной стрелкой на слайде. Чтобы плавно передвигалась стрелка старайтесь далеко ее не перемещать, во время ее перемещения зажимайте Shift чтобы она не меняла своего горизонтального положения. Когда вы ее установите на следующем положении, повторяйте предыдущую процедуру: наводите на кнопку «Добавить кадр в анимацию», время будет уже установлено предыдущее, его не меняйте 0,1 секунд, нажимайте на кнопку «Добавить кадр в анимацию». (31)

Когда вы дойдете до конца оранжевого фона, нажмите на кнопку «Разное», чтобы добавить новую стрелку.

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

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

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

После чего поворачиваем ее так, чтобы сама стрелка указывала на надпись вверху. Размещаем ее под первой буквы нашего текста, как указано красной стрелкой внизу. (35) 

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

Чтобы стрелка передвигалась плавно старайтесь ее размещать недалеко от того места, где она размещалась в предыдущем кадре. Передвигайте ее с зажатым Shift, чтобы она не меняла своего горизонтального положения. (36)

Когда она будет в конце, под синим квадратом, как показано на слайде красной стрелкой, удалите ее. 

Теперь наш баннер готов, чтобы его получить нажмите на кнопку «Получить баннер», скачайте его со своего кабинета.

Наш готовый баннер.

bannerovich_ru_file_5241_468x60
bannerovich_reklama_post_60