Большой архив статей, книг, документации по программированию, вебдизайну, компьютерной графике, сетям, операционным системам и многому другому
 
<Добавить в Избранное>    <Сделать стартовой>    <Реклама на сайте>    <Контакты>
  Главная Документация Новости ИТ Программы Книги Games   Обои   Экспорт RSS E-Books
 
Поиск по сайту

TOP-10 программ
Symantec Norton Ghost 9.0
Partition Magic 8.0.2 Pro
Xilisoft 3GP Video Converter v3.1.7.0616b
Norton AntiVirus 2005
Xilisoft 3GP Video Converter v2.1.52.831b
Антивирус Касперского Personal 5.0.303 beta 2
RAR Password Cracker 4.12
ABBYY PDF Transformer v1.00.820
MP3 To Ringtone Gold v3.02
Mobtime Cell Phone Manager v5.3.1
 
Наши сервисы
Рассылка новостей. Подпишитесь на рассылку сейчас и вы всегда будете в курсе последних событий в мире информационных технологий.
Новостные информеры. Поставьте наши информеры к себе и у вас на сайте появится дополнительный постоянно обновляемый раздел.
Добавление статей. Если вы являетесь автором статьи или обзора на тему ИТ присылайте материал нам, мы с удовольствием опубликуем его у себя на сайте.
 
 

   Интернет технологии -> Flash -> Обрисовка и анимация лица во flash


Обрисовка и анимация лица во flash

Данный урок будет полезен, пожалуй, не только для Flash аниматоров, но и для художников, иллюстраторов и специалистов, работающих с векторными изображениями. В данной статье рассказывается об обрисовке человеческого лица, но навыки, полученные Вами, можно будет применить и при обрисовке других объектов.

Многие начинающие художники часто задаются вопросом, как у профессионалов получаются такие красивые векторные изображения людей, всё очень просто они обрисовываются с готовых фотографий, причем без дополнительной анимации этот процесс занимает не более часа.

Для начала нам нужна растровая картинка человека. В качестве примера мы использовали анимационный персонаж девушки, созданного в студии ACS-animation.

Шаг 1. Подготовка к обрисовке.

Отрываем Flash, создаем два слоя: pictures и vector. Pictures ставим ниже слоя vector. Если вы собираетесь в дальнейшем анимировать картинку, то лучше создать несколько слоев (для глаз, рта, волос и т.п.)

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

Шаг 2. Обрисовка.

Начинаем постепенно обрисовывать части лица. Обрисовывая с помощью Line Tool, ровняйте в дальнейшем линии Стрелкой (Arrow Tool). Для этого вам нужно будет подвести курсор к линии, и после того, как на курсоре появится небольшая дуга, Вы сможете трансформировать линию. Сделать линию длиннее или короче можно потянув за её концы.

В случае применения карандаша, лучше сразу поставить опцию Smooth, чтобы линии получались гладкими и плавными. Если вы наведете на уже нарисованную линию, то Вы сможете её так же сгладить, несколько раз нажав на кнопку Smooth.

Шаг 3. Обрисовка глаза.

Обрисовка глаза - самый сложный момент, тем ни менее, со временем у Вас это не будет вызывать осложнений. Создаем для глаза отдельный слой и конвертируем его в movie clip. В данном клипе тоже стоит выделить несколько слоев:

  • для зрачка и радужной оболочки.
  • для века
  • для ресниц
  • для теней под и над глазами
  • для белка

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

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

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

Далее подгоняем веко к ресницам, для этого, не преобразуя его в символ, трансформируем, используя Arrow Tool, анимируем с помощью Shape Tween. В данном случае Вы тоже заметите некоторые искажения, которые можно будет устранить с помощью создания дополнительных ключевых кадров. В случае необходимости используйте Shape Hints.

На самом деле процесс анимации глаза не сложный, просто долгий и немного утомительный. Если Вам понадобиться, Вы всегда сможете анимировать так же радужную оболочку, перемещая её в нужное место, а с помощью века и ресницы выразить некоторые эмоции, например удивление (поднятие века), смех (прищуривание глаз) и т.п.

Шаг 4. Накладывание теней на лицо.

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

Шаг 5. Рисуем и анимируем рот.

Обрисуйте рот, как можно точнее, поскольку часто картинки кажутся неудачными из - за того, что к ней "прилепили" чужой рот. Залейте рот линейным градиентом, только не сильно контрастным. А у девушек обязательно добавьте блики, чтобы передать блеск помады на губах. Можете использовать блик созданный для глаза.

Если Вам нужно заставить персонаж говорить, Вы можете слегка изменять форму рта, но только не переусердствуйте.

Шаг 6. Заливка.

Это самый приятный этап, который не требует особых усилий. Начинаем постепенно раскрашивать Ваш персонаж, используя по возможности естественные цвета. Не используйте градиентов при рисовании лица, залейте все однородным цветом, после этого сделайте цвет немного темнее и залейте области, которые являются тенями. Также можете использовать и блики. Изменяйте цвет лица, волос, глаз и губ на Ваше усмотрение, например оригинал нашей картинки - зеленоглазая блондинка с розовыми губами, а векторная вариант - голубоглазая девушка с черными волосами и красными блестящими губами.

Шаг 7. Анимация волос.

Если Вам потребуется анимировать волосы, то для этого лучше использовать один или два локона, не беритесь анимировать всю прическу, превращая её в карусель. Для этого можно воспользоваться функцией Shape Tween. Не стоит анимировать волосы, если персонаж находится в закрытом помещении и без движения.

Шаг 8. Последние штрихи.

Последний шаг - удаление всех контуров. Не пугайтесь, от этого картинка станет только красивее. Лучше всего сохранить в отдельном файле картинку с контуром, а в исходном удалить все до единого, нажав два раза на какой либо из контуров Вы выделите все.

Все, Ваша картинка готова. Добавляйте её к Вашим мультфильмам, или конвертируйте в растровый формат для публикации. Вы сможете также легко переместить векторную картинку в Corel и Illustrator путем обычного копирования.

Творческих Вам успехов!

 

Автор: Мазай Алексей
Источник: www.acs-design.com.ua

Ссылки по теме
Учебник по Flash MX
Flash. Введение в массивы
Flash 5. Работа со слоями
Создание элементов сайтов с использованием Flash
 

Компьютерная документация от А до Я - Главная

 
Популярные книги

Windows XP для всех

Подробнее

Самоучитель работы на компьютере Издание 9

Подробнее

Самоучитель Macromedia Flash 5

Подробнее

 

 
Новости ИТ
01.12.2008  Buffalo выпустил миниатюрные USB-накопители
01.12.2008  VENTO TA-U1 - стильный корпус представлен Asus
01.12.2008  Fujitsu-Siemens выпускает в продажу внешний ускоритель для ноутбуков
01.12.2008  Оригинальные чехлы для ноутбуков от Choiix
01.12.2008  Опубликован код драйвера для беспроводных карт Atheros
01.12.2008  Лучший блог 2008
01.12.2008  Linux запустили на Apple iPhone
01.12.2008  LG KC780
01.12.2008  MSI дополнит линейку Wind-нетбуков двумя моделями
01.12.2008  Nikon D3X - 24,5 млн пикселей для профессионалов
01.12.2008  Киловаттник HIPER M1000 с КПД выше 85%
01.12.2008  AMD впервые снизила цены линейки Radeon HD 4800
01.12.2008  Чистильщики: Wise Registry Cleaner v.3.8.2
01.12.2008  Антивирусы: RemoveIT Pro v4 SE (30.11.2008)
01.12.2008  Корпус ASUS Vento TA-U1 можно поставить вместо новогодней ёлки
01.12.2008  Диагностика: PC Wizard 2008 v.1.871
01.12.2008  Диагностика: NextSensor v.2.7.6.0 Build 1130
01.12.2008  Тестовые приложения: PassMark BurnInTest v.6.0 Build 1000 Beta 15
01.12.2008  Неофициальные драйверы для модемов Motorola
01.12.2008  Драйверы и утилиты для сетевых хранилищ D-Link
 
Полезно

 
Copyright © CompDoc.Ru
При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта.
 
Rambler's Top100