Добрый день! Сегодня мы попробуем нарисовать ещё одного супергероя из славной вселенной DC Comics. Это будет Флэш, один из участников Лиги справедливости.
Как мы знаем, суперспособность Флэша — это невероятная скорость. Именно поэтому мы решили выбрать для него динамичную позу. Это необходимо отразить и в стикмене:
Флэш, как и, в общем-то, все супергерои, имеет атлетическое телосложение. Передать эту особенность фигуры нам помогут:
Кстати, посмотрите на фигуру . Он вроде бы и крупный, массивный, но явно не атлетичный. Крохотные ножки и широченный таз очень хорошо формируют неповоротливую, обрюзгшую фигуру. Вот здесь такого быть не должно, поэтому тщательно прорисовываем и основные, и малозаметные группы мышц.
Да, не забудьте разметить лицо парой линий. Они делят лицо на две равные половинки, каждая в своей плоскости.
Именно с лица мы и начнём этот шаг. Намечаем глаза, рот и нос. Глаза имеют форму овалов; нос-прямой, состоит буквально из трёх линий; рот изогнут, зубы обнажены от физического напряжения. В рисовании черт лица критически важно ориентироваться на лицевые линии из предыдущего шага.
Нам повезло, что Флэш предпочитает носить маску — не придётся рисовать волосы на голове. Нам нужно только подчистить пространство внутри контуров лица от лишних направляющих линий и наметить линии маски.
Теперь поработаем с корпусом Флэша. Прямо под нижней челюстью наметим пару слегка волнистых линий — это будут контур ключиц. Обратите внимание на то, что они располагаются по диагонали от лица, а не прямо под ним. В этой же плоскости будут находится и линии выраженных грудных мышц. Конечно же, не забываем про знаменитый логотип Флэша.
Проделываем такую же работу с руками Флэша. Не переусердствуйте с линиями мышц внутри контуров рук — на левой (от нас) руке таких линии вообще нет, а на правой их всего пять, из которых две приходятся на предплечье. Не забываем, конечно, отчертить предплечья фирменным узором в виде молнии.
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. Если объект покрылся сеточкой – значит, процедура прошла успешно:) И можно делать с ним все, что угодно.
Все о рисовании во флеше и не только. Информация о том, как создается графика для флеш-игр, как нарисовать персонажа, как рисуются фоны для флеш-игр и мультиков, основы гейм-дизайна.
Время от времени ко мне через сайт обращаются с просьбой подсказать что-то по рисованию или по анимации во флеше.
Я всегда стараюсь отвечать на вопросы, если, конечно, сама владею информацией.
Сегодня пришло письмо с просьбой написать урок по рисованию:
Чтобы ускорить процесс заливки, стоит использовать цветовые ключи. Тем, кто учился в художественной школе, наверняка знаком этот термин. Но не всем так повезло, среди художников и аниматоров много самоучек, как я, например:) На самом деле, цветовые ключи - это поиск цветового решения для персонажей, фонов и всего прочего. Просмотрев немало видео-уроков по рисованию, пришла к выводу, что многие заливают цветом интуитивно, подбирая цвета поочередно, наугад.
Не так давно через сайт поступила просьба написать, как я рисовала волосы . Давненько не выкладывала уроков, и решила - а почему бы и нет, напишу пару строчек про волосы:) Я бы не называла это руководством к действию, как верно рисовать волосы. Что именно так они рисуются, и никак иначе. Просто коротко опишу сам процесс, как это делала я. Возможно, будет интересно не только одному человеку.
В своей работе я использую несколько техник рисования. Поскольку мультипликация предполагает стилизованное изображение живых и неживых предметов – налицо полная свобода для фантазии. Но свои фантазии по стилю исполнения желательно обсуждать с заказчиком в самом начале работы, чтобы фантазии стали общими:) Иногда выбор той или иной техники зависит от ее трудоемкости. Например, проще отрисовать карандашом, чем возиться с кисточкой и линиями, которые нужно править, и это требуют большей аккуратности, а значит и времени на исполнения.
По характеру линий можно класифицировать:
1. Однородный контур
– рисуется карандашом (Y), в итоге получаются линии одинаковой толщины. Чтобы рисунок не выглядел очень однообразно, можно использовать линии разной толщины, например, по краям толщину линии берем больше, а более мелкие детали (например, элементы одежды) прорисовываем линией потоньше. Такой контур очень удобен для быстрой заливки.
Если у вас нет планшета это ещё не повод отчаиваться. Во времена 5-6-го флеша мне тоже приходилось рисовать мышкой. А недавно мне надо было сделать иллюстрацию, в которой я повсеместно использовала методику, принципы которой я вам сейчас расскажу.
Во первых удобнее всего рисовать при наличии скетча. Поэтому если у вас есть сканер — нет ничего проще, чем сделать карандашный рисунок, сканировать его и импортировать во flash.
Вышепредставленный скетч к сожалению не моего авторства, мне его прислала подруга, которая в свою очередь нашла его где-то на просторах интернета. Поэтому, если вы знаете автора, обязательно сообщите мне.
Основные инструменты, которыми вы должны пользоваться — это pen , line , selection и subselection tools:
Для явно круглых и прямоугольных областей разумно использовать oval
и rectangle
.
Использование pensil не возбраняется, но не приветствуется, потому как он создаёт кучу лишних точек.
Итак, с помощью pen и line необходимо нарисовать все все контуры. Не пытайтесь сразу делать правельные дуги, рисуйте прямые линии, все они потом очень легко редактируются с помощью selection (чёрная стрелочка), а где не получается добиться нужного радиуса или угла, всегда можно прибегнуть к помощи subselection (белая стрелочка.)
Если теневая область тоже заранее известна, лучше её прорисовать сразу. Все остальные мелкие детали можно доробатывать уже после задания основных цветов.
Вот собственно видео процесса прорисовки этой иллюстрации. В сумме заняло 50 минут.
А теперь немного теории для тех, кто не умеет или не понимает как правильно работать с Selection Tool.
Работа с Selection Tool
Итак, с помощью selection tool можно выделять графические объекты, перемещать и редактировать.
1. Выделение
Если возле стрелочки вы видите значок пунктирного прямоугольника. значит инструмент Selection
находится в режиме выделения и зажатием левой клавиши мыши (ЛКМ) можно выделить произвольную прямоугольную область.
2. Перемещение.
Если графический объект или символ выделен, то при наведении на него стрелки появляется значок перемещения (крестик со стрелочками на концах) и можно переместить объект в любое произвольное место.
3. Редактирование линий
.
Если подвести курсор к краю прямой или кривой линии. то пиктограмма возле него поменяется на дугу. И теперь вы с лёгкостью можете регулировать кривизну линий.
4. Редактирование узловых точек.
Если подвести курсор к узловой точке на объекте, пиктограмма возле него поменяется на прямой угол. Теперь с помощью Selection
можно перемещать узловые точки.
5. Добавление узловых точек.
С помощью Selection
также можно добавлять точки. Для этого надо подвести курсор к месту где мы хотите добавить точку, чтобы пиктограмма возле него поменялась на дугу, зажать Alt
и переместить курсор немного в сторону. в результате добавится новая точка. Поверьте, это намного быстрее, чем добавлять точки с помощью Pen
.
6. Слияние точек.
Если вам надо удалить какую-либо точку, её на самом деле намного проще совместить с соседней. Для этого нужно подвести курсор к необходимой точке, чтобы пиктограмма поменялась на уголок и переместить на соседнюю. Внимание!
У вас должна быть обязательна включена привязка к объектам, иначе ничего не получится.
Вот собственно основные принципы работы инструмента Selection
, с помощью которого очень удобно редактировать линии даже мышкой, я бы сказала в первую очередь мышкой. И если вы присмотритесь, то легко заметите на видео, что я паботаю практически только этим инструментом.
Удачи вам и приятных рисунков.
Я начал использовать Flash давно, когда еще это была версия 3, когда Flash был воспринят как новомодный векторный редактор на основе инструмента анимации, который вскоре мог бы захватить мир веб-дизайна штурмом. На протяжении многих лет Flash вырос в полноценный многофункциональный инструмент для разработки приложений, упакованный до краев «полезностями» .
Как много людей, кажется, забывают о том, что Flash все еще инструмент дизайнера, позволяющий создавать графику и анимацию старомодным способом рисования.
Давайте начнем с того, с чего начал бы каждый в Flash (или в любом другом приложении для дизайна) — с рисования. Будь это рисование обычных форм или начертание линий, рисование — это одна из фундаментальных основ действий в Flash. Хотя, что делает Flash уникальным, так это то, каким образом создаются и редактируются формы. Программа ведет себя совсем не так, как большинство других инструментов для векторного рисования, и многие либо любят, либо ненавидят ее. Конечно, есть свои преимущества и недостатки в разделении каждой части объекта при самостоятельном редактировании. Давайте взглянем на некоторые причудливые мелочи, которые проделывает Flash и как использовать их наилучшим образом.
Хотя этот урок был написан для Flash Professional CS5, большинство советов должны будут работать прекрасно и в более старых версиях. Я постараюсь сделать акцент везде, где будет что-то очень специфическое в последних версиях Flash.
В этом уроке мы рассмотрим:
Как правило, когда вы рисуете правильную форму (прямоугольник или эллипс) в Falsh, создается объект с настройками выбранной заливки и контура. Затем вы можете выбрать заливку и/или контур индивидуально и отредактировать их свойства. В Flash CS3, Adobe представил то, что они называют инструментами «примитивных» форм. В отличие от инструментов форм по умолчанию, которые отделяют контур от заливки, эти инструменты создают форму, которая выбирается и редактируется как единое целое.
Хотя для ветеранов-дизайнеров Fhash это может быть и раздражающим изменением, но оно привносит уровень контроля, который не был виден в Flash в ранних версиях. Вы можете неожиданно изменить свойства объекта численно через панель свойств, добавить скругленные углы и конвертировать окружности в пироги с точностью десятичной точки. Существует не так много причин, чтобы вернуться к традиционным инструментам создания форм, как только вы начнете использовать примитивы, но многие дизайнеры, которых я знаю, продолжают пользоваться старомодным способом. Часть проблемы может быть ошеломляющее решение фирмы Adobe оставить простые формы в качестве инструментов по умолчанию, убрав примитивы в выпадающее меню панели инструментов.
Давай попробуем использовать примитивные формы в реальной ситуации, где применение традиционных инструментов для форм может быть доказано как упражнение в таскании за волосы. Допустим, вы хотите создать точную круговую диаграмму с помощью действительных чисел — рынок акций мобильных операционных систем в 2010 году, например.
Как только мы получим проценты (которые добавляют до 100), мы умножим каждый на 3,6 , чтобы приравнять их к общему градусу 360 в окружности. Затем, это просто вопрос вставки шести окружностей друг над другом и назначения соответствующих стартовых и конечных углов для каждого из них, полученных на основе вычислений. Смотрите математические данные в таблице ниже, так же как и свойства для каждой круговой диаграммы, для лучшего понимания.
По своей природе, объекты в Flash свободно редактируемые всеми видами доступных способов. Вы можете выбрать заливку или контур формы, перетащить их и они окажут воздействие на все другие формы в этой области, пока находятся на той же плоскости. То, что произойдет, когда вы выбираете и/или перетаскиваете элемент, зависит от того, на что вы кликаете и где. Давайте взглянем на различные возможности:
Давайте попробуем применить эти знания, чтобы сделать сложные волновые линии простым способом — при помощи прямых зигзагообразных линий. Начнем с простого рисования прямых линий, чтобы определить приблизительный размер и форму волны. Убедитесь, что линия не выделена. Затем, выберите и перетащите каждый сегмент линии, чтобы сделать изогнутость для волны. И наконец, выберите угловые точки и передвиньте их вверх или вниз до тех пор, пока они не притянутся и сделают изогнутую, плавную с обеих сторон.
По какой-то причине, лучше всего известной Adobe, они никогда не решали унаследованную проблему с визуализацией скругленных углов в Flash. Если контур прямоугольника с закругленными углами — нечетное число (1, 3, 5, и т.д.), то углы, как правило, имеют уродливые артефакты, которые делают изображение размытым. Типичная уловка, которую я использовал и которую видел в действии, это убедился в том, что контуры прямоугольника с закругленными углами всегда равны 2, 4, 6 или любому другому числу. Но эта уловка по-прежнему не работает, если форма находится на подпиксельной координате — или x или y координата равна десятичному значению (2.6, 4.12, 98.57 и т.д.) — но эту проблему намного легче решить.
Но, что делать, если нужно, чтобы контур был размером в один пиксель? Один из способов, который я недавно нашел и широко применяю с этого времени, следующий:
Хотя этот метод должен работать в большинстве случаев, он не без ошибок. В нем нет смысла, например, в тех ситуациях, когда нужно, чтобы объект был полупрозрачным. Снижение альфа-канала заливки у прямоугольника отобразит только больше цвета контура от прямоугольника сзади. Уловка получить закругление может испортить оба прямоугольника (конвертировать их в обычные формы).
Вы также можете рассмотреть возможность использования параметра «stroke hinting» , который будет направлять при рисовании контуров на сцене.
Кто же не любит градиенты? Дизайны в наши дни немного несовершенны без хотя бы слабого намека на градиент, который придает реалистичный и часто современный вид. Не смотря на проблему с тем, как Flash управляет формами, то, что каждая самодостаточная часть — это форма и имеет свои собственные свойства. Вы не можете применить градиентную заливку на группы объектов и нет способа «соединить» две различные формы. Что произойдет, потом, когда нужно, чтобы градиент распределился через несколько объектов — скажем, все слова в логотипе, сделанном на заказ?
Хорошо, «заблокируйте заливку» для помощи. При использовании инструмента «Paint Bucket» вы увидите значок внизу палитры инструментов с градиентом и замочком на нем. Выберите формы, которые нужно закрасить, переключите значок «Lock Fill» (заблокировать заливку), выберите градиент из палитры цветов заливки и кликните внутри любой выбранной формы. Не беспокойтесь, если не видите весь примененный градиент. Довольно часто незаблокированная заливка простирается далеко за пределы выбранных форм и необходимо использовать инструмент «Gradient Transform» , чтобы изменить размер градиента так, как вам это нужно.
Тем не менее этот метод не без недостатков. Вот некоторые вещи, о которых нужно помнить при использовании заблокированных заливок:
Flash поставляется с набором стилей контуров по умолчанию — сплошной (solid), пунктирный (dashed), с точками (dotted), неровный (ragged), пунктир с точками (stripples) и со штриховкой (hatched) — которые в основном работают прекрасно. Для ситуаций, где вам нужно больше контроля над контуром, есть довольно мощный редактор контуров, который идет в поставке с Flash. Чтобы по-настоящему поиграть с контурами, нажмите на значок «edit» (редактирование) рядом со списком «Style» в панели свойств «Properties» выбранного контура.
Допустим, вам нужно нарисовать пунктирную линию, но знаки тире в настоящее время находятся слишком близко в стиле по умолчанию «dashed» . В панели «Edit Stroke» (редактирование контура), просто увеличьте число во втором поле ввода рядом с «dash» пока не получите нужный эффект. И в это же время установите параметр «sharp corners». Если вам надоели странные углы, которые вы получаете вместе с пунктирной линией, заданной по умолчанию в Flash, то это все исправит.
Вот еще несколько полезных подсказок, чтобы помочь оптимизировать рабочий процесс при использовании форм в Flash.
Пока что все для первой части в данной серии статей о советах Flash-дизайнерам. Надеюсь, что эти хитрости помогут вам улучшить и оптимизировать свой рабочий процесс в Flash в долгосрочной перспективе. Пожалуйста, не стесняйтесь, поделитесь своими советами и практикой в разделе комментариев. Если вам понравился урок, расскажите о нем в социальных сетях (значки внизу), это поможет продвижению сайта. В следующей части урока мы рассмотрим советы о том, как управлять текстом и символами в Flash.
