GetInfo.Ru – Компьютерная библиотека
Последние поступления
Как выбрать систему управления базы данных
Базы данных03/09/14
Этапы загрузки UNIX (в схеме)
Unix27/03/12
Gatewall Antispam: тотальный контроль электронной почты
Спам21/04/11
Мастер-класс: создаем Интернет-магазин (Часть 1)
Обзоры ПО20/04/11
CorelDRAW Graphics Suite X5: Что нового?
Обзоры ПО20/07/10
Добавить статью
Самые читаемые материалы
Подбор гармоничных цветов(39358)
Колористика(22271)
Основы веб-дизайна(17608)
Шрифт. История шрифта(15966)
Пиктограммы для сайта - это просто!(15526)
Всего статей: 793Всего авторов: 364Подразделов: 47Добавлено за сутки: 0
Статьи  СТАТЬИ Форум  ФОРУМ Рейтинг  РЕЙТИНГ Поиск  ПОИСК Контакты  КОНТАКТЫ
» Главная » Основы дизайна » Cоздание сложного анимированного баннера

Cоздание сложного анимированного баннера


Татьяна Вукс
nundesign@ukr.net
http://www.nundesign.com/

Не будем спорить, что именно называть "сложным" анимированным банером — здесь разговор пойдет о баннере, в котором БОЛЬШЕ трех фреймов. И больше 10. Скажем, около 150. Интересно?

Одно из условий, стоящих перед всеми дизайнерами-разработчиками - его творение должно быть легким. Как правило верхняя граница веса — не более 15 Kb. Поскольку речь пойдет именно об анимированном гифе, т.е. о наборе индексированных изображений, напомним еще несколько правил:

  1. палитра gif'a может содержать максимум 256 цветов (меньше — можно, больше — нет) и в нем применяется алгоритм сжатия без потери качества изображения (конкретно — алгоритм LZW). Также GIF допускает создание прозрачных областей и анимации. Используя gif-формат, следует помнить о закрытости лицензии алгоритма компрессии LZW, из-за чего требуется её (эту самую лицензию) оплачивать для использования в любом программном обеспечении. Этот недостаток приведёт к тому, что постепенно в графике для web от формата GIF будут отказываться в пользу других, более открытых форматов. Что касается анимированных баннеров - здесь альтернативой может являться использование flash-технологий, avi... Печально это как-то звучит... И все же, поскольку разговор идет именно об анимированном gif`е, переходим к сл. пункту:

  2. наиболее существенный параметр индексированного изображения — количество цветов в его палитре. Важной задачей при создании нашего баннера станет сведение количества цветов к минимуму;

  3. Наличие градиентных заливок и многоцветных рисунков и фотографий делает невозможным серьезное уменьшение количества цветов в палитре, поэтому градиентных заливок у нас не будет, а с фотографиями… посмотрим;

  4. Опять же в целях уменьшения количества цветов в палитре рекламный текст, присутствующий на баннере, будет без сглаживания. Следует отметить, что anti-aliased вообще имеет смысл включать только лишь для шрифта крупнее 12px - мелкий шрифт читаться со сглаживанием не будет. Конечно, тут же перед вами возникнет проблема выбора шрифта - но это вопрос к следующему материалу.

  5. Очень сложно подготовить большое количество фреймов, соблюдая динамику и не допустить никаких ошибок, поэтому технология изготовления баннера из отдельных кадров, поочереди загружаемых в Ulead Gif Animator нам не подойдет. Баннер будем делать в Adobe (все исходники можно собрать в PhotoShop`e, a саму анимацию — в ImageReady)

Предположим, что вы уже знаете, в какой цветовой гамме будет ваш баннер, и что будет происходить (крутиться, двигаться, появляться и исчезать). Создаете новый файл, в полях размеров указываете формат вашего баннера, в подразделе background выбираете transparent — вы получили поле нужного размера с одним, пока еще пустым слоем.

  1. При создании баннеров важно помнить, что чудное свойство гифа, анимированного в том числе — transparent в данном случае можно забыть, поскольку зачастую судьбу баннера предсказать трудно — на какой сайт, с каким фоновым цветом или еще хуже — с каким background image ваш шедевр станет. Т.е. ваша прямоугольная область не должна иметь прозрачных участков

  2. В случае если разрабатываемый баннер имеет цвет, отличный от белого, черного и серого, — скорее всего общий тон вашего баннера будет отличаться от основного тона страницы сайта. Теория вероятности штука сложная, но даже если вы делаете баннер с хитролиловым background`oм, и он попадает на похожий хитролиловый сайт (совершенно случайно) - скорее всего оттенки все же будут отличаться. Но баннеры со стандартным цветом background`а лучше оформлять в рамочку, можно тоненькую однопиксельную, можно цвета не сильно отличающегося от основного… Для того, что бы ту информацию, которую представляете в баннере ВЫ отделить от общей информации пространства чужого для вас cайта.

  3. Пора считать — background и обводка — это уже два цвета. Считать и контролировать количество используемых цветов придется все время.

  4. Внимательно подумайте — является ли необходимым присутствие на баннере иллюстраций? Допустим, да. Зачастую это действительно оправдано — человек, мельком взглянувший на баннер, рекламирующий компьютерный магазин легче зацепится взглядом за изображение монитора или мыши, чем то же самое, написанное словами. Если вы решили в баннере эти самые мониторы таки показать — заранее обработайте изображение — для того, что бы монитор был похож сам на себя, достаточно двух-трех цветов. Количество цветов продолжаем считать. В макете уже присутствуют минимум два слоя — подложка с обводкой и слой с картинкой. Кстати сразу можно использовать в качестве контура баннера самый темный цвет, присутствующий на картинке.

  5. Должно быть пришло время для создания основного текстового элемента картинки — собственно названия баннера — это может быть название магазина, имя сайта или любое другое ведущее слово. Опять же — в качестве цвета выбираете самый контрастный цвет из уже имеющихся — для светлой подложки — самый темный элемент картинки и наоборот.

ТЕПЕРЬ — предлагается метод порезки слова (любого другого элемента баннера) для создания динамического эффекта прорисовки элемента баннера на экране.

  • Впечатываете это слово, выбираете нужную гарнитуру и размер, в параметрах сглаживания шрифта устанавливаете NONE и делаете копию слоя, в меню Layer выбираете Type—»Render Layer — ваше название перестало быть текстом — это просто графический элемент, имеющий один (!) цвет.Дайте название слою — например NAME.

  • Сделайте новый слой. Дайте ему название TEMP — это рабочий слой, кликать по нему придется часто, и хорошо будет, если его легко можно будет находить, когда вырастет количество слоев в вашем файле.

  • Нарисуйте на этом слое однопиксельную линию (на выбор — горизонтальную или вертикальную. Для горизонтально ориентированного баннера, да еще если в качестве тренировки рекомендую именно горизонтальную) контрастного цвета. Любого — этот цвет мы считать не будем, поскольку ЭТА линия в нашем дизайне используется как ИНСТРУМЕНТ, а не элемент баннера, поэтому лучше сделать ее ярким цветом, да еще и таким, чтобы гарантированно отличить от реальных деталей баннера.

  • В случае, если готовится таки горизонтальная порезка названия (которое у нас уже забито в предыдущем слое и сконвертировано в графику) выберите инструмент move (кнопка c буквой "V" на англицкой раскладке) и переместите линию в самый верх по отношению к верхнему пикселю вашего названия (можно вниз — направление принципиального значения не имеет, важна последовательность)

  • Ctrl-click на слое TEMP — вы получили SELECT прямоугольной области высотой в один пиксель. Click на слое NAME, Ctrl-Shift-J — и из вашего названия вырезалась в новый слой однопиксельная полоска. Click на слое TEMP, при активном инструменте Move стрелкой переместите вашу рабочую полоску на один пиксель вниз, Ctrl-click на слое TEMP, перейдите на слой NAME, Ctrl-Shift-J — вы получили еще один слой со второй вырезанной полоской из вашего названия. По этому алгоритму разрежьте на полоски все ваше слово — слои последовательно будут создаваться, и их имена будут иметь порядковые номера.

  • Создайте еще один слой, например со слоганом, описывающим суть рекламы. Цвет, опять же — из уже существующих в палитре. Параметр сглаживания текста — NONE.

  • Поскольку рассматривается самый простой вариант сложного баннера (извиняюсь за неудачный каламбур) другие возможные элементы баннера рассматривать не будем. Главное описать технологию. Это я говорю к тому, что сейчас приступаем к сборке заготовок в полноценную анимацию.

Если со слоями вы работали в PhotoShop`e, то сейчас самое время перейти в ImageReady — в меню File —» Jump to —» Image Ready.

В меню Window выбрать Show Animation — появится свиток, в котором присутствует один фрейм. Cвиток AnimationСделайте все слои макета UnVisible, оставив Visible только подложку и рамочку.

  • В свитке Animation в левом верхнем углу нажмите на стрелочку — появится локальное меню свитка. Выберите команду New Frame — вы создали фрейм, который является дубликатом предыдущего — т.е. со включенным слоем с подложкой и рамочкой.

  • Включите свойство Visible для слоя с верхней полоской вашего разрезанного элемента. (возможно слой с названием "Name copy")

  • Создайте еще один New Frame — в нем уже будет подложка, рамочка и первый элемент, и сделайте Visible слой со второй полоской имени ("Name copy 2").

  • Таким образом — добавляя фреймы и включая слои прорисуйте все имя, и когда будут включены все слои имени обратитесь к свойству фрейма "delay" и измените время задержки на, допустим, величину в 5 секунд.

  • Создайте еще один фрейм, проверьте, чтобы параметр delay был маленьким, и включите видимость слоя с графикой (в нашем примере тот самый монитор).

  • Новый фрейм — и выключите Visible нижней полоски ИМЕНИ, и по соответствующей технологии в обратном порядке последовательно, пофреймово уберите ИМЯ.

  • В новом фрейме включите слой со слоганом. Опять необходимо увеличить задержку (delay) отображения фрейма.

И для начала достаточно. Параметр цикличности анимации установите в состояние Forever — и ваш баннер будет прокручиваться всегда.

Обратитесь к свитку Optimize, установите параметры gif - 4 colors — lossy:0 — No dither — Selective — No transparent

В свитке Animation в подменю Optimize Animation нужно отметить оба checkbox.

Запомните полученый gif (File—»SaveOptimizedAs) и запустите гиф — просмотреть его можно и из Image Ready Plays Animation (движок внизу свитка Animation), и через File—»Preview in в браузере, но если все сделано правильно — ваша анимация будет проигрываться без сдвигов и ошибок.

В заключении хотелось бы подчеркнуть тот факт, что эту технологию можно применять и для создания более сложной анимации — и при ограниченном количестве цветов можно изготавливать сложные и оригинальные баннеры.
Можно усложнить процесс прорисовки ИМЕНИ — слои с разрезанными полосочками продублировать (правая кнопка мыши на слое —»Dublicate Layer) и дубликатам задать прозрачность слоя 50% (как вариант), и при создании анимации генерить прорисовку сначала полупрозрачных слоев, затем непрозрачных.
Подобный эффект можно создать с прорисовкой вертикальных элементов — и при грамотной композиции элементов баннера и хорошей цветовой гамме баннер будет удачным.
Как вы могли заметить объект на слое TEMP в конечном дизайне нами не использовался. Это всего лишь инструмент для быстрого создания маски, которой вырезается элемент анимации. И маска эта не обязательно должна быть однопиксельной полоской — это может быть любая произвольная форма. Движение прорисовки также может происходить в любом направлении, хоть по диагонали, хоть сначала сверху, потом слева, потом еще откуда нибудь.

Удачных вам анимированных баннеров!

 
05.05.2003
Версия для печати Версия для печати Запомнить ссылку Запомнить ссылку
Ваша оценка:  1   2   3   4   5     

 О проектеПерепечаткаАвторамПартнерыО нас пишут
Наверх
©2003—2007. GETINFO.RU. ВСЕ ПРАВА ЗАЩИЩЕНЫ.