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