Добрый день! Сегодня мы попробуем нарисовать ещё одного супергероя из славной вселенной DC Comics. Это будет Флэш, один из участников Лиги справедливости.
Как мы знаем, суперспособность Флэша — это невероятная скорость. Именно поэтому мы решили выбрать для него динамичную позу. Это необходимо отразить и в стикмене:
Флэш, как и, в общем-то, все супергерои, имеет атлетическое телосложение. Передать эту особенность фигуры нам помогут:
Кстати, посмотрите на фигуру . Он вроде бы и крупный, массивный, но явно не атлетичный. Крохотные ножки и широченный таз очень хорошо формируют неповоротливую, обрюзгшую фигуру. Вот здесь такого быть не должно, поэтому тщательно прорисовываем и основные, и малозаметные группы мышц.
Да, не забудьте разметить лицо парой линий. Они делят лицо на две равные половинки, каждая в своей плоскости.
Именно с лица мы и начнём этот шаг. Намечаем глаза, рот и нос. Глаза имеют форму овалов; нос-прямой, состоит буквально из трёх линий; рот изогнут, зубы обнажены от физического напряжения. В рисовании черт лица критически важно ориентироваться на лицевые линии из предыдущего шага.
Нам повезло, что Флэш предпочитает носить маску — не придётся рисовать волосы на голове. Нам нужно только подчистить пространство внутри контуров лица от лишних направляющих линий и наметить линии маски.
Теперь поработаем с корпусом Флэша. Прямо под нижней челюстью наметим пару слегка волнистых линий — это будут контур ключиц. Обратите внимание на то, что они располагаются по диагонали от лица, а не прямо под ним. В этой же плоскости будут находится и линии выраженных грудных мышц. Конечно же, не забываем про знаменитый логотип Флэша.
Проделываем такую же работу с руками Флэша. Не переусердствуйте с линиями мышц внутри контуров рук — на левой (от нас) руке таких линии вообще нет, а на правой их всего пять, из которых две приходятся на предплечье. Не забываем, конечно, отчертить предплечья фирменным узором в виде молнии.
Все о рисовании во флеше и не только. Информация о том, как создается графика для флеш-игр, как нарисовать персонажа, как рисуются фоны для флеш-игр и мультиков, основы гейм-дизайна.
Время от времени ко мне через сайт обращаются с просьбой подсказать что-то по рисованию или по анимации во флеше.
Я всегда стараюсь отвечать на вопросы, если, конечно, сама владею информацией.
Сегодня пришло письмо с просьбой написать урок по рисованию:
Чтобы ускорить процесс заливки, стоит использовать цветовые ключи. Тем, кто учился в художественной школе, наверняка знаком этот термин. Но не всем так повезло, среди художников и аниматоров много самоучек, как я, например:) На самом деле, цветовые ключи - это поиск цветового решения для персонажей, фонов и всего прочего. Просмотрев немало видео-уроков по рисованию, пришла к выводу, что многие заливают цветом интуитивно, подбирая цвета поочередно, наугад.
Не так давно через сайт поступила просьба написать, как я рисовала волосы . Давненько не выкладывала уроков, и решила - а почему бы и нет, напишу пару строчек про волосы:) Я бы не называла это руководством к действию, как верно рисовать волосы. Что именно так они рисуются, и никак иначе. Просто коротко опишу сам процесс, как это делала я. Возможно, будет интересно не только одному человеку.
В своей работе я использую несколько техник рисования. Поскольку мультипликация предполагает стилизованное изображение живых и неживых предметов – налицо полная свобода для фантазии. Но свои фантазии по стилю исполнения желательно обсуждать с заказчиком в самом начале работы, чтобы фантазии стали общими:) Иногда выбор той или иной техники зависит от ее трудоемкости. Например, проще отрисовать карандашом, чем возиться с кисточкой и линиями, которые нужно править, и это требуют большей аккуратности, а значит и времени на исполнения.
По характеру линий можно класифицировать:
1. Однородный контур
– рисуется карандашом (Y), в итоге получаются линии одинаковой толщины. Чтобы рисунок не выглядел очень однообразно, можно использовать линии разной толщины, например, по краям толщину линии берем больше, а более мелкие детали (например, элементы одежды) прорисовываем линией потоньше. Такой контур очень удобен для быстрой заливки.
Кисть
| Первое - это заливка, то есть активный цвет кисти. Раскрыв его, можно обнаружить там панель Swatches
с уже предустановленными цветами. В качестве цвета можно выбирать и градиент.
Далее идут две неактивные кнопки, их можно пропустить. |
Две последние кнопки служат для выбора формы и размера кисти. Так-же, прошу учесть, что размер кисти зависит от масштаба отображения.
В это же самое время, если посмотреть на панель Properties, там можно обнаружить кнопку выбора цвета и регулятор Smoothing, который отвечает за сглаживание линий при рисовании. Это же вектор, как-никак.
Если вы являетесь счастливым обладателем графического планшета, то на панети Tools дополнительно появится кнопка включения чувствительности к нажатию, что не может не радовать.
На панели Properties, на этот раз, побольше информации:
Теперь тут можно выбрать толщину линии, ее стиль, а так-же различные другие параметры.
| Рисование фигур |
 Rectangle Tool - Обычный прямоугольник. После выбора этого инструмента и перед тем, как начать его рисовать, можно выбрать цвет заливки и обводки, а так-же дополнительные свойства на панели Properties. Из новых свойств я бы отметил возможность скругления углов, притом, для каждого угла можно назначить свое скругление. Попробуйте, это очень интересно. И как обычно, можно рисовать квадраты, с зажатой кнопкой Shift. Oval Tool - Овалы и окружности. Здесь можно задавать дополнительные свойства, на панели Properties, такие, как начальный и конечный углы и внутренний радиус, что позволяет рисовать дуговые сегменты окружности. Это тоже стоит попробовать. Я сам узнал об этом только сейчас, когда начал про это писать и посмотрел на панель Properties:) Rectangle Primitive Tool - Процедурный прямоугольный примитив. Отличается от обычного прямоугольника тем, что дополнительные свойства можно устанавливать и изменять потом, уже после того, как фигура нарисована. Oval Primitive Tool - Процедурный овальный примитив. Тоже, возможна установка дополнительных свойств после его создания. PolyStar Tool - Инструмент для рисования многоугольников или звезд. Имеет дополнительные свойства на панели Properties, при нажатии кнопки Options, открывается такое окно: |
Тут можно выбрать тип объекта (polygon или star), количество углов и радиус их внутренних точек.
Нарисуйте прямоугольник с заливкой и обводкой, при невключенном режиме Object Drawing. Теперь щелкните на пустом месте рабочей области, чтобы снять выделение. Затем, поверх фигуры можно нарисовать окружность и тоже снять с нее выделение. Теперь возьмите инструмент выделения ("V ") и проведите рамку из пустой области, до середины всех объектов, получится примерно вот такое:
Это режим растрового выделения. Этим способом вы можете выделить и удалить ненужные прямоугольные области нарисованной графики. Также, хочу заметить, что после рисования окружности поверх прямоугольника, та его часть, что находится под окружностью, бесследно исчезла. Это тоже одна из особенностей рисования на одном слое.
Чтобы такого не происходило, при создании объектов нужно включать режим Object Drawing. Тогда вы сможете редактировать объекты по отдельности и они не будут откусывать части друг друга. Еще можно рисовать различные части объекта в разных слоях. Этот способ возможен, как на основном таймлайне, так и внутри символов любых типов.
Чтобы выделить объект с заливкой и обводкой, щелкните на его заливке инструментом Selection Tool. Выделится заливка. если щелкнуть на обводке, выделится она, но не вся, а только сегмент между двумя точками. Чтобы выделить всю обводку, щелкните на ней два раза. Чтобы выделить весь объект целиком, обведите его рамкой, если это возможно. Если нет, щелкните два раза на заливке. Выделится вся фигура, вместе с заливкой и обводкой.
| С основными свойствами текста легко разобраться самостоятельно, а цифрами отмечены пункты, которые требуют дополнительного объяснения. Итак: |
| 1. Text type - Тип текстового блока. Их может быть три: Static - просто текст, Dynamic - используется, для динамического вывода текста из ActionScript и Input - используется для ввода текста пользователем. Для начала, мы будем пользоваться типом Static, далее, когда речь зайдет о программировании, я объясню, как работают остальные типы. |
| 2. Letter Spacing - Межсимвольное расстояние в тексте. |
| 3. URL Link - Ссылка, назначенная на текст. Если в этом поле написать что-нибудь, то текст станет активным и его можно использовать в качестве гиперссылки. |
| 4. Selectable - Возможность выделять и копировать текст в готовом Flash-ролике. |
| 5. Font rendering method - Несколько способов сглаживания текста, при экспорте во Flash-ролик. |
| 6. Edit format options - Дополнительные свойства текста, применительно к параграфу. |
 |
Indent - Отступ первой строки. |
| Line spacing - Межстрочное расстояние. | |
| Left margin - Левая граница параграфа. | |
| Right margin - Правая граница параграфа. |
7. Edit orientation of text - Меняет ориентацию текста между горизонтальной и вертикальной.
| Пипетка | |
| Копирует свойства объекта, в зависимости от того, откуда они забираются. | |
Настройка градиентов
В Adobe Flash CS3 существует два типа градиента: линейный и радиальный. Включение градиентной заливки и выбор ее типа осуществляется на панели Color. За это отвечает параметр Type. При выборе одного из режимов, на индикаторе цвета сразу появляется градиент.
 |
 |
На его краях можно увидеть две крайние точки. Щелкнув на одной из них, можно установить ее цвет. Также, параметром Alpha можно установить прозрачность. Для добавления точек, просто щелкайте в нужном месте, между крайними точками. Чтобы убрать дополнительную точку, потяните ее вниз.
Градиент можно назначать, как для заливки, так и для обводки объектов.
 |
1. Треугольник - Центр градиента. Если сдвинуть его в сторону, центральная точка градиента изменит свое положение, однако сам градиент останется на месте. Это важно, когда нужно, чтобы края градиента совпадали с краями объекта. |
| 1. Точка - Общий центр градиента. Если ее сдвинуть, градиент переместится вместе с границами. | |
| 2. Искажение градиента по горизонтали. Немного некорректная формулировка, так как, по вертикали он не искажается. Скорее подойдет определение "перспективное искажение". | |
| 3. Радиус градиента. | |
| 4. Вращение градиента. |
Я намеренно опустил объяснение регулировок линейного градиента, поскольку они похожи, за исключением того, что органов управления там меньше.
Итак, общий обзор программы у нас есть, рисовать вы научились. Пора переходить к более важным вещам...
1.Рисовать во флеше можно и не имея графического планшета. На выручку приходит инструмент перо (Pen Tool). Но эскиз лучше нарисовать на бумаге и отсканировать.
2.Несложные персонажи очень просто сложить из примитивов, как конструктор.
3.Для отрисовки эскизов удобно использовать опцию Onion skin на таймлайне. Это своего рода инструмент-калька – позволяет просматривать предыдущие кадры. Итак, эскиз помещаем в первый кадр, а рисуем во втором, активировав Onion skin.
4.Рисовать желательно при увеличении рабочей области (zoom in). Где-то когда-то прочитала совет увеличивать рабочую область до 400 %. Не совсем понимаю почему именно 400, беру и больше:) Считается, что таким образом линии получаются более ровными и гладкими.
5.Кисть во флеше имеет свою особенность - она меняет свой размер по мере приближения и отдаления области рисунка. Чем дальше изображение, тем она толще, а чем ближе - тем тоньше соответственно.
6.Важно освоить инструменты коррекции линий Smooth и Straighten Tool на панели инструментов в графе Options. Smooth смягчает контуры, а Straighten - делает их жестче, прямее. И в этом случае флеш имеет особенность: сглаживание при разном масштабировании рабочей области происходит по-разному. При приближении объекта к нам оно более плавное и незаметное, при отведении – более грубое. Увеличивая – уменьшая рабочую область, можно регулировать степень сглаживания, чтобы добиться наилучшего результата. Желательно каждую линию, будь-то овал лица, контур волос, глаза прочее редактировать по-отдельности, так будет проще контролировать процесс сглаживания.
7.Карандаш. Чаще всего обращают внимания на его 3 режима на панели инструментов Options - Smooth (сглаживание), Straighten (выпрямление), Ink (чернильная линия), но реже упоминают о более полезном свойстве на панели Properties - соединение сегментов линий и форма окончания линии. Они могут быть скругленными, острыми и со скосом (bevel).
Пользуясь этими настройками, можно существенно изменить общий вид картинки, если рисунок выполнен карандашом.
8.Оbjects drawing на панели инструментов – полезная опция, чтобы части рисунка не слипались, а существовали как отдельные объекты. Это позволяет редактировать картинку в будущем.
9.Чтобы уменьшить вес графики, используем функцию оптимизации. Это важно для банеров, ведь требования к банерам часто жесткие - до 15-25 кб, например. А в голову уже не приходит, что еще можно выбросить, чтобы втиснуться в нужный размер. То же касается и онлайн флеш-игр, в некоторых случаях графику нужно максимально упростить (уменьшить количество точек и кривых). В таких случаях оптимизируем графику: modify – shape – optimize. Если включить превью,можно наблюдать, как оптимизация отражается на внешней форме объекта.
10.Растровые картинки, линии и текст можно преобразовать в форму для дальнейшего редактирования.
– текст и растр – с помощью разбивки Ctrl+B:
– карандашные линии – путем преобразования линии в заливку: modify – shape – convert lines to fills. Если объект покрылся сеточкой – значит, процедура прошла успешно:) И можно делать с ним все, что угодно.
