Баннер (от англ. 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.

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

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

   Чтобы сохранить анимацию, созданную в фотошопе, заходим в меню «File» — «Save For Web & Devices» («Файл» — «Сохранить для Web»).

   Выбираем формат файла для сохранения GIF, нажимаем «Сохранить…», выбираем директорию, куда будем сохранять, жмем опять «Сохранить»