Weird Photoshop Exported png behavior

Explorer ,
Jun 24, 2021 Jun 24, 2021

Copy link to clipboard

Copied

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:

VitorCordeiro_0-1624563991595.png

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

VitorCordeiro_1-1624564062440.png

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

 

VitorCordeiro_2-1624564127028.png

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

VitorCordeiro_3-1624564233434.png

 

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

VitorCordeiro_4-1624565006312.png

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

 

I imported the same image into Adobe XD

VitorCordeiro_6-1624565155017.png

 

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

VitorCordeiro_7-1624565283652.png

 

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

 

Can someone explain why the png behaves like this?

TOPICS
Bug, Import and export, Problem or error, Windows

Views

532

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 24, 2021 Jun 24, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 24, 2021 Jun 24, 2021

Copy link to clipboard

Copied

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

 

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

This is "Photoshop PNG test" by Vitor Cordeiro on Vimeo, the home for high quality videos and the people who love them.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 24, 2021 Jun 24, 2021

Copy link to clipboard

Copied

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 24, 2021 Jun 24, 2021

Copy link to clipboard

Copied

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

This is "Photoshop PNG test" by Vitor Cordeiro on Vimeo, the home for high quality videos and the people who love them.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 25, 2021 Jun 25, 2021

Copy link to clipboard

Copied

LATEST

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.

 

Screenshot-(163).jpg

 

4. Go to Edit>Cut

 

Screenshot-(164).jpg

 

Save your file using File>Export As

 

 

final image at photomosh

 

Screenshot-(165).jpg

 

 

 

 

original image for reference

 

Screenshot-(162).jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines