Export Icon to image... Transparent PNG

Fireworks · August 28, 2015, 1:44pm

Hi all,

I am desperatly trying to export an icon as a png file with transparent background. I only get the page background colour or (if set to transparent) a black background. Is there a way, anyhow?

Or is there even a more elegant way to make png files of certain graphical elements. Or do I have to build them once again in for example Fireworks (which I wanted to get rid of).

Thanks for your help.

Best Regards,

Thomas

klickibunti · August 28, 2015, 1:55pm

I know two ways of exporting assets from Axure.

Export as image. Will export the whole page as image. If there are transparent elements --> they are merged.
Generate the page as HTML. This should produce transparent images just fine. You have to find the image in the output folder though.

Fireworks · August 31, 2015, 6:19am

If I do that, I get either a white background or, if I set the page background to transparent, I get a black background in the png.

If I do that, the elements aren’t created as an image but as pure css. But in my certain case I need it as a transparent image.

I am going to try the 8 beta. Maybe things have changed there…

klickibunti · August 31, 2015, 7:40am

You talked about exporting an icon. But what kind of shape did you mean?

Fireworks · August 31, 2015, 11:36am

Sorry for beeing unprecise. I am trying to create status icons. It consists of a rectangle, a circle and a google material icon. For certain reasons I need these three elements together as one transparent png.

klickibunti · August 31, 2015, 12:51pm

Sorry I guess I can’t help you. Normal shapes are just CSS. I guess it would be a feature request.

Alyssa_Axure · September 2, 2015, 12:07am

This sounded familiar, so I checked in with our QA team and it turns out that the black background issue is a part of a bug that we have filed on our end. Right now Axure RP seems to goof when exporting pages that have transparent backgrounds and you wind up with that black background on Windows. I’ll add this thread to the bug case so that we know that this bug is still causing problems for users.

In the meantime, I can submit a feature request to perhaps add a way to export individual widgets as images. Let me know if you have any specific requests or ideas that you’d like for me to pass along. :thumbup:

AndrewMT · September 29, 2016, 1:50am

Has this bug been fixed or is there an estimated time for when it will be fixed?

Jane_Axure · September 30, 2016, 7:22pm

Hi AndrewMT,

This bug is still present in RP 7, but should be a little better on RP 8. Although the background color still isn’t transparent, it should export with a white background, rather than black. We have this bug logged, and our QA team’s investigating the possible causes and solutions.

Hopefully this helps!

AndrewMT · September 30, 2016, 7:25pm

For those wanting to add their wireframes to their portfolios, the transparent background would give us a lot more creative freedom in Photoshop, etc. I hope this issue gets prioritized in the next Axure 8 update.

Paul1 · July 3, 2018, 10:59am

Hi,

it’s been a couple of years already and it seems the problem still isn’t solved.

Do you guys have any kind of update to this? The feature or any kind of a solution will be highly appreciated.

Simon_Axure · July 5, 2018, 11:09pm

Hi Paul1,

Would your computer happen to be running Windows or macOS? It looks like we are still looking into some unexpected behavior around exporting pages with transparent backgrounds to image files on Windows, so I’ll go ahead and let our QA team know that this issue is still affecting some users.

In the meantime, please let us know if you have any other questions, or if you happen to be running into this issue on a Mac computer. We’ll be standing by!

Paul1 · July 6, 2018, 9:30am

Hi Simon,

yes, I run it on a Mac.

But I’ve found some kind of a temporary workaround which might help others.

To make such an export I copy the needed elements to a new page. Then I convert them to images clicking on them with the right mouse button and choosing the according menu item. After that I generate HTML of that page and this puts pixel perfect .PNGs with transparent background into the images folder of the generated HTML pack.

Hope this helps.

Simon_Axure · July 6, 2018, 6:33pm

Hi Paul1,

Thanks for following up and describing that workaround! You mentioned that your computer is currently running macOS–if you’re on a Mac, we’d expect that setting the page background to transparent (the box with the red line through it) and then exporting that page as a PNG via the “File > Export to Image” menu option would save it with a transparent background.

Are you seeing something different from this on your end? If so, please let us know and we’ll be able to troubleshoot further and see if what you’re running into is similar to the exporting issue on Windows mentioned above.

Paul1 · July 7, 2018, 8:43pm

No,

the background is white in this case.

Jane_Axure · July 10, 2018, 5:27pm

Hi Paul1!

I just tested exporting a page with a transparent background on Mac, and this worked on my end. To start, could you confirm that are you running the latest build of Axure RP 8 (8.1.0.3377)? You can check by navigating to “Help > Check for Updates” or by grabbing the installer directly from www.axure.com/update.

If updating doesn’t help, could you post an example file here for me to test? Since this looks to be working on my end, I’m thinking there’s a page setting or widget that may be another cause of the issue. Please also let me know the version of Mac you’re running (e.g. 10.13.5). Ty!

fairfield · June 18, 2020, 6:14pm

I’m really surprised that 2 years later, this functionality doesn’t exist. I just built a wireframe and realized I can’t properly hand off to my developer. This seems like a pretty crucial functionality, and it’s weird to me that it hasn’t been solved.