Баннер (от англ. banner – флаг, транспарант, растяжка) – это статическая картинка или несложная мультипликация (анимированная картинка), размещаемая на веб-страницах в рекламных целях. Обычно эта картинка является ссылкой, по которой можно перейти на рекламируемый сайт или на страницу, содержащую более развернутую информацию о рекламируемом товаре (это действие называется "переход по баннеру" или "клик").

   Баннеры бывают статичные и анимированные.

  1. Статичный баннер представляет собой  яркое статичное изображение (форматы: *.jpg, *.gif).
  1. Анимированный баннер может разрабатываться на основе технологии Flash или в формате GIF.

    Анимированный GIF-баннер представляет собой набор сменяющих друг друга статичных изображений (кадров) с интервалом в несколько секунд. Обычно состоит из 3-5 кадров. Недостатками GIF-баннера являются значительное “утяжеление” баннера с увеличением числа кадров и отсутствие возможности создания сложных анимационных эффектов.

    Стандартные размеры баннеров.

  • баннеры 468x60 пикселей;
  • баннеры 120х60, 150х60, 140х 60 – как видно из размеров, являются вариантами баннера 468х60;
  • баннер 120х240 пикселей – вариант вертикального баннера;
  • баннер 100х100 пикселей – квадратик, достаточно широко используется в интернет рекламе;
  • баннеры 88х31, 88х40, 81х63 – эти кнопочки для счетчиков, рейтингов, для обмена ссылок между сайтами.

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

    Что не следует делать в баннерах:

  1. Не надо вставлять в баннер размытое изображение (портит баннер). 
  2. Не вставляйте в баннер бессмысленный текст.
  3. Не надо делать шрифт больше 50.
  4. Когда используете большой шрифт, не следует применять Bold Style (выделение жирным)
  5. Флэш баннер не должен быть мигающим и не должен раздражать посетителя.
  6. Размер флэш баннера не должен превышать 50 кб, иначе на медленном модеме слишком долго будет грузится. 

Пример создания анимации

   Создаем новый документ File -New (Ctrl+N).

   В открывшемся окне задаем размеры баннера: 600 х 120, назовем его «Новогодний
баннер» -> «Ок».

   Создаем фон

    Пишем текст. Создаем новый слой (Ctrl+Shift+N) либо щелкаем по иконке нового слоя в палитре слоев.

   Выбираем инструмент «Horizontal Type Tool» (T).

   Добавляем блеск тексту Создаем новый слой (Ctrl+Shift+N). Выбираем инструмент Brush Tool (B). Выбираем кисть с любой звездой, рисовать будет белым цветом #ffffff. На новом слое рисуем звездочки в произвольных местах. Чтобы звезды получились поярче, кликаем по несколько раз в одном месте. Вот что получилось у меня:

   Делаем дубликат слоя (Ctrl+J). Щелкаем на иконку глаза в палитре слоев, чтобы скрыть видимость предыдущего слоя.

   Выделите верхний слой с копией звезд. На панели слева выберите инструмент «Lasso Tool(L)». Выделяем каждую звезду по очереди, нажимаем «V»(инструмент Move Tool) и переносим на любое другое место, таким образом у нас в разных кадрах звездочки будут на разных местах, благодаря чему создастся эффект мерцания.

   После того, как передвинете все звезды на другое место, создайте дубликат слоя, на котором работали (Ctrl+J), скройте предыдущий слой в палитре слоев, щелкнув на глазик, и снова повторите операцию по перемещению звезд на новые места, вы также можете дорисовать несколько новых звезд.
   Таким образом, у нас получится 3 слоя со звездами, в каждом из которых звезды будут находиться на разных позициях.
   Переходим к созданию анимации в фотошопе
   Открываем временную шкалу. Заходим в меню «Window» — «Timeline» (Окно —Шкала времени).

В появившейся панели шкала времени находим кнопку посередине «Create Video Timeline» (Создать временную шкалу для видео). После этого шкала должна изменить вид- на покадровую анимацию.

   У нас открылась панель покадровой анимации. Сейчас в ней только один кадр, в котором показаны все видимые слои (содержание выделенного кадра показывается в основном окне на мониторе). Переходим в палитру слоев — F7. Нам необходимо сейчас отключить два верхних слоя со звездами, оставив видимым только один. Это будет первым кадром.

   Далее создаем второй кадр, щелкнув на соответствующем значке внизу временной шкалы.

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

   Опять кликаем на значок нового кадра. Выключаем второй слой со звездами, включаем третий.

   Обратите внимание на время под каждым кадром, это продолжительность показа кадра. 5 сек, которые стоят по умолчанию, для нас очень много — анимация будет тормозить, щелкнем на стрелочку и установим длительность каждого кадра по 0,1 сек.

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

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

   Между первым и вторым ключевыми кадрами у вас появилось 2 промежуточных. Теперь встаем на 2ой ключевой кадр ( теперь он 4-ый по счету), опять нажимаем на значок с кружками и создаем еще 2 промежуточных кадра. Теперь нам осталось замкнуть последний и первый кадр для получения плавной анимации.
   Выделяем последний кадр в шкале времени. Нажимаем на кружки. В появившемся окне, в строке «Промежуточные кадры» выбираем «Первый кадр», кадров добавляем все так же 2.

   Теперь под кадрами внизу слева указываем количество повторов воспроизведения анимации «Постоянно».