Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

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

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

Для создания html баннера подойдет программа adge animate.

Заходим в программу и нажимаем создать новый проект.

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

Сделаем стандартный баннер размером 240 на 400 px.

Размер выставляем в левой части экрана у слоя stage.

Подготовим изображения для баннера.

Готовим изображения в photoshop

Скачиваем картинки из интернета, которые будут участвовать в анимации баннера.

Сделаем баннер для чемпионата мира по футболу 2018 года.

Для этого потребуется четыре изображения официального талисмана волка zabivaka и логотип с кубком.

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

Делаем анимацию в adge animate

Переносим все изображения в adge animate.

1 Оформим логотип. Он состоит из картинки logo и прямоугольника rectangle tool такого же размера. Логотип добавляем внутрь прямоугольника.
2Делаем четыре картинки сверху вниз по очереди анимации. У первой картинки выставим непрозрачность 100 процентов, у других ноль. Перейдем в инструменты в timeline. Разберем каждый.

auto-keyframe кнопка для создания анимации.
auto-transition вторая кнопка для создания анимации. При добавлении анимации две кнопки должны быть активными, нажаты.
toggle pin нажимаем на кнопку и переносим пин на шкале времени, во вторых меняем положения элемента. Отжимаем кнопку pin и проверяем. Если получилась обратная анимация, то выделяем кадр и нажимаем правую кнопку, выбираем invert transition.
Выбор вида анимации по кривой движения. Выделяем кадр и внутри выбираем, какая будет анимация линейная или движение по кривой.

Продолжаем делать анимацию первой картинки с волком.

Переносим курсор на пол секунды и ставим метки всем изображением add keyframe for opacity.

Переносим курсор на секунду и вставим у первой картинки непрозрачность ноль, ставим метку.

Для второй картинки ставим в этот момент прозрачность 100 процентов.

Получилось, первая постепенно погасла, а вторая одновременно появилась.

Для других изображений делаем такие же кадры.

Чтобы посмотреть результат в интернет браузере нажмем комбинацию клавиш ctrl+enter.

Делаем анимацию логотипа.

Выделяем прямоугольник и логотип.
Зажимаем инструмент pin.
Переносим интервал на секунду в бок.
Берем прямоугольник и переносим вниз, чтобы он перекрыл картинку.
Зажимаем логотип и перетаскиваем вниз к краю.
Отжимаем pin и проверяем анимации.

Делаем анимацию таким же способом вверх.

Добавляем текст в html баннер.

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

Добавляем элемент текст на html баннер.

Текст1 называется zabivaka. В левой части выбираем шрифт и размер шрифта.
Текст два будет официальный талисман
Текст три чемпионат мира 2018 года.
Кнопка подробнее. Кнопку сделаем инструментом rounded rectangle tool. Закруглим углы и наложим любой цвет.

Анимируем текст в adge animate у баннера html

У текста 1 ставим инструмент пин, переносим шкалу времени на секунду и поднимаем элемент текст над баннером.

Отжимаем pin и видим, что текст линейно перемещается с верха в положение бод логотипом.

Чтобы был эффект подскока используем инструмент анимации по кривой ease out и выбираем bounce.

Анимация нажатие на кнопку подробнее

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

Используем инструмент пин и перемещаем руку за экран.
Когда рука стала над кнопкой, у элемента кнопка делаем цвет синий и shadow тень немного фиолетовой.

Как зациклить html баннер

Установим вначале анимации label и назовет его start.
Перейдем в конец анимации и установим trigger. Внутри напишем код sym.play (start);

Делаем при наведении на html баннер изменение курсора и ссылку.

Создаем новый прозрачный слой поверх баннера и называем active.

Слева в настройке выберем курсор палец.

Чтобы добавить ссылку нажмем правую кнопку на слое поверх баннера и выберем open action функцию click.

В окошке выберем открывать в новом окне.

Пропишем свою ссылку.

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

Теперь можно его сохранить и добавить на сайт.

Баннер работает на java скрипте поэтому занимает не большое количество места.

Баннер отображается на всех устройствах без исключения в отличие от flash, где нужен плеер.

В программе adge animate получается делать html баннер быстро и красиво.

Все о HTML5-баннере и 4 продвинутых метода их создания

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

Популярные виды объявлений на сайте:

Графический — простой вид баннера для рекламы в Интернете. Состоит из изображения определенного размера и содержит ссылку на рекламный ресурс.

Флеш-баннер — имеет большие возможности для анимации, это позволяет лучше передать информацию с помощью комбинации векторной и растровой графики.

HTML5-баннер —комбинация HTML-элементов с применением анимаций и хорошего визуального оформления, адаптированных под любые устройства и браузеры.

Главные отличия HTML от других типов баннеров

По сравнению с другими методами создания баннеров, технологии HTML5 дают ряд преимуществ для привлечения аудитории на ресурс:

Объявления в таком формате будут одинаково отображаться на всех устройствах без дополнительных расширений для браузера.
HTML5 предоставляет больше возможностей для интеграции в свои рекламные объявления формы, кнопки социальных сетей, календари, карты и другие приложения.
Небольшой вес и использование меньших ресурсов не влияет на скорость загрузки страниц в браузере. Флеш-технологии не позволяют добиться такого результата.
Для оценки эффективности баннеров на HTML5 можно просмотреть статистику в Google Analytics. Там представлена различная информация о гостях и переходах по ссылкам.

Существенным недостатком флеш-технологий стал постепенный отказ от них крупных компаний, таких как Apple, Mozilla и Amazon. Основным толчком для исчезновения Flash стал Google. Сначала они отключили Flash-анимацию в Google Chrome, а затем отказались от Flash-объявлений в своих сервисах поисковой рекламы, отдав предпочтение HTML5.

Способы создания HTML-баннеров

Разработка баннера начинается с создания отдельной страницы и встраивается на сайт через «iframe». Существует несколько методов разработки рекламных баннеров на сайт, мы рассмотрим самые популярные.

1. Создание фрейма с помощью CSS3 и JavaScript

Фрейм позволяет загружать в область заданных размеров любые независимые документы. Это может быть разный HTML-код с использованием стилей и скриптов для оформления.

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

Преимущества:

Функционал не ограничен никакими программами, можно реализовать что угодно.

Недостатки:

Такой процесс довольно сложный и требует особых навыков верстки.
Большие трудозатраты по времени относительно других способов.

See the Pen NaQEbx by Alexandr (@vinechka) on CodePen.

2. Adobe Edge Animate

Тем, кто знает Adobe After Effects, интерфейс программы Adobe Edge Animate покажется очень знакомым. У Adobe Edge Animate более ужатый функционал, направленный на разработку простого анимированного контента с использованием HTML5, JavaScript и CSS3. Программа поддерживает импорт таких форматов, как .svg, .png, .jpeg, .gif, HTML; поддержка video и audio форматов.

Имеется более 30 встроенных эффектов, что упрощает время создания качественной анимации в несколько раз:

Основные преимущества Adobe Edge Animate:

Множество доступных видеоуроков в Сети по использованию программы.
Простой функционал, большинство процессов автоматизированы
Программа не требует знаний HTML5, JavaScript и CSS3.
По окончанию работы получаем все необходимые документы для размещения баннера на сайте. Images — папка с графическими элементами баннера, несколько файлов JavaScript, html и файл формата An — для последующего редактирования файла в программе.
Готовый баннер поддерживается всеми современными браузерами и мобильными приложениями, соответствует всем техническим требованиям рекламных кампаний в Яндекс и Google.

Есть и несколько недостатков:

Интерфейс только на английском языке.
С 2015 года компания Adobe прекратила развитие проекта Adobe Edge Animate, программа с того времени не обновлялась и достигла своего предела в развитии. Edge Animate все еще доступен для скачивания в архивах Creative Cloud.

3. Adobe Animate CC

Animate CC — это переименованный продукт Adobe Flash Professional. В последнее время технология Flash растеряла доверие пользователей, программа нуждалась в смене названия и нескольких доработках. По сути, это та же самая программа Flash Professional, но в которой файлы дополнительно сохраняются в HTML5 и JavaScript.

Интерфейс очень схож с Flash Professional, но возможности у программ различаются.

Преимущества Animate CC:

Возможность создания трехмерной графики. Имеется инструмент «камера», позволяющий снимать глубину кадра для настоящей анимации.
В отличие от Edge Animate программа Animate CC имеет большой выбор векторных кистей и возможность работы с растровой графикой.
Программа относительно новая, поэтому Adobe активно развивает проект, выпускает обновления и совершенствует Animate CC.
Имеется русскоязычная версия.
Расширенные возможности экспорта файла в форматы: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Нажатием одной кнопки сохраняются элементы баннера в спрайтах, тем самым уменьшая время загрузки баннера.

Недостатки:

Новизну программы также отнесем к недостаткам. Уроков по созданию анимации в Animate CC не так много, как у Adobe Edge Animate. Поэтому работу некоторых функций нужно изучать самостоятельно, что дается непросто. Программа достаточно сложная для самостоятельного изучения, но разобраться можно.
Некоторые функции не автоматизированы, как в Edge Animate, что также увеличивает время создания баннера.

4. Google Web Designer

Google порадовал нас бесплатным редактором, специально созданным для реализации html-баннеров. Google Web Designer полностью заточен на реализацию рекламы, основной уклон которой направлен на AdWords. Если мы посмотрим на окно создания нового файла, заметим, что в программу уже встроены размеры шаблонов рекламы.

Преимущества Google Web Designer:

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

Недостатки:

Функционал Google Web Designer достаточно узок для создания шедевров анимации. Программа сильно ограничена шаблонами.
Нехватка обучающих программ. Справки Google недостаточно для полноценного обучения функционалу.

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

Существует еще множество других программ и сервисов, способных дать качественный продукт, но мы рассмотрели 4 основных способа разработки продвинутого HTML-баннера с интересной анимацией, которые используем в своей работе.

Остались вопросы? Задавайте в комментариях. Поможем и советом и делом. Разработаем для вас баннеры или рекламную кампанию целиком »

Спасибо, мы старались!

Кстати, вы подписаны на нашу рассылку? Если нет, то самое время познакомиться с Катей.

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

HTML5 — баннеры

HTML5 — баннеры: для чего нужны и как можно их сделать

0

Баннер (англ. banner — флаг, транспарант) — графическое изображение рекламного характера, аналогичное рекламному модулю в прессе. Может быть как статичным изображением или даже текстом, так и содержать анимированные элементы (вплоть до видео и интерактивных объектов). Как правило, может содержать гиперссылку на сайт рекламодателя или страницу с дополнительной информацией. Задачи у баннера следующие. Во-первых, продавать товар. А значит — привлечь внимание посетителя, заинтересовать потенциального клиента рекламируемой товаром или услугой, подтолкнуть к переходу на сайт и побудить к действию (Call To Action). Именно CTA и является конечной целью рекламы. И, во-вторых, задачей баннера является имиджевая или брендовая реклама, цель которой повысить узнаваемость бренда и составить положительный имидж о бренде.

Популярные виды объявлений на сайте:

Графический — простой вид баннера для рекламы в Интернете. Состоит из изображения определенного размера и содержит ссылку на рекламный ресурс.
Флеш-баннер — имеет большие возможности для анимации, это позволяет лучше передать информацию с помощью комбинации векторной и растровой графики.
HTML5-баннер —комбинация HTML-элементов с применением анимаций и хорошего визуального оформления, адаптированных под любые устройства и браузеры.

Главные отличия HTML от других типов баннеровПо сравнению с другими методами создания баннеров, технологии HTML5 дают ряд преимуществ для привлечения аудитории на ресурс:

Объявления в таком формате будут одинаково отображаться на всех устройствах без дополнительных расширений для браузера. HTML5 предоставляет больше возможностей для интеграции в свои рекламные объявления формы, кнопки социальных сетей, календари, карты и другие приложения.
Небольшой вес и использование меньших ресурсов не влияет на скорость загрузки страниц в браузере. Флеш-технологии не позволяют добиться такого результата.
Для оценки эффективности баннеров на HTML5 можно просмотреть статистику в Google Analytics. Там представлена различная информация о гостях и переходах по ссылкам.

Способы создания HTML-баннеровРазработка баннера начинается с создания отдельной страницы и встраивается на сайт через «iframe». Существует несколько методов разработки рекламных баннеров на сайт, мы рассмотрим самые популярные.

1. Создание фрейма с помощью CSS3 и JavaScriptФрейм позволяет загружать в область заданных размеров любые независимые документы. Это может быть разный HTML-код с использованием стилей и скриптов для оформления. Также возможна реализация баннера через область «canvas», в которой разрабатываются анимации, рисунки, графики и даже игры при помощи JavaScript. Для ускорения разработки разрешается воспользоваться сторонними библиотеками, например CreateJS.

Преимущества:

Функционал не ограничен никакими программами, можно реализовать что угодно.

Недостатки:

Такой процесс довольно сложный и требует особых навыков верстки.
Большие трудозатраты по времени относительно других способов.

2. Adobe Edge AnimateТем, кто знает Adobe After Effects, интерфейс программы Adobe Edge Animate покажется очень знакомым. У Adobe Edge Animate более ужатый функционал, направленный на разработку простого анимированного контента с использованием HTML5, JavaScript и CSS3. Программа поддерживает импорт таких форматов, как .svg, .png, .jpeg, .gif, HTML; поддержка video и audio форматов.

Имеется более 30 встроенных эффектов, что упрощает время создания качественной анимации в несколько раз:

Преимущества:

Множество доступных видеоуроков в Сети по использованию программы.
Простой функционал, большинство процессов автоматизированы.
Программа не требует знаний HTML5, JavaScript и CSS3.
По окончанию работы получаем все необходимые документы для размещения баннера на сайте. Images — папка с графическими элементами баннера, несколько файлов JavaScript, html и файл формата An — для последующего редактирования файла в программе.
Готовый баннер поддерживается всеми современными браузерами и мобильными приложениями, соответствует всем техническим требованиям рекламных кампаний в Яндекс и Google.

Недостатки:

Интерфейс только на английском языке.
С 2015 года компания Adobe прекратила развитие проекта Adobe Edge Animate, программа с того времени не обновлялась и достигла своего предела в развитии. Edge Animate все еще доступен для скачивания в архивах Creative Cloud.

3. Adobe Animate CCAnimate CC — это переименованный продукт Adobe Flash Professional. В последнее время технология Flash растеряла доверие пользователей, программа нуждалась в смене названия и нескольких доработках. По сути, это та же самая программа Flash Professional, но в которой файлы дополнительно сохраняются в HTML5 и JavaScript.

Интерфейс очень схож с Flash Professional, но возможности у программ различаются.

Преимущества:

Возможность создания трехмерной графики. Имеется инструмент «камера», позволяющий снимать глубину кадра для настоящей анимации.
В отличие от Edge Animate программа Animate CC имеет большой выбор векторных кистей и возможность работы с растровой графикой.
Программа относительно новая, поэтому Adobe активно развивает проект, выпускает обновления и совершенствует Animate CC.
Имеется русскоязычная версия.
Расширенные возможности экспорта файла в форматы: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Нажатием одной кнопки сохраняются элементы баннера в спрайтах, тем самым уменьшая время загрузки баннера.

Недостатки:

Новизну программы также отнесем к недостаткам. Уроков по созданию анимации в Animate CC не так много, как у Adobe Edge Animate. Поэтому работу некоторых функций нужно изучать самостоятельно, что дается непросто. Программа достаточно сложная для самостоятельного изучения, но разобраться можно.
Некоторые функции не автоматизированы, как в Edge Animate, что также увеличивает время создания баннера.

4. Google Web DesignerGoogle порадовал нас бесплатным редактором, специально созданным для реализации html-баннеров. Google Web Designer полностью заточен на реализацию рекламы, основной уклон которой направлен на AdWords.

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

Преимущества:

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

Недостатки:

Функционал Google Web Designer достаточно узок для создания шедевров анимации. Программа сильно ограничена шаблонами.
Нехватка обучающих программ. Справки Google недостаточно для полноценного обучения функционалу.

Источник: 1ps.ru

Как сделать эффективный баннер для сайта

Performance Marketing основывается на четко и однозначно измеряемых параметрах Мы находим оптимальные решения в любой отрасли! Работаем над правильными KPI

Performance Marketing в Семантике

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Как правило, любой веб-проект создается для того, чтобы на нем зарабатывать. Иначе вся деятельность в интернете теряет смысл. Одним из способов заработка является размещение рекламы на своем сайте. Рекламодатель разрабатывает и размещает свою рекламу на чужом веб-ресурсе за плату для того, чтобы продвинуть товар или услугу.

Что такое рекламный баннер на сайте

Это прямоугольный блок с неподвижной или анимированной картинкой (текстом). Обычно после клика на него пользователь отправляется на веб-страницу рекламодателя.

Немного истории

Впервые интернет-баннер увидел свет в 1994 году: он перекочевал в Сеть из печатных СМИ. В дальнейшем данный маркетинговый прием стал развиваться: создавались целые страницы, сверху донизу заполненные агрессивной рекламой. Со временем посетитель привык не обращать внимания на ее обилие — перенаполняемость веб-сайтов рекламой стала считаться дурновкусием.

Как работает рекламный баннер на сайте

Новые клиенты и покупатели

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

Прирост трафика

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

Преимущества данного маркетингового приема

Цена на создание и размещение баннеров намного ниже, чем стоимость прокрутки ролика на ТВ.
Не требуется огромный штат сотрудников для создания материала.
Корректировки под целевую аудиторию, легкое внесение изменений в рекламную кампанию.
Баннерная (медийная) реклама + таргетинг (направленность на определенную целевую аудиторию) — один из самых эффективных приемов в маркетинге.

Виды интернет-баннеров

По типу отображения

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

По форматам

Простая статическая картинка в растровой графике (JPG, GIF, PNG и т.д.).
GIF-анимация — сменяющие друг друга рисунки в растровой графике.
Flash-анимация — применяется векторная графика, плавная смена элементов, интересные эффекты, может накладываться звук.

Слишком «тяжелые» изображения значительно замедляют загрузку веб-страницы, что отрицательно сказывается на поведении посетителей и доверии поисковых систем. GIF-анимация и Flash обладают большим весом, по сравнению со статичной картинкой, поэтому перенасыщать страницу подобными медийными материалами не рекомендуется. А вот на «легкую» статичную картинку посетители почти не обращают внимания и не кликают на нее, считая изображение одним из красочных элементов страницы.

По размерам

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

728х90 — «Доска почета».
468х60 — «Горизонтальный».
336x280, 300х250, 300х600, 240х400, 180х50 — «Прямоугольные».
300х600, 120х240 — «Вертикальные».
120х600, 160х600 — «Небоскреб».
250х250 — «Квадрат».
125х125, 120х90, 120х60 — «Кнопки».
88х31 — «Полоса».

Почти все вышеперечисленные размеры доступны для размещения в Яндекс.Директ и Гугл Адвордс.

Как сделать медийную рекламу эффективной

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

Признаки качественного интернет-баннера

Загружается быстро. Пользователь не должен ожидать долго.
Привлекает внимание. При этом важна не насыщенность цветами или разнообразие кадров. Картинка должна стимулировать посетителя к дальнейшему ознакомлению с материалом.
Оригинальный. Похожими друг на друга изображениями пестрит весь интернет. Поэтому важно заинтересовать искушенного пользователя именно своими ТиУ.
Стимулирует совершить покупку (выполнить действие). Это и есть главная цель любого продвижения.
Вызывает доверие. Особенно важно для малоизвестной компании. При разработке необходимо учитывать психологию цветов и фраз.

Где должен размещаться рекламный блок

Немаловажно также место размещения и размеры медийных материалов.

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

Цветовые гаммы и тексты — важные рекомендации

Красный — цвет решительности, побуждения. Но его переизбыток может вызвать агрессию к ТиУ. Его оттенки (пурпур, бордо, розовый) менее агрессивны, но также успешно применяются. Красный в сочетании с черным позволяет подчеркнуть важность чего-либо.
Оранжевый — хорошее настроение, побуждение к действию. Считается самым эффективным в рекламе, но плохо подходит для фона.
Желтый — радость, настраивает на коммуникабельность, прекрасно сочетается с черным.
Зеленый — свежесть, тонус, здоровье. Прекрасно подходит для фона, применяется чаще в медицинских ТиУ.
Синий — покой и нежность.
Фиолетовый — таинство и торжественность какого-либо события. Подчеркивает оригинальность ТиУ.
Серый — самый умеренный цвет, ни у кого не вызывает отторжения.
Белый — чистота. Если неагрессивный баннер имеет белый фон, то он не вызывает эмоций.
Черный — не подходит для фона, но незаменим как цвет шрифта.

Правила текстового посыла

Картинка только «цепляет» внимание. На медийном блоке важен именно текст, поэтому учитывайте следующие рекомендации:

Обращайтесь к вашей целевой аудитории.
Придумайте интересный заголовок.
Текст должен намекать о вариантах решения проблемы.
Он должен интриговать, вызывать любопытство.
Должен описывать интересный сюжет, как в любом рекламном ролике.
Должен иметь связь с графикой на кадрах.
Слова «Вход» или «Нажимай» побуждают к действию.
Слово «Бесплатно» интригует каждого.
Текст должен занимать до 20% от пространства прямоугольника.
Любые цифры вызывают доверие.

Общие рекомендации для дизайна

Если у вас есть логотип — не забывайте про него.
Оформление шрифта в виде подчеркнутого голубого текста побуждает пользователя кликнуть на ссылку.
Используйте элементы дизайна от Windows — на такие баннеры чаще кликают.
Не применяйте мигающий, а также черный или красный фоны.
Смена изображений не должна быть слишком быстрой. Человеку нужно успеть понять ваш посыл.
Если фон прямоугольника белый — обведите его рамкой.
Забудьте про курсив, мелкий шрифт и слова, написанные кричащими заглавными буквами.
Рекламный материал должен повторять стилистику рекламируемого интернет-проекта.
Эротический контекст всегда увеличивает кликабельность (применимо не для всех рекламодателей).
Изображения людей привлекают внимание.
Создавайте в анимированном блоке не более 4 кадров.
Общее время прокрутки анимации — не более 5-6 секунд.
Если медиа-реклама всплывает и навязывается, то пользователь ее закрывает.
Рекламный материал должен вести на страницу, которая более полно раскрывает его суть.

Программы для создания баннеров для сайта

В зависимости от формата применяется соответствующее ПО для создания материала. Если для разработки статики подойдет любой графический редактор, то для разработки анимации необходимо специализированное ПО.

ADOBE PHOTOSHOP — платная. Самый мощный графический редактор. Поддерживает множество форматов, инструментов, позволяет использовать разные спецэффекты и добиваться высокого качества изображений.
EASY GIF ANIMATOR — платная. Выдает GIF или AVI-формат, позволяет работать как с анимацией, так и со статикой. Предусмотрены красивые эффекты, смена кадров, обладает большим набором инструментов. Доступно 20 открытий для бесплатного тестового применения.
BANNER MAKER PRO — платная. Понятный интерфейс, простые функции, любые размеры создаваемых материалов, высокое качество готовой продукции.
ARTWEAVER — условно-бесплатная. Российская программа, графический редактор, имеет множество инструментов для обработки изображений. Можно бесплатно работать с базовым набором функций.
ULEAD GIF ANIMATOR — условно-бесплатная. Более 15 плагинов, удобная раскадровка, синхронизация с «Фотошопом», сохранение во многих форматах. Можно сохранить материал в HTML. ADOBE FLASH CS5 PROFESSIONAL — условно-бесплатная. Сильная программа для разработки FLASH-анимации. Имеет встроенный функционал для производства FLASH-роликов, сотни плагинов, «живую» анимацию, добавление музыки, поддерживает формат FLA. Имеет тестовый период 1 месяц, можно найти бесплатные взломанные версии в интернете.
GOOGLE WEB DESIGNER — бесплатный сервис от Гугл. Сложноватый интерфейс, небольшое количество эффектов, зато много подсказок на русском.
GIMP — бесплатная. Бесплатный аналог «Фотошопа». По функционалу уступает своему предшественнику, но нулевая стоимость склоняет чашу весов в пользу GIMP.
PAINT-NET — бесплатная. Работает только со статикой, ничего лишнего; много возможностей, легкий интерфейс.
AURORA 3D-ANIMATION — условно-бесплатная. От статики до FLASH. Много шаблонов, простой интерфейс, тонкая настройка смены кадров, поддерживает формат SWF.
SOTHIK SWF — бесплатная. Позволяет создавать FLASH, имеет множество готовых шаблонов и картинок.
EASY BANNER — бесплатная. ПО для новичков в дизайне, работает как со статикой, так и с анимацией, есть впечатляющая подборка фонов и стандартных изображений.
ALEO FLASH INTRO BANNER — без оплаты. Работает с FLASH, GIF-анимацией и статикой, много шаблонных звуков, готовых анимаций, шрифтов. Простой интерфейс.
ATANI — бесплатная. Работает с форматом GIF. Инструментарий очень прост и понятен.
BANNER FANS — онлайн-сервис, без оплаты. Много полезных настроек и возможностей. Позволяет рисовать статические медиа-материалы, можно создать баннер онлайн для сайта.
ANNERS NACK — онлайн-сервис, без оплаты. Предельно простой принцип работы, есть готовые шаблоны. Пользователь может легко выбрать подходящий готовый вариант и внести свои корректировки.

Резюме

Качество интернет-баннера определяется не тем, как он выглядит, а в его кликабельности. Реклама может быть несовершенной, но если люди переходят по ней на ваш сайт — значит, вы все сделали правильно!