|
Если у вас есть своя страничка в Интернете ( у кого же сейчас ее нет
:-)), то вам очевидно, что без собственного баннера не обойтись. Здесь
речь пойдет в первую очередь о баннерах 88 х 31 (некоторые называют их
кнопками). Ну и естественно для привлечения внимания посетителей этот
баннер должен быть анимированным. Степень анимации зависит только от вашего
желания (начиная от простейшей бегущей строки и кончая полной сменой картинки)
и фантазии. Давайте попробуем сделать простенький баннер, используя Fireworks
2.0 - лучшую (IMHO) по совокупности свойств программу для создания графики
в Web.
Собственно пакет Macromedia Fireworks 2.0 можно без проблем скачать
на сайте фирмы, т. е. здесь. Заходите
в Downloads - More Free - Fireworks. В настоящее время доступна 30-дневная
версия 2.0 размером около 12 М.
1. Немного о Macromedia Fireworks 2.0
Внешний вид окна программы приведен ниже :
Собственно эта программа ориентирована впервую очередь на Web-дизайнеров.
Именно в силу этого обстоятельства она содержит массу таких примочек как
набор стилей, эффекты применяемые к любому объекту (Inner Bevel, Outer
Bevel, Drop Shadow, Emboss, Glow). Кроме того эффекты можно смешивать
в произвольной комбинации. А возможности Fireworks в части оптимизации
GIFов, нарезки изображения и сжатия файлов до приемлимого размера вообще
вне конкуренции. Программа позволяет при создании графических объектов
связывать с ним один или несколько обработчиков событий и автоматически
генерирует html файл с кодом на Java. Вобщем возможностей и удобств масса
и заинтересовавшихся я отсылаю на сайт фирмы Macromedia за соответствующим
дистрибутивом, а мы займемся вещами прикладными...
2. Схема баннера.
Под схемой баннера я подразумеваю количество, размер и взаимное расположение
анимированых и неанимированных элементов в пределах прямоугольной области
88 х 31. Здесь достаточно трудно придумать что либо совершенно новое,
уж слишком ограничена рабочая область. С другой стороны назначение этого
вида баннеров достаточно утилитарно - привлечь внимание потенциального
посетителя и сообщить ему в наглядной форме минимум необходимых сведений
о контенте рекламируемого сайта. Вариантов схем может быть масса, приведу
несколько - другие можете придумать сами :
| |
картинка |
|
текст |
|
вертикальный текст |
|
Если схема баннера может быть достаточно произвольной, то размер файла
это вещь совершенно конкретная. В отличие от баннеров размера 468 х 60,
размер (объем) кнопки формально не ограничивается. Тем не менее сложилась
негласная традиция на средний размер файла кнопки в 3 кБайта (максимально
5 - 7 кбайт). Приблизительное время загрузки баннера объемом в 5 кБайт
на скорости 14400 б/с - 3 секунды, на скорости 28800 б/с - 1,5 секунды.
Время достаточно малое, но все же не советую переступать порог в 5 кбайт.
3. Делаем подложку.
Для начала сделаем фон (или подложку) нашего баннера. Загружаем Macromedia
Fireworks 2.0. Выбираем File - New и в открывшейся панели проставляем
width = 88, height = 31, resolution = 72. Для удобства работы развернем
окно в полный экран и увеличим CTRL +.
- Выделяем квадратную область в правой части полотна и заливаем ее голубым
цветом (я не акцентирую внимание на создании подложки, потому как основной
упор в статье делается на добавлении в баннер элементов анимации. Дизайн
собственно баннера - тема отдельного разговора). Снимаем выделение и
инструментом Subselection выбираем квадрат как показано ниже.
- Применим к выбранной области стиль. Назовем ее условно "область
1".
- Затем выделяем оставшуюся часть полотна и просто заливаем ее тем же
цветом. Это "область 2". Простейшая подложка готова, результат
можно видеть ниже.
4. Анимация.
- В Fireworks для создания и управления анимацией служит плавающая панель,
имеющая три закладки - Layers (слои), Frames (кадры), Styles (стили).
Собственно к анимации имеет прямое отношение только закладка Frames,
с ней мы и будем работать. По умолчанию вновь созданный файл содержит
один кадр.
- Сделаем еще 17 кадров (нажатием второй справа кнопки). Просмотрите
вновь созданные кадры - вы увидите что они не содержат элементов нашего
баннера (они только в первом кадре). Скопируем последовательно в каждый
кадр со 2 по 18 области 1 и 2 из первого кадра. Таким образом мы получим
на протяжении всего времени анимации статическую часть баннера.
- Активизируем Frame 1. Выберем инструмент "Text" и кликнем
на области 2. В открывшемся окне набирите текст "Просто" -
размер шрифта 12 bold, выравнивание по центру (не забудьте антиалиасинг).
Выравниваем текст по верхнему срезу полотна.
- Копируем текстовый элемент из фрейма 1 во второй, третий и четвертый
фреймы. Затем активизируем фрейм 2 и меняем текст "Просто"
на "зайди" (двойным кликом на текстовом элементе). Аналогично
в фрейме 3 меняем "Просто" на "на", в фрейме 4 "Просто"
на ">>>". Выбираем закладку Frames и кликаем последовательно
по фреймам 1, 2, 3, 4 - слова фразы должны последовательно сменять друг
друга.
- Теперь добавим вторую часть анимации - бегущую строку с URL сайта
(www.tut.ru). Наша бегущая строка займет фреймы с 4 по 18. Реализуется
это очень просто: элемент "Text" фрейма 1 содержит только
первую букву URL ("W") , элемент "Text" фрейма 2
содержит уже две буквы ("WW") и так далее до фрейма 18 (пустой
фрейм). Активизируем фрейм 4 (тот на котором ">>>").
Выбираем инструмент "Text" и кликаем пониже элемента ">>>".
В окне "Text editor" пишем W и выравниваем по правому краю,
затем копируем созданный элемент "Text" в следующие фреймы
до 17 и корректируем каждый фрейм добавляя буквы. После окончания можно
последовательно пройтись по фреймам и убедиться что бегущая строка работает.
- Наконец последний этап - экспорт в формат GIF. Выбираем File - Export.
Открывается окно "Export Preview".
- На закладке "Options" устанавливаем "Format" =
Animated GIF, на закладке "File" проверяем размеры картинки
88 х 31 и переходим на закладку "Animation".
- Для первых трех фреймов проставляем интервал анимации 100, а для остальных
(4 - 18) ставим 20. Ниже активизируем кнопку "Loop" и ставим
в поле "Number of loops" - Forever. Жмем кнопку "Next"
и сохраняем наш баннер в файл.
- Вот вобщем-то и все - можно просмотреть сделанное.
- Ну и последнее посмотрим-ка на размер файла - 3700 байт. Думаю вполне
приемлимо.
25 августа 1999 года
|
