Статьи - Создание сложного анимированного баннера

 
дизайн, графика, дизайнер

графика

  3D графика
  эротика в линиях
  белое и черное
  компьютерная
  полиграфия

web дизайн

  дизайн сайтов
  анимация gif
  баннеры
  статьи
  логотипы

промдизайн

  камины
  фонтаны
  скульптуры
  памятники
  узоры ткани
   

3D дизайн

  выставочные стенды
  промдизайн
  интерьер
  3D web

дизайнеру

  об авторе
  контакты
  афонаризмы
  клипарт
  ссылки

главная

стр 1 стр 2
 
Статьи

Как сделать баннер. Статья для тех, кто только начал изучать основы создания баннера

Как сделать баннер со сложной анимацией


Что нужно знать, если вы хотите заказать сайт

Ещё |
 




Создание сложного анимированного баннера

В один прекрасный день-ночь вы колесили по Интернету и наткнулись на баннер, где все крутилось, вертелось и привлекало всем своим очарованием, вы подумали и решили сделать такой же шедевр анимированного искусства. Скопировали его, как водиться (если это конечно ни Flash баннер), черт с ним с авторским правом, вы ведь только посмотреть, только посмотреть … может быть. Подозревая, что баннер состоит из нескольких кадров, открываем его в одном из графических редакторов, поставив галочку напротив "открыть каждый кадр как отдельное изображение". Получаем несколько изображений, каждое в отдельном окне (рис.1). Для наглядности поместим их вертикально, друг за другом.


рисунок. 1.

Их вид вызывает разочарование.
И навевает кучу вопросов:
1. как они (другие баннермейкеры) умудрились все так расположить, чтобы не попутать?
2. как сделаны перекрывающиеся области цвета и рисунков?
3. как накладывается текст один на другой?
4. и еще пара ругательных фраз, но их мы опустим.

Панику отставить. Все намного проще. Действуем таким же образом как и при создании простого анимированного баннера (см. статью "Как сделать баннер"). Разница только в большей трудоемкости и подборе минимального количества цветов, при сохранении красивого рисунка и насыщенного действия.

Шаг за шагом
1. Продумываем сценарий будущего баннера. Этот этап самый важный, так как в последствии очень трудоемко изменять что-либо на готовых рисунках. Допустим вам заказали этот злосчастный баннер по лечению храпа (говорят он вредит здоровью). Логичным будет изобразить храпящего человека. Но этого мало. Вспомнив, как храпит ваш дедушка (хуже паровоза в 5 часов утра), вы пишите текст "терроризируете родных?" и далее "лечение храпа на www.hrap.net" и добавляете родственников, уносящих диван.
2. Подбор графического материала. Картинки проще найти в клипарте, чем рисовать самому. Находим их. Рисовать будем, когда сделаем пару десятков простых баннеров.
3. Создаем по кадровую анимацию. Каждый кадр должен выглядеть так как вы хотите его видеть на экране в готовом виде. Не нужно мучить себя прозрачными полями, оставляем все как есть и фон и слова и картинки, см. рис.2.


рисунок. 2.

Важно:
Те элементы кадров, которые находятся постоянно на одном месте (например храпящий человек с права) должны точно совпадать по координатам на всех кадрах, это упростит в дальнейшем процесс сжатия баннера. Как это сделать в графических редакторах Ulead PhotoImpact и MS PhotoDraw описано в первой статье. Прочие редакторы я не беру во внимание, о них и так много написано.

4. Создание эффекта ходьбы. Отдельно рассмотрим как сделать движение ног у удаляющихся родственников, см. рис.3.
Вырезаем часть ноги (образно говоря) у человечка на уровне колена, и совмещаем вырезанную часть с человечком, чуть разворачиваем, создавая эффект ходьбы. Эффект ходьбы получается при смене кадров: 1 кадр без изменений, 2 кадр с изменениями, 3 кадр без изменений и т.д. Удобнее все манипуляции проделывать в отдельном изображении с увеличенным масштабом, добившись нужного результата уменьшить до начального размера и скопировать в нужный кадр. Также поступаем и с другим человечком.

Важно:
Если вас смущают лишние пиксели или несовпадения цвета, то удобнее исправить эти неточности в аниматоре (в моем случае это Ulead Gif Animator в меню Edit). При чем ни каждый сценарий баннера может пройти тест на допустимый размер файла, часто приходиться жертвовать кадры, а иногда и сам баннер. Поэтому не стоит на подготовительном этапе доводить кадры до идеала, они вам могут не понадобиться.


рисунок. 3.
продолжение на 2 странице
Ещё |

Дизай Javax 2000-2009
Копирование информации только с письменного разрешения (кроме gif и фото)
  Рейтинг@Mail.ru Rambler's Top100