Иконопись — утерянное искусство. Иллюстрация требует очень много времени, а ресурсов уже предостаточно. Так что не всегда стоит изобретать велосипед. Но нам может понадобиться определенный художественный стиль, или используемая нами структура значков может не иметь нужного значка, поэтому стоит немного углубиться в то, как иллюстрация работает в Figma. В этом уроке мы узнаем, как рисовать и управлять векторами в Figma, создавая значок в форме сердца, который будет сопровождать кнопку.
Начните с создания рамки 16×16, которая будет ограничивающей рамкой для нашей иконки. Пол Уилшоу объясняет, почему лучше всего использовать 16×16 в своей статье о дизайне иконок.
Затем щелкните значок + рядом с «Сеткой макета» на панели «Дизайн», чтобы добавить сетку в рамку, щелкните значок «Настройки сетки макета», а затем измените «Размер», чтобы сделать отдельные квадратные пиксели более четкими 1.. Чтобы значок отображался четко при большинстве размеров и разрешений экрана, цель будет состоять в том, чтобы максимально выровнять значок с линиями сетки.
Теперь о самой иконе. Начните с создания формы прямоугольника и укажите «W» как 16и «H» как 10, а затем щелкните значок «Независимые углы», прежде чем указывать радиусы углов как 0, 5, 5, и 0в этом порядке (то есть по часовой стрелке, начиная с верхний левый угол).
Затем продублируйте слой и измените «Вращение» на 90.
После этого привяжите слой к левому краю кадра, а другой слой к нижнему краю кадра, а затем, выбрав оба слоя, щелкните значок «Выбор объединения» на горизонтальной панели инструментов, чтобы объединить слои в один Слой.
Измените «Вращение» на 45— и форма сердца готова.
Прежде чем мы поместим форму сердца в рамку, добавьте обводку (границу), щелкнув значок + рядом с «Обводка» на панели «Дизайн», выбрав 2″Ширина обводки«. Позже это даст нам возможность использовать обведенные значки, а также заполненные значки.
Примечание. Чтобы отображать значки другого размера, лучше масштабировать их, а не изменять их размер. Разница заключается в том, что инструмент «Масштаб» — под значком «Инструменты перемещения» на горизонтальной панели инструментов ( K) — также пропорционально масштабирует такие размеры, как ширина обводки, в то время как изменение размера не влияет на такие размеры, как ширина обводки.
Затем щелкните правой кнопкой мыши значок и выберите «Свести» ( command+ E/ ctrl+ E). Мы увидим, что, хотя поворот больше не действует, слой остается таким, каким мы его установили, что означает, что теперь мы можем изменять его размер по горизонтали и вертикали, а не по диагонали (что дает странный эффект).
После этого щелкните значок «Сохранить пропорции» на панели «Дизайн», установите для наибольшего размера (который должен быть «W») значение 16, еще раз щелкните значок «Сохранить пропорции» (чтобы размеры больше не были ограничены), округлите «H» до 14(чтобы значок заполнял только полные пиксели ), перетащите его в центр кадра, а затем щелкните значок — в разделе «Заливка», чтобы удалить заливку.
При разработке значков мы должны стараться использовать все доступное пространство фрейма, чтобы при необходимости несколько значков можно было выровнять по горизонтали или вертикали. Однако это не всегда возможно, поэтому при необходимости можно немного изменить размер значков. Это не влияет на ширину обводки, поэтому нам не нужно беспокоиться о том, что они будут выглядеть непоследовательно. Чтобы значок масштабировался вместе с фреймом при изменении размера фрейма, измените «Слева» и «Сверху» на «Масштаб» на панели «Дизайн» (в разделе «Ограничения»).
Наконец, выберите рамку, а затем щелкните значок «Изменить размер по размеру», чтобы обрезать пустое пространство, тем самым изменив размер рамки.
Теперь у нас есть полная иконка! Мы также можем попробовать свои силы в рисовании с нуля и/или использовании фигур и их редактировании. Тем не менее, это требует довольно много навыков и времени, чтобы научиться. Сам дизайн иконок также требует очень много времени, особенно когда существует так много бесплатных дизайнерских ресурсов. В Figma есть видеоруководство, которое проведет нас через это, но плагин Font Awesome, вероятно, является лучшим решением для реализации иконок на сегодняшний день.
