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

Подобный вариант многофреймовой анимации очень выразителен, позволяет реализовать различные развития смыслового и изобразительного сюжетов, а главное - позволяет вписать баннер по размеру в общепринятые рамки. С различными вариантами сценариев вы можете ознакомиться на сайте студии Арт-Дизайн в разделе "Портфолио/баннеры".

Например, данный баннер состоит из 68 фреймов, выразителен по динамике, а разница просто с таким же GIFом при такой же палитре - всего 500 байт. А можно делать подобную анимацию и в 500-600 фреймов, прирост файла на описание анимации составит 1-2 кб, а вес самой картинки при этом практически не меняется.

Как же это происходит? Вернее, как это можно сделать?

Для начала вы готовите общую композицию с сохранением всех рабочих слоев (слить их в нужной комбинации всегда успеется) - это все описано в первой части статьи. Затем вы берете один слой и начинаете резать его на отдельные фрагментики, каждый из которых будет последовательным кадром. Поряд такой нарезки и будет, по сути, выполнением последовательного сценария. Но как всегда - это лучше не на пальцах...

Нарезка фрагментов.

Я не зря так усердно кружу вокруг этой операции, потому что она и является этой самой ноу-хау данного способа. Резать можно как в Adobe Photoshop, так и в Image Ready, за той разницей, что в Photoshopе вы будете ограничены пределом в 100 слоев, работу придется разбивать на несколько частей, потом это все собирать в том же Image Ready, так что лучше сразу туда (в Image Ready). В качестве примера мы продолжим работу над баннером студии Арт-Дизайн (надо же нам его закончить).

Линейный эффект в применении к шрифтовому фрагменту.

Вы выбираете слой со шрифтовым фрагментом (у нас это будет слово "Арт"). Сам слой прозрачен, за исключением черных пикселов букв и мягкого интерполяционного перехода от самой буквы к фону (краешек букв).

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

2. Нужным нам режущим инструментом выбираем нужный нам фрагмент. Эта выбранная нами часть по ходу анимации будет появляться первой. Лучше всего начать с нижней или верхней части надписи.

Далее небольшая совокупность операций, которые лучше всего записать в виде action. Action для Image Ready имеют формат .isa и хранятся в каталоге adobe photoshop 5.5/image ready action. Вам достаточно сохранить его там, а потом в самом Image ready в палитре action нажать rescan action folder.

1. Select/invers (shft+ctrl+I)
2. Edit/cut (ctrl+X)
3. Edit/paste (ctrl+V)

Вот и весь секрет многофреймовой анимации. То есть все слово "Art", за исключением выбранной нами узкой полосочки, переносится в новый слой вместе с угловыми метками и готово для дальнейшей нарезки. Для наглядности и во избежание путаницы предыдущий слой с первым фрагментом (полосочкой) лучше отключить (путем нажатия на соответствующий "глазик" сооответствующего слоя. Вы можете нарезать картинку сразу в соответствии со сценарием, можете оставить порядок появления слоев на потом и вводить при анимации (в смысле резать строго последовательно) - суть от этого уже не изменится. Вы можете резать кругами, лассо произвольной формы, большие или маленькие - это уже ваше творчество.

По "весу" эта полосочка прибавит в мой баннер ровно 328 байт плюс описание времени с способа ее появления. А если быть скрупулезными до конца - она нам ничего не прибавит (!!!), так как она и ей подобные составляют часть изрезанного слова "Art". Ну не будем вдаваться в философию с размерами и нарежем слово до конца. Ясно, что новых слоев будет столько, сколько пикселов по высоте составляет слово "Art". Лично я буду резать через один пиксел в два прохода (и так же они потом будут появляться по ходу анимации).

Ну а теперь давайте посмотрим, сколько нам прибавила в "весе" нарезка в лапшу слова "Art".

5,134 кб

6,279 кб

Ну вот, один лишний килобайт. Но до разумных 12-15 кб у нас есть еще огромный запас, и мы можем еще чего-нибудь в лапшу :o)

Ну вот, работа над баннером закончена, и в окончательном виде он выглядит так:

8,135 кб

Не так уж и много для 155 фреймов.

<...Первая часть статьи

Виктор Вязьминов (MrDeSign)

Вам нужна реклама в интернете? Вы можете заказать продвижение сайта у нашего оптимизатора. Поисковая оптимизация (раскрутка сайта) требует особых усилий в отличие от контекстной рекламы. Также вы можете заказать у нас создание сайта. Обращайтесь!