Рисование с помощью инструмента «Перо»

  1. Руководство пользователя Adobe Animate
  2. Введение в Animate
    1. Новые возможности Animate
    2. Визуальный глоссарий
    3. Системные требования Animate
    4. Сочетания клавиш Animate
    5. Разные типы файлов в Animate
  3. Анимация
    1. Основы анимации в Animate
    2. Кадры и ключевые кадры в Animate
    3. Покадровая анимация в Animate
    4. Классическая анимация движения в Animate
    5. Инструмент «Кисть»
    6. Руководство по движению
    7. Анимация движения и язык ActionScript 3.0
    8. Сведения об анимации движения
    9. Анимация движения
    10. Создание анимации движения
    11. Использование ключевых кадров свойств
    12. Положения в анимации движения
    13. Использование Редактора движения для анимаций
    14. Редактирование траектории анимации движения
    15. Управление анимациями движения
    16. Настраиваемое ускорение и замедление
    17. Создание и применение стилей движения
    18. Настройка диапазонов анимации движения
    19. Сохранение анимации движения в файлах XML
    20. Анимация движения и классическая анимация
    21. Анимация фигур
    22. Инструмент «Кость» в Animate
    23. Скелетная анимация персонажей в Animate
    24. Слои-маски в Adobe Animate
    25. Работа со сценами в Animate
  4. Интерактивность
    1. Создание кнопок в Animate
    2. Преобразование проектов Animate в другие форматы документов
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Добавление интерактивных возможностей с помощью фрагментов кода в Animate
    5. Создание пользовательских компонентов HTML5
    6. Использование компонентов в HTML5 Canvas
    7. Создание пользовательских компонентов: примеры
    8. Фрагменты кода для пользовательских компонентов
    9. Рекомендации: реклама в Animate
    10. Разработка и публикация контента для виртуальной реальности
  5. Рабочая среда и рабочий процесс
    1. Создание и использование малярных кистей
    2. Использование шрифтов Google в документах HTML5 Canvas
    3. Использование библиотек Creative Cloud Libraries и Adobe Animate
    4. Использование рабочей области и панели «Инструменты» в Animate
    5. Рабочие процессы и рабочая среда Animate
    6. Использование веб-шрифтов в документах HTML5 Canvas
    7. Временные шкалы и ActionScript
    8. Работа с несколькими временными шкалами
    9. Задание настроек
    10. Использование панелей разработки Animate
    11. Создание слоев временной шкалы в Animate
    12. Экспорт анимаций для мобильных приложений и игровых платформ
    13. Перемещение и копирование объектов
    14. Шаблоны
    15. Поиск и замена в Animate
    16. Отмена/повтор действий и панель «История»
    17. Сочетания клавиш
    18. Использование временной шкалы в Animate
    19. Создание HTML-расширений
    20. Параметры оптимизации изображений и GIF-анимаций
    21. Настройки экспорта для изображений и GIF
    22. Панель «Ресурсы» в Animate
  6. Мультимедиа и видео
    1. Преобразование и объединение графических объектов в Animate
    2. Создание экземпляров символов и работа с ними в Animate
    3. Трассировка изображения
    4. Использование звука в Adobe Animate
    5. Экспорт SVG-файлов
    6. Создание видеофайлов для использования в Animate
    7. Добавление видео в Animate
    8. Работа с ключевыми точками видео
    9. Рисование и создание объектов в Animate
    10. Изменение линий и фигур
    11. Обводки, заливки и градиенты в Animate CC
    12. Работа с Adobe Premiere Pro и After Effects
    13. Панели «Цвет» в Animate CC
    14. Открытие файлов Flash CS6 в Animate
    15. Работа с классическим текстом в Animate
    16. Размещение иллюстраций в Animate
    17. Импортированные растровые изображения в Animate
    18. Трехмерная графика
    19. Работа с символами в Animate
    20. Рисование линий и фигур в Adobe Animate
    21. Работа с библиотеками в Animate
    22. Экспорт звуков
    23. Выделение объектов в Animate CC
    24. Работа с AI-файлами Illustrator в Animate
    25. Нанесение узоров с помощью инструмента «Аэрограф»
    26. Применение режимов наложения
    27. Упорядочивание объектов
    28. Автоматизация задач с помощью меню «Команды»
    29. Многоязычный текст
    30. Использование камеры в Animate
    31. Использование Animate с Adobe Scout
    32. Работа с файлами Fireworks
    33. Графические фильтры
    34. Звук и ActionScript
    35. Настройки рисования
    36. Рисование инструментом «Перо»
  7. Платформы
    1. Преобразование проектов Animate в другие форматы документов
    2. Поддержка специализированных платформ
    3. Создание и публикация документов HTML5 Canvas в Animate
    4. Создание и публикация документа WebGL
    5. Упаковка приложений AIR for iOS
    6. Публикация приложений AIR for Android
    7. Публикация для Adobe AIR на настольных ПК
    8. Параметры публикации ActionScript
    9. Рекомендации: размещение ActionScript в приложении
    10. Использование ActionScript в Animate
    11. Рекомендации: специальные возможности
    12. Специальные возможности в среде Animate
    13. Создание и использование сценариев
    14. Обеспечение поддержки специализированных платформ
    15. Общие сведения о поддержке специализированных платформ
    16. Создание содержимого со специальными возможностями
    17. Работа с плагинами поддержки специализированных платформ
    18. Отладка сценариев ActionScript 3.0
    19. Обеспечение поддержки специализированных платформ
  8. Экспорт и публикация
    1. Экспорт файлов из Animate CC
    2. Публикация OAM
    3. Экспорт SVG-файлов
    4. Экспорт графики и видео из Animate
    5. Публикация документов AS3
    6. Экспорт анимаций для мобильных приложений и игровых платформ
    7. Экспорт звуков
    8. Экспорт видеофайлов в QuickTime
    9. Управление воспроизведением внешнего видео с помощью ActionScript
    10. Рекомендации: советы по созданию контента для мобильных устройств
    11. Рекомендации: правила работы с видео
    12. Рекомендации: руководство по созданию SWF-приложений
    13. Рекомендации: формирование структуры FLA-файлов
    14. Рекомендации: оптимизация FLA-файлов для Animate
    15. Параметры публикации ActionScript
    16. Задание параметров публикации для Animate
    17. Экспорт файлов-проекторов
    18. Экспорт изображений и анимированных файлов GIF
    19. Шаблоны публикации HTML
    20. Работа с Adobe Premiere Pro и After Effects
    21. Быстрая публикация анимаций

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

В следующем видеоруководстве показаны принципы использования инструмента «Перо» в Animate:

Состояния рисования с помощью инструмента «Перо»

Инструмент «Перо» позволяет узнать о текущем состоянии рисования, отображая различные указатели. Различные состояния рисования обозначаются следующими указателями.

Начальная узловая точка 

Первый указатель, который отображается после того, как выбран инструмент «Перо». Указывает, что при следующем щелчке мыши в рабочей области будет создана начальная узловая точка, которая представляет собой начало нового контура (все новые контуры начинаются с начальной узловой точки). Все существующие контуры рисования завершаются.

Последовательная узловая точка 

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

Добавить узловую точку 

Указывает, что при следующем щелчке мыши к существующему контуру будет добавлена узловая точка. Чтобы добавить узловую точку, контур должен быть выделен, а инструмент «Перо» не должен находиться над существующей узловой точкой. Существующий контур перерисовывается в зависимости от добавленной узловой точки. За один раз можно добавить только одну узловую точку.

Удалить узловую точку 

Указывает, что при следующем щелчке мыши из существующего контура будет удалена узловая точка. Чтобы удалить узловую точку, контур должен быть выделен с помощью инструмента «Выделение», а инструмент «Перо» должен находиться над существующей узловой точкой. Существующий контур перерисовывается в зависимости от удаленной узловой точки. За один раз можно удалить только одну узловую точку.

Продолжить контур 

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

Замкнуть контур 

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

Соединить контуры 

Подобен инструменту «Замкнуть контур», но курсор мыши не должен находиться над начальной узловой точкой того же контура. Указатель должен находиться над любой из конечных точек отдельного контура. Сегмент может быть выбран или не выбран.

Примечание. Соединение контуров может привести (или не привести) к созданию замкнутого контура.

Убрать маркер Безье 

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

Преобразовать узловую точку

Преобразует точку преломления без линий направления в точку преломления с независимыми линиями направления. Чтобы активировать указатель «Преобразовать узловую точку», используйте клавиши модификатора «Shift» + «C» для переключения инструмента «Перо».

Видеоучебник по инструменту «Перо» см. по адресу www.adobe.com/go/vid0120_ru.

Рисование прямых линий с помощью инструмента «Перо»

Простейший контур, который можно нарисовать инструментом «Перо» — это прямая линия из двух опорных точек, созданных щелчком инструмента «Перо». Продолжайте нажимать клавишу мыши, чтобы создать контур, состоящий из прямых отрезков линии, соединенных точками преломления.

  1. Выберите инструмент «Перо» .
  2. Поместите инструмент «Перо» в то место, с которого должен начаться прямой сегмент, и нажмите кнопку мыши, чтобы создать первую узловую точку. Если появляются линии направления, это значит, что вы случайно перетащили инструмент «Перо». В этом случае выберите меню «Правка» > «Отменить» и нажмите снова.
    Примечание.

    Первый рисуемый сегмент невидим до тех пор, пока не будет сделан щелчок для второй узловой точки (если не выбран режим «Просмотр пера» в категории «Рисование» диалогового окна «Настройки»).

  3. Щелкните мышью еще раз в том месте, где должен закончиться сегмент (щелкните мышью, удерживая нажатой клавишу «Shift», чтобы угол наклона сегмента был кратным 45 градусам).
  4. Продолжайте нажимать кнопку мыши, чтобы создать узловые точки для дополнительных прямых сегментов.
    При щелчке инструментом «Перо» создаются прямые отрезки.

  5. Чтобы завершить контур в виде открытой или замкнутой фигуры, выполните одно из следующих действий.
    • Чтобы завершить открытый контур, дважды щелкните мышью последнюю точку, выберите инструмент «Перо» на панели «Инструменты» или щелкните мышью в любом месте вне контура, удерживая нажатой клавишу «Control» (Windows) или «Command» (Macintosh).

    • Чтобы замкнуть контур, расположите инструмент «Перо» над первой (пустой) узловой точкой. При правильном размещении рядом с указателем инструмента «Перо» появится кружок. Нажмите кнопку мыши или перетащите указатель, чтобы замкнуть контур.

    • Чтобы завершить фигуру в существующем виде, выберите меню «Правка» > «Отменить выделение всего» или выберите другой инструмент на панели «Инструменты».

Рисование кривых с помощью инструмента «Перо»

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

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

  1. Выберите инструмент «Перо» .
  2. Разместите инструмент «Перо» в месте, где должна начинаться кривая, нажмите и удерживайте кнопку мыши.

    Появляется первая узловая точка, и указатель инструмента «Перо» изменяется на стрелку. (В Photoshop указатель изменяется только после начала перетаскивания.)

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

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

    Удерживайте нажатой клавишу «Shift», чтобы величина угла была кратной 45 градусам.

    Рисование первой точки кривой

    A. Позиционирование инструмента «Перо» B. Начало перетаскивания (кнопка мыши нажата) C. Перетаскивание, чтобы растянуть линии направления. 

  4. Разместите инструмент «Перо» в том месте, где будет закончен изогнутый сегмент, и выполните одно из следующих действий.
    • Чтобы создать кривую в форме буквы «C», перетаскивайте указатель в направлении, противоположном предыдущей линии направления, и отпустите кнопку мыши.

    Рисование второй точки кривой

    • Чтобы создать кривую в форме буквы «S», перетаскивайте указатель в направлении предыдущей линии направления и отпустите кнопку мыши.

    Рисование кривой в форме буквы «S»

  5. Чтобы создать последовательность смягченных кривых, продолжайте перетаскивать инструмент «Перо» в разных местах. Располагайте узловые точки в начале и конце каждой кривой, а не у вершины кривой.
    Примечание.

    Чтобы разделить линии направления в узловой точке, перетаскивайте линии направления, удерживая нажатой клавишу «Alt» (Windows) или «Option» (Macintosh).

  6. Чтобы завершить контур, выполните одно из следующих действий.
    • Чтобы замкнуть контур, расположите инструмент «Перо» над первой (пустой) узловой точкой. Если он расположен верно, то рядом с указателем инструмента «Перо» появляется небольшой кружок. Нажмите кнопку мыши или перетащите указатель, чтобы замкнуть контур.

    • Чтобы оставить контур открытым, удерживая нажатой клавишу «Control» (Windows) или «Command» (Macintosh) в любом месте вне объектов, выберите другой инструмент или выберите команду «Правка» > «Отменить выбор всего».

Добавление и удаление узловых точек

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

Палитра инструментов содержит три инструмента для добавления или удаления точек: инструмент «Перо» , инструмент «Добавить опорную точку»  и инструмент «Удалить опорную точку» .

По умолчанию инструмент «Перо» заменяется инструментом «Добавить узловую точку» при размещении над выделенным контуром или инструментом «Удалить узловую точку» при размещении над узловой точкой.

Примечание.

Не удаляйте опорные точки клавишами «Delete», «Backspace» и «Clear» или с помощью команд меню «Правка» > «Вырезать» или «Правка» > «Очистить», так как при использовании этих клавиш и команд удаляются точки и отрезки линий, связанные с этими точками.

  1. Выберите контур, который нужно модифицировать.
  2. Щелкните кнопкой мыши и удерживайте указатель на инструменте «Перо» , затем выберите инструмент «Перо» , инструмент «Добавить узловую точку» или инструмент «Удалить узловую точку» .
  3. Чтобы добавить узловую точку, поместите указатель над сегментом контура и сделайте щелчок. Чтобы удалить узловую точку, поместите указатель над узловой точкой и сделайте щелчок.

Корректировка узловых точек на контурах

При рисовании кривой с использованием инструмент «Перо» создаются точки смягчения — узловые точки на непрерывном, изогнутом контуре. При рисовании отрезка прямой линии или прямой линии, соединенной с изогнутым сегментом, создаются точки преломления — узловые точки на прямом контуре или в месте соединения прямого и изогнутого контуров.

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

Перетаскивание точки направления от точки преломления для создания точки смягчения.

Перемещение или добавление узловых точек

  • Чтобы переместить узловую точку, перетащите точку с помощью инструмента «Частичное выделение» .

  • Чтобы сдвинуть узловую точку или точки, выберите точку или точки с помощью инструмента «Частичное выделение» и используйте клавиши со стрелками для перемещения. Для выбора нескольких точек щелкайте мышью, удерживая нажатой клавишу «Shift».

  • Чтобы добавить узловую точку, щелкните отрезок линии с помощью инструмента «Перо». Если узловую точку можно добавить к выделенному отрезку линии, рядом с инструментом «Перо» появляется знак «плюс» (+). Если отрезок линии не выделен, щелкните его, чтобы выделить, с помощью инструмента «Перо», а затем добавьте узловую точку.

Удаление узловых точек

Удаление ненужных узловых точек на пути кривой улучшает качество кривой и уменьшает размер конечного SWF-файла.

  • Чтобы удалить точку преломления, щелкните точку один раз с помощью инструмента «Перо». Если узловую точку можно удалить из выделенного отрезка линии, рядом с инструментом «Перо» появляется знак «минус» (-). Если отрезок линии не выделен, щелкните его, чтобы выделить, с помощью инструмента «Перо», а затем удалите узловую точку.

  • Чтобы удалить точку смягчения, щелкните точку один раз с помощью инструмента «Перо». Если узловую точку можно удалить из выделенного отрезка линии, рядом с инструментом «Перо» появляется знак «минус» (-). Если отрезок линии не выделен, щелкните его, чтобы выделить, с помощью инструмента «Перо», а затем удалите точку преломления. (Нажмите один раз, чтобы преобразовать точку в точку преломления, и еще один раз, чтобы удалить точку.)

Преобразование прямых и кривых сегментов

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

  • Чтобы преобразовать точку преломления в точку сглаживания, выберите точку с помощью инструмента «Спецвыделение», а затем, удерживая нажатой клавишу Alt (Windows) или Option (Macintosh), перетаскивайте точку для размещения маркеров касательной.

  • Чтобы преобразовать точку сглаживания в точку преломления, щелкните точку с использованием инструмента «Перо». Маркер «карат» (^) рядом с указателем показывает, что он находится над точкой смягчения.

Корректировка сегментов

Чтобы изменить угол или длину сегмента или скорректировать изогнутые сегменты для изменения изгиба или направления кривой, скорректируйте сегменты прямой.

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

  • Чтобы скорректировать прямой сегмент, выберите инструмент «Частичное выделение» и выделите прямой сегмент. Перетащите узловую точку на сегменте в новое место с помощью инструмента «Частичное выделение».

  • Чтобы скорректировать изогнутый сегмент, выберите инструмент «Частичное выделение» и перетащите сегмент.

    Примечание. При щелчке по контуру Animate отображает узловые точки. При изменении сегмента с помощью инструмента «Частичное выделение» к контуру могут быть добавлены узловые точки.

  • Чтобы скорректировать точки или маркеры касательной на кривой, выберите инструмент «Частичное выделение» и выделите узловую точку в изогнутом сегменте.

  • Чтобы скорректировать форму кривой с обеих сторон узловой точки, перетащите узловую точку или маркер касательной. Чтобы ограничить кривую углами, кратными 45 градусам, перетаскивайте указатель, удерживая нажатой клавишу Shift. Чтобы перетаскивать маркеры касательной по отдельности, удерживайте клавишу «Alt» (Windows) или «Option» (Macintosh).

 

Перетаскивание узловой точки или точки направления.

Настройки инструмента «Перо»

Задайте настройки для внешнего вида указателя инструмента «Перо», для просмотра отрезков линии в процессе рисования и для внешнего вида выбранных узловых точек. Для выбранных отрезков линий и узловых точек используется цвет контура слоя, на котором находятся линии и точки.

  1. Выберите инструмент «Перо» , затем меню «Правка» > «Настройки» (Windows) или «Animate» > «Настройки» (Macintosh).

  2. В списке «Категория» выберите пункт «Рисование».
  3. Установите следующие параметры для инструмента «Перо».

    Просмотр пера

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

    Показывать сплошные точки

    Отображает выделенные узловые точки пустыми, а невыделенные узловые точки — сплошными. Если этот режим не выбран, то выделенные точки будут сплошными, а невыделенные узловые точки — пустыми.

    Показывать точные курсоры

    Указатель инструмента «Перо» выглядит как указатель-перекрестие, а не как обычный значок инструмента «Перо», для более точного размещения линий. Чтобы показать обычный значок инструмента «Перо», отмените этот режим.

    Примечание. Чтобы переключиться между указателем-перекрестием и обычным значком инструмента «Перо», нажмите клавишу Caps Lock.

  4. Нажмите кнопку «ОК».
Логотип Adobe

Вход в учетную запись