Создание анимированного баннера.

Допустим, вы уже немного умеете рисовать. Для вас уже не проблема создать незатейливый баннер. Это хорошо, но вдруг вы понимаете, что пока ваш баннер недвижим, он недостаточно выразителен и даже незаметен. Вот тут и начинаются проблемы - вы не умеете создавать анимированные баннеры. Досадовать не следует, т.к. это проще, чем вам кажется.
Для создания анимированного баннера можно использовать программу Adobe Image Ready. Если у вас есть программа Adobe Photoshop CS3, то вам не понадобится Adobe Image Ready, т. к. эта программа рассчитана на создание анимации.
Обычно баннеры делают размером 88x31. Для анимированного баннера создаются несколько картинок одинаковой величины с расширением GIF. Возьмем, к примеру, три картинки размером  88x31, нарисованные в Adobe Photoshop:

Мы будем создавать анимированную кнопку, где надписи будут чередоваться. Таким образом, мы, конечно, не можем пересказать весь рекламный слоган, но маленькую рекламную фразу донести до посетителя сможем. [/b]

1. Для начала, нужно открыть все три рисунка, которые войдут в наш анимационный баннер. Нажимаем в верхнем меню «File» – «Open» («Файл» - «Открыть»). В открывшемся окошке выделяем все три нужных нам рисунка и жмем на кнопку «Открыть». Все три рисунка откроются сразу.

2. Теперь берем один из рисунков и с помощью инструмента  Marquee Tool его выделяем весь.

3. Нажимаем «Edit» - «Copy» («Редактирование» - «Копировать»), затем берем окошко со другим рисунком и вставляем туда - «Edit» - «Paste» («Редактирование» - «Вклеить»). У нас остался еще один рисунок, берем его, копируем, и вставляем туда же, куда и предыдущий. Таким образом, мы должны получить такой рисунок с тремя слоями (для тех, кто не знал, вызывается окошко со слоями так: «Window» - «Show Layers» («Окно» - «Слои»)):

4. На этом этап предварительной подготовки в нашем случае закончен. Конечно, вы можете редактировать все три слоя, но в этом случае учтите: значок кисти стоит напротив редактируемого слоя, значок глаза - напротив того слоя, который мы видим.
Теперь откроем окошко с опциями для анимации: «Window» – «Show Animation» («Окна» - «Анимация»).

5. Жмем на выделенный значок три раза. В итоге у нас получилось четыре кадра.
Если вы заметили, то на всех четырех виден тот слой, напротив которого стоит "глаз". Вот теперь, оперируя "глазом" мы для каждого кадра выберем нужную картинку:

6. Теперь надо установить сколько секунд или долей секунд будет показываться каждый кадр. Куда жать - выделено красным.

7. Выбираем нужное нам («no delay» - без задержки, «other» - выскочит табличка, где вы можете указать свое время, если нужного в списке не оказалось).
Теперь осталась самая малость - установить сколько раз прокрутятся все наши кадры:

8. «Once» - один раз, «Forever» - все время будут крутиться, «Other» - установите столько раз, сколько вам нужно. Можете просмотреть, что у вас получилось прямо на месте, нажав на кнопку «Play».

9. Сохраняйте свое творение «File» – «Save Optimized as» («Файл» - «Сохранить как») и наслаждайтесь. Только не забудьте перед сохранением просмотреть как она будет выглядеть оптимизированная и установить параметры оптимизации.

Автор урока: Алленова Наталья
Корректировала и выкладывала: Neer

Отредактировано Neer (2011-08-03 22:08:45)