Figma: Рисуем билет

11.06.2022 / Уроки

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


Создаём фигуру «Прямоугольник» и задаём радиус скругления углов:


Урок Figma


Теперь обозначим отрывную часть. Для этого нарисуем круг, используя «Эллипс» (клавиша O/Щ) и зажатую Shift. Сразу продублируем получившийся круг (Ctrl+C, Ctrl+V). Расположить круги нужно таким образом, чтобы они наполовину заходили на основу:


Урок Figma


Выделяем все три слоя (основу и круги), а затем выбираем тип связки фигур «Вычитание верхних фигур»:


Урок Figma

Урок Figma


Нарисуем линию отрыва. Для этого нарисуем «Пером» (P/З) линию с обводкой, для которой определим пунктирный стиль. Все настройки ниже:


Урок Figma


Ещё нам нужен акцентный край справа, где будет указано наименование поставщика услуг. К примеру, компания «Соловьёв Эйр». Для этого продублируем слой с прямоугольной основой, уменьшим её длину или нарисуем новую фигуру, и настроим радиусы углов так, чтобы справа они были закруглены, а слева скругление отсутствовало:


Урок Figma

Урок Figma


Разместим все необходимые надписи. При этом нужно учитывать, что основная информация указывается крупным шрифтом контрастного цвета, а второстепенные данные — размером поменьше и цветом менее насыщенным:


Урок Figma


Осталось изобразить направление. Так же, как мы рисовали линию отрыва, проводим линию от пункта отбытия к пункту прибытия. Можно продублировать имеющуюся линию и изменить её положение. Немного меняем настройки пунктира, чтобы получились точки:


Урок Figma


Добавляем (рисуем) иконочку самолёта и веб-элемент готов!


Урок Figma

Урок Figma



Просмотров: 71 / Теги: билет, урок, figma, фигма, ВЕБ ДИЗАЙН, рисуем


Комментарии (0)

avatar


НЕКОТОРЫЕ АРХИВНЫЕ ПУБЛИКАЦИИ

арт, фэнтези, замок

А эта подборка арта посвящена величественным за́мкам. Выбранные работы принадлежат кистям двух художников из разных стран: angrymikko из Финляндии и shenfeic из Малайзии. Архитектура в их исполнении...


Картонный мир Rafa Miqueleto

Новая порция рукотворного дизайна создана руками Rafa Miqueleto, чьи работы как нельзя лучше передают и подчёркивают свойства цветного картона: такого податливого, красочного и тёплого. Смотрите несколько примеров...


Отзыв о фильмах серии «Голодные игры»

Внимание! Возможны спойлеры!
Деспотичное государство ежегодно устраивает показательные игры на выживание, за которыми в прямом эфире следит весь мир. Жребий участвовать в Играх выпадает юной Китнисс...


3D моделирование: Предметы в фокусе. Предметная визуализация

Не всегда в больших сценах (в частности, в интерьере) удаётся детально изобразить каждый предмет и каждую мелочь. Иногда, напротив, на них делается особый упор. На следующих примерах в фокусе отдельные предметы.