Ai File Export very light background

[J33139]

Hi Everyone,

I'm new here so please bear with me. I just got started with Illustrator yesterday and I love it so far.

I came across a problem and thought you might be able to help me:

From Adobe Stock I downloaded an icon set (ai file). I opened it with adobe illustrator.

I was somehow able to pick just the icon I wanted, make it a little bit bigger and export it as png-file.

Now when I uploaded it to my website, it worked fine, there is just an almost invisible (really hard to see) background.

It seems like the background is not fully transparent (image: Almost invisible background, tilt your screen back to see it - Album on Imgur ).

Any ideas how I can make it fully transparent? I chose the option when exporting.

Any help is highly appreciated.

Kind regards,

J33139

[ryan_edwards]

It looks like there is no transparency in there -- I am not entirely sure what all the file has going on but I would recommend trying this (just to be safe that things are correct before you can hit 'save for web' to see the transparency grid (if still white, there must be a filled shape in the art blocking the transparent grid under it)

the save fore web pop up window will show transparency (when PNG format is selected)

Ctrl+Shift+Alt+S (save for web export)

another route is to have show transparency as you work

view>show transparency grid     
Shift+Ctrl+D

...just sometimes looks a little "visually busy" to work in that mode, so I usually toggle it on/off

artboards default to looking 'white'... so this is an easy way to tell just what is and isn't transparent as opposed to 'true white fill'

[J33139]

Hello Ryan

Thanks a lot for your reply. It looks like the background is transparent in illustrator.

Transparent background - Album on Imgur

But when I export it for the web, it's low quality and adds a black background.

When I export it as a png, its high quality and doesn't look like it has a background but it shows very light strucutre in the background that's only visible when I tilt the laptop screen back.

This is really weird.

J33139

[ryan_edwards]

Very odd, yeah it sounds like it should work (based on your screen shot)

Maybe this check box is not clicked in the 'save for web' export.. also be sure its PNG-24

also make sure the 'Matte' isn't interfering (in absence of transparent option it will fill solid white/black/whatever is slotted

[J33139]

Thanks again for your help, that's very kind.

Unfortunately it still shows some kind of texture behind it once I upload it to the website.

When I open the png-file, it doesn't look like their is something.

J33139

[Monika Gause]

You could try and in the AI file use the direct selection tool and click on where the not-invisible background is.

Then go to Window > Appearance panel and inspect whatever got selected. Click on all the triangles to check if any of those items has transparency applied.

I assume that something has an opacity of a few percent.

The other possiblity would be an opacity mask.

If you are not able to interpret what you see in the panels, please upload a screenshot to this forum that contains the appearance panel and the layers panel. Please click on all the triangles so we can see what is selected.

[J33139]

Hello Monika

Thanks a lot for your reply. Here is the screenshot: Appearance Panel - Album on Imgur

It really seems like the background is transparent.

Any ideas?

Kind regards,

J33139

[Monika Gause]

Where did you upload the PNG you saved?

Some services postprocess it.

[J33139]

Hey Monika

I've uploaded it to wordpress using the elementor page builder. Could this be an issue?

Thanks for the help!

[J33139]

Hello Again

The problem is resolved: I found that resizing with Elementor made this very light, almost invisible, texture.

My bad that I didn't find out earlier. Thanks to everyone for the support, you guys rock!

J33139

[Monika Gause]

You're welcome.

Please mark your own answer as correct. Will help others. Thank you!

[ryan_edwards]

glad you figured it out, and yes when troubleshooting it is always best to isolate the 'steps' involved.

Does it look good on export? (local machine)

Does it look good after I do X  with the file... helps kinda of put on the blinders so it doesn't get so overwhelming try to track it all down