Axure新手养成计划(连载05)

Axure书籍 小楼一夜听春语 27057℃ 0评论

 4.3.4.  切割与裁剪

小楼:有时从网上找到一张图片素材,可能不能满足我们的需求,比如:只想要里面的一部分,或者需要把整个图片变成几个部分。

苏苏:我知道,可以用PS。

小楼:…..,不用那么麻烦,AxureRP7.0中给我们提供了简单的图片编辑工具。你看这个有三种状态按钮的图片,我们通过切割或者裁剪来编辑它们。

4.3.4.1.      切割

切割就是可以把图片进行分割成多个部分,切割的功能在图片元件的属性中。(图43)

点击切割的图标后,鼠标移动到主编辑区就会变成一个小刀的形状,并带着的十字虚线,这个十字线就像刀片一样,如果把一张图片切成四份只需把鼠标放到合适的位置点击鼠标的左键。而切割成两份的话,切割的时候只需要让一条切割线进入图片区域或者选择只有一条切割线就可以了。(图43)

43

(图43)

切割还支持批量切割,如果有多张图片需要切割,就把这些图片全部选中再点击切割按钮就可以一次切割多个图片。

不过,像图38里面的这种按钮,如果想要把每个按钮单独提取出来,在这里用切割不太方便,因为我们需要把图片里面的按钮保持相同的尺寸提取出来,所以我们用裁剪功能更为合适。

4.3.4.2.      裁剪

裁剪能够把图片中的一个区域提取出来。

点击裁剪按钮后,会出现一个方框,拖动方框的边界点可以调整选取区域大小。裁剪的操作有三种,可以在把方框放在适当的区域后,根据需求点击功能按钮进行操作。(图44)

44

(图44)

4.3.4.3.      保存原型中图片到本地

当我们完成图片编辑后,并不一定能够直接应用到原型中,很多时候我们是需要动态的加载这些图片素材,比如鼠标悬停或者鼠标按下时才需要在交互样式中从本地磁盘上导入这些图片素材。

下面我们就来讲解,如何把原型中的图片,保存到本地磁盘。

首先,按F8生成HTML文件,在生成的页面把HTML文件的保存路径复制,或者选取一个比较容易找到的路径(图45)。

45

(图45)

然后点击进行生成。生成之后打开我们在刚才指定的保存HTML文件的文件夹,或者把复制的本地路径粘贴到地址栏后按回车键进入这个文件夹。(图46)

46

(图46)

“进入之后打开里面的images文件夹,找到与刚才图片所在页面名称相同的文件夹,双击进入。这里面就有我们刚刚编辑过的图片。(图47)

47

(图47)

我们可以复制出来进行使用,比如放在桌面上。

4.3.4.  图片的变换

一个图片按钮,往往有三种样式,初始、悬停、按下都会有不同的样式效果。

在前面我们裁剪的图片就是一个按钮的三种不同样式,我们可以通过在图片属性里设置交互样式,实现一个能够响应鼠标动作变换样式的按钮。

第一步:拖入一个默认的图片元件到编辑区,调整成60px*60px的尺寸

第二步:双击图片打开本地资源管理器,找到初始状态的图片导入进来;确定之后,因为我们里面的这个图片元件尺寸和导入的图片尺寸不一致,它会弹出一个提示,要求我们选择图片原始尺寸还是编辑区图片元件的尺寸,这里我们选择【否】让它保留编辑区元件的尺寸。

第三步:拉动图片左上角的三角形状,调整图片的圆角,我们把它拉动到图片中央,直到不能拉动为止。这样图片就变成了圆形的。

第四步:属性里面点开【鼠标悬停】,把悬停状态的图片导入。然后,点击顶部的【鼠标按下】标签把按下时的图片也完成了导入。(图48)

48

(图48)

这样,我们就完成了一个动态图片按钮的制作。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载05)

喜欢 (81)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 全部看完了 期待 继续.... 这对我来说 简单快速的入门很有帮助
    wowo2015-08-21 10:30 回复
  2. 坐等,想看中继器那块。还想学习变量的使用!
    小楼威武!日不落~2015-08-21 11:39 回复
  3. [谨遵楼嘱,好好练习] 1 图片剪裁:Slice 和 Crop Slice,切片,横竖十字四分; Crop,截取整体; Ctrl+拖动,copy; 直接拖动相当于剪切 2 F8, Ctrl+F8, 保存html,图片对应保存到folder 3 利用保存图片,做click 图片变换
    雪海2015-09-23 16:29 回复
    • 但是为什么试验了很多次都没有用。求教~~~
      江呆呆2015-09-25 21:07 回复
  4. 不太懂,裁剪后直接保存到桌面,设置悬停的时候直接导入图片不可以吗
    篱笆里的小猫2015-10-22 12:16 回复
  5. 好棒的样子。
    2016-01-29 15:23 回复