提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
前言
Sketch以其轻量化、流畅和高效的特点,越来越受到UI设计师的青睐,但目前仅能在Mac系统上使用,对于手头拮据和大多数公司的设计师,用Windows系统下的photoshop做UI设计才是日常。Photoshop虽然功能强大,但用来做UI设计经常会遇到如下几个问题:
1. 修改效率
当项目的psd文件较多,且多个psd中存在相同的图层(组)时,每次修改必须进入到每个psd里重复执行一遍,费时费力。
2. 操作流畅度
随着图层(组)的数量增多和层级复杂,即使分组再科学有序,却仍需耗费较多时间在查找目标图层上,而且psd体积的增大也会引起软件操作的卡顿。
3. 切图效率
虽然市面上有许多切图插件,但切图前必须进入到多个psd中选中每个图标,效率低且可能存在遗漏。
使用过Sketch的同学应该都知道“组件化”这个词,组件化即将页面中的共用控件抽离保存成多个单独的控件,并在不同的页面中进行调用,可通过修改源控件,实现同步更新所有页面控件的效果,即所谓的一改全改。
Photoshop没有自带组件化功能,其库功能虽然能预设和批量修改文字、颜色等元素,但对于复杂图层组却束手无策。
不过方法总是比困难多,通过Photoshop新版本的【置入链接的智能对象】功能,我们就可以巧妙地实现类似Sketch的组件化复用效果。(现在开始有更多的设计师用Adobe XD来做UI设计,但其组件化功能过于简单,目前还不适用于真实项目)
什么是置入链接的智能对象
置入链接的智能对象,简单地说就是在一个psd文件中链接引用另一个psd文件,并同步其样式效果,而我们平常用到的“智能对象”则是对图像数据进行缩放的保留。
举个例子,A.psd置入链接的智能对象B.psd,当B.psd的样式内容发生修改时,A.psd中的链接样式内容也同步更新,具体操作如下图:
最低支持版本:Photoshop CC 2014.2
操作快捷键:拖动到PS中的时候按住Alt键
下面我将用3个实例来讲解,如何将“置入链接的智能对象”运用到实际项目中以实现UI组件化复用,从而较大地提高工作效率和规范项目文件的管理。
1. 将图层组作为置入链接智能对象
步骤1 —组件抽离
现在有2个文件「界面1.psd」「界面2.psd」,它们的顶部导航栏图层组的样式完全一致,将该图层组复制新建并保存成「导航栏.psd」
步骤2 — 置入组件
分别在「界面1.psd」「界面2.psd」中执行【文件-置入链接的智能对象】操作,置入共用的组件「导航栏.psd」,于是这2个psd中均出现一个智能对象图层——顶部导航栏(小锁头图标表示链接引用)
步骤3 — 批量修改
现在要批量修改顶部导航栏的标题大小和粗细,先同时打开「界面1.psd」「界面2.psd」,在「界面1.psd」中鼠标左键双击智能对象图层“导航栏”进入「导航栏.psd」,修改样式并保存,然后这两个psd的导航栏样式便同步更新了。
以上仅仅是两个psd的运用示例,真实项目中经常会有数十个psd,这种方法可以做到一改全改,极大地提高修改效率。
另外,由于相同的图层组被抽离出去,当前文件只作为一个智能图层,因此项目文件的图层数量更精简,层级更清晰,以便快速找到目标图层、减少psd体积增大引起的操作卡顿。
2. 将图标作为置入链接智能对象
步骤1 — 抽离组件
现在有「界面1.psd」「界面2.psd」,它们都有两个相同的图标,将这两个图标抽离出来,分别保存成「图标1.psd」和「图标2.psd」
步骤2 — 置入组件
分别在「界面1.psd」「界面2.psd」中执行【文件-置入链接的智能对象】操作,置入上面的图标文件
步骤3 — 批量修改
现在我想修改这两个图标的颜色,先分别打开「界面1.psd」「界面2.psd」,鼠标双击智能对象图层可进入对应的图标文件,修改并保存,2个psd的图标图层内容便同步更新
步骤4 — 批量切图
现在我想一次性将这两个图标输出切图,先设置一个输出PNG图片的动作,然后进行【文件-自动-批处理-输出PNG动作】的操作,就可以一次批量输出所有图标,当项目中图标数量较多时,能极大地提高切图效率
3. 将图层和图标的结合作为置入链接智能对象
第3种运用方法则是结合以上两种,通过【界面-控件-图标】树状结构的嵌套方式,进行链接智能对象的置入,优化项目文件的结构,使之更条理化和可控。
项目文件的管理
由于psd文件的命名或存放路径一经修改便会使链接的智能对象失效,因此我们需要从项目开始前就定义整体的文件层级结构,减少设计文件的管理成本,以下是我实际项目中习惯使用的文件分类方式:
良好的项目文件管理和置入链接的智能对象是一对黄金搭档,在一起才能发挥巨大的作用,另外良好的项目文件管理能力也是每个优秀设计师必须掌握的。
注意事项
1. 链接智能对象的更新
还是拿上面的例子来说明,如果先打开了「导航栏.psd」并作出修改,再打开「界面1.psd」「界面2.psd」文件,则需要在这两个文件的链接智能对象图层上右键点击“更新修改内容”才可同步更新。
2. 链接智能对象的失效
如果被链接的「导航栏.psd」的文件名称或硬盘存放位置被修改了,那么「界面1.psd」「界面2.psd」中的链接智能对象就会失效,需要分别在这两个psd中的链接图层上,鼠标右键重新选择要链接的文件,因此在项目开始前要提前规划整体文件的分类,并规范图标的命名,不要轻易更改名称和存放位置。
3. 适用场景
置入链接的智能对象更适合页面模块和重复控件比较多的项目,简单的项目使用了反而会增加复杂度。
写在最后
设计师的设备可能落后,思维却不能被限制,重复低效的事情一定会有解决的方法,宝贵的时间应该花在创意构思上,才能走得更远。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册