Как нарисовать персонажа для анимации в adobe illustrator
Animate позволяет импортировать AI-файлы из Adobe® Illustrator®, сохраняя большинство возможностей редактирования и визуальной надежности изображения. AI Importer также обеспечивает высокую степень контроля при определении метода импорта изображений Illustrator в Animate, позволяя указать режим импорта конкретных объектов в AI-файл.
Animate AI Importer располагает следующими основными характеристиками.
Сохраняет возможность редактирования большинства широко используемых эффектов Illustrator как фильтров Animate.
Сохраняет возможность редактирования режимов наложения, общих для Animate и Illustrator.
Сохраняет точность и возможность редактирования градиентных заливок.
Обеспечивает согласованное представление RGB-цветов (красного, зеленого, синего).
Импортирует символы Illustrator как символы Animate.
Сохраняет число и положение опорных точек Безье.
Точно сохраняет маски обрезки.
Сохраняет точный вид обводки и заливки.
Сохраняет прозрачность объектов.
Преобразует слои AI-файла в отдельные слои, ключевые кадры или в один слой Animate. Можно также импортировать AI-файл как единое растровое изображение, в этом случае Animate выполняет сведение (растрирует) файл.
Улучшает процедуры копирования и вставки между Illustrator и Animate. Настройки диалогового окна копирования и вставки применяются к AI-файлам, которые вставляются в рабочую область Animate.
Совместимость между Animate и Illustrator
Определенные визуальные атрибуты не могут быть точно импортированы, или после импорта теряется возможность редактировать их в среде разработчика Animate. AI Importer обеспечивает несколько способов импорта и размещения иллюстрации, чтобы оптимально сохранить ее внешний вид и возможность редактирования. Однако, сохранить некоторые визуальные атрибуты нельзя. Следуйте следующим указаниям, чтобы улучшить внешний вид AI-файлов, импортированных в Animate:
Animate поддерживает только цветовое пространство RGB, но не цветовое пространство CMYK, широко применяемое в печати. Animate может преобразовать изображения CMYK в RGB, однако цвета лучше сохраняются при преобразовании цветов в систему RGB в Illustrator.
Чтобы сохранить AI-эффекты тени, внутреннего свечения слоя, внешнего свечения слоя и размытия по Гауссу в виде редактируемых фильтров Animate, Animate импортирует объекты, к которым применены эти эффекты как фрагмент ролика Animate. При попытке импортировать объект с этими атрибутами как отличный от фрагмента ролика Animate выводит предупреждение о несовместимости и рекомендует импортировать объект как фрагмент ролика.
Графический объект, созданный в приложении Illustrator, можно переместить в среду редактирования Animate или напрямую открыть в приложении Flash Player. Графические объекты можно копировать и вставлять, сохранять в формате SWF или экспортировать напрямую в приложение Animate. Кроме того, Illustrator обеспечивает поддержку динамического текста Animate и символов роликов.
Вставка графического объекта Illustrator
Созданный в приложении Illustrator графический объект можно быстро, просто и без затруднений скопировать и вставить в приложение Animate.
При вставке графического объекта Illustrator в приложение Animate сохраняются следующие атрибуты.
Контуры и фигуры
Текст (включая шрифты OpenType)
Кроме того, Illustrator и Animate поддерживают следующие возможности при вставке графического объекта.
При выделении в графическом объекте Illustrator слоев верхнего уровня целиком и вставке их в приложение Animate сохраняются слои и их свойства (видимость и блокировка).
Цветовые форматы Illustrator, отличные от RGB (CMYK, градации серого и пользовательские форматы), преобразуются приложением Animate в формат RGB. Цвета RGB вставляются обычным образом.
При импорте или вставке графического объекта Illustrator можно с помощью различных параметров сохранить определенные эффекты (например, тень, отбрасываемую текстом) в виде фильтров Animate.
Animate сохраняет маски Illustrator.
Экспорт SWF-файлов из приложения Illustrator
SWF-файлы, экспортируемые из приложения Illustrator, соответствуют по качеству и степени сжатия SWF-файлам, экспортируемым из приложения Animate.
При экспорте можно выбрать один из многочисленных заранее заданных стилей, обеспечивающих оптимальный вывод, и указать способ использования нескольких монтажных областей, способ преобразования символов, слоев, текста и масок. Например, можно указать экспорт символов Illustrator в виде роликов или графических изображений, а также создание SWF-символов из слоев Illustrator.
Импорт файлов Illustrator в приложение Animate
Чтобы создать полный макет в приложении Illustrator, а затем импортировать его в приложение Animate за один шаг, можно сохранить графический объект в собственном формате Illustrator (AI) и импортировать его с высокой точностью в приложение Animate с помощью команд «Файл» > «Импортировать в рабочую область» или «Файл» > «Импортировать в библиотеку».
Если файл Illustrator содержит несколько монтажных областей, выберите монтажную область для импорта в диалоговом окне «Импорт» программы Animate и укажите настройки для каждого слоя в этой монтажной области. Все объекты в выбранной монтажной области могут быть импортированы как один или несколько слоев или ключевых кадров Animate в программу Animate.
При импорте графического объекта Illustrator в виде файлов AI, EPS или PDF приложение Animate сохраняет те же атрибуты, что и при вставке графических объектов Illustrator. Кроме того, если импортируемый файл Illustrator содержит слои, их можно импортировать одним из следующих способов.
Преобразование слоев Illustrator в слои Animate
Преобразование слоев Illustrator в кадры Animate
Преобразование слоев Illustrator в один слой Animate
Работа с символами
Работа с символами в приложении Illustrator похожа на работу с символами в Animate.
Если AI-файл содержит текст, его можно преобразовать в следующие объекты.
- Текст, доступный для редактирования
- Векторный контур
- Сведенное растровое изображение
Animate позволяет конвертировать слои в импортированном AI-файле, получая на выходе следующее.
- Файл растрового изображения, сведенного в один слой
- Редактируемые контуры и эффекты
(только для Flash Professional CS6 и более ранних версий) Свойства символа и ссылки
С помощью палитры «Символы» или панели·«Управление» можно легко назначать имена экземплярам символов, разрывать связи между экземплярами и символами, замещать экземпляр символа другим символом или создавать копию символа. Функции редактирования панели «Библиотека» в Animate работают аналогично.
(только для Flash Professional CS6 и более ранних версий) Объекты статического, динамического и вводимого текста
При переносе статического текста из приложения Illustrator в приложение Animate он преобразуется в контуры. Кроме того, можно настроить текст в приложении Illustrator как динамический текст. Динамический текст позволяет редактировать содержимое текста в приложении Animate программным образом и легко управлять проектами, требующими локализации на разные языки.
В приложении Illustrator отдельные текстовые объекты могут быть статическими, динамическими или объектами для ввода текста. Динамические текстовые объекты в приложениях Illustrator и Animate имеют схожие свойства. Например, в обоих приложениях можно использовать кернинг, оказывающий влияние на все символы текстового блока, а не на отдельные символы; оба приложения одинаково производят сглаживание текста и поддерживают связь с внешним XML-файлом, содержащим текст.
Импорт AI-файла в библиотеку аналогичен импорту в рабочую область. Различие заключается в том, что весь AI-файл инкапсулирован в символ Animate. Содержимое импортируется в библиотеку и упорядочивается в структуре слоев и групп AI-файла.
Когда AI-файл импортируется в библиотеку, для корневой папки используется имя AI-файла. После импортирования AI-файла в библиотеку можно изменить имя корневой папки или переместить слои из папки.
Содержимое импортированного AI-файла упорядочивается в библиотеке по алфавиту. Иерархическая структура групп и папок остается неизменной, но в библиотеке они переупорядочиваются по алфавиту.
При преобразовании AI-слоев в ключевые кадры AI-файл импортируется как фрагмент ролика; при преобразовании AI-слоев во Flash-слои AI-файл импортируется как графический символ. Полученный в результате фрагмент ролика или графический символ включает все содержимое AI-файла, импортированного на временную шкалу, как если бы содержимое было импортировано в рабочую область. Почти со всеми фрагментами ролика связаны растровые изображения и другие ресурсы. Чтобы избежать недоразумений и конфликтов имен, эти ресурсы хранятся в папке Assets в одной папке с фрагментом ролика.
При импорте в библиотеку содержимое AI-файла импортируется на временную шкалу фрагмента видеоролика, а не на основную временную шкалу Animate.
(только для Flash Professional CS6 и более ранних версий) Параметры средства импорта AI-файлов
В диалоговом окне «Настройки» в Animate можно задать настройки импорта для AI-файлов и диалогового окна «Импорт AI-файлов». Заданные настройки импорта AI-файлов влияют на параметры, первоначально установленные в диалоговом окне «Импорт AI» для типов объектов Illustrator.
Используйте диалоговое окно «Импорт AI», чтобы изменить для отдельных объектов настройки, заданные для слоев различных типов. Выберите слой, объект или группу, чтобы изменить соответствующие параметры импорта, и укажите необходимые параметры.
Настройки, которые влияют на действия средства импорта при импорте AI-файлов.
Показать диалоговое окно «Импорт»
Указывает, что появляется диалоговое окно «Импорт AI-файла».
Вынести объекты за область кадрирования
Исключает объекты на холсте Illustrator, которые находятся вне макета или области кадрирования.
Импортировать скрытые слои.
Указывает, что скрытые слои будут импортированы по умолчанию.
Импортировать текст как
Позволяет указать следующие установки импорта для текстовых объектов.
Текст, доступный для редактирования
Указывает, что импортированный из программы Illustrator текст является редактируемым в Animate. Допускается ухудшение вида текста, чтобы сохранить редактируемость текста.
Преобразует текст в векторные контуры. Этот параметр используется, чтобы сохранить внешний вид текста. Могут быть потеряны некоторые визуальные эффекты (в частности, неподдерживаемые режимы наложения и фильтры), но визуальные атрибуты (такие как текст по контуру) сохраняются, если текст импортируется как фрагмент ролика. Сам текст более нельзя редактировать, но сохраняется редактируемость степени плотности цвета и совместимых режимов наложения.
Чтобы сохранить AI-эффекты тени, внутреннего свечения, внешнего свечения и размытия по Гауссу в виде редактируемых фильтров Animate, выберите команду «Создать фрагмент ролика для импорта», чтобы импортировать текст как фрагмент ролика.
Преобразует текст в растровое изображение, чтобы сохранить точный вид текста, каким он был в Illustrator. Если применяются фильтры или другие эффекты, которые не совместимы с Animate, то импорт текста как растрового изображения сохраняет его внешний вид. Растрированный текст больше нельзя редактировать.
Создать фрагменты ролика
Указывает, что текстовые объекты импортируются во фрагмент ролика. Чтобы сохранить поддерживаемые режимы наложения, AI-эффекты и прозрачность менее 100% при передаче между Illustrator и Animate, укажите, что текстовый объект импортируется как фрагмент ролика.
Импортировать пути как
Позволяет указать следующие установки импорта контуров.
Создает редактируемый векторный контур. Сохраняются поддерживаемые режимы наложения, эффекты и прозрачность объекта, но атрибуты, не поддерживаемые в Animate, отбрасываются.
Преобразует контур в растровое изображение, чтобы сохранить точный вид контура в Illustrator. Растрированное изображение более нельзя редактировать.
Создать фрагменты ролика
Указывает, что объекты контура импортируются во фрагмент ролика.
Позволяет задать установки импорта для изображений.
Свести растровое изображение для сохранения оформления
Преобразует изображение в растровое, чтобы сохранить внешний вид режимов наложения и эффектов, не поддерживаемых в Animate. Растрированное изображение более нельзя редактировать.
Создать фрагменты ролика
Указывает, что изображения импортируются во фрагмент ролика.
Позволяет указать установки импорта для групп.
Импортировать как растровые изображения
Преобразует группу в растровое изображение, чтобы сохранить вид объектов, каким он был в Illustrator. После преобразования группы в растровое изображение объекты в ней нельзя выделить или переименовать.
Создать фрагменты ролика
Указывает, что все объекты в группе инкапсулируются в одном фрагменте ролика.
Позволяет задать установки импорта для слоев.
Импортировать как растровые изображения
Преобразует слой в растровое изображение, чтобы сохранить внешний вид объектов, какими они были в Illustrator.
Создать фрагменты ролика
Указывает, что слой инкапсулирован во фрагменте ролика.
Указывает глобальную точку регистрации для создаваемых роликов. Этот параметр применяется для точки регистрации для всех типов объектов. Этот параметр может быть изменен для отдельных объектов в диалоговом окне «Импорт AI-файла»; это начальный параметр для всех типов объектов. Дополнительные сведения о точке регистрации фрагмента ролика см. в разделе Изменение символов.
Чтобы создать полный макет в приложении Illustrator, а затем импортировать его в приложение Animate за один шаг, можно сохранить графический объект в собственном формате Illustrator (AI) и импортировать его с высокой точностью в приложение Animate с помощью команд «Файл» > «Импортировать в рабочую область» или «Файл» > «Импортировать в библиотеку».
Если файл Illustrator содержит несколько монтажных областей, выберите монтажную область для импорта в диалоговом окне «Импорт» программы Animate и укажите настройки для каждого слоя в этой монтажной области. Все объекты в выбранной монтажной области могут быть импортированы как один или несколько слоев flash/ключевых кадров в программу Animate.
При импорте графического объекта Illustrator в виде файлов AI, EPS или PDF приложение Animate сохраняет те же атрибуты, что и при вставке графических объектов Illustrator. Кроме того, если импортируемый файл Illustrator содержит слои, их можно импортировать одним из следующих способов.
- Преобразовать слои Illustrator в слои Flash.
- Преобразовать слои Illustrator в кадры Flash.
- Преобразовать все слои Illustrator в один слой Flash.
Работа с символами
Работа с символами в приложении Illustrator похожа на работу с символами в Animate.
Преобразование текста
Если AI-файл содержит текст, его можно преобразовать в следующие объекты.
- Текст, доступный для редактирования
- Векторный контур
- Сведенное растровое изображение
Преобразование слоя
Animate позволяет конвертировать слои в импортированном AI-файле, получая на выходе следующее.
- Файл растрового изображения, сведенного в один слой
- Редактируемые контуры и эффекты
(только для Flash Professional CS6 и более ранних версий) Свойства символа и ссылки
С помощью палитры «Символы» или панели·«Управление» можно легко назначать имена экземплярам символов, разрывать связи между экземплярами и символами, замещать экземпляр символа другим символом или создавать копию символа. Функции редактирования панели «Библиотека» в Animate работают аналогично.
(только для Flash Professional CS6 и более ранних версий) Объекты статического, динамического и вводимого текста
При переносе статического текста из приложения Illustrator в приложение Animate он преобразуется в контуры. Кроме того, можно настроить текст в приложении Illustrator как динамический текст. Динамический текст позволяет редактировать содержимое текста в приложении Animate программным образом и легко управлять проектами, требующими локализации на разные языки.
В приложении Illustrator отдельные текстовые объекты могут быть статическими, динамическими или объектами для ввода текста. Динамические текстовые объекты в приложениях Illustrator и Animate имеют схожие свойства. Например, в обоих приложениях можно использовать кернинг, оказывающий влияние на все символы текстового блока, а не на отдельные символы; оба приложения одинаково производят сглаживание текста и поддерживают связь с внешним XML-файлом, содержащим текст.
Формат файла Flash (SWF) основан на векторной графике и предназначен для масштабируемой, компактной графики для Интернета. Так как этот формат файла основан на векторной графике, объект сохраняет качество изображения при любом разрешении и идеален для создания кадров анимации. В Illustrator можно создать отдельные кадры анимации на слоях и затем экспортировать слои изображения в отдельные кадры для использования на веб-сайте. Можно также определить символы в файле Illustrator для снижения размера анимации. При экспорте каждый символ определяется в файле SWF только один раз.
Сохранить объект как файл SWF можно с помощью команды «Экспорт» или Сохранить для Web и устройств . Вот преимущества каждого из этих способов:
Команда «Экспорт» (SWF)
Обеспечивает наибольший контроль над анимацией и битовым сжатием.
Команда «Сохранить для Web и устройств»
Обеспечивает больше контроля над смесью форматов SWF и битового во фрагментированном макете. Эта команда предлагает меньше параметров изображения, чем команда «Экспорт» (SWF), и применяет последние использованные параметры команды «Экспорт».
При подготовке объекта к сохранению в формате SWF помните следующие рекомендации.
Чтобы файл был как можно меньше при использовании символов, применяйте эффекты к символу на палитре «Символы», а не к экземплярам символа в объекте.
Использование инструментов «Обесцвечивание символов» и «Стили символов» увеличит размер файлов SWF, так как Illustrator должен создать копию каждого экземпляра символа для сохранения оформления.
Сетчатые объекты и градиенты, у которых больше восьми точек узла градиента, растрируются и отображаются как фигуры, залитые растровым изображением. Градиенты с менее чем восемью точками узла градиента экспортируются как градиенты.
Узоры растрируются в маленькие изображения размером с узор и выкладываются мозаикой для заполнения объекта.
Если растровый объект выходит за границы фрагмента, весь объект включается в экспортируемый файл.
Формат SWF поддерживает только скругленные концы и стыки. При экспорте в формат SWF скошенные или квадратные концы и стыки скругляются.
Залитый узором текст и обводки преобразуются в контуры и заливаются узором.
Хотя при экспорте в формат SWF текст сохраняет многие свои особенности, некоторая информация теряется. Если файл SWF импортируется в Flash, интерлиньяж, кернинг и трекинг не сохраняются. Вместо этого текст разбивается на отдельные записи для имитации вида интерлиньяжа. Если затем файл SWF проигрывается в Flash Player, оформление интерлиньяжа, кернинга и трекинга в файле сохраняется. Если нужно экспортировать текст как контуры, установите флажок «Экспортировать текст в кривых» в диалоговом окне «Параметры SWF» или преобразуйте текст в кривые перед экспортом в формат SWF, выбрав команду «Преобразовать в кривые».
В Illustrator существует много способов создания Flash-анимации. Один из самых простых — это расположить каждый кадр анимации на отдельном слое Illustrator и при экспорте объекта выбрать параметр Слои AI в кадры SWF .
Создайте объект, который хотите анимировать. Используйте символы для уменьшения размера файла анимации и упрощения работы.
Для этого можно вставить основной объект в новый слой, а затем отредактировать объект. Можно также использовать команду «Распределить по слоям» для автоматического формирования слоев из накапливающихся объектов.
Выберите «Файл» > «Экспорт», формат «Flash (SWF)» и нажмите «Экспорт». В диалоговом окне «Параметры SWF» выберите в списке «Экспортировать как» значение Слои AI в кадры SWF . Задайте дополнительные параметры анимации и нажмите кнопку «ОК».
Выберите «Файл» > Сохранить для Web и устройств . Выберите «SWF» из меню Оптимизированный формат файла . В меню «Тип экспорта» выберите команду Слои AI в кадры SWF . Задайте дополнительные параметры и нажмите кнопку «Сохранить».
Графический объект, созданный в приложении Illustrator, можно переместить в среду редактирования Flash или напрямую открыть в приложении Flash Player. Графические объекты можно копировать и вставлять, сохранять в формате SWF или экспортировать напрямую в приложение Flash. Кроме того, Illustrator обеспечивает поддержку динамического текста Flash и символов роликов.
С помощью приложения Device Central можно увидеть, как будет выглядеть графический объект Illustrator в приложении Flash Player на различных карманных устройствах.
Вставка графического объекта Illustrator
Созданный в приложении Illustrator графический объект можно быстро, просто и без затруднений скопировать и вставить в приложение Flash.
При вставке графического объекта Illustrator в приложение Flash сохраняются следующие атрибуты.
Контуры и фигуры
Текст (включая шрифты OpenType)
Кроме того, Illustrator и Flash поддерживают следующие возможности при вставке графического объекта.
При выделении в графическом объекте Illustrator слоев верхнего уровня целиком и вставке их в приложение Flash сохраняются слои и их свойства (видимость и блокировка).
Цветовые форматы Illustrator, отличные от RGB (CMYK, градации серого и пользовательские форматы), преобразуются приложением Flash в формат RGB. Цвета RGB вставляются обычным образом.
При импорте или вставке графического объекта Illustrator можно с помощью различных параметров сохранить определенные эффекты (например, тень, отбрасываемую текстом) в виде фильтров Flash.
Flash сохраняет маски Illustrator.
Экспорт файлов SWF из приложения Illustrator
Файлы SWF, экспортируемые из приложения Illustrator, соответствуют по качеству и степени сжатия файлам SWF, экспортируемым из приложения Flash.
При экспорте можно выбрать один из многочисленных заранее заданных стилей, обеспечивающих оптимальный вывод, и указать способ использования нескольких монтажных областей, способ преобразования символов, слоев, текста и масок. Например, можно указать экспорт символов Illustrator в виде роликов или графических изображений, а также создание символов SWF из слоев Illustrator.
Импорт файлов Illustrator в приложение Flash
Чтобы создать полный макет в приложении Illustrator, а затем импортировать его в приложение Flash за один шаг, можно сохранить графический объект в собственном формате Illustrator (AI) и импортировать его с высокой точностью в приложение Flash с помощью команд «Файл» > «Импортировать в рабочую область» или «Файл» > «Импортировать в библиотеку».
Если файл Illustrator содержит несколько монтажных областей, выберите монтажную область для импорта в диалоговом окне «Импорт» программы Flash и укажите настройки для каждого слоя в этой монтажной области. Все объекты в выбранной монтажной области импортируются в программу Flash как единый слой. При импорте другой монтажной области из того же файла AI объекты из этой монтажной области импортируются в программу Flash как новый слой.
При импорте графического объекта Illustrator в виде файлов AI, EPS или PDF приложение Flash сохраняет те же атрибуты, что и при вставке графических объектов Illustrator. Кроме того, если импортируемый файл Illustrator содержит слои, их можно импортировать одним из следующих способов.
Преобразовать слои Illustrator в слои Flash.
Преобразовать слои Illustrator в кадры Flash.
Преобразовать все слои Illustrator в один слой Flash.
Работа с символами
Работа с символами в приложении Illustrator похожа на работу с символами в приложении Flash.
При создании символа в приложении Illustrator в диалоговом окне «Свойства символа» можно задать его имя и специфичные для приложения Flash параметры: тип символа ролика (это значение по умолчанию для символов Flash), местоположение в сетке регистрации Flash и направляющие 9-фрагментного масштабирования. Кроме того, многие комбинации клавиш, применяемые в приложениях Illustrator и Flash, совпадают (например, клавиша F8 используется для создания символа).
Редактирование символов в режиме изоляции
Дважды нажмите символ в приложении Illustrator, чтобы открыть его в режиме изоляции, упрощающем редактирование. В режиме изоляции допускается редактирование только данного экземпляра символа, все остальные объекты в монтажной области затенены и недоступны. После выхода из режима изоляции соответствующим образом обновляется символ на палитре «Символы» и все его экземпляры. Режим редактирования символов и панель «Библиотека» в приложении Flash работают аналогично.
Свойства и связи символа
С помощью палитры «Символы» или панели «Управление» можно легко назначать имена экземплярам символов, разрывать связи между экземплярами и символами, замещать экземпляр символа другим символом или создавать копию символа. Функции редактирования панели «Библиотека» в приложении Flash работают аналогично.
Статические и динамические текстовые объекты и объекты для ввода текста
При переносе статического текста из приложения Illustrator в приложение Flash он преобразуется в контуры. Кроме того, можно настроить текст в приложении Illustrator как динамический текст. Динамический текст позволяет редактировать содержимое текста в приложении Flash программным образом и легко управлять проектами, требующими локализации на разные языки.
В приложении Illustrator отдельные текстовые объекты могут быть статическими, динамическими или объектами для ввода текста. Динамические текстовые объекты в приложениях Illustrator и Flash имеют схожие свойства. Например, в обоих приложениях можно использовать кернинг, оказывающий влияние на все символы текстового блока, а не на отдельные символы; оба приложения одинаково производят сглаживание текста и поддерживают связь с внешним файлом XML, содержащим текст.
Используйте инструменты рисования в Adobe Animate для создания и редактирования линий и фигур в графических объектах ваших документов. Линии и фигуры, создаваемые в Animate, представляют собой облегченную векторную графику, которая позволяет сохранять небольшой размер FLA-файла.
Прежде чем приступить к рисованию и закрашиванию в Animate, важно понимать, как Animate создает иллюстрации, как рисование, закрашивание и модификация фигур может повлиять на другие фигуры в том же слое.
Векторная и растровая графика
Компьютеры отображают графику в векторном или растровом формате. Понимая различия между двумя форматами, можно работать более эффективно. В Animate можно создавать и анимировать компактные векторные изображения. В Animate можно также импортировать и обрабатывать векторные и растровые изображения, созданные в других приложениях.
Векторные изображения
В векторной графике изображения описываются с использованием линий и кривых, называемых векторами, у которых есть также свойства цвета и положения. Например, изображение листа описывается набором точек, через которые проходят линии, образующие контур листа. Цвет листа определяется цветом контура и цветом области, заключенной внутри контура.
При редактировании векторного изображения модифицируются свойства линий и кривых, описывающих его фигуру. Можно перемещать, изменять размер, форму и цвет векторного изображения без изменения качества. Векторные изображения не зависят от разрешения, то есть их можно отображать на устройствах вывода с различным разрешением без потери качества.
Растровые графические объекты
В растровых графических объектах изображения описываются с использованием точек, называемых пикселами, упорядоченных в сетке. Например, изображение листа описывается конкретным местоположением и цветовым значением каждого пиксела в сетке, при этом создается изображение, похожее на мозаику.
При редактировании растрового изображения модифицируются пикселы, а не линии и кривые. Растровые изображения зависят от разрешения, так как точки, описывающие изображение, зафиксированы в сетке определенного размера. При редактировании растрового изображения его качество может изменяться. В частности, при изменении размера растрового изображения его края могут стать неровными из-за перераспределения пикселов в растровой сетке. При отображении растровых изображений на устройстве вывода с более низким разрешением, чем у самого изображения, качество также ухудшается.
Траектории
При рисовании линии или фигуры в программе Animate создается линия, называемая траекторией. Траектория состоит из одного или нескольких прямых или изогнутых сегментов. Начало и конец каждого сегмента отмечаются узловыми точками, которые фиксируют данную кривую на определенном месте. Траектория может быть замкнутой (например, круг) или открытой, с отдельными конечными точками (например, волнообразная линия).
Чтобы изменить форму контура, перетащите его узловые точки, точки направления в конце линий направления, которые появляются в узловых точках, или сам сегмент траектории.
A. Выделенная (сплошная) конечная точка B. Выделенная узловая точка C. Невыделенная узловая точка D. Изогнутый сегмент контура E. Точка направления F. Линия направления.
В траекториях существует два типа узловых точек: точки преломления и точки сглаживания. В точке преломления траектория резко меняет направление. В точке сглаживания сегменты траектории соединены в виде непрерывной кривой. Траекторию можно нарисовать с использованием любой комбинации точек преломления и сглаживания. Если ошибочно нарисована точка не того типа, ее всегда можно изменить.
A. Четыре точки преломления B. Четыре точки сглаживания C. Комбинация точек преломления и точек сглаживания.
Точка преломления может соединять любые два прямых или изогнутых сегмента, а точка сглаживания всегда соединяет два изогнутых сегмента.
Не путайте точки преломления и точки сглаживания с прямыми и изогнутыми сегментами.
Линия траектории называется обводкой. Цвет или градиент, примененный к внутренней области открытой или замкнутой траектории, называется заливкой. Обводка характеризуется толщиной, цветом и типом штриха. После создания траектории или фигуры можно изменить свойства обводки и заливки.
Линии направления и точки направления
Если выбрана узловая точка, которая соединяет изогнутые сегменты (или выбран сам сегмент), то в узловых точках соединенных сегментов отображаются маркеры направления, которые состоят из линий направления, оканчивающихся точками направления. Угол и длина линий направления определяет форму и размер изогнутых сегментов. При перемещении точек направления изменяется форма кривых. Линии направления не отображаются в окончательном выводе.
У точки сглаживания всегда есть две линии направления, которые перемещаются вместе как один прямой сегмент. При перемещении линии направления в точку сглаживания изогнутые сегменты на обеих сторонах точки изменяются одновременно, сохраняя непрерывную кривизну в этой узловой точке.
Для сравнения: у точки преломления может быть две, одна или ни одной линии направления, если в точке соединяются два изогнутых сегмента, точка связана с одним изогнутым сегментом или не связана ни с чем (соответственно). Линии направления точки преломления сохраняют преломление за счет использования различных углов. При перемещении линии направления в точку преломления изменяется только кривая с той стороны точки, где расположена линия направления.
После выбора узловой точки (слева) линии направления появляются на любом изогнутом сегменте, соединенном с узловой точкой (справа).
Линии направления всегда размещаются по касательной (перпендикулярно радиусу) к кривой в узловых точках. Угол каждой линии направления определяет изгиб кривой, а длина каждой линии определяет степень вогнутости или выгнутости кривой.
В Animate можно создавать несколько типов графических объектов, используя различные режимы и инструменты рисования. Каждый из них обладает своими преимуществами и недостатками. Понимание возможностей каждого из типов объектов позволяет принимать правильные решения относительно того, какой из типов следует использовать в работе.
В Animate под графическими объектами понимаются элементы, находящиеся в рабочей области. Animate позволяет перемещать, копировать, удалять, преобразовывать, выполнять наложение, выравнивать и группировать графические объекты. Не следует путать графические объекты в Animate и объекты ActionScript, которые являются составной частью языка программирования ActionScript ®. В данном случае термин «объекты» применяется к двум совершенно разным понятиям. Дополнительные сведения об объектах в языке программирования см. в разделе «О типах данных» руководства Изучение ActionScript 2.0 в Adobe Animate или Типы данных руководства разработчика ActionScript 3.0.
Режим объединения рисунков
В этом активном по умолчанию режиме рисования перекрывающиеся фигуры автоматически объединяются в процессе рисования. При рисовании фигур, перекрывающих друг друга в одном слое, верхняя фигура перекрывает часть нижней. С этой точки зрения режим рисования фигур является разрушающим. Например, если нарисовать круг и наложить на него круг меньшего размера, а затем выбрать этот маленький круг и переместить его, то часть большего круга, на которую накладывался второй круг, будет удалена.
Если у фигуры имеется обводка и заливка, то они рассматриваются как отдельные графические элементы, которые могут быть выделены и перемещены независимо друг от друга.
Фигуры, созданные в режиме «Объединение рисунков», при наложении объединяются. Выбор и перемещение фигуры приводит к изменению той фигуры, на которую выполнялось наложение.
В этом уроке вы освоите пошаговый процесс рисования изометрических векторных фигур без использования изометрической сетки.
Так что же такое изометрическое искусство? Техника невероятно популярна, так как позволяет в полной мере передать все три измерения и объем фигуры. Изометрическая перспектива — это когда угол 30 градусов применяется к сторонам объекта. Это лучше всего иллюстрируется с использованием изометрического куба (как видно на рисунке ниже).
Вы можете создавать изометрическую графику в Adobe Illustrator, используя изометрическую сетку (как показано на рисунке ниже). Это помогает вам создавать изометрические фигуры, следуя сетке.
Создаем новый файл проекта
Давайте начнем с настройки нового документа в Adobe Illustrator («Файл» — «Создать» или «Control-N» ). Для этого урока мы будем использовать следующие настройки :
На вкладке «Дополнительно» используйте следующие параметры:
После перейдите в Units (верхнее меню Редактирование — Установки — Единицы измерения) и используйте настройки, показанные ниже.
Создаем голову
Выберите Ellipse Tool (L) и создайте круг. Удерживайте клавишу Shift на клавиатуре, нарисуйте идеальный круг. Для цвета кожи мы будем использовать настройки ниже, но не стесняйтесь выбирать свои собственные цвета для вашего проекта.
Выберите инструмент прямого выделения Direct Selection Tool (A) и выделите круг. Это покажет опорные точки окружности и позволит вам настроить их с помощью инструмента.
Используйте инструмент Direct Selection Tool (A), чтобы выбрать нижнюю опорную точку и переместите ее в сторону, чтобы создать подбородок вашего персонажа.
Создайте еще один идеальный круг с помощью Ellipse Tool , и на этот раз выберите цвет для волос вашего персонажа.
Чтобы создать уши, используйте Rounded Rectangle Tool. Нарисуйте небольшую капсулу, используя тот же цвет кожи, что и для головы, и переместите ее на место.
Используйте Rounded Rectangle Tool, чтобы создать большую капсулу. Используйте тот же цвет, который вы использовали для волос и слегка поверните ее под углом.
Используйте инструмент «Выделение» (V), чтобы поместить фигуру перед головой.
Дублируйте форму, скопировав ее (Control-C) и вставив ее (Control-V) . Поместите новую капсулу дальше над головой, чтобы создать дополнительный объем волос.
Щелкните правой кнопкой мыши на фигуре уха, и выберите «Упорядочить» — «Переместить на передний план» .
Это поместит форму уха на волосы.
Создайте еще две маленькие капсулы и используйте инструмент «Выделение» (V), чтобы повернуть их и переместить на место.
Создайте капсулу для шеи и переместите ее под голову. Используйте немного более темный цвет для кожи.
Создайте новый слой для фона.
На новом слое используйте инструмент «Прямоугольник», чтобы создать новый фон, и выберите подходящий цвет:
Создаем изометрическое тело
Используйте Rectangle Tool и вытяните длинный белый прямоугольник. Используйте инструмент Direct Selection Tool (A), чтобы переместить две верхние опорные точки навстречу друг другу, чтобы создать трапецию. Убедитесь, что все четыре виджета Live Corner видны (если нет, отмените выбор формы и выберите ее снова, щелкнув по центру). Выберите виджет и перетащите все четыре угла к центру, чтобы закруглить углы.
Убедитесь, что тело выбрано. Перейдите в Effect> 3D> Rotate .
Во всплывающем окне обязательно выберите следующее:
Это придаст телу изометрическую форму. Обратите внимание, что вы все еще можете редактировать форму, как это было, когда она была 2D, и это будет корректироваться в режиме реального времени.
Убедитесь, что тело выбрано. Перейдите в Effect> 3D> Extrude & Bevel .
Во всплывающем окне обязательно выберите следующее:
Это создаст изометрический трехмерный объект, который мы можем использовать для тела персонажа.
Используйте инструмент «Выделение» (V), чтобы переместить голову на верхнюю часть тела.
Создаем изометрические ноги
Используйте инструмент прямоугольник с закругленными углами, чтобы создать бедра персонажа. Выберите новый цвет для ног:
Убедитесь, что бедро выбрано. Перейдите в Effect> 3D> Rotate . Во всплывающем окне обязательно выберите следующее:
Убедитесь, что бедро все еще выбрано. Перейдите в Effect> 3D> Extrude & Bevel . Во всплывающем окне обязательно выберите следующее:
Поместите форму ниже и позади тела. Вы можете сделать это, щелкнув правой кнопкой мыши на фигуре и выбрав Arrange — Send to Back (Монтаж — Переложить назад).
Выберите Pen Tool (P) и укажите толщину обводки 21 пункт .
Используйте Pen Tool (P), чтобы нарисовать прямую линию, удерживая клавишу Shift на клавиатуре. Дублируйте или нарисуйте две ноги и поместите их ниже бедер.
Создаем изометрические руки
Используйте Rounded Rectangle Tool, чтобы создать белую капсулу для рукава рубашки. Поверните его под небольшим углом, используя инструмент выделения (V) .
Поместите капсулу на плечо персонажа.
Дублируйте форму и отправьте ее обратно (щелкните правой кнопкой мыши — Монтаж> Переложить назад) . Затем вам нужно будет перевернуть фигуру (щелкните правой кнопкой мыши — Трансформировать — Зеркальное отражение — Вертикально), затем укоротите ее и поместите поверх плеча персонажа.
Выберите Pen Tool (P) и настройте параметры обводки так, чтобы цвет соответствовал цвету кожи персонажа:
Используйте Pen Tool (P), чтобы нарисовать слегка изогнутую руку и поместите ее под белую капсулу рукава.
Дублируйте руку, скопировав ее (Control-C) и вставив ее (Control-V) .
Переверните руку, щелкнув правой кнопкой мыши по ней и выбрав Трансформировать — Зеркальное отражение — Вертикально .
Создаем изометрическую юбку
Теперь, когда мы создали нашего первого персонажа, мы можем внести некоторые небольшие изменения, чтобы создать второго персонажа.
Используйте инструмент «Выделение» (V), чтобы выделить весь объект и продублировать его. На втором персонаже используйте инструмент Direct Selection Tool (A), чтобы удалить волосы.
Выберите обе ноги и измените свойства обводки, чтобы цвет соответствовал цвету кожи персонажа. Уменьшите немного толщину ног:
Чтобы создать юбку, выберите изометрическую форму, которая составляет бедро персонажа. Затем используйте инструмент «Выделение» (V) и потяните форму вниз, чтобы увеличить и отрегулировать длину.
Используйте Direct Selection Tool (A) , чтобы настроить Live Corner Widgets , чтобы углы снова стали острыми.Регулируйте форму юбки, перемещая нижние опорные точки друг к другу.
Если вы довольны общей формой юбки, вы можете снова использовать Direct Selection Tool (A), чтобы скруглить углы с помощью Live Corner Widgets .
Создаем изометрические волосы
Затем создайте меньший круг и поместите его за ухо. Нажмите и удерживайте клавишу Shift на клавиатуре, используя Ellipse Tool, чтобы создать идеальную форму круга.
Создайте еще один круг и поместите его перед лбом персонажа. Используйте инструмент Direct Selection Tool (V), чтобы уменьшить высоту и внести коррективы в форму.
Создаем грудь
Используйте Ellipse Tool (L), чтобы создать маленькую круглую белую форму и поместите ее поверх области груди персонажа.
Дублируйте форму и поместите ее на другую сторону груди.
Сгруппируйте обе фигуры вместе (Control-G) и продублируйте новую группу. Вы можете сделать это, скопировав его (Control-C) и вставив его на место (Control-Shift-V) . Это вставит новую группу поверх предыдущей группы. Мы назовем эту новую группу «Shadow Group».
Выберите немного более темный цвет для тени и примените его к новой группе, используя инструмент «Пипетка» (I) . Вы можете сделать это, убедившись, что группа фигур выбрана, а затем с помощью инструмента «Пипетка» щелкнуть нужный цвет.
Переместите группу теней за двумя белыми круглыми формами и используйте клавиши со стрелками на клавиатуре, чтобы постепенно перемещать ее вниз, чтобы появилась небольшая тонкая тень.
Удалите лишнюю теневую область, накрыв ее новой фигурой (это можно сделать с помощью Pen Tool). Выберите форму тени и новую форму (показана красным цветом) и используйте Режим Минус Верхний, чтобы удалить лишнюю тень.
Поместите тень под белым эллипсом.
Потрясающие! Вы закончили!
Поздравляем! Вы успешно завершили этот урок. Не стесняйтесь поделиться своими творениями ниже! Я надеюсь, что этот урок оказался полезным и вы узнали много новых советов и приемов, которые вы можете использовать для своих будущих иллюстраций. Увидимся в следующий раз!
Meni Tzima знает все о милоте. И страшилках. Она специализируется на создании милых, зачастую странных персонажей из своего виртуального логова Yupyland с 2003 — и применяет разнообразные техники, чтобы вдохнуть жизнь в свои творения. Она создавала иллюстрации для детских книг, одежды и продуктов — и её персонажи всё чаще используются в корпоративных проектах.
В этом мастер-классе Meni раскрывает секреты создания персонажа от начального скетча до обработки в Adobe Illustrator. Этот мастер-класс тренирует навыки векторного рисования, показывая возможности разнообразных вариантов контура и заливки.
Программное обеспечение
Adobe Photoshop CS2 или выше, Adobe Illustrator CS2 или выше
Время работы
Шаг 1
Сначала мы набросаем персонажа. Хватайте карандаши и отрывайтесь! Делая грубые наброски, постарайтесь перенести на бумагу персонажа, которого вы видите в своем воображении. Нашего персонажа, вероятно, придется набросать несколько раз, прежде чем мы будем довольны результатом. Не бойтесь экспериментировать и портить скетчбук, ведь грязный скетчбук лучше, чем пустой, и конечно, практика — путь к совершенству!
Шаг 2
А вот и финальный набросок персонажа, над которым мы будем работать. Перед сканированием набросок необходимо подчистить, чтобы его можно было легко перевести в Illustrator. Можно использовать световой стол, чтобы перевести изображение на чистый лист бумаги, или воспользоваться калькой. Когда набросок переведен, дорисуйте детали там, где необходимо.
Шаг 3
Отсканируйте изображение через Adobe Photoshop. Рекомендую сканировать с высоким разрешением (300 dpi), чтобы было легче переводить мелкие детали. Чтобы уменьшить размер файла, выберите «Градации серого» в настройках сканирования. Закончив, сохраните изображение как JPEG файл, и выберите «наилучшее качество 12» в настройках сохранения JPEG-файла. Выберите Изображение — Коррекция — Яркость/Контрастность, чтобы усилить контрастность наброска, если это необходимо.
Шаг 4
В Adobe Illustrator выберите Файл — Новый или Ctrl/Cmd + N и создайте новый документ, назовите его, выберите размер А4, ориентация страницы — портрет. Для рисования мы возьмем цветовой профиль CMYK. Выберите Файл — Поместить и разместите файл наброска на нашем документе.
Шаг 5
В выпадающем меню панели слоёв измените тип слоя на «Шаблон». Дайте слою такое же название. Создайте новый слой. На нём мы и начнём работать. Постарайтесь работать на разных слоях, чтобы полностью контролировать процесс рисования. Не забудьте о том, что очень важно давать названия слоям, особенно когда вы работаете со сложными проектами со множеством слоёв.
Шаг 6
С помощью инструмента «Перо» начните делать контур рисунка. Управлять кривыми безье может показаться трудным для новичков, но это всего лишь дело практики. Старайтесь добавлять опорные точки только там, где это необходимо. Чем меньше будет опорных точек, тем лучше: тогда кривые будут более ровными и гармоничными.
Шаг 7
Перо, которое держит наш персонаж, — это симметричный объект, поэтому нам не придется обводить его целиком. Вместо этого с помощью инструмента «Перо» нарисуйте половину пера. Дублируйте контур, выделив обе его части, нажав Alt/Option + Shift и перетащив новый контур влево. Выберите Объект — Трансформировать — Зеркальное отражение — По вертикали. Соедините контуры, выделив две конечные точки и щёлкнув Объект — Контур — Соединить или Ctrl/Cmd + J.
Шаг 8
Графический планшет и перо могут оказаться крайне полезными, когда вы используете инструмент «Карандаш». Используйте этот инструмент, чтобы рисовать свободные контуры. С помощью инструмента «Сглаживание» из выпадающего меню «Карандаша» сгладьте «дрожащие» контуры.
Шаг 9
Шаг 10
А вот простой способ нарисовать сердце: с помощью инструмента «Эллипс» нарисуйте два круга и выберите «Вертикальное выравнивание по центру». Выделите оба круга, нажмите «Добавление в составной объект» в палитре «Обработка контуров», а затем выберите кнопку «Разобрать».
С помощью инструмента «Прямое выделение» перетащите центральную точку, затем щелкните на ней, использовав инструмент «Перо>» (Преобразовать опорную точку). С помощью инструмента «Перо-» (Удалить опорную точку) удалите нижнюю левую и правую опорные точки, а затем нажмите Shift и потяните вниз направляющие линии.
Шаг 11
После контура нашему персонажу нужна небольшая обработка, чтобы выглядеть более гармонично. Лучше всего взять небольшой перерыв и полностью забыть о рисунке. Когда вы вернетесь к нему, вы сразу же увидите недостатки.
Если времени на перерыв нет, хороший способ заставить мозг взглянуть на рисунок по-другому — просто отразить персонажа. Нажмите Выделение — Все или Ctrl/Cmd + A, а затем Объект — Трансформировать — Зеркальное отражение — Вертикальная ось.
Шаг 12
Наш персонаж будет выглядеть интереснее, когда мы поработаем над толщиной линий. Рисунок будет выглядеть плоским, если мы везде используем одну и ту же линию. В панели «Обводка» поэкспериментируйте с толщиной линии и разнообразными настройками.
Шаг 13
В Adobe Illustrator есть множество предустановленных цветов в библиотеке «Образцы», включая такие, как Pantone и разнообразные тематические библиотеки. Очень полезна тематическая библиотека «Оттенки кожи».
Перейдите в Окно — Библиотеки образцов — Оттенки кожи, а затем выберите цвет, наиболее близкий к тому, который вам бы хотелось использовать. Тематические библиотеки образцов, например, оттенки кожи, не всегда включают именно те цвета, которые нам нужны, но они отлично подходят как базовые цвета, которые можно откорректировать с помощью панели «Цвет».
Шаг 14
Поэкспериментируйте, прежде чем решить, какие базовые цвета использовать для вашего персонажа. Небольшой трюк: сделайте несколько копий персонажа и попробуйте различные сочетания цветов. Выберите ту версию, которая вам больше всего нравится, но советую сохранить остальные версии на другом слое на случай, если вы передумаете.
Шаг 15
Решите, где будет находиться источник освещения и начните добавлять тени и блики. Не спешите, работая над персонажем на этой стадии, и не забывайте вносить исправления при необходимости. Используйте инструмент «Масштаб» или нажмите Ctrl/Cmd + +, чтобы поближе рассмотреть рисунок и убедиться, что все элементы рисунка на своих местах. Подумайте над забавными деталями, которые можно добавить вашему персонажу.
Шаг 16
Вместо того, чтобы заставлять нашего персонажа жить в белой пустыне, мы можем создать для неё фон, чтобы она не заскучала. Подумайте о том, где ваш персонаж хотел бы жить. Старайтесь использовать простые формы и светлые цвета для фона, если хотите, чтобы внимание зрителя было обращено на персонажа.
Читайте также: