πŸ‘‹πŸ½ We wrote a book! Order Wireframing for Everyone today β†’

Balsamiq

Toggle navigation

Using Images, Assets, and Icons


This article describes adding and using images and icons to your projects.

There are multiple ways to add images and icons to your wireframes, including dragging and dropping an image file from your computer on to the wireframes canvas.

However, adding a lot of images - or a small number of very large images - to your project can reduce the efficiency of your project.

As a low-fidelity tool, large images can be slower to load, use more disk space and increase the size of project files. Very large images can cause handling problems when editing. When adding images to your project, we may reduce the size of images in various ways:

  • Resize the image to a maximum of 2 megapixels
  • Down-scale Retina images from 2x to 1x
  • Down-scale HiDPI images
  • Convert PNG images to JPG when possible

Adding Images to the Canvas

As mentioned above, dragging an image from your computer to the editor will add it to the canvas. Doing this will place the image into the selected wireframe and copy the image file to your Images so that you can reuse it in other wireframes.

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.
  • 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 cloud opens a dialog to add image from the web by entering a URL directly. Wireframes 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 wireframe 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 add it to any wireframe in your project. The "Images" 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 wireframes from the Quick Add box. Just type the first few letters of the image name and it will appear in the list.

The image properties panel also allows you to crop or mask images to only show a selected portion of them. 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 From the UI Library

You can add images from the UI Library and add a file from your hard disk or from the Web.

The "Upload from Disk" option allows you to select one or more images from your computer while the "Import from Web" icon brings up a dialog to enter an image URL.


Splitting Images

Images can be split horizontally using the Split Image button in the Property Inspector.

When you press the Split Image button, a horizontal bar will appear on the image, which you can drag to where you want the split point to be. Once you have placed the bar where you'd like it, clicking Split Image on the floating toolbar will split the image at the bar's location.

gif


Extracting Text from an Image

You can extract text from an image using the Extract Text button in the Property Inspector.

Extracting the text will create a new image with the text removed and your text in text controls on top of it. Here’s an example:

gif


Managing Images

In the UI Library, each item displayed in the "Images" category has a context menu that you can open by right-clicking on it. This allows you to rename, download, update or delete your images, as well as adding them to be used as Icons.

Renaming Images

Renaming images and icons using the context menu will change the name of the image/icon in your project. It will not affect the original file, as the image/icon is a copy that has been added to your project. Renamed images will get updated in your wireframes, 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 wireframes, for example. 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 wireframes, deleting will move images to the Trash, where you can delete them permanently or restore them.

Select Unused Images

Another option allows you to delete all images that are not used in your wireframes. The option is available in the top-right corner of the UI Library and in the Project menu.

Clicking it will move images to the Trash, where you can delete them permanently or restore them.


Adding Icons via the UI Library and Quick Add

Icons from the amazing Font Awesome icon set are pre-installed. It contains over 6308 icons in a wide range of categories that can be sized from extra small (XS) to double extra large (XXL).

Icons have their own category in the UI Library so you can drag and drop them just like any other control.

They also show up in the Quick Add results, saving you time when searching by name or keyword.

Icon search results are shown below any UI controls that match the text you enter.


Adding and Swapping Icons via the Property Inspector

Some controls allow you to add icons to them (buttons, for example). You can do this from the Property Inspector in one of two ways: the icon search and the icon library dialog.

If the control you selected support icons, you will see the icon search box in the Property Inspector. This works much like the Quick Add tool, just type a few letters from the name of the icon you are looking for and a list of suggestions will pop up as a grid of icons to choose from. Just click on the one you want to select it.

You can then size the icon from "XS" (16px) to "XXL" (128px). You can also rotate icons in 90 degree increments using the button next to the search box.

The Icon Library Dialog

If you'd like to explore all the icons that are available, click on the icon to the right of the icon search box.

This will bring up the icon library dialog, where you can browse the icons by category and preview them at different sizes. You can double-click an icon to select it immediately or click once to select and then click the "Select" button to add it.

Once you have selected an icon, you can resize, rotate or remove it via the Property Inspector.


Adding Your Own Icons

You can also add your own icons for use in your wireframes by selecting any of your imported images, and using them as an icon. They will automatically show up in the icon library, under the Images category at the bottom.


Best Practices for Creating or Preparing Custom Icons

The editor recognizes color and transparency, but icons you add may not turn out looking as you want them to if they're not prepared the way we expect. Below are some tips to get the most out of your custom icons.

Color

  • Wireframes uses black as a color for replacement at 100% opacity.
  • Icons that aren't created with black can have undesirable effects when colorized.
  • We recommend using black as the color for your icons.

Transparent Areas

  • Wireframes colorizes the entire opaque area of the icon.
  • For best results, we recommend knocking out "white" areas of your icon using transparency. Transparent PNG works best.

The example below shows regular icons in the left column, a custom icon properly prepared with black fills in the middle column, and a custom icon that doesn't work as well in the right column. To fix the icon in the right column, the exclamation point should be made transparent, and the icon color should be black.