How to remove a checkered background attached to a .png file.

[Lillias]

Some downloaded .png files come with a checkered background instead of a fully transparent background. I know that there are online facilities which will remove said background for free but I wondered if there was a way of doing it within Affinity Photo or Designer.

Thanks in advance for any help with this matter.

 

 

[Alfred]

Where are you downloading your PNGs from? It sounds as though you're downloading preview images instead of the real deal.

[Lillias]

I have downloaded a couple from freepik.com Alfred.

[Alfred]

Look for images that are offered in PSD format. You should find that the checkered background is on a separate layer (which can't be done with 'flat' formats such as PNG or JPEG); this will allow you to select the background layer in the Layers panel and either hide or delete it.

[Lillias]

I don’t normally have any problems with png files and as I said I know that with the ones (few though they be) that come with an attached checkered background I can remove said background in free online facilities. It can also be done within the full Photoshop but I don’t have Photoshop.

 I take it that there isn’t a way of doing it then within Affinity unless it came in PSD format.

 

[Alfred]

3 minutes ago, Lillias said:

I take it that there isn’t a way of doing it then within Affinity unless it came in PSD format.

I'm sure it can be done, Lillias, but I strongly suspect it would be very fiddly! Can you provide a link to one of the images you've been having trouble with?

[Lillias]

This is a file I downloaded from freepik...at first glance it looks like a png file but on looking again it has the file extention of jpg!  But this is the kind of file

I am talking about...see attached.   I have discovered that if you unlock it and drag it to one side you see another checkered layer below.

Thanks Alfred.

Edited:  replaced image with link to same...

 freepik.com/free-vector/various-tropical-leaves-transparent-background_16460227.htm,

 

[Ldina]

@Lillias Attached is a PNG file without the background, plus an afPhoto file, so you can see what was done. It's not perfect, but it's pretty good.

In AP v2.4.0, I used a Procedural Texture filter to separate saturated colors from the desaturated colors (i.e., the checkerboard), which eliminated the whites and grays, but it also lost the foliage drop-shadows, which are also desaturated and very close in tone to the gray checkerboard squares. Those shadows can be reconstructed pretty easily by duplicating the layer, offsetting it, and making it an appropriate shade of gray. The Procedural Texture filter also removed some of the dark grays and blacks in the foliage itself (because they are also desaturated colors), so I used a mask on the PT Layer to get them back. The Curves Layer adjusted the Alpha Channel to clean up some of the semitransparent pixels along the edges of the foliage. 

The image itself dictates what approach may work best, and it seemed to me that a saturation approach might be a good place to start. 

Remove Checkerboard.afphoto

[NotMyFault]

Thanks @Ldina for the idea.

I make a variant not relying on PT filters, and re-generating the shadows:

 

part 1: create mask

1. add HSL adjustment
2. set saturation to minus 100
3. set blend mode to difference
4. add levels adjustment, set black level to 3%
5. add hsl adjustment, set sat to minus 100% (but keep blend mode normal this time)
6. add levels adjustment, set white level to 0
7. now you have a black / white result what can be used as mask. You may add more of HSL / levels to optimize.
8. merge visible
9. rasterize to mask

part 2: arranging layers and preparing shadows

1. deactivate helper layers.
2. sample light grey from original layer (about 181/255)
3. Duplicate original layer
4. nest mask layer to original image in masking position
5. duplicate again
6. group original layer with mask
7. Assign this color to group
8. move group which’s shows shadow into correct position.

I‘m giving this receipt as the JPG shows severe compression artifacts and you need to start the process on the original file hopefully in better quality.

[loukash]

9 hours ago, Lillias said:

This is a file I downloaded from freepik...at first glance it looks like a png file but on looking again it has the file extention of jpg!  But this is the kind of file

I am talking about...see attached.

That would be freepik.com/free-vector/various-tropical-leaves-transparent-background_16460227.htm, right?

If you click the green Download button, the zip archive only contains a JPEG and an EPS file. Neither of those files contains any transparency whatsoever. Even worse, the EPS is here obviously only used as a container for the very same JPEG image within – which is absolutely pointless from any technical point of view… *)

Not sure if there would be any true transparent file included if one goes "premium". I don't have any account there.

So the next time you may want to specifically search for images that are being delivered as transparent PNG, or as a PSD which also support transparency and may include multiple layers that you can turn on and off.

*) edit: Either that, or this Illustrator EPS contains data that can only be correctly interpreted by a compatible Illustrator version.

Edited March 11 by loukash
see below

[Lillias]

Thanks @Ldina and also @NotMyFault for both your considered contributions. You have given me much food for thought. Fortunately I don’t come across this type of file very often.

 

 

[Lillias]

10 minutes ago, loukash said:

That would be freepik.com/free-vector/various-tropical-leaves-transparent-background_16460227.htm, right?

@loukash you are correct and no I won’t be going ‘premium’ and don’t have an account there. Thank you for that information however. We learn something every day as my old granny used to say.

 

[loukash]

8 minutes ago, loukash said:

this Illustrator EPS contains data that can only be correctly interpreted by a compatible Illustrator version

So, I have actually opened the EPS using Illustrator CS5 on my "antique" MacBook, and it is a vector illustration, thus the checkerboard background can be disabled.
But the EPS can't be correctly interpreted by Affinity as vector data, it will only generate a bitmap preview.

2 minutes ago, Lillias said:

We learn something every day as my old granny used to say.

Oh, that's something that happens to me daily, too!  

[walt.farrell]

One comment about using these forums, @Lillias: When you want to "tag" another user to get their attention, you need to do it by typing the @ sign and then starting to type their username and then picking the right name from the popup list that appears. If you don't pick from the list, you just get plain text, like @lillias and that won't work to notify them of your post.

[Alfred]

31 minutes ago, walt.farrell said:

One comment about using these forums, @Lillias: When you want to "tag" another user to get their attention, you need to do it by typing the @ sign and then starting to type their username and then picking the right name from the popup list that appears. If you don't pick from the list, you just get plain text, like @lillias and that won't work to notify them of your post.

In this particular case it didn’t matter, since @Lillias quoted @loukash at the top of her post, but it’s a useful detail for forum users to be aware of.

[loukash]

1 hour ago, loukash said:

I have actually opened the EPS using Illustrator CS5 on my "antique" MacBook, and it is a vector illustration, thus the checkerboard background can be disabled

For the record, when I resaved the EPS as *.ai (version CS5) with PDF stream, Affinity can then easily open the illustration as native vector. 
In the meantime, I have converted the file for @Lillias as native afdesign and sent it to them privately.

VectorStyler can essentially interpret the 66cn_pc96_210607.eps as vector illustration, too, but there are errors and it would require quite some cleanup.

I also tried a few online converters, but none can deal with the EPS as vector and they convert to (partially lousy) bitmap instead.

~~~

Lesson to be learned here:

Hold on to your perpetually licensed good ole Schmadobe apps, folks! You still may need them!  

[Lillias]

Thank you one and all for your help and also the manner in which you provided that help - as in not making me feel stupid as can happen on some forums.