Aure新手养成计划(连载05)
4.3.4.1. 切割切割就是可以把图片进行分割成多个部分,切割的功能在图片元件的属性中。(图43)
点击切割的图标后,鼠标移动到主编辑区就会变成一个小刀的形状,并带着的十字虚线,这个十字线就像刀片一样,如果把一张图片切成四份只需把鼠标放到合适的位置点击鼠标的左键。而切割成两份的话,切割的时候只需要让一条切割线进入图片区域或者选择只有一条切割线就可以了。(图43)
(图43)
切割还支持批量切割,如果有多张图片需要切割,就把这些图片全部选中再点击切割按钮就可以一次切割多个图片。
不过,像图38里面的这种按钮,如果想要把每个按钮单独提取出来,在这里用切割不太方便,因为我们需要把图片里面的按钮保持相同的尺寸提取出来,所以我们用裁剪功能更为合适。
4.3.4.2. 裁剪裁剪能够把图片中的一个区域提取出来。
点击裁剪按钮后,会出现一个方框,拖动方框的边界点可以调整选取区域大小。裁剪的操作有三种,可以在把方框放在适当的区域后,根据需求点击功能按钮进行操作。(图44)
(图44)
4.3.4.3. 保存原型中图片到本地当我们完成图片编辑后,并不一定能够直接应用到原型中,很多时候我们是需要动态的加载这些图片素材,比如鼠标悬停或者鼠标按下时才需要在交互样式中从本地磁盘上导入这些图片素材。
下面我们就来讲解,如何把原型中的图片,保存到本地磁盘。
首先,按F8生成HTML文件,在生成的页面把HTML文件的保存路径复制,或者选取一个比较容易找到的路径(图45)。
(图45)
然后点击进行生成。生成之后打开我们在刚才指定的保存HTML文件的文件夹,或者把复制的本地路径粘贴到地址栏后按回车键进入这个文件夹。(图46)
(图46)
“进入之后打开里面的images文件夹,找到与刚才图片所在页面名称相同的文件夹,双击进入。这里面就有我们刚刚编辑过的图片。(图47)
(图47)
我们可以复制出来进行使用,比如放在桌面上。
4.3.4. 图片的变换一个图片按钮,往往有三种样式,初始、悬停、按下都会有不同的样式效果。
在前面我们裁剪的图片就是一个按钮的三种不同样式,我们可以通过在图片属性里设置交互样式,实现一个能够响应鼠标动作变换样式的按钮。
第一步:拖入一个默认的图片元件到编辑区,调整成60px*60px的尺寸
第二步:双击图片打开本地资源管理器,找到初始状态的图片导入进来;确定之后,因为我们里面的这个图片元件尺寸和导入的图片尺寸不一致,它会弹出一个提示,要求我们选择图片原始尺寸还是编辑区图片元件的尺寸,这里我们选择【否】让它保留编辑区元件的尺寸。
第三步:拉动图片左上角的三角形状,调整图片的圆角,我们把它拉动到图片中央,直到不能拉动为止。这样图片就变成了圆形的。
第四步:属性里面点开【鼠标悬停】,把悬停状态的图片导入。然后,点击顶部的【鼠标按下】标签把按下时的图片也完成了导入。(图48)
(图48)
这样,我们就完成了一个动态图片按钮的制作。
[br]
关键字:Axure, Axure教程, 图片, 切割
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!