как создать анимированный баннер

Здравствуйте уважаемый читатель.

Совсем недавно столкнулся с проблемой – как создать баннер.

Для одного моего проекта нужно было по быстренькому “сваять” простенький анимированный баннер. Ни чего сверхъестественного, простой анимированный баннер размеров 468х60, с синим фоном и с анимированным текстом.

Начал искать в сети информацию на тему как создать баннер самостоятельно.

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

Возможно, вы с ней уже сталкивались, она довольно древняя (около 2006 года), но позволяет создавать очень неплохие анимированные баннеры.

Я написал для вас небольшую скриншотно-текстовую инструкцию (хотел видео, но мой микрофон “забарахлил”).

Итак, поехали:

1. Откройте программу Bannershop GIF Animator и в меню File выберите New Animation Wizard. Далее с помощью небольшого мастера создайте заготовку баннера.


как создать анимированный баннер


как создать анимированный баннер

2. После того как заготовка создана, будущему баннеру необходимо задать фоновый цвет.

Для этого кликните правой кнопкой мыши на заготовке баннера и выберите пункт Set Background Color. В открывшемся окне выберите цвет и нажмите OK.


как создать анимированный баннер

3. Так теперь давайте остановимся и придумаем “сценарий” будущего баннера.
У меня такой: на баннере появляется (с анимацией) надпись “Хочешь узнать как делать красивые видео-уроки”, далее надпись исчезает, и появляется картинка и текстом “Полное руководство по работе с видео и аудио на сайте”, и в конце текст “Скачать бесплатно”.

Вот пример:


как создать анимированный баннер

4. Теперь давайте реализуем баннер в программе. Так как баннер состоит из трех частей добавляем к нему еще два слоя (один уже есть). Для этого в панели Frame list нажимаем два раза кнопку New.


как создать анимированный баннер

5. Теперь в поле Frame list выбираем Frame 1. И с помощью инструмента Текст (находится на левой панели) добавляем на баннер необходимый текст.


как создать анимированный баннер

6. Так, первая часть баннера готова, теперь переходим к созданию второй. Для этого в поле Frame list выбираем Frame 1 и добавляем на этот слой необходимые элементы (в моем случае это картинка и текст). Для того, чтобы добавить картинку, кликните правой кнопкой мыши на баннере и в открывшемся меню выберите Import Image, далее укажите путь к необходимой картинке. Теперь добавляем текст (как это делать вы уже знаете).


как создать анимированный баннер

7. Теперь аналогично предыдущим слоям сделайте третий слой.


как создать анимированный баннер

8. Теперь можете посмотреть результат, для этого нажмите кнопку play (зеленая кнопка на панели инструментов). Что, без анимации плохо, да, и кадры идут слишком быстро? Давайте это исправим.

9. Для того, чтобы слайды показывались подольше измените временное значение на панели Frame list в поле delay (внимание: для каждого слайда необходимо указывать время показа отдельно).


как создать анимированный баннер

10. Теперь перейдем к самому интересному и красивому (и самому легкому) к анимации. Для того, чтобы добавить анимацию, например к тексту, просто кликните по нему правой кнопкой мыши и выберите пункт intro animation, далее в появившемся окне выберите необходимую анимацию и нажмите ОК.

11. Все баннер готов, теперь осталось его только сохранить – File – Save………

Все, теперь вы знаете как создать баннер самостоятельно, для себя или за деньги)))))))))))




Оставить комментарий

Подписка на обновления блога
Социальные сети

Введите ваш email адрес:



Социальные сети Социальные сети Социальные сети Социальные сети


Return to Top ▲Return to Top ▲
Мультимедийные "фишки" для вашего интернет бизнеса
Главная | Контакты | Мои услуги | Видео от А до Я | Видео-курсы | Все посты | Об авторе