Export to PNG with transparent background


#1

Hi everyone,

I’d like to find out if it is possible to export mock-ups to png with a transparent background.

Many thanks!

Updated: this used to be possible with the config file - please include a way of doing this in B3


Please keep the cfg file
Please keep the cfg file
#2

Hey Neil, you are right—this used to be available, but in B3 we removed the config file. We added back in support for a couple of the things that you could do with the config file—selection color, and font. Now, those are actually project-level settings.

Help convince us of the priority of this one. :slight_smile: Obviously everything is a balancing act, so we have to weigh something like this against some of the bugs we are hunting down, and some of the other features in the works. Why is this crucial to you? Thanks a ton for sharing your thoughts with us!


#3

Hi, the current mock-ups I’m producing are going to be presented to business stakeholders using PowerPoint. Some of the mock-ups have boxes with white backgrounds and I’ve set the PowerPoint presentation up to have a light blue background in order to show the white background of the boxes and emphasise their boundaries.

When I’ve exported the mock-ups as pngs the additional mark-up is being included - currently the exported pngs have a white background and this means it won’t be easy to demonstrate the boundaries of the boxes without adding border (which I’m currently doing).

Not a big thing, but it is a nice to have as a project configurable.


#4

Thanks for the additional information. What if you select the pieces that you want to export, so just those boxes? Then when you export, choose “Export Selected” and it should only export those boxes. Maybe that’s enough?


#5

The thing is I want to include the mark-up in the PowerPoint :¬)


#6

Maybe export that separately? :smile:


#7

Yeah, that would work…


#8

I know it’s not as convenient, but hopefully it will work out for a while at least. We’ll see where this goes, and if others clamor for it as well. :wink:


#9

Thanks @ben much appreciated.


#10

Hey @ben - although I agree with you that is possible to select the pieces you want to export, I also think that if you are dealing with bigger projects with a great number of elements (which was my case) it would be much more efficient (for the user) to have the option to export all with transparent background.
I believe offering such functionality is an invitation to the user to always use Balsamiq for the foundation work knowing that they will be able to easily export to other softwares.

I understand this might not be in the top of the priority list now, but perhaps further down the line it might be worth considering adding the config file trick back (as with V2) or even as a preset when you open a new file.

All in all, I say: Keep up the excellent work! :thumbsup:

Cheers
Gabi


#11

VERY VERY sad that we lost this feature in the new version of Balsamiq. I used to use this feature to export in a way that would allow me to create Help Overlays on our site. Example: http://screencast.com/t/9nGKILZlbiV

With out exporting with a transparent back ground I can’t do this anymore. How do I go back to the last version that allowed this? It is that important to me!


#12

Hi, all. I’ve added this feature request to our issue tracker. This is something that was lost when we removed config files, but we’ll discuss the issue internally. If others would like to see this feature, please add your Like/Heart vote above.


#13

Transparent PNG is a required feature for integrating with Invision’s fixed header/footer feature. The only workaround is adding the extra step of a photoshop edit prior to upload to Invision.


#14

I’d also vote up for this feature.
I’m working on a PowerPoint presentation related to my mockups, and I have exported some elements (symbols and controls) to PNGs to demonstrate them, and they have the white backgrounds (we have blue slides background according to our corporate design). I find it looking not too nice, but I have no Photoshop to remove that background. Now it looks like that, for example:

It would be much better when the exported PNGs have transparent background.


#15

I have also started using invision but the lack of transparency adds a lot of time due o having go the extra steps with all screens through photoshop, might as well work directly in PS/Illustrator then


#16

I also use this transparency to work with Invision. I’ve been going through all the updates trying to figure out if we can update and I thought that I would be able to do updates to my projects with the new tool. This is a blocker for updating to Mockups3. It’s been very frustrating to try to upgrade to Mockups 3 and run into all of these issues that just utterly side track being productive. I have very large projects (web apps) with over 100 screens. Invision makes it very easy to share, comment, and reference different parts of the design through all of our project and we are not going to give that up for .pdfs. Going back and forth between previous versions of balsamiq and version 3 is not an option as there is just too much to manually keep track of. Please update this feature.


#17

Hello friends! You spoke, we listened. :smile:

At https://balsamiq.com/download/next/ you can find a build that has a new toggle in the Export menu called “Use Transparent Background”.

Try it out, we can’t wait to hear what you think! :smile:


#18

Brilliant, thanks - will give it a go.


#19

Hi all,

Great news! We just released the new version of Balsamiq Mockups (3.1.7) which includes the Export to PNG with transparent background feature! :wink:

You can get the new version here:
https://balsamiq.com/download/

And the complete release notes are here:
http://blogs.balsamiq.com/product/2015/07/08/otherassets/