Форум eBanners.Ru: Реклама в интернете и раскрутка сайтов - форум по интернет-рекламе
Создание анимированного баннера - Веб-дизайн, разработка сайтов и создание баннеров - интернет-реклама
У вас есть вопрос по рекламе в интернете и раскрутке сайтов? Задайте его здесь и вам ответят. Вы уже всё знаете? Помогите тем, кто знает пока не всё. Правила форума|
Сделать стартовой|Добавить в избранное.
Форум (в том числе) и о создании баннеров, а материала кот наплакал. Для завязки темы - начало одной статьи о создании анимированного баннера.
Создание анимированного баннера
Для создания анимированного баннера используем формат GIF позволяющий хранить изображение в виде нескольких слоев, каждый из которых может представлять собой отдельное изображение. При этом каждому слою в gif-изображении можно задать определенное время, в течение которого он будет отображаться. Чередуя слои, получаем анимацию.
Для изготовления нашего анимированного баннера используем бесплатный графический редактор GIMP. Он позволяет работать с слоями и сохранять изображения в формате GIF как анимацию.
Процесс создания рассмотрим на примере баннера формата 120х120 для сайта "Библиотека бесплатных программ".
Идея — простая таблица с названиями программ выполненными в виде гиперссылок (подчеркнутые), и курсор в режиме "выбор ссылки" который перемещается по этим названиям.
Сначала нарисуем основной рисунок. Таблица должна быть похожа на "настоящую" таблицу из сайта, поэтому ее лучше скопировать с html-страницы созданной в каком-то редакторе HTML, или вручную. В моем случае я использовал программу Dreamweaver. Скопировавши, с помощью команды "Screen" эту страницу, создаем в GIMP новое изображение 120х120 (Файл > Создать) и вставляем (Правка > Вставить) в него нашу копию экрана.
Далее, использовав инструмент для перемещения слоев и выделенных участков, совмещаем изображение таблицы с границами рисунка. Прикрепляем слой (Слой > Прикрепить слой). Сохраняем изображение (Файл > Сохранить) в формате GIF под именем 0.gif:
После этого вставляем в наш рисунок изображение курсора (можно скопировать прямо отсюда — ), расположив его вверху, около названия первой программы. Сохраняем изображение (Файл > Сохранить как) под именем 1.gif.
Таким образом создаем еще четыре картинки:
Обратите внимание — для достижения более реалистического изображения ссылок, был изменен их цвет при "наведении" изображения курсора.
Теперь у нас есть пять кадров для создания анимированного баннера. Открываем первый из них (1.gif) и последовательно копируя следующие четыре "кадра", вставляем их как слои в основной рисунок.
Далее сохраняем полученное изображение как GIF (Файл — Сохранить как). GIMP предложит сделать выбор — объединить слои в одно изображение или сохранить их как анимацию. Выбираем анимацию и жмем "Экспорт". В следующем окне предстоит урегулировать несколько параметров нашего изображения:
Черезстрочность — обычный параметр изображений GIF.
Комментарий GIF — можно вставить комментарий.
Бесконечный цикл — чередование слоев будет выполняться бесконечно Если этот параметр будет отключен, то анимация будет проиграна один раз и остановится на изображении последнего слоя.
Задержка между кадрами — время в микросекундах, которое по умолчанию будет отображаться каждый слой.
Расположение кадра — здесь три режима: неважно — все сделает GIMP; наложение слоев — накладывать один слой на другой, не убирая предыдущие; один слой на шар — замещать предыдущий слой на новый.
При открытии баннера с помощью GIMP будет видно, что в окне слоев в названии каждого слоя в скобках добавилось время отображения. Таким образом, изменив значение в скобках, можно задать каждому слою свое персональное время отображения.