September 17th, 2019
Sounds kind of like a hard problem doesn’t it? We often don’t have product shots in thousands of colors, such that we can flip out the
<img src="product-red.jpg" alt="red product"> with
<img src="product-blue.jpg" alt="blue product">. Nor do we typically have products in a vector format such that we can apply SVG
fills to them and such.
There is a clever way to do it though, even when your product shots are bitmap graphic files, like JPG or PNG. Kyle Wetton demonstrates, and it’s essentially:
- Make a vector path that covers the area on the JPG that should change color (probably in Photoshop with the Pen Tool and exporting the vector).
- Place that solid vector area exactly on top of the product JPG.
mix-blend-mode: multiply;the SVG.
- Change the fill color on the SVG as desired.
Here’s the super cool demo I think it originated from:
And the demo from the article: