Если вы скачали программу Ulead GIF Animator 5, установили и открыли программу Adobe Photoshop CS3, самое время читать статью.Подробная пошаговая инструкция этой статьи позволит даже новичку создать свой качественный и красивый баннер. Для этого достаточно нарисовать кадры (последовательность изображений GIF) в Фотошопе и затем собрать их программой Ulead GIF Animator 5. Результатом будет также картинка GIF, но уже анимированная. И ее можно с полной уверенностью называть GIF-баннером.
Для продвижения своего сайта нужны баннеры. Их можно размещать бесплатно в блогах своих знакомых или на коммерческой основе на сайтах с высокой посещаемостью. Создание баннера можно заказать в профессиональной веб студии, а можно сделать самому.
В этой статье мы научимся делать анимированные GIF-баннер средней сложности с нуля. Для этого нам понадобится немного времени и терпения, т.к. шедевр анимации у новичка за час не получится никак. Из программ мы будем использовать Adobe Photoshop CS3 – для подготовки кадров баннера и Ulead GIF Animator 5 – для создания из готовых кадров анимационного ролика в формате GIF. Если вы не знаете, где взять эти программы, рекомендую смотреть раздел полезные программы.
В результате выполнения этого урока мы получим вот такой баннер:
Этап I: Подготовка кадров баннера в программе Adobe Photoshop:
1. Выбираем размер баннера, который мы будем делать (в примере ширина баннера 468 пикселей, высота 60 пикселей). Определяемся с примерным сценарием баннера: что и как будет двигаться. Ищем в интернете нужные картинки, готовим логотип компании и другую графику, которую вы хотите вставить в свой будущий баннер.
2. Создаем в Фотошопе файл размером 468х60. Добавляем в него всю нужную графику, логотип, размещаем в нужном месте видимой области баннера, выравниваем. Чаше всего в баннерах делают тонкую рамку на границе видимой области, некоторые сайты даже не принимают рекламные баннеры, не ограниченные рамкой.
Каждый элемент располагаем на отдельном слое. Желательно группировать слои в папки, чтобы не путаться, какая графика к какому кадру относится. Подготовив один кадр, скрываем его слои для удобства и на освободившемся месте готовим другой кадр. Получится примерно так:
3. После того, как все кадры созданы и распределены по слоям в фотошоповском файле, нам нужно сделать отдельные кадры, которые мы будем анимировать. Для этого мы будем скрывать ненужные в данном кадре слои и сохранять в формате GIF каждый кадр по очереди, начиная с первого, в отдельную папку.
1 кадр: Спрятав все слои, кроме самого нижнего, сохраним фон нашего баннера:
2 кадр: Сохраняем файл с логотипом, но без надписи «Веб-студия»:
3 кадр: Сохраняем кадр логотипа:
4 кадр: Прячем все слои, кроме слоя с арбузом и фонового. Сохраняем предпоследний кадр анимации:
5 кадр: Делаем видимым еще и слой со слоганом баннера. Сохраняем пятый файл в gif:
В результате мы создали 5 статических GIF-файлов, из которых сейчас сделаем один файл GIF-анимации.
Этап II: Создание анимированного GIF-баннера из подготовленных кадров с помощью программы Ulead GIF Animator:
