Создание сложного анимированного баннера
В один прекрасный день-ночь вы колесили по Интернету и наткнулись на баннер, где все крутилось, вертелось и привлекало всем своим очарованием, вы подумали и решили сделать такой же шедевр анимированного искусства. Скопировали его, как водиться (если это конечно ни Flash баннер), черт с ним с авторским правом, вы ведь только посмотреть, только посмотреть … может быть. Подозревая, что баннер состоит из нескольких кадров, открываем его в одном из графических редакторов, поставив галочку напротив "открыть каждый кадр как отдельное изображение". Получаем несколько изображений, каждое в отдельном окне (рис.1). Для наглядности поместим их вертикально, друг за другом.
Их вид вызывает разочарование. И навевает кучу вопросов: 1. как они (другие баннермейкеры) умудрились все так расположить, чтобы не попутать? 2. как сделаны перекрывающиеся области цвета и рисунков? 3. как накладывается текст один на другой? 4. и еще пара ругательных фраз, но их мы опустим. Панику отставить. Все намного проще. Действуем таким же образом как и при создании простого анимированного баннера ( см. статью "Как сделать баннер"). Разница только в большей трудоемкости и подборе минимального количества цветов, при сохранении красивого рисунка и насыщенного действия. Шаг за шагом1. Продумываем сценарий будущего баннера. Этот этап самый важный, так как в последствии очень трудоемко изменять что-либо на готовых рисунках. Допустим вам заказали этот злосчастный баннер по лечению храпа (говорят он вредит здоровью). Логичным будет изобразить храпящего человека. Но этого мало. Вспомнив, как храпит ваш дедушка (хуже паровоза в 5 часов утра), вы пишите текст "терроризируете родных?" и далее "лечение храпа на www.hrap.net" и добавляете родственников, уносящих диван. 2. Подбор графического материала. Картинки проще найти в клипарте, чем рисовать самому. Находим их. Рисовать будем, когда сделаем пару десятков простых баннеров. 3. Создаем по кадровую анимацию. Каждый кадр должен выглядеть так как вы хотите его видеть на экране в готовом виде. Не нужно мучить себя прозрачными полями, оставляем все как есть и фон и слова и картинки, см. рис.2.
Важно:
Те элементы кадров, которые находятся постоянно на одном месте (например храпящий человек с права) должны точно совпадать по координатам на всех кадрах, это упростит в дальнейшем процесс сжатия баннера. Как это сделать в графических редакторах Ulead PhotoImpact и MS PhotoDraw описано в первой статье. Прочие редакторы я не беру во внимание, о них и так много написано.
4. Создание эффекта ходьбы. Отдельно рассмотрим как сделать движение ног у удаляющихся родственников, см. рис.3.
Вырезаем часть ноги (образно говоря) у человечка на уровне колена, и совмещаем вырезанную часть с человечком, чуть разворачиваем, создавая эффект ходьбы. Эффект ходьбы получается при смене кадров: 1 кадр без изменений, 2 кадр с изменениями, 3 кадр без изменений и т.д. Удобнее все манипуляции проделывать в отдельном изображении с увеличенным масштабом, добившись нужного результата уменьшить до начального размера и скопировать в нужный кадр. Также поступаем и с другим человечком.
Важно:
Если вас смущают лишние пиксели или несовпадения цвета, то удобнее исправить эти неточности в аниматоре (в моем случае это Ulead Gif Animator в меню Edit). При чем ни каждый сценарий баннера может пройти тест на допустимый размер файла, часто приходиться жертвовать кадры, а иногда и сам баннер. Поэтому не стоит на подготовительном этапе доводить кадры до идеала, они вам могут не понадобиться.
 рисунок. 3. |
5. Выстраиваем вертикально друг за другом кадры баннера в графическом редокторе и мысленно прокручиваем мультик в голове. Если все устраивает сохраняем каждый кадр в формате программы (обязательно, для внесения последующих изменений) и в формате gif.
Подсказка:
Если при сохранении, каждый кадр будет весить 4 - 6 Кб, и картинка будет выглядеть нормально, то скорее всего конечный размер баннера можно будет довести до 15 Кб.
Важно:
При сохранении кадров параметры оптимизации необходимо выбрать одинаковыми для каждого кадра (количество цветов, дрожь, прозрачность и прочие), так как в последствии оптимизатор программы - аниматора сделает это сам, а у вас будет возможность реально оценить на начальном этапе сжатия как будет выглядеть ваш баннер в конечном итоге.
Важно:
Старайтесь сохранять большее количество цветов при первой оптимизации, если кадры выглядят хорошо при количестве цветов 64 и имеют нормальный размер, то нет нужды дожимать их еще больше. Так как если вы захотите при следующей оптимизации увеличить количество цветов, то качество кадров сильно пострадает (вот такой у нас формат gif , именно этим он и отличается от jpg).
6. С помощью гиф-аниматора создаем баннер (см. первую статью). Обычно он весит около 30-40 Кб, иногда вес доходит до 100 Кб, все зависит от количества кадров. Переходим к самому важному моменту - оптимизации. Количество цветов устанавливает тем же, что и при сохранении кадров, в нашем случае это 64 цвета. Баннер стал весить 26 Кб. Просматривает каждый кадр в режиме редактирования "Edit", оказывается программа сама убирает повторяющиеся области цвета. Есть один минус, делает она это не аккуратно, именно поэтому вес у баннера остался таким большим. 7. Уменьшение веса баннера. Чтобы уменьшить вес, убираем лишние пиксели в меню редактирования, просто стираем их резинкой или вырезаем область (удалите копию кадра, так как при вырезании лишней области программа создает копию). Кропотливая работа, но она стоит того, так как мы дожимаем баннер до размера 18 Кб, к тому же стремитесь быть профи во всем, куча пикселей - просто лишний мусор. Если вы не уверены, что стираете именно тот пиксель, который лишний, прокручивайте баннер время от времени, чтобы во время заметить изменения и сделать откат назад (отменить действие). До нужного размера баннер доводим следующей оптимизацией, убирая количество цветов (начинаем по 1-2, добиваясь нужного размера), так как больше убирать нечего, остались только кадры. Добившись нужного размера сохраняем баннер. Вот что у нас получилось, см. рисунок 4. 
8. Экспериментируем!
Самый верный это "метод научного тыка". Немного "потыкаться" приходиться на первых порах изучения программы или создания чего-то нового. Желаю удачи.
| 
