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

И так в данной статье мы рассмотрим как создать анимированую кнопку  баннер для своего сайта самому....


Запускаем программу Photoshop (у меня стоит Adobe Photoshop CS3).

1. Создаем новый документ (Ctrl + N) нужного размера (в данном случае 88х31 пиксель).
2. Подбираем нужный фон (я использовал фон с цветом #FDF8D9).
3. Идем в палитру со слоями (Windows→Layers или жмем F7). Дважды щелкаем по слою Background, удерживая клавишу Alt, тем самым преобразуем его в простой слой.
4. Создадим внутреннюю обводку нашему слою. Для этого еще раз щелкаем дважды по слою или, выделив наш слой, идем в Layer→Layer Style→Blending Options или, нажав правой кнопкой мыши по нашему слою, выбираем Blending Options. В появившемся окне выбираем слева, самый нижний пункт Stroke. Задаем такие параметры: Size: 1, Position: Inside, Color: #A28564 и жмем кнопку ОК.
5. Теперь нам надо написать текст к первому кадру нашего анимированного баннера: “все самое ИНТЕРЕСНОЕ в сети Интернет”. Для этого используем инструмент Type tool (горячая клавиша T). Временно скрываем его из видимости (чтобы скрыть любой слой из видимости, надо отключить иконку глаза напротив этого слоя ).
   
6. Далее делаем подложку. Создаем новый слой (Shift+Ctrl+N). Выбираем инструмент с прямоугольным выделением (горячая клавиша M). Выделяем нужную нам область (во время выделения, удобно использовать клавишу Пробел, что позволит вам двигать форму выделения). После этого заливаем наше выделение цветом #FAEEAC.
   
7. Снимаем выделение (Ctrl+D). Пишем новый текст. В нашем примере это – “Блог об Интернет” (цвет текста #784814) и “FREEGOLD.RU” (цвет текста #870000).
   
8. Выбираем слой с текстом “FREEGOLD.RU” и делаем его копию (Ctrl+J). Слои “FREEGOLD.RU” и “Блог об Интернет” скрываем. Работаем с копией слоя. Идем в меню Filter→Blur→Motion Blur. Ставим значения Angle – 0, Distance - 10.
   
9. Подготовим первый кадр для анимации: делаем видимыми слои - слой с фоном, слой с подложкой и слой с текстом “Блог об Интернет”.
   
10. Теперь, когда для анимации все готово, идем в меню Windows→Animation. Далее делаем копию кадра: нажимаем на кнопочку Duplicates selected frames.
    
11. Настраиваем анимацию для второго кадра. Включаем копию слоя, тот, который размытый “FREEGOLD.RU”. Анимацию можно просмотреть в любой момент, нажав на кнопку Play
12. Опять делаем копию кадра. Теперь уже включаем неразмытый слой “FREEGOLD.RU”, а размытый слой выключаем. После этого выбираем 2-й и 3-й кадры (выделяем с нажатой клавишей Shift) и жмем кнопку Tweens animation frames.
    
    В появившемся окошке указываем количество кадров – 5 и нажимаем ОК. Это даст плавный переход между кадрами.
    
13. Дублируем последний кадр. Оставляем включенными слой с фоном и слой с текстом “самое ИНТЕРЕСНОЕ в сети Интернет», остальные слои отключаем. Все наши кадры готовы. В итоге у меня получилось 9 кадров. Остается только подобрать время показа для каждого кадра. Под каждым кадром есть вкладка, где можно указать время его показа кадра.
    Если в списке нет времени, которое вам подходит, воспользуйтесь пунктом Others.
    
    Путем подбора разного времени для кадров, я остановился на таком результате:
    Теперь остается только сохранить нашу анимацию (File→Save for web…) и сохраняем в формате GIF.