提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
小伙伴们在用sketch作图时是不是经常出现“满屏幕”找图标切图的情况呢。以下则是笔者利用组件功能整理切图的一点小经验,欢迎大家多多留言交流和给予指正^ _ ^
设计稿哼哧哼哧搞完了,终于要切图了,可是......
东一个西一个icon......太乱辣,不开森...>-
也有隔壁分享经验的小伙伴提议,把需要切图的icon拷贝出来,整理在一个画板上。
其实笔者起初也是这么干的,后来发现了“创建组件”功能决定来这里安利一发儿
- 1 -
把“创建组件”、“组件”放在工具栏常用的地方
工具栏空白处右键单击鼠标—自定义工具栏
将“创建组件”、“组件”分别拖拽到工具栏上方便使用
- 2 -
开始整理切图啦~
icon编好组,命好名,选中待切icon,然后点击“创建组件” 按钮
此时,页面管理里面自动新建symbols/组件页面
再随手把其他icon一样的操作。这样就可以把icon收集到“symbols/组件页面“里啦!每个icon被自动放在单独的画板上,这个特别有用,后面会讲到!
这样“被创建成组件的icon”在设计稿中不能直接编辑,但双击icon后可以在组件页面编辑,我把它理解成PS中的“智能对象”,设计页面和设计icon互不干扰。
组件在设计稿中变成不可编辑状态
在组件页面可编辑
从设计稿中跳转过来编辑完icon后,左上角可以返回到原来的设计页面继续设计。
- 3 -
库的功能
组件有除了类似“智能对象”的功能还有库的功能。创建为组件后,这些icon形成一个库,并可以在“组件列表”中随时调用。
值得注意的是“组件”就像模版一样的存在,icon在组件里做了修改,则icon在设计稿中被调用过的地方也会相应地修改。
点击需要调用的icon
把icon放在想放的位置,单击鼠标左键放下
- 切图 -
在组件页面切图,既不影响设计还可以确保切图的精确度。
小伙伴们是不是会出现,肉眼看去44*44的icon,切图出来却是45*44。像笔者这种懒鬼23333......切完不会再去检查尺寸对不对,经常出现这个问题。在组件里面切图可以避免这个问题。
往往在设计稿中直接切icon,上下左右调切片大小蚂蚁线,各种烦,最后切完还是可能出现多出1px的现象..............这个就要说回前面把icon自动陈列在单独的画板上的功能了。icon创建为组件后,被放在单独的画板上,问题就直观了。
通过导出画板来切图,不管icon本身有哪些隐藏的东西 , 调整好画板的尺寸就能确保输出的尺寸正确啦~
调整好尺寸后就可以放心切图了!
。
。
。
以上,仅仅是笔者一些小经验,如果觉得有些帮助的话多多点赞支持哟~谢谢观看!
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册