Jump to content

Image color change


gparis
 Share

Recommended Posts

Hello guys!


I'm having serious troubles painting a PNG image. All the threads I see change the background color as well.


I need to change the color of a customizable item I want to sell (i.e. glasses: changing color of the glass or temples or front) whenever the customer push a button on a color panel next to it.


I've start splitting the original image in 4 .png parts (in the example: glass, front part, left temple and right temple) and I would place them one above the others. How could I change the color of a the right temple, for example?


Is it possibly to color it with a non-solid color? I mean, respecting the shadows or reflections of the image (like Photoshop does).


Thank you team.


  • Like 1
Link to comment
Share on other sites

If you don't care about supporting IE (Edge works though), you can use the CSS filters to tint the image, specifically the hue-rotate filter:

 

https://davidwalsh.name/css-filters

 

Check the demo on that page in a modern browser. In that case you would build the image like you suggest, with different parts (each image should have a transparent background, not a solid color white background), and you can apply the filter to tint the image to whatever color you want. Start with a white image of the frames and tint it from there.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...