Маскировка и раскрашивание изображений товаров с помощью CSS и SVG

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

К счастью, мы можем использовать CSS и SVG для маскировки одного изображения.

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

Начальные шаги

1.
Найдите подходящее изображение. Я искал «белая футболка» на pexels.com и нашел это изображение:

2.
Затем я удалил фон с помощью remove.bg (вы получаете 1 бесплатный кредит в месяц, так что используйте его с умом!)

3.
Я преобразовал это изображение в webp, используя онлайн-конвертер.

4.
Затем я открыл преобразованное изображение в Vectornator — отличном бесплатном векторном редакторе — и добавил контур с помощью инструмента «Перо» (для наглядности я добавил слой за изображением со сплошным фоновым цветом):

5.
Наконец, я экспортировал маску в svg и очистил ее с помощью SVGOMG.

Фух! Много шагов, но единственный шаг, отнимающий время, — это «маскирование» в Vectornator. Если вам нужно сделать это для большого количества продуктов, подумайте о том, чтобы нанять специалиста на Fiverr или подобном сайте.

А теперь самое интересное! Во-первых, нам нужна разметка:

<figure>
  <img src="image.webp" alt="Text" />
  <div></div>
</figure>

Для тега figure мы добавим несколько пользовательских свойств CSS, чтобы задать цвет футболки в hsl():

figure {
  --h: 168;
  --s: 40%;
  --l: 65%;
}

Мы хотим установить фон на контрастный цвет футболки. Это равносильно повороту оттенка (--h) на 180 градусов.

Чтобы сделать его более интересным, создадим градиент с вычитанием насыщенности (20%) для первого цвета и вычитанием светлоты (20%) для второго:

figure {
--_bg: linear-gradient(15deg,
  hsl(calc(var(--h) + 180),
  calc(var(--s) - 20%),
  var(--l)), 
  hsl(calc(var(--h) + 180),
  var(--s),
  calc(var(--l) - 20%)));

  background: var(--_bg);
}

Давайте попробуем это сделать с разными значениями --h:

Круто — теперь давайте раскрасим футболку, используя mask.

Включение маски

div {
  background-color: hsl(
    var(--h),
    var(--s),
    var(--l)
  );
  inset: 0;
  mask-image: url('mask.svg');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100%;
  mix-blend-mode: multiply;
  position: absolute;
}

Примечание: Для Chrome и Safari необходимо добавить -webkit-префиксы ко всем mask-свойствам.

Круто! Поиграйте в Dev Tools с переменными трех цветов: --h, --s и --l.

Замечание о SVG-маске

Честно говоря, я не очень хорош в маскировании — и я использовал Vectornator всего пару раз.

Чтобы компенсировать свои навыки маскирования, я решил сделать маску немного размытой, добавив гауссово размытие к svg:

<filter id="f1" x="0" y="0">
  <feGaussianBlur
    in="SourceGraphic"
    stdDeviation="3" />
</filter>

А затем, в самом path:

<path filter="url(#f1)" ...>

И это все!

Вот Codepen с добавленными элементами управления, чтобы вы могли поиграть со значениями hsl-значений: