Рассылка блога

Форма подписки

Подпишись на обновления сайта. Получай новые статьи на почту:

Напишите мне

Your message was successfully sent.
Thank You!

Яндекс.Метрика
Яндекс цитирования
DevilArt.name - cервис анализа сайтов
Счетчик PR-CY.Rank
Счетчик PR-CY.Rank

Анимированный баннер

Анимированный баннер

          Анимированный баннерКак сделать статичный баннер и разместить его на сайте, показано ранее. Теперь же рассмотрим, как сделать анимированный баннер. Ни для кого не секрет, что главным предназначением любого баннера является привлечение внимания посетителей. Конечно же анимация или, другими словами, меняющаяся картинка может гораздо успешнее выполнять задачи привлечения посетителей, чем картинка статичная. Может быть, потому, что все мы в детстве любили мультики…  В интернете достаточно материалов на указанную тему. Есть более удачные, есть менее удачные статьи, видео уроки, различные обзоры методов и онлайн сервисов для создания анимированных баннеров. Следуя своему правилу – метод должен быть простым, удобным для использования новичками, я выделил один из онлайн сервисов old.gifovina.ru, который и рассматривается в данной статье.

         


Принцип анимированного баннера подчиняется  законам анимации, согласно которым меняющееся изображение получается сменой с той или иной частотой отдельных картинок. Для решения технической задачи создания анимации и предназначен онлайн сервис Оld.gifovina.ru. Это значит, что исходные материалы (картинки) у нас уже подготовлены и сохранены на компьютере. Сразу отмечаем, что картинки должны быть одинаковыми по размеру. Процесс создания картинок подробно показан в статьях «Как проще подготовить изображение для блога?» и «Как сделать баннер и создать его код?».

          Войти в онлайн сервис можно прямо по ссылке http://old.gifovina.ru/ . Сразу попадаем на главную страницу сервиса (рисунок 1). Нажимаем на кнопку «Добавить кадр», в открывшемся диалоговом окне выбираем нужное изображение, сохраненное на нашем компьютере и в нем же нажимаем кнопку «Открыть».

Анимированный баннер

Рисунок 1. Главная страница онлайн сервиса Оld.gifovina.ru

 

Происходит процесс закачки выбранного изображения, по окончании которого в поле 1 отображается уменьшенная выбранная картинка, а в поле 2 – нормального размера. Чтобы выбрать второй кадр, нажимаем опять на кнопку «Добавить кадр» и выбираем вторую сохраненную картинку. Теперь в поле 1 отображаются обе выбранные картинки, а вполе 2 – вторая картинка (рисунок 2). Загружаем столько картинок, сколько нужно для обеспечения качественного процесса анимации. Если нам нужно, чтобы изображение изменялось плавно, загружаем больше картинок. Вообще, следует помнить, что чем больше картинок, тем качественнее анимация, но одновременно, файл баннера больше весит, что может тормозить работу сайта. Поэтому, в зависимости от назначения баннера, иногда лучше ограничиться двумя картинками, которые сами, или их какие-то элементы просто будут сменять  друг друга, тем самым уже привлекая внимание посетителей.

Анимированный баннер

Рисунок 2. Отражение выбранных картинок для баннера

 

          При нажатии на треугольник в окошке под надписью «Размер» открывается всплывающее окно 3 (рисунорк 3). В нем из списка стандартных размеров баннеров нужно выбрать нужный нам. Если ни один из них нас не устраивает, выбираем «Другой» (4) и в открывшихся окошках вводим требуемые ширину и высоту баннера в пикселях. Нажимаем кнопку «ОК».

          Эффекты выбираются во всплывающем окне 5, открывающемся при нажатии на треугольник под надписью «Эффект» (рисунок 4). Из списка можно выбрать «Без эффектов», «Всплытие», «Всплытие с осветлением», «Всплытие с затемнением», «Пикселизация».

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

          По окончании выбора параметров анимации нажимаем на кнопку «Готово»(рисунок 2). Открывается окно с результатами анимации (рисунок 5), где мы видим отражение самого процесса анимации во времени.

Анимированный баннер

Рисунок 3. Выбор размера баннера

Анимированный баннер

Рисунок 4. Выбор эффектов анимации, скорости смены кадров и длительности эффекта

Анимированный баннер

Рисунок 5. Окно с результатами анимации

 

Если результаты нас устраивают, нажимаем кнопку «Скачать» (рисунок 5). В открывшемся окне (рисунок 6) видим имя рисунка, тип, источник. В окошке «Открыть в:» можно выбрать программу открытия. Для сохранения нажимаем кнопку «Сохранить»,выбираем место на компьютере и сохраняем в выбранное место.

Анимированный баннер

Рисунок 6. Окно сохранения изготовленного баннера

 

          Далее необходимо получить URL места, где сохранена картинка и создать код баннера. Процесс получения URL и создания кода подробно раскрыты в статье «Как сделать баннер и создать его код?». В нашем примере местонахождение загруженного файла: http://fobos12.ru/wp-content/uploads/2012/12/f634f63338bcfe7aa95777b78ebeba95.gif, код анимированного баннера:

<center><a href=»http://fobos12.ru/saitsozdam/» target=_blank><img src=»http://fobos12.ru/wp-content/uploads/2012/12/f634f63338bcfe7aa95777b78ebeba95.gif» border=»0″ title=»Сайтсамсоздам» width=»155″ height=»200″ alt=»"></a></center>

Копируем созданный код и размещаем на сайте, как показано в статье «Размещение баннера».

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

 

Подпишись на обновления сайта. Получай новые статьи на почту:

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

Ваш e-mail: *
Ваше имя: *
Подписчиков:

Нравится


Яндекс.Метрика

 

Понравилась статья? Поделитесь с друзьями! Нажмите на кнопочки!
Приглашаю присоединиться:

Похожие статьи

2 комментариев к записи Анимированный баннер

Страница 1 из 11
  • Виктор сказал:

    Спасибо за полезные уроки.Буду пробовать и пытатся сделать что то подобное!

  • filkons сказал:

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

Страница 1 из 11

Добавить комментарий

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

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Рад приветствовать!

Подписаться

Архивы

Хостинг для Wordpress сайтов