Рисование во флеш уроки. Отличия любительских и профессиональных планшетов Wacom

Более семи лет я удалённо работаю с зарубежными заказчиками из США, Канады, Австралии, Германии и других стран. Рисую графические ресурсы и анимацию для игр в Adobe Animate CC . Раньше редактор назывался Adobe Flash Professional CC .

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

Зачем нужен ещё один цикл уроков про рисование в Adobe Flash? Я много лет занимаюсь этим и считаю, что мой опыт может быть полезен начинающим. Особенно тем, кто раньше не рисовал с помощью графического планшета. Если вы хорошо рисуете на бумаге, но никогда не рисовали на компьютере, то мне точно есть, что вам рассказать.

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

Выбор графического планшета

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

Существует много производителей графических планшетов: Wacom, Genius, Huion. Я сталкивался только с первыми двумя. Всего я испробовал уже четыре планшета от Wacom и один от Genius, когда начинал. Я настоятельно рекомендую Wacom — это высокое качество за умеренную цену.

Если нет денег, не покупайте Genius, возьмите самый доступный маленький подержанный Wacom Bamboo Pen . Я использовал практически такой же, модель Wacom Bamboo Pen&Touch S CTH-460. Критических проблем за семь лет использования не было, хороший аппарат, чтобы начать. Если вы можете выделить больше денег, то берите модель покрупнее. Я использую Wacom Bamboo Fun Pen&Touch M CTH-670.

Что значят цифры и буквы в названиях моделей Wacom

Поясню, что значят некоторые цифры и буквы в названии, чтобы вам было проще ориентироваться в модельном парке компании.


Wacom Bamboo Fun Pen&Touch M CTH -6 70

  • M — размер рабочей области. Существуют S — Small (маленький), M — Medium (средний), L — Large (большой);
  • CTH — обозначает модельный ряд. Существуют CTL и CTH — любительские модели начального уровня с необязательными кнопками и тачпадом, PTH — профессиональные модели, DTH и DTK — профессиональные модели с встроенным дисплеем;
  • 6 — размер рабочей области в дюймах. Существуют 4 — Small (маленький), 6 — Medium (средний), 8 — Large (большой), а также 13 и больше, но это относится только к планшетам с встроенным дисплеем. Иногда в интернет-магазинах и в объявлениях не указывают буквенный индекс, тогда можно воспользоваться цифровым, чтобы понять габариты устройства;
  • 70 — поколение и модель. Важно понимать, чем больше это число, тем новее устройство. Для сравнения мой старый планшет имеет индекс CTH-460, современный аналог — CTH-490. Поколения отличаются на 10: 460, 470 и так далее.

Размер графического планшета

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

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

Когда вы работаете на планшете, его рабочая область проецируется на всю ширину монитора. Поэтому, чем больше планшет, тем точнее вы можете наносить мазки. И наоборот, чем больше монитор и чем меньше планшет, тем сложнее и дискомфортнее вам будет рисовать. По опыту могу сказать, что после перехода с размера S на M при работе на 29-дюймовом ультрашироком мониторе, мне стало работать комфортнее на 25-30%. Мне требуется меньше усилий, чтобы нарисовать сложный контур, в целом взаимодействие ощущается более мягким и приятным.

Графические планшеты большего размера должны обеспечить еще более комфортные условия работы, но мне не приходилось работать на L-моделях, могу лишь предположить.

Отличия любительских и профессиональных планшетов Wacom

Покупая про-модель вы получаете беспроводное устройство, изготовленное из более качественного пластика с 2048 уровнями чувствительности к нажатию против 1024 у моделей подешевле, красивейшим дизайном, дополнительными органами управления в виде кнопок и сенсорного кольца. Меня полностью устраивают младшие устаревшие модели серии Bamboo, которые сняты с производства. Разница по стоимости любительской и про-версий составит более двух раз. Таблица расставит все по полочкам:

Настройка Wacom Bamboo Pen & Touch M CTH-670

Перед подключением устройства скачиваем драйвера с официального сайта Wacom .

Перечень моделей Ссылка на драйвера
Intuos CTL-4100/6100/4100WL/6100WL
Intuos Pro PTH-451/651/660/851/860
One CTL-471/671/472/672
Intuos CTL-480/490/680/690
Intuos CTH-480/490/680/690
Intuos 5 PTK-450/650 PTH-450/650/850
Intuos 4 PTK-440/640/840/1240/540WL
Windows
macOS
Bamboo Pen&Touch CTH-460/470/471/660/661/670
Bamboo Pen CTL-460/471
Windows
macOS

После подключения планшета и установки драйверов запускаем приложение Wacom Preferences , которое можно найти через поиск Windows (Win + S) или в панели управления.

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

На вкладке Tablet можно настроить планшет под правую и левую руку, а также назначить действия для клавиш. Для начала установите их в Disabled , со временем можно будет назначить горячие клавиши.

На следующей вкладке Pen находятся важные параметры:

  • Tip Feel — чувствительность к нажатию. Оставляйте по центру. В процессе поймёте какая жёсткость вам по душе и настроите по вкусу;
  • Tracking — режим отслеживания положения стилуса. Устанавливаем Pen Mode — рабочая область планшета растягивается на весь экран. Режим Mouse используется, как замена мыши;
  • Остальные настройки не столь важны. Pen Buttons позволяет назначить действие на кнопки стилуса. Eraser Feel — чувствительность резинки с обратной стороны стилуса. Не использую эту возможность, так как мне быстрее переключаться с помощью горячих клавиш.

В этой же вкладке в разделе Tracking нажимаем кнопку Mapping... , чтобы настроить проецирование рабочей области планшета на экран монитора. Откроется окно Pen Mode Details .

В разделе Screen Area выбираем Monitor , если у вас несколько мониторов и указываем основной. Если монитор один, то оставляем All Screens

.

В разделе Scaling обязательно ставим галочку напротив Force Proportions , чтобы рабочая область не растягивалась при проецировании на экран. В этом случае часть рабочей области планшета не будет использоваться, но у нас будут нормальные пропорции 1 к 1. И если вы нарисуете круг, то на экране он отобразится, как круг, а не вытянутый эллипс.

Обязательно ставим галочку напротив Use Windows Ink , чтобы работала чувствительность к нажатию.


На следующей вкладке Touch Options снимаем галочку напротив Enable touch input , чтобы переключить планшет в обычный режим.


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

Animate CC или Flash Professional CC?

Adobe Animate CC — это ребрендинг Adobe Flash Professional CC, в программу добавили несколько нововведений. Ещё со старым названием завоевала огромную популярность среди художников, аниматоров и разработчиков инди-игр. Векторные принципы построения позволяют создавать спрайты для любого разрешения. Для рисования подойдёт любая версия, какую сможете достать. Инструменты рисования не меняются уже много лет, а лишь незначительно улучшаются. Я буду использовать Adobe Animate CC, но всё написанное будет применимо и для старых версий Adobe Flash Professional. К слову, в последнее время компания Adobe перешла на модель помесячной подписки для получения доступа к своим продуктам вместо дорогостоящего одноразового лицензирования. Сейчас цена за использование Adobe Animate CC составляет 20 долларов в месяц.

Первый запуск Adobe Animate CC

После загрузки создаём новый файл и выбираем тип Action Script 3.0 . В этом же окне можно указать параметры сцены:

  • Width и Height — ширина и высота сцены в пикселях. Выставим в 1920 x 1024, как разрешение в современном мониторе или смартфоне;
  • Ruler units — единицы измерения, выставляем пиксели;
  • Frame rate — количество кадров в секунду, оставляем 24;
  • Background color — цвет фона, выставляем в серый.

Эти настройки можно изменить и после создания документа. Для этого нужно выбрать инструмент Selection Tool (горячая клавиша V), открыть окно Properties и развернуть раздел Properties . Если вы не можете найти это окно, то воспользуйтесь меню Window Properties или сочетанием клавиш Ctrl + F3.

Настройка горячих клавиш

Чтобы повысить эффективность работы нужно использовать горячие клавиши по максимуму. На первых этапах это требует привыкания и запоминания новых комбинаций клавиш, но в дальнейшем обеспечивает солидный скачок в вашей эффективности. Я переопределил большинство горячих клавиш таким образом, чтобы они находились в правой стороне клавиатуры. Почему именно в правой? Дело в том, что я левша и, соответственно, мне так удобнее. Если вы правша, то вам придётся придумать свою схему. Кроме того, я использую Rapoo E9050 и Apple Wireless Keyboard , которые выполнены в форм-факторе клавиатур для ноутбуков, поэтому если вы используете полноразмерную, то, опять же, потрудитесь и придумайте свою схему — это окупится массой сэкономленного времени — а мою схему рассмотрите, как пример.

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


Команда Описание Старое сочетание Новое сочетание
Select All Выбрать всё Ctrl + A Ctrl + A, O
Deselect All Снять выделение Ctrl + Shift + A Ctrl + Shift + A, P
Undo Отменить действие Ctrl + Z Ctrl + Z, [, Z
Redo Повторить действие Ctrl + Y Ctrl + Y, ]
Zoom Масштабирование Shift + Z, Z Shift + Z, \
Zoom In Увеличить изображение Ctrl + =, Ctrl + Num = Ctrl + =, Ctrl + Num =, =
Zoom Out Уменьшить изображение Ctrl + =, Ctrl + Num = Ctrl + -, Ctrl + Num -, -
Straighten Выпрямить выделенные кривые 9
Smooth Сгладить выделенные кривые 0
Flip Horizontal Отразить по горизонтали F
Flip Vertical Отразить по вертикали Shift + F
Cut Вырезать в буфер обмена Ctrl + X Ctrl + X, X
Duplicate Symbol... Клонировать символ Ctrl + D
Swap Symbol... Сменить символ Ctrl + ]

В большинстве случаев новые сочетания не заменяют старые, а дополняют их, вводится несколько новых команд. Произвести настройку нужно через меню Edit Keyboard Shortcuts... . В поле для поиска вводим название команды, в колонке Shortcut кликаем на пустом месте напротив нужной команды и нажимаем новое сочетание клавиш.


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

Настройка кисти

Brush Tool (горячая клавиша B) — инструмент кисть, самый используемый при рисовании. Настройки сосредоточены в двух окнах:

Настройка кисти закончена, давайте нарисуем что-нибудь.

Рисуем с помощью кисти

Подберите подходящий цвет с помощью окна Color (Ctrl + Shift + F9), выберите инструмент кисть (B) и начните с одного длинного штриха с небольшим усилием, чтобы очертить будущую фигуру. Дальше обведите полученный контур, чтобы сгладить все неровности — кисточка готова.


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

Adobe Animate CC работает на векторных принципах. Все объекты описываются математически и могут масштабироваться без потери качества в отличии от растрового подхода. Это позволяет выполнять манипуляции с векторными объектами, чего мы никогда не сделаем с такой же легкостью в растровом редакторе. Мы можем сглаживать и упрощать контуры, выравнивать кривые линии, изменять пропорции и деформировать графические объекты без потери качества. Каждый штрих автоматически преобразовывается в математические кривые, которые мы можем точно подгонять и изменять.

Чтобы убедится во всём вышесказанном, активируйте инструмент Subselection Tool (горячая клавиша A) и выберите только что нарисованную кисть. Теперь вы можете разглядеть точки векторного контура и даже изменить их.


Заключение

Сегодня мы настроили Adobe Animate CC и готовы к началу рисования. Попрактикуйтесь немного прежде, чем мы продолжим. Научитесь рисовать простые геометрические фигуры без искажений, попробуйте различные цвета и настройки кисти (поэкспериментируйте с параметром Smoothing).

Похожие материалы

В этом уроке я покажу как рисовать Флеша поэтапно. Это вымышленный герой из вселенной DC Comics. Это имя носили много людей со схожими способностями. А именно они умели быстро двигаться, читать, думать и говорить. В одной из серий один Флеш говорил с другим Флешем так быстро, что телепатия перестала действовать на них. Кроме того известно, что Флеш двигается гораздо быстрее Супермена. Объясняется это тем, что Супермен привык только летать, а это требует гораздо меньших усилий, нежели сверхбыстрое передвижение.

Как нарисовать Флеша карандашом поэтапно

Шаг первый. Начну рисование с изображения мышечного корсета Флеша. Как и любой американский супер герой он целиком состоит из сверхпрочной мышечной массы.
Шаг второй. Соединю все части и получу тело Флеша.
Шаг третий. Рисуем его фирменный знак, поправляю контуры мышц и добавлю рожки на голове и лицо.
Шаг четвертый. Осталось добавить теней на костюме. Рисунок Флеша готов:
Хочешь нарисовать еще супер героев? Попробуй например.

Для того чтобы создавать рисунки, кнопки и другую графику, т.е. осуществлять рисование во Flash Вы будете использовать формы. Flash CS5 предлагает большое количество инструментов для этих целей: "карандаш", "ручку" "рисование линий", "кисть" и др. Чтобы создавать примитивные геометрические фигуры, такие как прямоугольник, круг, овал, квадрат, многоугольник Вы будете использовать специальные инструменты именно для таких форм.

Во Flash CS5 есть 5 различных инструментов для создания простых форм: "прямоугольник" (rectangle tool), "овал" (oval tool), "примитив прямоугольника" (rectangle primitive), "примитив овала" (oval primitive) и "многоугольник" (polystar tool). "Прямоугольник" может создавать прямоугольные и квадратные формы, а "овал" овальные и круглые.

Объекты, созданные с помощью инструментов рисования во Flash: "прямоугольник", "овал" и "многоугольник" состоят из заливки и контура.

Flash CS5 предлагает два режима рисования: Merge Drawing model (слитное рисование) и Object Drawing model (объектное рисование). В случае слитного рисования, контур и заливка любого объекта, после его создания, будут существовать отдельно друг от друга. Если Вы, например, переместите контур, то заливка останется на месте. Кроме того все объекты, находящиеся на одном слое будут взимодействовать друг с другом. Если Вы поместите один объект поверх другого, а затем уберете нижний в сторону, то от него будет "отрезана" область пересечения с верхним объектом.

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

Чтобы создавать многоугольники и формы типа "звезда" используйте инструмент "многоугольник" (polystar tool).

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

Рисование во Flash форм

Выберите инструмент рисования форм.

Щелкните на инструменте "прямоугольник" (rectangle tool) чтобы нарисовать прямоугольник или квадрат.

Щелкните на "овал" (oval) чтобы нарисовать овал или круг.

Щелкните на "примитив прямоугольника" (rectangle primitive) чтобы нарисовать прямоугольник в режиме объединения контура и заливки.

Щелкните на "примитив овала" (oval primitive) чтобы нарисовать овал в режиме объединения контура и заливки.

Щелкните на "многоугольник" (polystar tool) чтобы нарисовать многоугольник.
Заметьте, что Flash CS5 всегда показывает активной кнопку того инструмента, которым Вы пользовались последним.

Щелкните на инструменте "цвет контура" (stroke color).

Выберете цвет.

Щелкните на инструменте "цвет заливки" (fill color).

Выберете цвет.

В любом месте сцены (Stage) щелкните кнопкой мыши и не отпуская её потяните. Отпустите кнопку.

Вы создали фигуру.

Дополнительная информация

Для того чтобы во время рисования во Flash создать прямоугольник или овал с точными размерами необходимо вызвать диалоговое окно "размеры прямоугольника" (rectangle settings) или "размеры овала" (oval settings). В окне "размеры прямоугольника" можно задать радиус скругления угла если Вам нужен прямоугольник со скругленными углами. Для того чтобы открыть это диалоговое окно нажмите клавишу Alt и щелкните в любом месте на сцене (Stage). Диалоговое окно откроется. Введите в соответствующие поля ширину, высоту и радиус, там где это применимо. Нажмите кнопку OK. Flash поместит созданный прямоугольник или овал в то место на сцене, где Вы щелкнули.


Инструмент "примитив прямоугольника" (rectangle primitive) рисует прямоугольник с небольшими точками в углах для рисования прямоугольников со скругленными углами. Используя инструмент "выделение" (selection tool) Вы можете щелкнуть на одной из этих точек и потянуть, скругляя угол.


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

Пожалуйста, включите JavaScript, чтобы увидеть комментарии.

Кисть

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

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

Две последние кнопки служат для выбора формы и размера кисти. Так-же, прошу учесть, что размер кисти зависит от масштаба отображения.

В это же самое время, если посмотреть на панель 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. Вращение градиента.

Я намеренно опустил объяснение регулировок линейного градиента, поскольку они похожи, за исключением того, что органов управления там меньше.

Итак, общий обзор программы у нас есть, рисовать вы научились. Пора переходить к более важным вещам...

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

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

итак начнём. первое что нужно сделать создатть 4 дополнительных слоя, вам больше и не понадобиться.

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

Перед тем как действительно сделать что-нибудь, вам следует понять важность исходной фотографии. В действительности,
чем она больше тем лучше! почему это так важно, ну хотябы потому, что вы хотите получить высокодетализированную
векторную графику в конце, а для этого вам нужно разглядеть много деталей. Всё что вам нужно это чистый чёткий
снимок, высокого разрешения. начните хотя бы с фотографии в 1024х768 (не меньше)
в дополнениии, попытайтесь найти фотографию со студийным освещением. Тенями и подсветками которые чётко
просматриваются, картинка в целом что бы тоже чётко просматривалась. Более важная вешь, я думаю, отсутствие
какихнибудь странных отражений окружающей среды на снимке (можно конечно и с ними справиться, но для начала лучше их избегать).

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

красные линие указывают на основной рисунок. Или, другими словами, показывают область которая будет находиться на самом первом слое (ниже всех сотальных). Остальные тени и подсветки будут накладываться на него

эта часть основного освещения

пример теней, лежаших на третем слое. Они добавляются ко второму слою, и создают более сложную форму

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

Только для пояснения. Здесь контуры всех слоёв. В конце, вы будете иметь что-то похожее.

основной слой:

слой с основными тенями и подсветками:

дополнительное освещение (создание смешанного освещения фотореалистического рисунка)

и вот добавочные незначительные детали

как я уже говорил, основной слой, самый важный. Ошибки на нём испортят всю работу в целом и вот почему я всегда уделяю особое внимание уменно этому слою

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

Я начинаю с наружи диска

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

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

Процес разукрашивания:
первое что я делаю, очищаю всё из панели цветовой палитры (color swatches) всё равно стандартные цвета мне больше не нужны, без них у моя цветовая палитра будет более упорядоченной.
Затем я начинаю собирать цвета с фотографии (как показанно ниже). и на пробу пытаюсь закрашивать этими цветами свой основной слой.

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

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

Прямо сейчас, градиент закрашивает в неправельном направлении и переход цвета не такое как я задумывала. Чтобы изменить это, мне нужно использовать инструмент трансформации градиента (gradient transform tool). Пожалуй не нужно объяснять что этот инструмент делает, его имя говорит само за себя. когда выбрав этот инструмент вы счёлкаете на градиенте, появляются две голубые линии - пока это линейный градиент - два регулятора. Кружок меняет направление градиента, а квадратик меняет ширину.

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

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

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

если у вас какието проблемы с нахождением контуров, я покажу как они выглядят у меня:

ещё одна деталь. Как вы успели заметить, в центральной часте диска есть эмблема Mercedes Benz и на ней кое какой текст, тоже. У вас есть два варианта что бы справиться с текстом: вы можете напичатать текст в ручную, разбить его на части (Modify - Break Apart или Ctrl + B), и выровнять его с текстом на фотографии и в конце просто применить градиентную или обычную заливку для каждой буквы, или вы можете также просто оконтурить их, и так далее как с остальной частью изображения. Я предпочитаю последнее. Это может занять немного больше времени и сил, но зато я могу быть уверенна что результат будет действительно близок к оригиналу.

В любом случае, это зависит от вас. Я знаю некоторые люди предпочитают просто напичатать текст и всё и они обычно получают хороший результат.

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

сложно описать как выглядит форма тени - и я думаю вы и сами можете её видеть.
давайте нарисуем контуры этой тени

выберите два цвета и сделайте линейную градиентную заливку контура.

или круговую градиентную заливку,значения не имеет всё равно на оригинал сильно походить не будет

Что мы делаем сейчас - отделим разные части тени. мне кажется что наша тень состоит из 3х частей.

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

выберите цвет и вернитесь к панели смешивания цветов (color mixer). Сделайте radial gradient c цветом которые вы выбрали.второй такойже цвет с установленной прозрачностью до 0%. обе части контуров залейте таким градиентом.

теперь трегулируйте градиент с помошью инструмента трансформации градиента (gradient transformation tool). у вас должно получиться что-то типа этого

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

Понравилась статья? Поделитесь с друзьями!