[pre-release] Better Image Handling, Assets Folders...
Hi all. I hope this finds you well.
We have decided to not do an official release this week because we made some pretty big changes we need your feedback on before releasing them.
The changes have to do with how we handle images in Mockups for Desktop, but they are steps in the direction of bringing the concepts of "Projects" and "re-using of UI Controls / Custom Controls" which so many of you have asked for.
Let's go through what's new this week in detail first:
The Account Assets Folder
We moved the "global" assets folder from its obscure location we announced last week to the more discoverable (and more standard) <user home>/Documents/Balsamiq Mockups/assets folder. We are calling this folder the "Account Assets Folder", since there's one for each user account on the computer.
Any image you place in this folder (manually) will be visible in your Image pulldown in the property inspector:
This folder is great for images which you re-use all the time, like your company logo or social media avatar for instance.
BMML file format change warning: when an account asset is used, its path will be saved in the BMML as $ACCOUNT/filename, a new shortcut we added.
The Project Assets Folder
A best practice which emerged from how most people use Mockups is to keep all related files in a "project directory" on your hard disk. We also work that way, and usually also keep all images, PDFs, PSDs and other assets related to the project in an "assets" subfolder next to our BMML files.
With this release we have added a couple of little features which support this best practice, introducing the concept of a "Project Assets Folder".
This is simply a folder called "assets" that sits next to the BMML file you're editing.
If you place an image in that folder (manually), it will show up in the Image pulldown in the property inspector for you to use. Similar to how the Account Assets Folder described above works.
Copying files manually is a bit cumbersome though, so we have enhanced the Import Image dialog with a new "Copy to Project Assets Folder" checkbox:
If you uncheck the checkbox, the image will be linked in (with relative path) and left alone, just like today.
If instead you check the checkbox, a copy of the image will be saved in the current Project Assets folder, and linked in as "./assets/filename". All nice and clean, for easy zipping, moving and sharing of whole projects.
The dialog's button changes from Load to Import depending on what you're doing, and you'll also be able to (optionally) rename the image file if you want - useful for those crazy Flickr image names!
The state of the checkbox is remembered across sessions, so if you like to always import, you won't have to do check it each time.
But wait, there is more!
Introducing a standard place to keep assets lets us add some fancy new features that take advantage of it.
The first one is...
Paste Image into Mockups!
Say you have an image in your clipboard (maybe a screenshot?), or want to use an image from the web. You can now simply right-click on it and copy it to the clipboard:
Then go to Mockups and hit CTRL+V or Paste using the menu or the toolbar icon:
Mockups will notice that your clipboard contains an image, and will ask you to give it a name:
Hit "Paste" and voila', 3 things happen:
- the image is saved in your Project Assets Folder with the name you gave it
- an image control is added to your mockup
- the new image file is chosen to fill the new image control
Try it out, it's really powerful, especially for screenshots (on OS X, use CTRL+COMMAND+SHIFT+4 to select a region of your screen and place it in the clipboard). It's awesome. 🙂
But wait, there's one last little feature to talk about!
Pasting text into Mockups
Since we reworked how we treat the clipboard because of the feature above, we thought we'd make it easier to also paste text into Mockups.
It works just as you'd expect: select some text:
Switch to Mockups, hit Paste and voila', a new Paragraph of text control is created for you, with the text in it:
So what's next?
A few things: we're going to add a "Consolidate Assets" command in the File menu, which will look at all the images in the current mockup, copy them into your Project Assets folder if needed and update the references in your BMML file. Think of this as the "Consolidate Library" feature of iTunes.
Another thing we're contemplating is to add a tab to the UI Library for the Project Assets and Account Assets folders, so that you'll be able to drag and drop images from there directly.
As to where we're headed...
...go back and re-read this whole post swapping out every mention of the word "Image" with the words "External Custom BMML Control". That's right. We're excited too. 🙂
Also, the concepts of Projects, Account Assets and Project Assets folders are already present in the web app's beta. Can anyone say "Sync this project to the web"? 😉
How can you help?
This was a deep change in how we handle images. We'd love it if you could try to break it, ehm, take it for a spin this week so that we can publish it into the main 1.6 branch next Tuesday.
The build is already live here. Let us know what you think!
The Balsamiq Team
P.S. On to other news, Mockups took 2nd place at the O'Reilly "Best Rich Internet Application of 2009" contest. Thanks to all of you who voted for us! 🙂