Редактируем иконки: раскрашиваем иконку SVG




Итак, вы скачали иконку SVG и обнаружили, что её надо немного изменить. В этой статье мы рассмотрим, как залить пустые части цветом.

Открываем иконку в Figma. 

Иконка сим-карты
Исходник можно скачать по ссылке

Figma заливает один вектор одним цветом (либо одним градиентом). Если нам надо сделать заливку несколькими цветами, вектор надо продублировать. 

Мы будем делать цветную иконку с контуром, поэтому продублируем заднюю часть и перейдем в режим редактирования (дважды кликаем по вектору, либо выделяем и жмем Enter).

Продублированный слой в Figma

Figma может залить только замкнутое пространство. Если есть разрывы, то заливка не будет видна. 

Закрываем область для заливки с помощью пера: в режиме редактирования выбираем перо (P) и цепляясь к привзякам соединяем точки вокруг пустого пространства. 

Незамкнутая область
Незамкнутая область
После правок
После правок

Выбираем инструмент заливки Paint Bucket (B).

Инструмент заливки в Figma
Инструмент заливки в Figma

Наводим на область, которую надо залить, и кликаем. 

Видео заливки

Меняем цвет заливки
Меняем цвет заливки

Проделываем аналогичные манипуляции с внутренней частью.

Редактируем иконки: раскрашиваем иконку SVG

Видео редаткирования

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


По теме:


Бесплатные иконки

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

Анимированные SVG иконки Изометрические иконки