I’ve also added an HTML color picker for this demo, but you certainly don’t need to. The basic idea is that you wrap your product image in a wrapper – in my case, a with a class/ID of “car-wrap”. Let’s get to coding this up! Here is the HTML I used for the demo, so you can use whatever parts you need: CHOOSE A COLOR: This white part blocks out the color of the container background where it should not be shown.īonus: the best part of it all is that you can use the same image for every color, so you could have 200 cars on the page and only 1 image would ever be loaded – which is a HUGE performance savings! Setting the Scene You will need to make sure that the background of the image is the same color as the background of your website. Here is what I ended up with (checker box pattern only for example purposes – that’s the transparent part…) Low-grade multi-blade razors can pull on hairs and cut them below the surface of your skin, often causing ingrown hairs Instead of having multiple blades coming in contact with skin, the straight razor needs just one. The best Straight razor helps Prevent Razor Burn and Ingrown Hairs There are tons of Photoshop tutorials out there for masking things and the fact that I was “provided” a white car made the whole thing much easier, but this isn’t a Photoshop tutorial, so you’ll have to work that part out on your own. Nevertheless, the point was to clear out the painted part with Photoshop leaving the reflections and non-painted parts and windows visible. I cloned out the manufacturer logo, but I’m sure you car enthusiasts can still figure it out. To speed things up a little, I “borrowed” the image of the car from the article I mentioned above. Pairing this with CSS variables for the background color and an HTML color picker makes the whole thing a bit more interactive, but the possibilities here are endless! Creating the Image Then, you swap out the background color (via CSS) to give the product a different color. The idea is that you use one image with transparency where you want the color to change. I did not invent this technique, but did build this demo on CodePen. No doubt, the article was trying to show off the power of imgix, which is totally fine, but I thought I’d share this technique for recoloring a product with only 1 image!Ĭar Color Change w/ HTML Color Input by Marcus Burnette ( CodePen.ĭisclaimer: I saw this technique used recently on Printful for recoloring apparel items, but wanted to demo it myself here. I decided to write this article after reading a post today from CSS-Tricks called Two Images and an API: Everything We Need for Recoloring Products.
0 Comments
Leave a Reply. |