Axure Tutorial: Common Widgets - Image
Introduction
This article is a part of course Axure Full Course: Tutorial, Tips and Templates.
Image is the widget we use to load various images, and its basic properties are similar to shapes, but also has its own unique properties.
Let's introduce these unique properties today.
Import an Image
Drag the image widget into the canvas and double-click the image widget to import the image. When importing, if the image is very large, you can choose whether to optimize it.
Fit to Image
When importing an image, we can decide whether the size of the image should be the same as the size of the image widget or the original size of the image. By default, the imported image is the same as the image widget.
If you change the size of the image widget, the imported image will be the same size as the image widget.
If you want to change the size of the image to the default image size, click the Fit to Image button on the right pane.
Adjust Color
You can adjust the color of the image directly in Axure, click the Adjust Color button in the Style pane on the right, and you can adjust it in the pop-up panel.
Slice Image
The Slice image feature is used to divide an image into 4 parts. After selecting the image, click the Slice button, select the center point to be sliced, and slice the image into 4 parts.
Slice Image to 4 parts
Crop Image
If there are extra parts of the image that need to be cropped, you can click the Crop button, adjust the part that needs to be cropped, and crop the image.
Clear Image of Image Widget
You can directly clear the image in the image widget without deleting the widget, so you can import a new image.
Click the Edit Image button, and then click the Delete button on the pop-up panel to delete the image.
Image Fill of Image Widget Vs Image Fill of Shape Widget
There are two widgets to import image, one is Shape, the other is Image. So what are the advantages and disadvantages of them?
- The image size imported with the image widget can choose Fit to Image. The image size imported with shape can only be consistent with the size of the Shape.
- For image imported with shape, you can choose various filling modes, such as Image Repeater, while image imported with image can not change its default fill mode(Stretch to Cover).
Input Text into Image
You can't directly double-click the image to enter text, this will cause the uploading image window to appear, you can right-click the image and select Edit Text to enter the text.
Right click to select Edit Image
That's all for today's lesson.In the following lessons we will continue to introduce commonly used widgets.
If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting!
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.
Leave a comment