Как сделать баннер. Анимированный или флеш баннер для сайта за 10 минут!

Добрый день, Уважаемые Коллеги!

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

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

как сделать баннер для сайта?

Как сделать баннер. Анимированный или флеш баннер для сайта за 10 минут!

Для чего нам может понадобиться баннер?

Баннерная реклама — отличный инструмент для продвижения своего сайта или  партнерских ссылок.

Разместив баннер на своем или чужом сайте можно рекламировать какой-нибудь партнерский продукт, или рекламировать свою подписную страницу, свой сайт, наконец.

Как разместить баннер на чужом сайте — об этом в следующей статье. Сегодня научимся делать баннеры.

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

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

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

Но почему бы не пользоваться баннерами, которые дают в партнерках, и, как говорится, «не париться»?

Мое мнение — эти баннеры быстро становятся заезженными. Если партнерка популярная, их используют все, кому не лень, в том числе и сам автор партнерки. Таким образом они мелькают на каждом сайте и вскоре уже ничуть не привлекают, а в лучшем случае — не вызывают никаких эмоций.

Сделайте свой баннер, оригинальный, интересный - и переходы на партнерку будут вам обеспечены. Пусть даже посещаемость вашего сайта невелика. А переходы — это потенциальные комиссионные, если вы понимаете.

Можно баннером украсить свой сайт, приглашая на какую-нибудь важную для вас страницу… 

Вообще — создание баннера — весьма увлекательный и творческий процесс. Не знаю, как мальчикам, но девочкам он понравится точно. Мы ведь любим всякие украшалки  ;)

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

Вот, например, какой флеш баннер я сделала на сайт для своей сестры. Она у меня парикмахер. Работала в салоне сначала каждый день. Потом стала подстригать-красить на дому, и сейчас выходит на работу всего 2 дня в неделю (пока еще боится совсем уходить), остальное время расписано — клиенты приходят на дом. Что ей намного выгодней — во-первых, не нужно половину заработка отдавать в салон за аренду, во-вторых — не нужно просиживать в салоне целый день.

Итак, как сделать баннер. Инструкция по шагам

1. Подбор картинок и оптимизация

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

Где искать картинки? В поиске Яндекса, например. Введите запрос «клипарт для баннеров», или просто ищите картинки по теме, собирайте свой клипарт, лучше скачивать картинки в формате png.

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

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

Вот, например, я скачала такую картинку, уменьшила, и буду использовать ее для баннера:

как сделать баннер

Можно сегодня сделать баннер, приглашающий подписаться на обновление сайта, например. Неважно, нам главное понять принцип, а потом вы сами сможете делать баннеры под любой размер и для любого назначения.

2. Скачиваем программу для изготовление баннеров

Программу, которой мы будем пользоваться, Aleo Flash Intro Banner Maker, можно скачать по этой ссылке. Там будет и стационарная программа, и портативная версия. Вот именно ей я и пользуюсь. Для этого нужно только открыть архив в программе win-rar и запустить версию Portable прямо оттуда:

как сделать баннер

 

3. Знакомимся с программой и параллельно делаем баннер

а) Размер и звук. Выставляем размеры будущего баннера, шкала загрузки — не нужна, галочку уберем. Звук нам не нужен в данном случае. Также можно выбрать форму, стандартная по умолчанию — прямоугольник:

 

как сделать баннер

 

б) Фон. Можно сделать фон определенного цвета или прозрачным. Мы поставим в качестве фона нашу картинку:

 

как сделать баннер

 

в) Эффект. Довольно интерсная вкладка — можно добавлять различные эффекты:  облака, летящие листья, дождь и тд. Но не всегда она нужна в баннерах. В нашем случае эффекты отключим (галочку уберем):

 

как сделать баннер

 

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

 

как сделать баннер

 

Здесь немного задержимся — отрегулируем положение текста, размер, цвет и тд.

1. Изменим размер текста, шрифт и цвет:

 

как сделать баннер

как сделать баннер

 

2. Изменим положение текста:

 

как сделать баннер

 

4. Изменим эффект, с которым текст появляется:

 

как сделать баннер

 

5. А здесь можно отрегулировать время появления текста на баннере:

 

как сделать баннер

 

Если добавляете на баннер еще другие текст или изображение, редактируйте их аналогично.

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

д) Web ссылка. На этой вкладке можно добавить ссылку. Мы сделаем так, что при клике по баннеру посетитель попадает на нужную нам страницу:

 

как сделать баннер

 

е) Опубликовать баннер. Завершающий этап — создаем баннер в нужном нам формате. Сначала сделаем флеш баннер — так баннер получится более легкий:

 

как сделать баннер

 

По завершении процесса вам дадут код, который нужно скопировать и вставить в нужное место своего сайта (но там еще сделаем кое-какие изменения):

 

как сделать баннер

 

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

 

как сделать баннер

 

У некоторых swf файл может не загрузиться. Тогда придется действовать с хостинга. Заходим в админ панель хостинга. Файловый менеджер — выбирайте свой домен и папку, куда хотите загрузить баннер.  В таком случае адрес файла придется написать самостоятельно: ваш домен/папка, куда загрузили/ваш файл.swf

У кого не получается, пишите в коментариях, помогу.

Итак скопированный код, который нам дали в программе по производству баннеров, мы вставили в нужное место. Адрес файла вставим в этот код вот сюда:

 

как сделать баннер

 

Вот собственно и все! Баннер обязан заработать!

Вот что у нас получилось. Тестируйте и заодно подписывайтесь на обновления блога 

 

 

Такой баннер можно совместить с формой подписки и поставить в конце каждой статьи. Как это сделать легко и быстро читайте здесь.

 

Это был флеш баннер, давайте сделаем gif баннер

На той же вкладке Публикация баннера выбираем параметры Опубликовать рисунок GIF и Зациклить навсегда:

 

как сделать баннер

 

Ну а gif баннер вы уже знаете как разместить на блоге — как обычное изображение.

Только иногда gif баннер получается слишком «тяжелый», я столкнулась с этим, когда размещала баннер в сервисе Ротабан - не пропускали.

Тогда его можно быстренько оптимизировать

Заходим на этот сервис, загружаем gif баннер, оптимизируем, там все понятно.

Не забудьте сохранить свое творчество!

Жмем Проект — Сохранить проект — выбираем где будет проект храниться — ОК!

 

как сделать баннер

 

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

А еще в этой программе можно сделать флеш галерею из фото. Вот например, поделюсь с вами радостью — мы научились ездить на велике без дополнительных задних колес! Счастью не было предела, теперь каждый день мы на велосипедах ездим в походы!

 

На этом прощаюсь, жду ваших комментариев, будьте удачливее всех!  Анжелика.

48 комментариев: Как сделать баннер. Анимированный или флеш баннер для сайта за 10 минут!

  • Елена говорит:

    Моя дочка тоже парикмахер и визажист. Сделаю для нее рекламный баннер) Хорошая идея!

    • Анжелика говорит:

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

    • Игорь А говорит:

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

  • Ирина говорит:

    Анжелика, Вы как всегда на высоте! Только думала, как сделать банеры в фотошопе для своего бесплатного продукта. И Ваша статья во время. Огромное спасибо за программу и статью. Пошла осваивать. Вам успехов и здоровья!
    http://mybiznez.ru/chto-nam-stoit-sajt-postroit/kak-sdelat-na-bloge-stranicu-spasibo-za-kommentarij

  • Виорика говорит:

    Добрый ! До этого этапа я ещё не дошла. Но прочитала шаг за шагом как делать. И …если честно…нигде не видела всё эту тему так расписанную по пунктам. Спасибо за добрые намерения!

    • Анжелика говорит:

      Виорика, там в этой программе функций столько, что их в десять таких статей не уместишь. Так что будете пробовать — Вам понравится ;)

  • Ателье Авери говорит:

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

  • Ольга Андреева говорит:

    Анжелика, здравствуй! Хорошая статья. Завтра днем посмотрю программу и попробую разобраться. я как-то пробовала баннер делать для конкурса. Но уже забыла, как.

  • Alexey говорит:

    Я все анимашки через фотошоп делаю. Но, он у меня не только для этого, а так, вполне хорошая прога.

  • Александр говорит:

    Спасибо за полезную статью. На досуге как-нибудь займусь созданием баннера.

  • Ольга Андреева говорит:

    Анжелика, столько всего ты умеешь и знаешь. Хорошо, что делишься со своими читателями полезностями!
    С днем знаний ваших деток! А родителям-здоровья и терпения.

  • Наталья говорит:

    Здравствуйте,Анжелика! Подскажите пожалуйста. Баннер ,сделанный с помощью Aleo Flash получается просто огромным в формате GIF, аж 46Мб. Хотя сами 4 фото в jpg , используемые в баннере весят от силы 100Кб. Почему так получается и что делать? Баннер не оптимизируется по вашей ссылочке, так как очень большой вес. Заранее спасибо!

    • Анжелика говорит:

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

  • Юрий Йосифович говорит:

    Честное слово, когда заходил в статью, предполагал что сейчас буду изучать трудности работы с фотошопом. А тут бац — клик другой — устанавливаешь программку — и все у тебя получится! Шикарно — даже новичку понятно будет!

  • Марина говорит:

    У меня почему-то не получается открыть Aleo Flash Intro Banner Maker((

    • Анжелика говорит:

      Марина, не забудьте, что мы открываем версию Portable, и еще — когда запускаете, программа где-то минуту загружается, в это время ничего не происходит — будьте терпеливы, дождитесь загрузки :)

  • Еленка говорит:

    Интересная программка, надо ее попробовать

  • Владислав говорит:

    С фотошоп ничто не сравниться! :)

  • Владимир говорит:

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

    • Анжелика говорит:

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

  • Ирина С говорит:

    Анжелика. Я вот не поняла как правильно и где взять адрес загруженного на сайт свф файла. Я не программист. Все сделала но на  этом провалилась. Жду комента :)

  • Ирина С говорит:

    У меня все получилось. Немного покумекала как и получилось Ура спасибки!!!!

  • Евгения говорит:

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

  • Оксана говорит:

    А я совсем еще только новичок-новичок-новенький)) Но все понятно)) А вы делаете видео уроки?

  • Жанна говорит:

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

  • Наталия говорит:

    А как сделать, чтобы менялись кадры? В закладке «Фон» загрузила 3 фотографии, но при нажатии просмотр высвечивается последняя фотка и все. Текста нет. Web ссылки тоже нет. Хочу сохранить как гифку, но не выдает код для вставки на сайт. Помогите пожалуйста!

    • Анжелика говорит:

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

      • Светлана говорит:

        Анжелика, добрый день! Делаю банер со сменой 4х картинок. Не могу разобраться как на последних 3х картинках вставить текст и эффекты, все появляется только на фоне, а остальные 3 картинки вмсят пустыми…..

  • Галина говорит:

    Спасибо за урок! Научилась делать банеры в программе Aleo Flash Intro Banner Maker, а вот как загрузить на сайт не могла найти, у Вас все доступно и понятно!laughingembarassed

  • Виталий говорит:

    Отлично! Спасибо за статью — сейчас буду пробовать создавать флэш баннер.

  • Игорь А говорит:

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

  • Светлана говорит:

    Анжелика, добрый день! Делаю банер со сменой 4х картинок. картинки вроде выставила, появляются так как нужно, не могу разобраться как  на эти 3 последние картинки вставить эффекты и текст. весь текст и эффекты появляются только на фоне, а остальные 3 картинки висят пустыми. И огромная просьба объяснить поподробнее синхронизацию картинок…. для своего банера я их сделала, но не совсем с этим разобралась….. Заранее спасибо!

  • Юрий говорит:

    Анжелика,здравствуйте! Подскажите пожалуйста чайнику! Срочно надо! Я сделал баннер своего сайта, хочу дать код другу,что бы он вставил на свой сайт для рекламы.Попробовал для проверки вставить код на свой сайт,но баннер не появляется…Так может быть? Не можете проверить код баннера? Он вообще работает? Я могу его в таком виде другу переслать? Заранее спасибо! Вот код баннера       <embed src=»1.swf» quality=»high» type=»application/x-shockwave-flash» wmode=»transparent» width=»180″ height=»240″ pluginspage=»http://www.macromedia.com/go/getflashplayer» allowScriptAccess=»always»></embed>

  • Татьяна говорит:

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

  • Сергей говорит:

    Добрый вечер Анжелика!!! Расскажите пожалуйста, как сделать баннер на котором едет машина, у неё крутятся колёса и т.д. Или баннер на котором летит самолёт и у него крутятся винты, и другие им подобные баннеры. Спасибо заранее.

  • Сергей говорит:

    Здравствуйте дорогая Анжелика!!! Скажите пожалуйста, как сделать флеш-баннер на котором едет машина и у неё крутятся диски, и соответственно, как сделать подобные этому баннеры.  19

  • Анна говорит:

    полезная информация, спасибо, сейчас буду пытаться создавать банер

  • allvolley.ru говорит:

    Программa просты в использовании, что для новичка большой плюс! Фотошопом можно и покрасивее что-то сделать, но и знаний нужно гораздо больше!

  • Сергей говорит:

    Анжелика!
    Вопрос такой…создал флеш-баннер в этой проге. В окне просмотра баннера в самой проге ссылка на баннере работает.Открываю сохранённый флеш в браузере -ссылка не работает.Это так и должно быть и ссылка работает только после размещения баннера в интернете?Я делал баннер для размещения в Бегуне.
    И вопрос №2 -открываю флеш-баннер в браузере -он огромный получается во весь экран,хоть и забиты размеры 240*400.Открываю  HTML код в браузере -баннер нормального размера.Это так и должно быть?Я ведь не на свой сайт буду баннер загружать(а соответственно код),на сторонней площадке загружается именно баннер, а не код.
    Поясните мне,если не сложно.
    Спасибо!

  • Александр говорит:

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

    Спасибо!

  • roman.iz.kz говорит:

    Спасибо большое статья очень помогла

  • Nataly говорит:

    Хорошая статья. Все доступно написано.

Добавить комментарий для Ирина С Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Поиск по сайту:
Рекомендую:
Вконтакте
FaceBook

Все статьи сайта | Конкурсы на сайте| Пошаговое создание сайта| Рекомендую | Реклама на сайте

Copyright © 2017. Все права защищены! При копировании строго ссылка на сайт!

Создай свой сайт и заработай на нем Главная сайта.

Как заказать и купить такой готовый сайт, читайте здесь

24 Запросов за 0,189 cекунд.
Индекс цитирования