Weird Photoshop Exported png behavior

[VitorCordeiro]

Hi!

I exported a transparent border ing .png from photoshop to use it in this animation website (photomosh.com).

When I upload the image, I get this weird behavior where it loads the whole image instead of just the border. You can check the print screens.

The original image:

I cropped an area to make a border using the select tool:

Then I selected the area of the border and coppied to a new file:

I expanded the canvas a bit and notice that it only have one layer without any effect. Just the cropped image.

I export it using ctrl + alt + shift + w as a transparent png

When I upload the exported png to the photomosh website, I get this:

I don't know how it gets the original image. It shouldn't. 

I imported the same image into Adobe XD

And exported using ctrl + e. When I upload to the photomosh website, I get the desired result:

It seems that photoshop exports the png with the original image. I don't understand.

Can someone explain why the png behaves like this?

[jane-e]

Hi @VitorCordeiro 

The first thing to examine is the name of the file each time you use it again to rule out that you've picked up the wrong image. I can see that you are exporting it to a png called "untitled2", but cannot see the other names.

Once you have the image with one layer and no center, you can also use Save a Copy (not Save As) to save it as a png, bypassing the Export dialog.

Let us know if this is the issue or if it's something else.

~ Jane

[VitorCordeiro]

Hi Jane! Thanks for your reply. I made a small video of me generating the png from scratch.

https://vimeo.com/567284159/9fc793ed14

[Trevor.Dennis]

When you move the border to a new document window, do you use Duplicate?  Or if not, what do you use?

When you Crop, do you have Delete Cropped Pixels checked?  If not turn that on and try again.

Does the layer with the border have a layer mask hiding the rest of the image?  If yes, Apply the layer mask to delete the hidden pixels.

[VitorCordeiro]

Hi Trevor! Thanks for your reply. I just select the border with the marquee tool, copy (ctrl + c), create a new document and the paste it (ctrl + v) in the new document. There's no mask or anything.

I made a small video of me doing it. You can see it here:

https://vimeo.com/567284159/9fc793ed14

[Jeff Arola]

In photoshop one needs to fully remove any image pixels hidden by the Transparency channel, a hidden channel not shown in the Channels panel.

In your example before using File>Export As:

1. Ctrl click (windows) or Cmd click (mac) on the thumbnail in the Layers panel to load a selection of

    your border

2. Go to Select>Inverse

3. Use the Brush Tool and click somewhere in the middle of the image.

4. Go to Edit>Cut

Save your file using File>Export As

final image at photomosh

original image for reference