Unwanted border around png picture

[Guest]

I cutout unwanted content in a picture selecting a mask then saving for web as a png to show on a web background. But the picture shows a faint light coloured hairline border against a grey webpage background.  How can I get rid of this unwanted border?  The picture is shown on the website in a 'lightbox' so I cannot try borders in css to fix.

[JJMack]

Sounds like you better create a better mask or select the pgn transparency and shrink the selection some then invert the selection and delete to delete the border and resave the png

[Silkrooster · Accepted solution]

What you could do is open the png file into photoshop, ctrl click or cmd click the thumbnail of the image.

Now you have a selection around your object and not the background. (assuming the png had a transparent background to start which it should have)

You now have a few options at your disposal.

1) You could create a mask from the selection then using a brush paint away the unwanted area in the mask. (black to hide, white to reveal (shades of gray to vary the amount)

2) You could use the menu item Select>Modify>Contract (use a low pixel number) or Select>Modify>Feather

3) You could use Select>Refine Edge - This will be more visual than #2

4) With 2 and 3 either make a mask or move to new layer (Another option is to invert the selection then hit delete) Mask is always preferable for noon-destructive edits that you can redo later assuming you save a master file as psd or tiff.

5)Instead of a selection you could try (on a layer that is unlocked) Layer>Matte>Defringe

After you save a master file, then you can merge the layers and save as a png file for the web. saving as a png would be merged anyways, however this will let you verify the end result. If not correct, you still have the master file to work from.

[Guest]

Tried several options but once I save the picture for web as a png and insert it on the web page, see attached photo, there is the light border top, right and part of bottom.  Any other ideas please.

[Guest]

Woops, you silkrooster, did solve the issue:

Ctrl clk on the image thumbnail selecting the cutout picture then opening a new transparent file the same size as the original then cut and past the selected cut out into the new file, saving it to web as png solved part of the problem. The next part was my fault as the 'light box' used on my website also had a smaller sized file of the same picture which showed on the web, the larger one opened in lightbox.  As soon as the light went on all I had to do was take my copied version, change the image size to the required and save that as the "second smaller" png and voila all worked.  I am still not sure why the 'border' appeared but as I cut out some more pictures it won't take long for me to adopt 'the fix.'

Thank you

[Silkrooster]

You're welcome.