![Axure RP8产品原型设计快速上手指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/363/22651363/b_22651363.jpg)
CHAPTER 2 基础部件
2.1 图像部件
图像部件是Axure中用来插入图片的工具,通过图像部件可以把JPG、GIF、PNG等格式的图片导入Axure中。
导入图片
STEP 01 拖动图像部件到页面编辑区域,并双击图像部件,打开本地资源管理器。
STEP 02 单击需要导入的图片(JPEG、GIF、PNG、BMP和SVG格式),然后单击“Open”(打开)按钮。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0034_0001.jpg?sign=1738949827-Bnm5SAsXBOmc6BpMwmEHuciRhWZ5MOaA-0-84edcf290380ed2dacd319de4408cec9)
STEP 03 选择是否要优化图像。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0034_0002.jpg?sign=1738949827-VgTeJ7arvBeCCGMpbwJbL63vjaXrmdwh-0-8cc30a192de1fa74161aedfc301ca027)
如果导入的图像过大,会自动询问是否优化图像。
❑ 选择“是”,自动降低图片大小。
❑ 选择“否”,不对图片进行任何调整。
粘贴图片
STEP 01 按Ctrl+C,复制电脑本地的图片或网页上的图片。
STEP 02 在页面编辑区域,按Ctrl+V,或者单击右键,选择“选择性粘贴”→“粘贴为图片”。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0035_0001.jpg?sign=1738949827-QmJncueHBGTG7KzJih4iPlCkMhbGA0s9-0-80694cb2249a11e881a5a37e1ae2a7d0)
STEP 03 如果图片过大,会优化图片。
拖入图片
Axure也可以直接从电脑桌面将图片拖入Axure中,其他步骤和前面介绍的导入图片步骤一致,同时图片过大也会提醒进行优化。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0035_0002.jpg?sign=1738949827-s6Z7P5RQJ7R6rRr04O3kAJjWOAAQRyGD-0-118991e189d541ac91ebca1c54cd6058)
分割图片
Axure中能够简单地对图片进行分割,不需要借助Photoshop等专业的图片编辑软件。
STEP 01 单击选中图片,单击鼠标右键,选择“分割图片”,或者直接在工具栏中选择分割工具。
STEP 02 移动区域中的横、竖字线,分割图片。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0036_0001.jpg?sign=1738949827-loxLIdD80T02qMBqPYvrdJDed8WYKuTm-0-59c438667b8b545a22dc3eb69c1ac17a)
根据需要,可以选择“十”字切割、横向切割或纵向切割。
在图片切割状态下,按下键盘上的Esc键或者“取消”按钮,可以退出切割状态。
STEP 03 分割完成后,分离图片查看分割效果。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0036_0002.jpg?sign=1738949827-VGi41KxQOIZhTEkL2nRO68NLrwmjiLUe-0-32656e5249a62599e9a4397d458fbdf6)
裁剪图片
Axure中能够简单地对图片进行裁剪,不需要借助Photoshop等专业的图片编辑软件。
STEP 01 单击选中图片,单击鼠标右键,选择“裁剪图片”,或者直接在工具栏中选择裁剪工具。
STEP 02 调整图中黑色虚线框的小正方型的大小,调整需要裁剪的范围。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0037_0001.jpg?sign=1738949827-Ylnb5bO7QNXwHnwgxx2lnQqyatWFO48C-0-bc8c8536d48a3d3a04b871f0f8a0501e)
STEP 03 选择裁剪类型。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0037_0002.jpg?sign=1738949827-K5lPxeEwBD8qF5VqGGlTCxCSAfgAEpfZ-0-6c6f7cf1bf9d9a0e1c1affc90b03d50d)
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0037_0003.jpg?sign=1738949827-QVMUUZgAXYWDNOnlrMIOFHNkwVa3HpYl-0-16befcc4a674932c4a233339807ab8da)
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0037_0004.jpg?sign=1738949827-WNSS82dZdGi7twHOT3OSbxEFILl5K0u9-0-2c4e6b5866195a35aabf7a1a6feac20d)
制作圆形头像
在很多时候,我们需要使用一些圆形样式的头像来表达这是一个用户,RP7版本之前一般都是用Photoshop进行处理,然后复制到Axure中,RP8版本直接通过一些简单的设置得到这样的效果。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0038_0001.jpg?sign=1738949827-G7TrJAQ6T555GrEV4OFU1qEplVlfRGL0-0-cca29d5c75bb198fbb260727f15034f0)
STEP 01 在Axure中导入一张合适的图片,裁剪为正方形,如下图所示。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0038_0002.jpg?sign=1738949827-BYr5PcCGynvqDdPH97NKpcbGjjezUuFe-0-e613da7b961cb13ff748ae7225d5b72c)
STEP 02 单击选中裁剪后的图片,设置圆角半径为100。
![](https://epubservercos.yuewen.com/2B1D21/11229143604683606/epubprivate/OEBPS/Images/figure_0038_0003.jpg?sign=1738949827-ckBJDtJDMVUwrmT6L12mQtDlqQvIunBe-0-4e895d452df83dc798aea888fcc9b6c0)
另外,也可以直接移动图片左上角的黄黄色小三角形,拖动调整圆角半径的大小。