How to match image with transparency on background?

I’ve got a photo which has been masked inside an unconventional shape, which needs to sit over a single-coloured background.

If I save the image as a .png with transparency, I get a thin white line around the shape edge, which shows up against the coloured background.
If I save the image with a coloured background, the image and the site’s background don’t match (even though I’ve specified the same hex colour). I’ve tried exporting as .jpg and .png, out of Illustrator and Photoshop. The original image was masked with InDesign, is there a chance that rebuilding the artwork in Photoshop will help?

Has anyone got tips on how I get work around this?

I would say the best bet would be to go back to photoshop as when you get it correct it will be OK for any colour background.

I assume the original photo was on a white background and that has be removed or changed to transparency. You would need to take a bit more off; possibly with a fade on your brush.

I agree - Photoshop is what you should be using, not Illustrator or anything else. If the shape is more organic with curved lines (instead of straight lines with angles), you might be able to use this trick: select the transparent background, then expand it by one or two pixels, then feather it by the same amont and cut it.

It’s strange that the image’s background doesn’t match the site’s background even when you use the same hex color. Maybe your psd is not in RGB color mode?

I tried rebuilding the image within photoshop with no luck at first, until I noticed that in the ‘save for web’ dialogue box the transparency dither was set to none. I’ve just done another test with the dither set to diffusion transparency, which has given me a much better result!

Thanks to @Rubble and @zot for nutting it out with me :slight_smile:

try to put radius .5 or 1 to make it slightly blured to remove the thin white around the shape edge… I agree with zot, the orig photo was on a white background, so you need to clean the edges.