IMAGE WIDGETS

MORE RESOURCES

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

EXAMPLE USES

AS A PLACEHOLDER

Use the default image widget as a placeholder in a low-fidelity diagram to indicate the approximate size and location of an image.

EDITING AN EXISTING USER INTERFACE

Take screenshots of screens or pages of an existing product. Crop and slice the screenshots (using the instructions below) and add new widgets to enhance and update the design.

GRAPHICS AND LOGOS

Add high-visual-fidelity graphics to your diagrams, like logos, product images, and photos.

LOADING IMAGE FILES INTO IMAGE WIDGETS

Image widgets can contain images of the following file types: GIF, JPG, PNG, BMP, and SVG.

VIA DOUBLE-CLICK

Double-click an image widget to load an image file. A file browser opens which you can use to select the image file.

 

When you load an image, the image widget will automatically resize to the original size of the image being imported. To prevent the image widget from resizing, select it and double-click one of its resize handles before importing an image file. Notice that the resize handles change from yellow to white; this indicates that the auto-size feature has been toggled off. You can enable auto-fit at any time by double-clicking a resize handle or clicking the "Fit to Image" button in the Style tab of the Inspector.

VIA COPY AND PASTE

Images can also be copied and pasted directly into Axure RP from popular graphics editing, diagramming, and presentation tools. When you paste the image, a new image widget will be created with the copied image already loaded into it.

VIA DRAG-AND-DROP

Drag an image file from your file browser and drop onto the Axure RP canvas to create a new image widget with the selected image already loaded.

EDITING

LOCATION, SIZE, AND ROTATION

To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.


When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.


Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.


Image widgets can also be sized to the source image. Double-click a handle on the widget's border to auto-size the image widget.


Rotate a widget by holding [CTRL] / [CMD] while clicking a corner handle on a widget. Drag to set the angle of rotation. You can also enter an exact degree of rotation in the "R°" field of the Inspector's Style tab. Text can be rotated to a different angle using the "T°" field in the Style tab.

FONTS, COLORS, BORDERS, AND SHADOWS

Editable properties of an image widget's formatting include: text font and family; line and text colors; border color and thickness; outer and text shadows; and widget opacity. These properties can all be controlled from the Style tab of the Inspector, and many are also available in the Style Toolbar at the top of the interface.


Borders can be added and customized. You can set the thickness, color, and pattern of the widget border.


Outer shadows can be added. Open a shadow menu and click the checkbox to add a shadow. The offset (measured in pixels) can be specified in both the "x" and "y" directions. The blur and color of the shadow are also set here.


Change the corner radius either via the Style tab or right on the canvas by dragging the triangular handle near the top-left corner of an image widget. In the Style tab, you can choose which corners are curved and which remain right angles.


Specify the opacity of a widget in the Style tab. By default, widgets are 100% opaque. Note: widget opacity is a separate property from border or text opacity, each of which can be set in their respective color pickers.

CROPPING AND SLICING

Access slicing and cropping by right-clicking an image widget. These tools affect only the currently selected image widget. The slice tool separates the image into several component parts. You can slice with a horizontal, vertical, or cross cut.


The crop option contains several tools. Crop is used to select the area of an image which you would like to keep. Cut selects the area of an image which you would like to remove. Copy selects the area of an image which you would like to copy, leaving the original image unaltered.

ADDING TEXT

To add text to an image widget, you can select it and begin typing. To edit text that already exists on a widget, right-click on the image widget and select "Edit Text" or hold [CTRL] / [CMD] and double-click.

OPTIMIZING

Large images can increase the size of your RP file and affect performance within Axure RP and in the browser. Optimizing the image will decrease the file size of the image. As a result, there may be a decrease to the image quality.


Optimize an image by right-clicking and selecting "Optimize Image".

PRESERVING CORNERS

You can keep the corners of an image from being distorted when the image is resized. This is useful when working with graphics that have corners that might not resize nicely, like rounded corners.


Right-click an image widget (one that has an image loaded) and click "Preserve Corners". Triangle markers will appear at the top and left of the image to indicate the areas of the image which will not be resized with the rest of the widget. You can drag the triangle markers to resize the preserved portion.

INTERACTIVITY

INTERACTION STYLES

Interaction styles are alternative sets of style properties (e.g. color, border, font weight) which are applied in certain situations, for example after a widget is clicked. For image widgets, you can also choose to use a different image as an interaction style.


Widgets can have the following interaction styles:


MouseOver: When the cursor moves over a widget

MouseDown: When the widget is clicked on but not yet released

Selected: When an interaction has set the widget to its selected state

Disabled: When an interaction has set the widget to its disabled state


In each scenario, the alternative look (and/or image) you've configured for that interaction style will be applied to the widget. If you haven't set up a given interaction style, the widget's look will remain unchanged during that interaction.


The interaction styles of each widget are configured in the Properties tab. Click the name of an interaction style to open the "Set Interaction Styles" dialog. Check the checkbox next to a style property and configure it to add it to the overall interaction style. In addition to choosing from specific style properties, you can also choose to apply a widget style as an interaction style.

LINKS

The quickest way to add a link to an image widget is to select the widget and click "Create Link" in the Inspector's Properties tab. A list of pages in the project will appear. Click on the name of the target page to create the link and close the dialog. Learn more about creating interactions here.

SELECTION GROUPS

With selection groups, you can create a relationship among a group of widgets such that only one widget at a time can be set to its selected state. When any widget in the group is selected, all others are automatically deselected. A deselected widget will revert to its base style.

 

Use the "Selection Group" field in the Properties tab to add a widget to a selection group. To add a new selection group to the page, type a name in the field. You can also choose an existing group from the dropdown. To remove a widget from a selection group, delete the group's name from the "Selection Group" field.