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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы отменить автоматические исправления правописания и вернуть изначально введенный вами вариант слова, нажмите 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 минуты.