Edit Color of Imported PNG (color overlay)
Transparent PNGs do not allow color edits. Editing fills will extend to the rectangular bounds, not just the object
Would be awesome if SVG & PNG color overlay could be implemented, in the same way it behaves in Photoshop.
pls let us edit our png transparent icons in xd.. it's really important.. let us use one program for our editing, please!
Nice feature, really important for svg icon management, or background (dark and light) management.
Joe Milan commented
I agree with Anonymous, this is huge. I just imported a bunch of png icons, and now I need to take them back into another program to play with the color? Boooooo. Boooo I say!
This is really, really, important.
We export all our assets as white pngs with alpha and assign their color programmatically in development. It would save a ton of time if we could do the same thing in XD during the design phase, instead of exporting a separate icon for each color.
Nazarena Luzzi Castro commented
This is really important to me as well...sketch app has this and it is amazing. It saves so much time from having to go into photoshop and change the color. Basically, an overlay color for the PNG would change the color of the non transparent area, aka, just the icon/logo/etc. Right now, with XD, when you do this, it applies the color to the whole box. If this isn't fixed, it is a big enough reason for me to stop using XD and go back to Sktech/axure, and I am sure other designers feel the same way :/
I was about to add this as a Feature Request.
i.e. lets say I have a PNG of a logo in black, which looks great on a white background. On a different page/screen, the logo needs to appear over a dark gray background. It would be great if I could just overlay a new color to test which color looks best before I commit to making a new image.
Right now, I have to make _n_ copies of the image in different shades just to try them out
Here's an example: When you import a transparent PNG of a circle and apply a fill, it will produce a filled square (the circle plus its transparent container) instead of only to the circle itself. I work with PNG icons a lot, and having to pull them into Photoshop to apply a color overlay is tedious.
Nicolas Martinez commented
Could be lovely to change the color directly from the application.
For exemple I import some of my icon did on photoshop, format PNG and they have an alpha.
The alpha is perfectly recognize, my icon are very simple black flat style.
BUT if I want to change the color for example make a changement to simulate the selection of this last one and put it in red.
The icon full with the color but lose the alpha.
So I don't have anymore my icon but just a square with the new fill color.
Thanks you for your great artwork, it's defenitely my new app for design easy and fast an application
Bear Travis commented
Could you provide a couple additional pieces of information? What does your PNG image look like? What happens when you apply a fill, vs what would you expect? Many images are treated as a fill in XD, so adding a color fill will just replace the image with a color.