Как сделать баннер в конструкторе, пошаговый урок.

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

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

Нажимаем на кнопку «Конструктор баннеров». Дальше выбираем размер баннера: 680х120 и нажимаем на кнопку «Сделать баннер».

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

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

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

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

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

Теперь приступаем к анимации, чтобы между кадрами был небольшой промежуток, мы устанавливаем время этого кадра на 0.2 секунды, то есть прежде чем начнется анимация следующего кадра, будет очень короткая вставка с пустым кадром.

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

Создаем анимацию с картинками

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

ВАЖНО, ваше изображение не должно быть слишком большим, учитывайте, что баннер имеет размер 680х120 пикселей, если вы сохраните, к примеру, картинку размером 1200 пикселей и загрузите в рабочую область с размером 600 пикселей, картинка будет очень большой. Для начала вам будет трудно ее уменьшить, и самое главное она потеряет свое качество, то есть станет размытой, не пропорциональной. Выбирайте изображение изначально нужного размера, или же редактируйте ее в программе PaintВ анимированном ролике под текстом посмотрите, как разместились изображение.

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

Стоит отметить, что картинки на баннере имеют одинаковый размер, нет, это не связано с их настоящим размером. Обратите внимание, как можно сделать их одинаковыми, на анимированном примере под текстом этот процесс показан более детально.

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

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

Не забудьте установить время анимации на 1 секунду. Также повторите с третьим изображением. Только время анимации третьего изображения установите 2 секунды. Кадр у вас готов теперь удалите все три картинки, после чего установите время анимации на 0.2 секунды для пустого кадра.

Создаем анимацию с текстом и дополнительным элементом

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

После первого предложения время анимации установите на 1 секунду. Для второго предложения установите такие же настройки, и также время анимации 1 секунда.

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

В конце, после того как вы разместили дополнительный элемент время анимации установите на 2 секунды. Вторая часть готова, удалите все элементы и для пустого кадра установите время 0.2 секунды.

Создаем 3 часть анимированного баннера

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

После первого предложение время также устанавливается на 1 секунду, после второго предложения на 2 секунды. Создавать пустой кадр в конце не нужно.

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

Баннер готов.

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

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

bannerovich_reklama_post_81
bannerovich_reklama_post_82
bannerovich_reklama_post_83
bannerovich_reklama_post_84
bannerovich_reklama_post_85
bannerovich_reklama_post_86
bannerovich_reklama_post_87
bannerovich_reklama_post_88
bannerovich_reklama_post_89