Статьи
Создание сложного анимированного
баннера.
Не будем спорить, что именно называть
"сложным" анимированым банером – здесь разговор пойдет
о баннере, в котором БОЛЬШЕ трех фреймов. И больше 10. Ну, скажем,
около 150. Интересно?
Как всегда помним основное условие – баннер
должен быть легким. Как правило верхняя граница веса – не более
15 кило. Поскольку речь пойдет именно об анимированном гифе, т.е.
о наборе индексированных изображений, следует помнить несколько
правил:
наиболее существенный параметр индексированного
изображения – количество цветов в его палитре. Важной задачей
при создании нашего баннера станет сведение количества цветов
к минимуму;
Наличие градиентных заливок и многоцветных рисунков
и фотографий делает невозможным серьезное уменьшение количества
цветов в палитре, поэтому градиентных заливок у нас не будет,
а с фотками… посмотрим;
Опять же в целях уменьшения количества цветов
в палитре рекламный текст, присутствующий на баннере, будет без
сглаживания.
очень сложно подготовить большое количество
фреймов, соблюдая динамику и не допустить никаких ошибок, поэтому
технология изготовления баннера из отдельных кадров, поочереди
загружаемых в Ulead Gif Animator нам не подойдет. Баннер будем
делать в Adobe (все исходники можно собрать в PhotoShop`e, a саму
анимацию – в ImageReady)
Предположим, что вы уже знаете, в какой цветовой
гамме будет ваш баннер, и что будет происходить (крутиться, двигаться,
появляться и исчезать). Создаете новый файл, в полях размеров
указываете формат вашего баннера, в подразделе background выбираете
transparent – вы получили поле нужного размера с одним, пока еще
пустым слоем.
При создании баннеров важно помнить, что чудное
свойство гифа, анимированного в том числе – transparent в данном
случае можно забыть, поскольку зачастую судьбу баннера предсказать
трудно – на какой сайт, с каким фоновым цветом или еще хуже –
с каким background image ваш шедевр станет. Т.е. ваша прямоугольная
область не должна иметь прозрачных участков
В случае если разрабатываемый баннер имеет цвет,
отличный от белого, черного и серого, - скорее всего общий тон
вашего баннера будет отличаться от основного тона страницы сайта.
Теория вероятности штука сложная, но даже если вы делаете баннер
с хитролиловым background`oм, и он попадает на похожий хитролиловый
сайт (совершенно случайно) - скорее всего оттенки все же будут
отличаться. Но баннеры со стандартным цветом background`а лучше
оформлять в рамочку, можно тоненькую однопиксельную, можно цвета
не сильно отличающегося от основного… Для того, что бы ту информацию,
которую представляете в баннере ВЫ отделить от общей информации
пространства чужого для вас cайта.
Пора считать - background и обводка – это уже
два цвета. Считать и контролировать количество придется все время.
Внимательно подумайте – является ли необходимым
присутствие на баннере иллюстраций? Допустим, да. Зачастую это
действительно оправдано – человек, мельком взглянувший на баннер,
рекламирующий компьютерный магазин легче зацепится взглядом за
изображение монитора или мыши, чем то же самое, написанное словами.
Если вы решили в баннере эти самые мониторы таки показать – заранее
обработайте изображение – для того, что бы монитор был похож сам
на себя, достаточно двух-трех цветов. Количество цветов продолжаем
считать. В макете уже присутствуют минимум два слоя – подложка
с обводкой и слой с картинкой. Кстати сразу можно использовать
в качестве контура баннера самый темный цвет, присутствующий на
картинке.
Должно быть пришло время для создания основного
текстового элемента картинки – собственно названия баннера – это
может быть название магазина, имя сайта или любое другое ведущее
слово. Опять же – в качестве цвета выбираете самый контрастный
цвет из уже имеющихся – для светлой подложки – самый темный элемент
картинки и наоборот.
ТЕПЕРЬ – предлагается метод порезки слова (любого
другого элемента баннера) для создания динамического эффекта прорисовки
элемента баннера на экране.
Впечатываете это слово, выбираете нужную гарнитуру
и размер, в параметрах сглаживания шрифта устанавливаете NONE
и делаете копию слоя, в меню Layer выбираете Type—»Render Layer
– ваше название перестало быть текстом – это просто графический
элемент, имеющий один (!) цвет.Дайте название слою – например
NAME.
Сделайте новый слой. Дайте ему название TEMP
– это рабочий слой, кликать по нему придется часто, и хорошо будет,
если его легко можно будет находить, когда вырастет количество
слоев в вашем файле.
Нарисуйте на этом слое однопиксельную линию
(на выбор – горизонтальную или вертикальную. Для горизонтально
ориентированного баннера, да еще если в качестве тренировки рекомендую
именно горизонтальную) контрастного цвета. Любого – этот цвет
мы считать не будем, поскольку ЭТА линия в нашем дизайне используется
как ИНСТРУМЕНТ, а не элемент баннера, поэтому лучше сделать ее
ярким цветом, да еще и таким, чтобы гарантированно отличить от
реальных деталей баннера.
В случае, если готовится таки горизонтальная
порезка названия – которое у нас уже забито в предыдущем слое
и сконвертировано в графику – выберите инструмент move (кнопка
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 – появится
свиток, в котором присутствует один фрейм. Сделайте все слои макета
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 напрямую,
и через File—»Preview in в браузере, но если все сделано правильно
– ваша анимация будет проигрываться без сдвигов и ошибок. Пример
баннера, изготовленного по этой технологии можно увидеть по адресу
http://nundesign.narod.ru/nundesign88x31.gif – 186 фреймов, вес
– 13 кило.
В заключении хотелось бы подчеркнуть тот факт,
что эту технологию можно применять и для создания более сложной
анимации – и при ограниченном количестве цветов можно изготавливать
сложные и оригинальные баннеры.
Можно усложнить процесс прорисовки ИМЕНИ – слои с разрезанными
полосочками продублировать (правая кнопка мыши на слое —»Dublicate
Layer) и дубликатам задать прозрачность слоя 50% (как вариант),
и при создании анимации генерить прорисовку сначала полупрозрачных
слоев, затем непрозрачных.
Подобный эффект можно создать с прорисовкой вертикальных элементов
– и при грамотной композиции элементов баннера и хорошей цветовой
гамме баннер будет удачным.
Как вы могли заметить объект на слое TEMP в конечном дизайне нами
не использовался. Это всего лишь инструмент для быстрого создания
маски, которой вырезается элемент анимации. И маска эта не обязательно
должна быть однопиксельной полоской – это может быть любая произвольная
форма. Движение прорисовки также может происходить в любом направлении,
хоть по диагонали, хоть сначала сверху, потом слева, потом еще
откуда нибудь.
Удачных вам анимированных баннеров!
<< назад
Наша кнопка
Если вам понравился наш сайт, то
мы будем очень признательны вам, если вы разместите нашу кнопочку
размера 88х31 у себя на страничке (сайте).
Для этого достаточно прописать у себя на странице этот код:
<!-- leg-design-->
<a HREF="http://leg-design.narod.ru" target="_blank
">
<img SRC="http://leg-design.narod.ru/images/banner_80.gif"
BORDER="0"
alt="Все о web-дизайне" width="88" height="31"></a>
<!-- leg-design end -->
