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

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

• Палитра gif'a может содержать максимум 256 цветов (меньше — можно, больше — нет) и в нем применяется алгоритм сжатия без потери качества изображения (конкретно — алгоритм LZW). Также GIF допускает создание прозрачных областей и анимации. Используя gif-формат, следует помнить о закрытости лицензии алгоритма компрессии LZW, из-за чего требуется её (эту самую лицензию) оплачивать для использования в любом программном обеспечении. Этот недостаток приведёт к тому, что постепенно в графике для web от формата GIF будут отказываться в пользу других, более открытых форматов. Что касается анимированных баннеров - здесь альтернативой может являться использование flash-технологий, avi... Печально это как-то звучит... И все же, поскольку разговор идет именно об анимированном gif`е, переходим к сл. пункту:
• Наиболее существенный параметр индексированного изображения — количество цветов в его палитре. Важной задачей при создании нашего баннера станет сведение количества цветов к минимуму;
• Наличие градиентных заливок и многоцветных рисунков и фотографий делает невозможным серьезное уменьшение количества цветов в палитре, поэтому градиентных заливок у нас не будет, а с фотографиями… посмотрим;
• Опять же в целях уменьшения количества цветов в палитре рекламный текст, присутствующий на баннере, будет без сглаживания. Следует отметить, что anti-aliased вообще имеет смысл включать только лишь для шрифта крупнее 12px - мелкий шрифт читаться со сглаживанием не будет. Конечно, тут же перед вами возникнет проблема выбора шрифта - но это вопрос к следующему материалу.
• Очень сложно подготовить большое количество фреймов, соблюдая динамику и не допустить никаких ошибок, поэтому технология изготовления баннера из отдельных кадров, поочереди загружаемых в Ulead Gif Animator нам не подойдет. Баннер будем делать в Adobe (все исходники можно собрать в PhotoShop`e, a саму анимацию — в ImageReady)

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

1. При создании баннеров важно помнить, что чудное свойство гифа, анимированного в том числе — transparent в данном случае можно забыть, поскольку зачастую судьбу баннера предсказать трудно — на какой сайт, с каким фоновым цветом или еще хуже — с каким background image ваш шедевр станет. Т.е. ваша прямоугольная область не должна иметь прозрачных участков
2. В случае если разрабатываемый баннер имеет цвет, отличный от белого, черного и серого, — скорее всего общий тон вашего баннера будет отличаться от основного тона страницы сайта. Теория вероятности штука сложная, но даже если вы делаете баннер с хитролиловым background`oм, и он попадает на похожий хитролиловый сайт (совершенно случайно) - скорее всего оттенки все же будут отличаться. Но баннеры со стандартным цветом background`а лучше оформлять в рамочку, можно тоненькую однопиксельную, можно цвета не сильно отличающегося от основного… Для того, что бы ту информацию, которую представляете в баннере ВЫ отделить от общей информации пространства чужого для вас cайта.
3. Пора считать — background и обводка — это уже два цвета. Считать и контролировать количество используемых цветов придется все время.
4. Внимательно подумайте — является ли необходимым присутствие на баннере иллюстраций? Допустим, да. Зачастую это действительно оправдано — человек, мельком взглянувший на баннер, рекламирующий компьютерный магазин легче зацепится взглядом за изображение монитора или мыши, чем то же самое, написанное словами. Если вы решили в баннере эти самые мониторы таки показать — заранее обработайте изображение — для того, что бы монитор был похож сам на себя, достаточно двух-трех цветов. Количество цветов продолжаем считать. В макете уже присутствуют минимум два слоя — подложка с обводкой и слой с картинкой. Кстати сразу можно использовать в качестве контура баннера самый темный цвет, присутствующий на картинке.
5. Должно быть пришло время для создания основного текстового элемента картинки — собственно названия баннера — это может быть название магазина, имя сайта или любое другое ведущее слово. Опять же — в качестве цвета выбираете самый контрастный цвет из уже имеющихся — для светлой подложки — самый темный элемент картинки и наоборот.