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 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, 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.
Managing images #
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, clone, delete, update, or download your images.
Renaming images #
Renaming images using the context menu will change the name of the asset in your project. It will not affect the original file, as the image 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 images from your project to your computer #
You can get images from your project on to your computer by using the "Download" option in the context menu, allowing you to extract images from your project for other uses.
Replacing or updating images #
The "Import New Version..." menu option allows you to select a new image to replace the selected image with. This is useful if you want to update an image that is already in use in your mockups. The new version will then be used anywhere the selected image was used.
Deleting images #
You can also use the context menu to delete images from your project. Just like your mockups, deleting will move images 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.