UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Совет от профи: создание идеальных стрелок в Adobe XD
Редакція
Редакція

Опубліковано • Оновлено

Совет от профи: создание идеальных стрелок в Adobe XD

Если вы хоть немного похожи на меня, то вы уже сталкивались с ситуациями, когда вам нужно создать стрелки для блок-схем или иконок. И нет ничего более раздражительного, чем пытаться идеально выровнять концы острия стрелки. Всегда есть слегка неровный край или проблема выравнивания частей, из-за которых вы хотите, чтобы можно было просто прилепить острие стрелы к линии и дело с концом. Этот совет от настоящего профи – моего коллеги в компании Adobe Сета Уокера, который продемонстрировал следующую технику для нас в одном прекрасно записанном GIF-файле. Я разложила его по пунктам ниже.

Шаг 1: Создаем квадраты

  1. Выберите инструмент “Прямоугольник” (R) и удерживайте нажатой клавишу shift, чтобы нарисовать квадрат.
  2. Или копируйте и вставьте (Cmd+C, Cmd+V) или создайте копию (Cmd+D для Mac) вашего квадрата, примените поворот на 45º.
  3. Или снова вставьте, или выберите оригинальный квадрат и создайте копию. К этому новому квадрату примените поворот на -45º.
  4. Выделите все три квадрата и добавьте их все в единую (Add) Boolean группу.

Шаг 2: Растяните и округлите свои квадраты

Теперь, когда у вас есть Boolean группа, вы можете играть с объектами внутри группы, чтобы сделать острие стрелки.

  1. Двойной клик по Boolean группе и выделите все объекты (Cmd+A для Mac).
  2. В инспекторе свойств, увеличьте числовое значение. Это расширяет зубцы стрелок в трех направлениях. (Волшебная точка!)
  3. Выберите свойства закругленных углов и регулируя их, увеличьте числовое значение.

Совет от профи: создание идеальных стрелок в Adobe XD, фото 2

Шаг 3: Удлините стрелку

  1. Выберите только центральный прямоугольник и растяните его в длину, чтобы сделать линию стрелки.
  2. Нажмите Escape, чтобы выйти из режима редактирования.

Теперь у вас есть a Boolean группа, которую вы можете редактировать! Для стрелок в шапке этой статьи, я удалила границу и добавила слабый градиент. Совет от профи: создание идеальных стрелок в Adobe XD, фото 3 Хотите больше публикаций подобного рода? Ставьте лайки, делайте репосты, и напишите мне (или в комментариях, или в Twitter) какую тему вы хотите, чтобы я подробно разобрала в следующий раз! Как обычно, если у вас есть предложения о том какие новые функции вы хотите видеть в Adobe XD, переходите на наш UserVoice сайт, чтобы проголосовать за ваши любимые функции и предложить новые. Элейн – продакт-менеджер в компании Adobe. Ее аккаунт в Twitter  @elainecchao.


Перевод статьи Elaine Chao

Топ коментарі (0)