如何让你的切图输出更快、更加高效?方法全在这里

上海/UI设计师/8年前/557浏览
如何让你的切图输出更快、更加高效?方法全在这里

如何让你的切图输出更快、更加高效?方法全在这里

晚上好,上期U妹给大家讲了《一款APP设计的从0到1》之界面切图和标注,今天U妹将切图的问题再补充一下,让你更加高效的去切图。


热门回顾:

       《一款APP设计的从0到1之:项目立项篇》

      《一款APP设计的从0到1之:项目预估时间篇》

      《一款APP设计的从0到1之:界面设计篇》

      《一款APP设计的从0到1之:切图标注篇》


今天主要说的是关于如何更快更高效的输出APP Icon,不包含界面内的其他图标,很大一部分小伙伴切icon应该是做一个最大的1024x1024px,然后再根据需要一个一个的去调整尺寸在输出,既费时又费力,而我则用不了30秒就可以将所有icon一键全部输出,并且可以设置切圆角还是切直角,那就是下面这2个文件

d4c65954fbc7a8012193a31cfd3f.jpg

▲今天要发给你的文件


给大家准备了2个PS的动作,从名字可以看出来,一个是Android的,一个是iOS的,这2个文件会发给大家,接下来我给大家演示一下如何切icon,请备好小板凳。


第一步:


载入ps动作。打开文件夹可以看到,有一个是ATN文件,这个就是PS的动作文件,相信大家都知道如何载入,U妹这里就不多说了(不会载入请私聊我哈)

79af5954fbd2a8012193a3e65096.jpg

▲PS切图动作文件


7c6e5954fbdba8012193a3cf59d6.jpg

▲iOS和Android动作导入后效果图


第二步:


打开文件夹里的PSD文件,将你要输出的icon拖入相应的图层就可以一键输出了,U妹先来切一个iOS圆角的做个演示

d7995954fbeda8012193a31ac841.jpg

▲icon输出演示(iOS圆角)


66455954fbf9a8012193a36c829d.jpg

▲iOS圆角icon输出资源


b1565954fc06a8012193a3fc6e85.jpg

▲icon输出演示(iOS直角)


12af5954fc1ca8012193a383fc96.jpg

▲iOS直角icon输出资源


87525954fc31a8012193a373eb3f.jpg

▲ Android icon输出演示


8fe25954fc3aa8012193a3c69858.jpg

▲Android icon输出资源


我们可以看到速度和效率是不是快到没朋友,iOS切图自动命名@2x、@3x,安卓6种尺寸全部输出了,输出的iPhone全部图标切图资源,包括桌面图标、商店图标、搜索图标等等(反正就是全部的icon呢);有疑问和问题也可给U妹留言,我们下期再见!


U妹已为大家打包准备好了所有文件

请点击下方“原文链接”带走

↓↓↓

5
阅读原文
|
Report
|
16
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
大家都在看
Log in