Создание сложного анимированного баннера
Не будем спорить, что именно называть "сложным" анимированым банером – здесь разговор пойдет о баннере, в котором БОЛЬШЕ трех фреймов. И больше 10. Ну, скажем, около 150. Интересно?
Как всегда помним основное условие – баннер должен быть легким. Как правило верхняя граница веса – не более 15 кило. Поскольку речь пойдет именно об анимированном гифе, т.е. о наборе индексированных изображений, следует помнить несколько правил:
1.
наиболее существенный параметр индексированного изображения – количество цветов в его палитре. Важной задачей при создании нашего баннера станет сведение количества цветов к минимуму;
2.
Наличие градиентных заливок и многоцветных рисунков и фотографий делает невозможным серьезное уменьшение количества цветов в палитре, поэтому градиентных заливок у нас не будет, а с фотками… посмотрим;
3.
Опять же в целях уменьшения количества цветов в палитре рекламный текст, присутствующий на баннере, будет без сглаживания.
4.
очень сложно подготовить большое количество фреймов, соблюдая динамику и не допустить никаких ошибок, поэтому технология изготовления баннера из отдельных кадров, поочереди загружаемых в 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 (кнопка 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 —> 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 в браузере, но если все сделано правильно – ваша анимация будет проигрываться без сдвигов и ошибок. Пример баннера, изготовленного по этой технологии:
– 186 фреймов, вес – 13 кило.
В заключении хотелось бы подчеркнуть тот факт, что эту технологию можно применять и для создания более сложной анимации – и при ограниченном количестве цветов можно изготавливать сложные и оригинальные баннеры.
Можно усложнить процесс прорисовки ИМЕНИ – слои с разрезанными полосочками продублировать (правая кнопка мыши на слое —>Dublicate Layer) и дубликатам задать прозрачность слоя 50% (как вариант), и при создании анимации генерить прорисовку сначала полупрозрачных слоев, затем непрозрачных.
Подобный эффект можно создать с прорисовкой вертикальных элементов – и при грамотной композиции элементов баннера и хорошей цветовой гамме баннер будет удачным.
Как вы могли заметить объект на слое TEMP в конечном дизайне нами не использовался. Это всего лишь инструмент для быстрого создания маски, которой вырезается элемент анимации. И маска эта не обязательно должна быть однопиксельной полоской – это может быть любая произвольная форма. Движение прорисовки также может происходить в любом направлении, хоть по диагонали, хоть сначала сверху, потом слева, потом еще откуда нибудь.
Удачных вам анимированных баннеров!
Источник: makeweb.narod.ru
Создание сложного анимированного баннера
Линейный вид
