The video below gives a good introduction of the Image Import feature and what it enables:
The feature is simple to use and yet very powerful, enabling a number of different use-cases.
To take one example, let's say you're improving an existing interface. Take a screenshot of the current UI and import it into Mockups to tweak or use as reference, like this:

If you want to re-use images in multiple Mockups, you can import images of custom icons or custom control types using Symbols.
Aside from the Image control, you can also embed images in the Cover Flow component (as seen in the video at the top)
Cropping Images#
Starting with Mockups 2.1.14 (release on Feb 21st, 2012), you can now crop (mask) images to only show a selected portion of them.
The video below illustrates how to use this powerful feature:
Copying Images to Assets #
When you add images to Mockups, what we suggest is that you also add them to "project assets" so they will stay organized with the project and may be re-used in other mockups.
Here's how:
- If you Mockup isn't saved, Save your Mockup.
- Add an image to your Mockup.
- In the lower left corner of the Property Inspector, check "Copy to Project Assets" so this image will stay organized with the project and can be re-used in other mockups.
After you add an image, it will be available in the property inspector.
< Working with Icons | Table of Contents | Working with Markup >