To use images in Mockups, add an Image control from the UI Library and place it on the canvas. The Image drop-down in the property selector will allow you to select images that have already been used in your mockup or images that have been imported to your Project Assets folder.
Select "Import Image..." to choose a new image, or just double-click on the Image UI control to quickly bring up the image browser dialog. You can choose images from your hard drive or networked drive, or from the Web or Flickr.
If you are working on a saved file, you can also just drag an image from your computer to the Mockups canvas.
The video below gives a good introduction to the Image Import feature and what you can do with it.
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#
You can also 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.
