How to export shapes, objects drawn in Auxre, to transparent PNG file


#1

Hi, I drawn some shapes and objects in Axure. I set the page to transparent. image

When I click “File > Export page 1 to image >” save as PNG.

The background comes out white, instead of transparent.
page_3

Attached is the file I’m using. I read in other post that it works on Mac? I’m on Win 10. Axure RP9.
temp.rp (263.8 KB)

Rgds
Thug


#2

@Thug nope, Mac also doesn’t work

But If you have something like MS PowerPoint, you can simply copy from Axure and paste there, then save the image as PNG from MS PowerPoint :slight_smile:


#3

No, that’s not going to work very well. First of all, the transparency is lost, so there will be white rectangles around each image. Here is a screenshot of PowerPoint with the slide background set to gray:

image

Secondly, when saving as PNG from PowerPoint, the entire slide is saved, not individual graphic elements (unless there is some way to do that I’m not aware of?) and that resulting PNG image is not transparent. Thirdly, you might notice the black border is lost, but that is due to how @Thug created these graphics in Axure… Essentially, there are two separate “X” graphics, a red placed on a slightly larger black one. If these are grouped in Axure then copied into PowerPoint, they do come across as one image, but of course still with a big white rectangle.

@Thug, Unfortunately, there is not an easy way to do this from Axure–at least that I know. Then again, Axure is not a graphics application, nor has it ever been intended to do what you are asking. Much better to use Illustrator, Photoshop or the like. You’d be better off even with MS Paint for these purposes. If you really need to use what you created in Axure, my recommendation is to import a screenshot into Photoshop (or likewise graphics application) and mask out the white background to create transparency.

If you can make use of SVG graphics, then you can publish your prototype locally, look into the \images folder, and pick out your images. For what you’ve drawn in your example, though, it won’t work very well, because your images are created from multiple widgets. So, you’d get a skinny red “X” and a separate black “X”, a car with separate bumper, hood, roof, mirror, etc.

If you can create these in Axure RP8 then the image files generated with the HTML are PNGs. (That might be the source of “works on a Mac” in the other post.)


#4

@mbc66

well, it does work with MS PowerPoint. The transparency is not lost, the black border neither

And it’s not exported from the slide, it’s simply saved from the image by right click. This function has been in PowerPoint for a decade, so it’s a quite mature feature


#5

Thanks @steven.wang @mbc66. I try to paste it in Powerpoint, @mbc66 is correct, in Win 10, it does not paste as a PNG with transparency.


#6

@steven.wang, I notice your screenshots are from a Mac, so maybe this works there but not on Windows 10. It seems that PowerPoint will only import a Bitmap or Device Independent Bitmap, both of which ignore transparency.

Thanks for the tip about context-menu option for “Save as Picture…” --didn’t know about that.

@Thug, the best I could manage on Win10 was to use PowerPoint’s Format > Remove Background feature, which worked, but resulted in a fuzzy image.