There are multiple ways to add images to your mockups. The easiest way is to simply drag and drop an image file from your computer on to the Mockups canvas. Read on to learn more about adding and using images and other assets in your projects.
Adding Images in Mockups View
As mentioned above, dragging an image from your computer to Balsamiq Mockups will add it to the canvas. Doing this will place the image into the selected mockup and copy the image file to your Assets so that you can easily reuse it in other mockups.
You can modify the image properties in the Property Inspector, similar to other UI controls.
The properties specific to images are as follows:
- The drop-down box shows you the name of the current image. Opening it allows you to select a different image from the images you’ve already imported to your Assets.
- The ”+” icon next to the drop-down box allows you to add an image from your computer. This is the same as dragging and dropping an image file.
- Clicking the download icon opens a dialog to add image from the web by entering a URL directly or by searching Flickr. Mockups supports GIF, JPG/JPEG, and PNG image file formats. Files downloaded from the web will be copied to your project.
- Click the rotate icon below the image drop-down to rotate your image in 90-degree increments.
- Clicking the square with an ‘x’ inside it will revert the image to the default placeholder image.
- The “Sketch it!” checkbox will convert your image to a black and white line drawing version.
If you don’t yet have an image ready or want to use a placeholder image to keep your mockup low-fidelity, you can add an Image control from the UI Library and it will show up as a box with an ‘X’ through it. You can later replace it with an image using the image properties described above.
Once an image has been added to your project it will show up in the UI Library so that you can easily add it to any mockup in your project. The “Assets” category will show all of the images that you’ve added to your project.
This also means that you can add your images to your mockups from the Quick Add box. Just type the first few letters of the image name and it will appear in the list.Note: You can delete an image by right-clicking on it in the UI Library and selecting “Move Image to Trash” or from the context menu in the Assets view.
The image properties panel also allows you to crop or mask images to only show a selected portion of them. You can watch a tutorial on cropping images here. Images that have been cropped will show an icon to remove the cropping in the properties panel.
Aside from the Image control, you can also embed images in the Cover Flow control.
Adding Images in Assets View
Balsamiq Mockups 3 has a dedicated area of the user interface for managing images, icons and other assets called the Assets view.
The Assets view shows all images and custom icons that have been added to your project. You can get to it by switching the navigator view to Assets.
You can add images in the Assets view by dragging and dropping from your computer or by using the icons in the toolbar.
The “Import Asset…” icon allows you to select one or more images from your computer while the “Download Asset…” icon brings up the same dialog as in the Mockups view to enter an image URL or search for an image from Flickr.
Once you’ve added images, you can view them as thumbnails or a list, as well as in Thumbnail Grid view.
The Properties panel on the right shows you the pixel dimensions of the selected image and allows you to enter notes about it. The lower portion of the panel shows which mockups (if any) the image is used in. This can be used for managing images to see if you can delete any that aren’t being used, for example. Clicking on a mockup name will take you to that mockup in the Mockups view.
Adding Non-Image Assets
You can also store other types of files in your project that won’t be used in your mockups, such as requirements documents, Photoshop or Illustrator files, PDFs, or any other file that’s associated with the project. We call these “non-image assets” and they can be added to your project by dragging them into the Assets view, just like images. Common file types (zip, pdf, doc, etc.) will be shown with an appropriate logo, as shown below. Other files will be have a generic document icon.Note: Assets are limited to 20 Megabytes per file for performance reasons.
These files can’t be viewed inside the application, but they are “packaged” with your project, so if you give the project file to someone else they will be able to save the files from the Balsamiq project to their computer using the “Save to disk” button or context menu item.
Managing Images and Other Assets
As with the Mockups view, the Assets view has a context menu that you can open by right-clicking in the navigator or using the drop-down arrow. This allows you to rename, delete, update, or download your images and other assets.
Renaming assets using the context menu will change the name of the asset in your project. It will not affect the original file, as the asset is a copy that has been added to your project. Renamed images will get updated in your mockups, so you don’t need to update them manually.
Saving Assets from Your Project to Your Computer
You can get assets from your project on to your computer by using the “Save to Disk” option in the context menu, allowing you to extract assets from your project for other uses.
Replacing or Updating Assets
The “Import New Version…” menu option allows you to select a new assets to replace the selected assets with. This is useful if you want to update an image that is already in use in your mockups, for example. The new version will then be used anywhere the selected image was used.
You can also use the context menu to delete assets from your project. Just like your mockups, deleting will move assets to the trash, where you can delete them permanently or restore them. Note that deleting an image from the mockups canvas doesn’t remove it from your project.
Select Unused Images
Another option allows you to select all images that are not used in your mockups. The option is available in the Edit menu, as shown below:
Using Images as Icons
You can use any of your imported image assets as an icon. They will automatically show up in the icon library, under the Assets category at the bottom.