Делаем «ресайз» баннеров

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

Заходим в конструктор Баннерович, в первую очередь нужно установить размер баннера, на слайде красным кругом отмечены где менять размер баннера. (1) Мы создадим баннер с размером 240 на 400. Дальше нажимаем на кнопку «Сделать баннер».

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

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

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

Теперь нужно добавить логотип компании, для него мы специально оставили место вверху. Чтобы добавить логотип нажмите на кнопку «Загрузить фон», появится окно в котором нужно выбрать папку где лежит ваш логотип, выбрать его и нажать на кнопку Открыть. (5)

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

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

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

Первый текст у нас сообщает об Акции, установим его под наклоном и установим другой шрифт Comic Sans MS. Выбираем другой цвет и первое слово «Акция» сделаем жирным шрифтом. Дальше пишем новый текст, шрифт основной, размер выбираем по размеру самого баннера.

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

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

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

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

После нажатия на кнопку появится окно, сдесь будут видны все созданные кадры этого баннера. Сейчас мы создали только один, как это видно на слайде. (10) Закройте окно, Кнопка «Закрыть» находится внизу этого окна.  

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

Появится окно, такое как на слайде. (11) Это стандартные изображения конструктора Баннерович. Красной стрелкой указано какое изображение было выбрано для этого баннера. Нажимаем на него.

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

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

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

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

ВАЖНО ЗНАТЬ. Во время работы старайтесь не задеть другие элементы на баннере, если их переместить сейчас, они будут в неправильном положении при создании второго кадра, что может испортить всю работу. 

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

Второй кадр готов, пусть не смущает этот промежуток, он нужен чтобы акцентировать внимание на появлении кнопки. (16) Как и в предыдущем кадре, наводим (не нажимаем) курсором на кнопку «Добавить кадр в анимацию»  Устанавливаем время анимации второго кадра, для начала это будет 0,7 секунды. 

Нажимаем на кнопку  «Добавить кадр в анимацию»  и закрываем окно с нащими кадрами.

На следующем кадре появляется кнопка, для того чтобы пустое промежуток во втором кадре был виден короткое время мы установили 0,7 секунд. Тепер нажимаем на кнопку «Добавить кнопку», появится окно для редактирования кнопки. 

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

Теперь нужно установить настройки для третего кадра. Наводим мышкой на кнопку «Добавить кадр в анимацию», в всплывшем окне устанавливаем время 2,5 секунды. После того как время установлено нажимаем на кнопку «Добавить кадр в анимацию»

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

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

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

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

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

Листая Табы внизу вы найдете несколько примеров как можно распоряжаться местом на баннере. 

bannerovich_reklama_post_59