Руководство пользователя Отмена

Работа с инструментами для рисования и создания текста

Поиск

Последнее обновление 8 июн. 2021 г.

Научитесь создавать графику, используя фигуры и инструмент «Перо» в Adobe XD.

Инструменты для рисования

Вы можете быстро рисовать простые значки и графические объекты в Adobe XD с помощью инструментов для рисования, расположенных на левой панели инструментов: «Прямоугольник», «Эллипс», «Многоугольник», «Линия» и «Перо». Инструмент выделения поможет выбрать ту или иную линию, фигуру или объект для редактирования.

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

Рисование прямоугольников и квадратов

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

Рисование прямоугольников и квадратов со скругленными углами
Чтобы дополнительно настроить квадрат или прямоугольник, можно изменить радиусы углов.
- Чтобы настроить радиус только одного угла, выполните одно из следующих действий:
  
  Удерживайте клавишу Option (Mac) или клавишу Alt (Win), затем щелкните маркер угла и перетащите его мышью.
  
  Редактируйте значение каждого радиуса скругления отдельно в инспекторе свойств.
- Чтобы одновременно откорректировать радиус всех углов, выполните одно из следующих действий:
  
  Нажмите радиус скругления и перетащите его мышью.
  
  Измените значение радиуса после выбора в инспекторе свойств.
Корректировка углов по одному

Корректировка всех четырех углов одновременно

Рисование эллипсов и кругов

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

Рисование многоугольников

Инструмент «Многоугольник» поможет вам создать ряд новых фигур, таких как треугольники, ромбы, пятиугольники, звезды и фигуры в форме сердца.

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

Свойства многоугольника

A. Количество сторон B. Радиус скругления C. Пропорция звезд
Чтобы создать фигуру звезды, используя инструмент Многоугольник, начните рисовать многоугольник в монтажной области. Затем щелкните маркер «Пропорция звезд» в правом верхнем углу многоугольника и перетащите его в направлении радиуса. Вы также можете откорректировать пропорцию звезд, щелкнув поле Пропорция звезд () в инспекторе свойств. Пропорция может быть в диапазоне от 1 до 100. С помощью поля Количество углов можно определить количество сторон, которые должен иметь многоугольник. Вы можете нарисовать многоугольник в форме звезды на основе обычного треугольника, при этом ваш многоугольник может иметь максимум сто сторон.
- Удерживайте клавишу Shift при перетаскивании маркера «Пропорция звезд» для изменения с шагом 10 %. В качестве альтернативы поместите курсор в поле Пропорция звезд и нажимайте клавиши со стрелками вверх и вниз, чтобы управлять соотношением сторон.
Чтобы создать фигуру в форме сердца, нарисуйте многоугольник в монтажной области. Затем щелкните поле Количество углов ()
в инспекторе свойств и введите <3.
Чтобы изменить радиус скругления многоугольника, щелкните и перетаскивайте декоративный маркер радиуса из верхнего угла фигуры или щелкните поле Радиус скругления в инспекторе свойств, затем введите желаемое значение.

Каждая фигура имеет один декоративный маркер радиуса. Нельзя изменить радиус скругления каждой стороны фигуры.
Задайте свойства фигуры (Цвет заливки, Толщину рамки, Цвет, Внутреннюю тень, Тень и Размытие фона) для многоугольника. Эти свойства сохраняются при изменении количества сторон фигуры.
Дважды щелкните многоугольник, чтобы увидеть опорные точки фигуры. Можно создать новые опорные точки, щелкнув в любом месте контура фигуры.

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

Рисование линий

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

Рисование линий инструментом «Линия».

Рисование инструментом «Перо»

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

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

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

Последняя добавленная опорная точка будет выглядеть как закрашенный круг, что означает, что она выбрана. При добавлении новых опорных точек выделение предыдущих точек отменяется, поэтому соответствующие значки будут пустыми.
Завершите создание контура. Для этого выполните одно из следующих действий.
- Чтобы не замыкать контур, щелкните Esc.
- Чтобы замкнуть контур, поместите инструмент «Перо» на первую (пустую) опорную точку. Чтобы замкнуть контур, щелкните или перетащите указатель.
- Чтобы выбрать и перетащить начальную точку, не замыкая контур, нажмите и удерживайте клавишу Cmd/Ctrl.
Рисование прямых линий инструментом «Перо».

Рисование кривых линий

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

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

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

Чтобы ограничить движение инструмента углом, кратным 15°, удерживайте клавишу Shift при перетаскивании.
Поместите инструмент «Перо» в том месте, где должен заканчиваться сегмент кривой, и выполните следующие действия:
- Для того чтобы создать С-образную кривую, перетащите инструмент в направлении, противоположном предыдущей управляющей линии. Отпустите кнопку мыши.
- Для того чтобы создать S-образную кривую, перетащите инструмент в направлении предыдущей линии. Отпустите кнопку мыши.
Рисование кривых инструментом «Перо»
Чтобы создать серию плавных кривых, продолжайте перетаскивать инструмент «Перо» из различных точек.

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

Рисование прямых линий, за которыми следуют кривые

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

Рисование кривых, за которыми следуют прямые линии

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

Рисование кривых, за которыми следуют прямые линии

Рисование двух сегментов кривой, соединенных углом

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

Описание режимов рисования и редактирования

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

Помимо этого, вы можете открыть режим редактирования контура, дважды щелкнув фигуру или контур. В этом режиме видны опорные точки фигуры, но при перемещении курсора мыши вы ничего не рисуете. Вы можете управлять существующими опорными/контрольными точками или вставлять новые опорные точки в существующие сегменты контура.

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

Продление существующих контуров

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

Продление замкнутого контура снова открывает этот контур, затем переводит инструмент «Перо» в режим рисования для этого контура.

Выделение опорных точек

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

Слегка подталкивайте выбранные опорные точки с помощью клавиатуры, перетаскивайте их с помощью мыши или редактируйте их свойства (координаты x и y) в инспекторе свойств.

Отключение привязки опорных точек

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

Добавление и редактирование опорных точек

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

Удаление опорных точек

Выберите опорные точки, затем нажмите Удалить.

Сочетания клавиш для рисования

Инструмент для рисования	Сочетание клавиш в MacOS	Сочетание клавиш в Windows
Выделение	V	V
Прямоугольник	R	R
Эллипс	E	E
Многоугольник	Y	Y
Линия	L	L
Перо	P	P
Масштаб	Вход в режим увеличения масштаба: Z Увеличение: щелкните в любом месте холста Adobe XD или щелкните в необходимой монтажной области. Либо же выделите область, чтобы ее увеличить. Уменьшение: Option + щелчок Чтобы временно активировать увеличение или уменьшение масштаба: Нажмите Пробел + Cmd, затем щелкните или выделите участок в монтажной области, чтобы увеличить его. Пробел + Cmd + Opt, чтобы уменьшить	Вход в режим увеличения масштаба: Z Увеличение: щелкните в любом месте холста Adobe XD или щелкните в необходимой монтажной области. Либо же выделите область, чтобы ее увеличить. Уменьшение: Alt + щелчок Чтобы временно активировать увеличение масштаба: Нажмите Пробел + Ctrl, затем щелкните или выделите участок в монтажной области, чтобы увеличить его.
Приближение выделенного объекта	⌘3	Ctrl + 3

Измерение расстояний

Измерьте расстояния между объектом и монтажной областью или объектом и другими соседними объектами, щелкнув объект и нажав клавишу Option в Mac или клавишу Alt в Windows.

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

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

Просто щелкните объект и нажмите клавишу Option (в Mac) или Alt (в Windows).

Adobe XD измеряет расстояния и отображает измерения, пока вы нажимаете клавишу Option или Alt.

Измерение расстояния между объектом и краем монтажной области

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

Щелкните объект и нажмите клавишу Option (в Mac) или Alt (в Windows), затем расположите курсор мыши над другими объектами.

Adobe XD измеряет расстояния между ближайшими границами обоих объектов и отображает измерения, пока вы нажимаете клавишу Option или Alt.

Измерение расстояния между двумя объектами

Инструменты для создания текста

Ввод текста в точке

Щелкните инструмент «Текст», затем щелкните место, где вы хотите, чтобы начинался текст. Введите текст и нажмите Esc, чтобы зафиксировать внесенные вами изменения текста, или Return, чтобы перейти на следующую строку.

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

Вы можете вводить текст поверх других объектов и располагать его таким образом, чтобы он был на переднем плане, с помощью параметров Объект > Упорядочить.

Ввод текста в область

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

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

Ввод текста в Experience Design — Щелкните инструмент «Текст» и начните ввод текста.

Проверка орфографии

В меню Правка выберите пункт Включить проверку орфографии. Функция проверки орфографии работает только для текста с ошибками в контейнере текста. Слова с ошибками подчеркиваются красным, а автоматически исправленные слова — синим. Грамматические ошибки выделяются зеленым подчеркиванием.

Параметр включения проверки орфографии и грамматики

Щелкните слово с ошибкой правой кнопкой мыши и выберите контекстуально правильное его написание из предложенного списка.

Чтобы отменить автоматические исправления правописания и вернуть изначально введенный вами вариант слова, нажмите Cmd + Z в Mac OS и Ctrl + Z в ОС Windows.

Импорт текста из текстовых файлов

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

Перетаскивание текстового файла в монтажную область.

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

Перетаскивание текстового файла на повторяющуюся сетку.

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

Более подробную информацию см. в разделе Перетаскивание текстового файла с выделением абзацев клавишей возврата каретки в текстовый объект на повторяющейся сетке.

Копирование и вставка текста в монтажную область.

Вы также можете копировать и вставлять текст в монтажную область, создавая область текста, которую можно с легкостью перемещать и редактировать в Adobe XD.

Способы изменения размера текста

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

Выберите текстовый объект и в зависимости от своих потребностей примените к нему один из следующих способов: Автоширина, Автовысота и Заданный размер в меню Инспектор свойств.

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

Автоширина

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

Чтобы включить функцию Автоширина, нажмите значок в инспекторе свойств.

Автовысота

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

Применение функции «Автовысота» позволяет автоматически регулировать высоту текстовой области в соответствии с объемом содержимого. Для нарисованных текстовых областей этот параметр включен по умолчанию.

Текст с автоматической настройкой высоты

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

Заданный размер

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

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

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

Форматирование текста

Щелкните текст, а затем укажите тип, размер шрифта и выравнивание текста с помощью инспектора свойств.

Вы также можете выбирать отдельные слова или символы в абзаце текста и форматировать эти фрагменты отдельно.

Форматирование текстового объекта целиком или отдельных фрагментов текста

Изменение расстояния между символами, строками и абзацами

Чтобы изменить межбуквенные интервалы, щелкните текстовый объект и укажите межбуквенные интервалы с помощью параметра Межбуквенные интервалы в инспекторе свойств.

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

Изменение межбуквенных интервалов и интерлиньяжа текста в текстовом объекте

Чтобы изменить интерлиньяж, щелкните в текстовой области, а затем укажите интерлиньяж с помощью параметра Интерлиньяж в инспекторе свойств.

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

Подобно Photoshop и InDesign, Adobe XD позволяет изменять расстояние как перед, так и после абзаца в одном и том же текстовом элементе.

Чтобы изменить расстояние между абзацами, выберите абзац и щелкните значок абзаца на панели Форматирование. Измените значение интервала в соответствии с требованиями.

Преобразование текста

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

Значок верхнего регистра (TT), чтобы преобразовать текст в верхний регистр.
Значок нижнего регистра (tt), чтобы преобразовать текст в нижний регистр.
Значок прописной в начале каждогослова (Tt), чтобы выполнить капитализацию начальных букв всех слов текста.
Значок надстрочного текста, чтобы преобразовать текст в надстрочный.
Значок подстрочного текста, чтобы преобразовать текст в подстрочный.

Подчеркивание текста

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

Зачеркивание текста

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

Глобальные изменения стиля

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

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

Создание точных дизайнов с помощью математических расчетов

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

Выделите один или несколько объектов. В инспекторе свойств выполните простые математические вычисления в каком-либо поле, где допустимы числовые значения. Для расчета изменений Adobe XD поддерживает следующие математические операции:+, -, /, *.

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

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

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

Adobe XD может выполнять только одну операцию в один момент времени. То есть он может обрабатывать «4in + 2p», но не может обрабатывать «4in + 2p - 1p», потому что это интерпретируется как две разные операции.

Видео. Как работать с автоматической настройкой высоты текста?

«Контейнер с автоматической настройкой высоты текста автоматически регулируется по высоте в зависимости от объема текста внутри него. Это также прекрасно работает с функциями макета с учетом содержимого, такими как подборки и отступы», — Dani Beaumont, главный менеджер продукта, Adobe XD.

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

Продолжительность: 3 минуты.

Связанные материалы

Редактирование объектов посредством логических операций и методов наложения маски

Adobe

Получайте помощь быстрее и проще

Новый пользователь?