Рисуем во Flash. Мальчишка для баннера. Brush Tool.

Этот пост посвящен рисованию кисточкой.  Какие-то моменты я уже описывала в рассказе о братце кролике, поэтому постоянно ссылаюсь на него, чтобы не повторяться.

Пару дней назад мой учитель, вдохновитель и друг Bakame! выразил пожелание увидеть мой баннер.  Я перебрала всех уже готовых персонажей и решила нарисовать нового :)

Больше всего времени, как всегда,  отнял скетч (погано я рисую, да.  Медленно, с кучей ошибок, с трудом переводя на бумагу то, что вертится в голове).  Персонаж должен был быть простым, мультяшным (ауч. Меня всегда тянет рисовать в реалистичной манере. Борюсь с этим), поза — выразительной, к тому же иметь какое-то отношение к тексту…

Но рисовала я, конечно, все, что в голову приходило :)  Попробовав так и сяк, я остановилась на подпрыгивающем мальчишке.

Некоторые ошибки я не стала стирать и перерисовывать — если я четко представляю, что и как нужно поменять, то делаю это уже во время отрисовки.

Итак, мне нужен был баннер 180 х 250.  Я сразу выбрала такой размер для нового файла (правой кнопкой мыши в основном окне, Document Properties), хотя это можно поменять и потом.  Импортировала отсканированный набросок, сделала его поменьше, приблизила рабочий стол для удобства, повесила замочек на слой с наброском и создала новый, на котором начала отрисовку.

В прошлый раз я рисовала кролика линиями.  Должна признаться, что для меня это не самый любимый способ, хотя у него есть свои несомненные плюсы.   Мне больше нравятся «живые» штрихи, неравномерные по толщине.  Конечно, можно после отрисовки конвертировать линии в «заливки» и исказить их, добившись такого эффекта (я рассказывала об этом фокусе в конце поста о кролике).  Но я все же предпочитаю рисовать кисточкой (Brush Tool).   Это больше похоже на обычное рисование на бумаге…  если, конечно, есть планшет, и его владелец не поленился прочитать статью Лерики о настройке.   Дело в том, что с мышкой невозможно использовать опции «чувствительность к нажатию» и «наклон пера».  Но это не значит, что в таком случае Brush Tool вообще нет смысла использовать!   Просто нужно будет дольше «дорабатывать» штрихи Selection Tool‘ом.

1. Brush Tool.  Настройки.

Выбираем Brush Tool на панели инструментов и разбираемся, какие еще кнопки здесь относятся к кисточке.


За распознавание наклона пера  отвечает кнопочка Use Tilt (последняя на моем скрине), а за чувствительность к нажатию —  Use Pressure рядом с ней (мышеводы пропускают эти две настройки,  а дальше все одинаково для пера и для мыши :)).

Следующая кнопка Brush Shape позволяет выбрать форму кисти (я  использую обычную круглую кисть, редко что-то другое), а Brush Size определяет ее размер (у меня — следующий после самой маленькой).

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

Что здесь произошло? :)   Кошачья задница была нарисована быстро и грубо, с приближением 100%.  А хвост и голова — на 400%, не глядя на ту часть, которая уже была готова.  Видите, насколько тоньше стала обводка?  А ведь в Brush Size был один и тот же размер кисточки!  Это, конечно, можно потом поправить Selection Tool‘ом или ластиком, а то и вообще перерисовать заново, но лучше постараться избежать дополнительных трудозатрат :)

Цвет выбирается там же, где и для заливки — банка с краской, она же Paint Bucket Tool (или тыкаем по нужной краске в палитре, если у вас открыто окошко Swatch).  То есть, можно сказать, что кисточка рисует заливками — это и отличает ее от группы инструментов, рисующих линиями (им был посвящен предыдущий пост).

Еще одна кнопочка, которой я часто пользуюсь — Brush Mode, а именно — Paint inside (рисовать внутри области одного цвета) и Paint Normal.

ДополнительноPaint Fills — кисть рисует только поверх заливок, не трогая линии.  Paint Behind — позади абсолютно всего, что уже есть на этом слое.  Paint Selection — внутри того, что вы выделили.

Что еще?   Нужно настроить сглаживание.  Выбрав Brush Tool, заходим в Properties (окошко в правой колонке).  Нас интересует Smoothing.  Я обычно ставлю 50, но иногда и меньше.   Попробуйте нарисовать какую-нибудь длинную закорючку или написать от руки пару слов с разными значениями Smoothing — и вы поймете, какое вам больше подходит.

 

 

 

 

 

 

Переходим к рисованию (наконец-то!!!)

2. Отрисовка контуров.

Напоминаю, что данная статья — не урок, а рассказ.  То есть, мои действия не являются единственно правильными :)

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

Дополнительно: Я настолько привыкла к такому способу, что даже статичные картинки рисую на нескольких слоях.  Если потребуется — потом можно «склеить» все в один: «вырезаем» все, что нарисовано на верхнем слое — щелчок по слою (Layer) и Ctrl+X.  Переходим на слой, куда нужно вклеить.  Ctrl+Shift+V или Paste in Place.

Итак, я выбираю, с чего начать отрисовку, приближаю, насколько мне удобно (в данном случае было 800 и 1200%), и провожу несколько штрихов в соответствии со скетчем.  Получается не очень красиво, но это я сейчас поправлю.  Мой первый фокус (профи лопнули со смеху, ага) в том, что я не всегда сразу соединяю черточки.  То есть, это все еще отдельные штрихи, и редактировать их можно по одному.

Кликните по картинке, чтобы поближе рассмотреть мои каракули…

Выбираю Selection Tool, щелкаю по одной из черточек, чтобы ее выделить,  а потом пару раз (не увлекаясь) тыкаю по кнопочке Smooth на панели инструментов.  И штрих из пиявки превращается во что-то, уже более-менее напоминающее обводку  :)    Для того, чтобы стало совсем похоже, придется поработать Selection Tool‘ом (а где-то и Subselection Tool‘ом).   Если нужно, я добавляю точки, зажав Alt (точно так же, как при работе с линиями.  Я об этом рассказывала в прошлом посте).   Выпрямляю, дотягиваю и соединяю, оформляю углы, делаю обводку шире или уже, но не выравниваю до одинаковой ширины везде.  В мои планы не входит сделать обводку идеально-ровной, я хочу оставить ее «живой», «рукописной», но без лишней грязи.

Ластиком я на этом этапе почти не пользуюсь.  Он оставляет неровные края, а моя задача — выпрямить линии.  Если нужно что-то удалить — «рисую» Selection Tool‘ом  прямоугольник над этой областью (выделяю) и жму Delete.  Кстати, при необходимости можно редактировать фрагменты с помощью Smooth — предварительно выделив нужный кусочек Lasso или Selection Tool‘ом.

На что еще нужно обратить внимание?  На соответствие «внешнего» и «внутреннего» края одной и той же черты.    Если предполагается «острый» уголок, он не должен быть «круглым» с внутренней стороны или «обрубленным» с внешней, как на картинке слева.

Как быть с деталями, которые нужно нарисовать поверх того, что уже отредактировано (например — со  шнурками)?

  • Вариант первый — нарисовать на отдельном слое.
  • Вариант второй — нарисовать на том же слое, но редактировать только Selection и Subselection Tool‘ом,  без кнопочки Smooth, чтобы не портить уже отредактированное раньше.
  • Вариант третий (подсмотрен у Тимура Баскакова — aka taras’ik — на форуме  Demiart) — на том же слое, но другим цветом.  Тогда старая и новая обводка не сольются в одну, и можно будет смело редактировать новую (а потом выделить и выбрать тот же цвет, что и для старой).

Я, как правило, пользуюсь 1м вариантом.

Кое-что я подправляла по ходу отрисовки.  Например, сделала шорты чуть длиннее, чем на скетче, а руки несколько раз передвигала и слегка поворачивала Free Transform‘ом, пока мне не понравился результат (как хорошо, что они были на отдельных слоях 😉  Не пришлось трогать туловище).

3. Заливка.

В общем, после долгих мучений…  шутка :) Честное слово, все делается быстро.  Я этот пост пишу уже намного дольше, чем отрисовывала картинку.   У меня получился вот такой рисунок:

«Лишние» линии — это те, которые остались на нижних слоях.  Их там можно было и не рисовать, но это не так важно.  Кепка, находящаяся на слое выше, закроет ненужную линию правого рукава футбоки, точно так же шорты и обувь «уберут» ненужные участки ноги.

Приступаю к заливке.  С замкнутыми контурами все ясно.  А что делать, если обводка есть не везде?  Использовать линию там, где ее нет!

Line Tool, например.  А после заливки линию можно удалить любым удобным способом :)

Дополнительно: а можно кисточкой нарисовать линию  — тем же цветом, который выбран для заливки.   Или… сами придумайте. Скорее всего, этот кусочек слоя все равно будет не виден.  В данном случае слой с рукой будет находиться ниже слоя с футболкой.

Хм… Вроде бы, получается неплохо, но очень скучно.  Хоть он и будет очень маленьким на баннере, но несколько деталей бы не помешали.  Кеды достаточно детализированы, как мне показалось.  Я добавила боковой шов на шорты, номер на футболку, пару деталей на кепку и попыталась сделать волосы объемнее… Кто сказал «на новом слое»?  А вот и не угадали :)

Что бы еще придумать? А не сделать ли всю внешнюю обводку потолще?  Почему бы и нет!  Снимаю замочки со всех слоев, кроме скетча (а можно его уже и совсем удалить), выделяю весь рисунок, обведя его Selection Tool‘oм,   Ctrl+C, на новом слое Paste in Place и, не снимая выделения, выбираю черный цвет заливки.   Получилочь что-то вроде тени персонажа — его копия, но полностью черного цвета.   Запираю на замок все остальное. Слегка  увеличиваю «тень» Free Transform Tool‘ом, а там, где нужно — изменяю контур Selection Tool’ом, как при работе с обводкой.

Копирую готовые буквы из шапки сайта в файл к мальчишке, File — Export — Export Image, сохраняю в формате .png.  Баннер готов.

4.  О палитре.

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

Пример применения таких красок можно увидеть в моей первой открытке.

У меня, например, от излишней яркости очень быстро устают и начинают болеть глаза.

Как поменять?  В окошке Swatches (Ctrl+F9) жмем кнопочку в правом верхнем углу.  В выпавшем меню выбираем Clear Colors.  Остались 2 цвета —  черный и белый.  Теперь можно загрузить любую понравившуюся палитру (Add Colors в том же меню) и сделать ее палитрой «по умолчанию» (Save as Default).

 

Резонный вопрос — а где взять другую палитру?  Можно использовать любой понравившийся .gif файл, как предлагает Bakame! Можно поискать в сети готовые (это будет .clr или .act файл).  Можно повозиться самому (Window — Color).  Поможет в этом деле Adobe Kuler.  Правда, «переносить» цвета  придется вручную и по одному — вписывать значения RGB из Кулера во Флеш.

В ближайшие дни я постараюсь выложить несколько симпатичных вариантов.

Спасибо за внимание :)

 

Запись опубликована в рубрике Рисование с метками , , . Добавьте в закладки постоянную ссылку.

6 комментариев: Рисуем во Flash. Мальчишка для баннера. Brush Tool.

  1. LegendMAN говорит:

    >>Поможет в этом деле Adobe Kuler. Правда, “переносить” цвета придется вручную и по одному – вписывать значения RGB из Кулера во Флеш.

    можно просто добавить его (кулер), в качестве расширения, в одну из боковых панелей:
    Menu Window -> Extensions -> Kuler
    правда не знаю, во свех версия Flash он есть или нет…

  2. Ronda говорит:

    Да, в CS4 он есть, а «пятерку» я еще не видела, так что ничего сказать не могу.

  3. 1g0rrr говорит:

    Спасибо, отличная статья. Что-то знал и до этого, что-то открылось новое. Кстати, как у вас получается делать настолько ровные линии, например на подошвах? Или линию с плавным сгибом, как на руке. Она кажется идеально ровной, но у меня не удавалось такого добиться.

    • Ronda говорит:

      Спасибо за спасибо :) Никаких секретов — у меня Smoothing кисточки на 50 почти всегда. Плюс потом выравниваю края (иногда — подолгу), тоже все как рассказывала :) Еще — стараюсь не мелкими штрихами рисовать, а сплошную линию вести, если такая нужна.

  4. Renderdoll говорит:

    Очень понравилась статья, большое спасибо прочитала с удовольствием! И хоть приходилось уже работать во флеше, но в вашей статье нашла много нового и интересного для себя, например, вот раньше даже и не знала о существовании Brush Mode, а теперь попробовала поиграться — да это же ж такая нужная вещь! Спасибо! очень понравился именно такой «живой» стиль изложения, так легко читается, намного приятнее чем читать заумные и скучные уроки. =)))

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*