16+
ComputerPrice
НА ГЛАВНУЮ СТАТЬИ НОВОСТИ О НАС




Яндекс цитирования


Версия для печати

Модуль поиска не установлен.

История одного баннера

28.04.2004

Наталья Климова

Любой, кто хоть раз бывал в Интернете, видел баннеры, информирующие о появлении нового косметического средства или очередного бестселлера. Само слово "баннер" произошло, согласно Yandex-энцикопедии, от английского banner - флаг, транспарант, растяжка. Он обычно представляет из себя статическую картинку или несложную мультипликацию (анимированная картинка), размещенную на веб-страницах в рекламных целях. Обычно эта картинка является ссылкой, по которой можно перейти на рекламируемый сайт или на страницу, содержащую более развернутую информацию о рекламируемом товаре.

Как и большинство читателей, я чаще всего не обращала на них внимание, но все в жизни случается в первый раз: я столкнулась с необходимостью быстро создать баннер для своего сайта.

Итак, следуя школьной методике решения задач, рассмотрим условия. Баннер должен быть размером 165х21 мм, цветным, анимированным. Искать и скачивать специальную программу в Интернете некогда, значит, будем пользоваться тем что есть под рукой, а именно CorelDraw и Corel Photo-Paint.

Приступим. Создаем новый документ и для удобства работы меняем разрешение страницы на 72dpi: выбираем пункты меню Tools - Options, далее в левом окне пункт Document - General и указываем значение Resolution 72.

Теперь нарисуем прямоугольник размером 165х21 мм. Первым кадром будет изображение логотипа, далее будем постепенно добавлять названия рубрик. Вставляем логотип и экспортируем первый кадр с разрешением 72dpi и цветовой моделью RGB в формат точечного изображения TIFF (например, kadr1.tiff). На этом этапе можно не беспокоиться об оптимизации изображения. Главное, пронумеровать кадры в порядке их следования и экспортировать их при одинаковых значениях управляющих параметров, так как даже небольшие отклонения могут привести к заметным искажениям.

Теперь названия рубрик. Попробуем украсить текст. Для этого выбираем на панели инструментов Interactive Contour (Интерактивный контур) и указателем инструмента перетаскиваем любую точку текста наружу, наблюдая за изменением количества ореола шагов (Step) на панели атрибутов, нам достаточно 2, а величину шага (offset) равной 0,5 мм. После этого на изображении появятся фигуры, нужные для построения множественной обводки. Теперь выбираем в меню Arrange (Монтаж) команду Separate (Отделить), а затем там же команду Ungroup All (Разгруппировать все). Это даст нам три отдельных объекта, которые мы раскрашиваем в белый, черный, красный (в порядке от большего контура к меньшему. Повторим эту процедуру с остальным текстом. Постепенно добавляя его в баннер и создавая новые кадры.

Итого у нас 5 кадров.

Приступим к сборке. Запустите Photo-Paint и откройте изображение, соответствующее первому кадру (kadr1.tiff). Выберите команду Movie - Create From Document (Ролик - Создать из документа), чтобы преобразовать единственное графическое изображение в формат многокадровой анимации. Теперь пора добавлять следующие кадры. Выбираем в меню Movie - Insert From File (Ролик - Вставить из файла) и добавляем файл, соответствующий второму кадру (kadr2.tiff). В открывшемся окне Insert File (Вставить файл) выбираем вариант вставки After (После) и нажимаем ОК. Повторяем процедуру еще несколько раз и получаем файл в формате avi, который будет нелишним сохранить на диске.

Посмотрим, что у нас получилось. Выбираем Movie - Control - Play Movie. Для остановки воспроизведения достаточно нажать клавишу Esc.

Если анимация работает и все кадры на месте, перейдем к более точной настройке и оптимизации ролика. Во-первых, необходимо избавиться от пустого белого пространства внизу баннера. Для этого выбираем пункт Image - Paper Size (Изображение - Размер листа). Несмотря на то что в области предварительного просмотра виден только один кадр, внесенные изменения отразятся во всех.

Во-вторых, преобразуем палитру. Меню Image - Mode (Изображение - Способ), затем Palleted 8 bit (Палитра 8 бит). В открывшемся диалоговом окне Convert To Palleted (Преобразовать к палитре) выбираем палитру (Pallete) Adaptive (Адаптивная), а в качестве режима имитации полутонов (Dithering) - Ordered (Упорядоченная) и жмем на кнопку ОК.

Осталось только сохранить созданный файл в формате Gif. Для этого выбираем в меню File - Save As (Файл - Сохранить как), затем указываем в качестве типа файла (File of types) - Gif и щелкаем по кнопке Save.

Теперь - время более точной настройки с помощью появившегося диалогового окна GIF89 Animation. На вкладке File Settings ставим галочки Loop Frames (Цикл кадров) и Forever (Бесконечно), что позволит анимации повторяться без остановок. Если вам достаточно 1-2 показов, поставьте галочку Stop After (Остановить после) и укажите количество циклов показа ролика.

На вкладке Frame Settings (Параметры кадра) установить время, которое каждый кадр из ролика останется на экране. За это отвечает управляющий параметр Frame Delay (Задержка кадра). Достаточно указать значение и нажать кнопку Apply All (Применить все), для вступления его в силу. Результат можно увидеть, если вы нажмете кнопку Prewie (Просмотр), а затем кнопку Play. Для настройки времени для каждого кадра индивидуально его следует выбрать щелчком мыши в левом окне предварительного просмотра (при нажатой клавише Shift можно выбрать несколько кадров одновременно) и указать время.

Все, баннер готов!



статьи
статьи
 / 
новости
новости
 / 
контакты
контакты