Cutterman切图简单教程!UI设计小白最爱的切图攻略

分享到:更多 ()

目前很多手机app设计师都在使用Cutterman工具进行切图,因为这个软件是国内的软件,切图也必将方便。也提供了3个平台的切图方式。

官方网址:http://www.cutterman.cn/

最新的Cutterman切图插件如下图:

cutterman

IOS: 如果你是为Iphone设计界面,请使用ios标签,它能够为你生成符合ios系统的单/双倍图

Android: 如果你是为Android设计界面,请使用Android标签,它能够生成符合Android系统的各种DPI分辨率图片

PC: 如果你是做web端的设计,请使用PC标签,它可以支持输出png/jpg/gif等各种格式和质量大小的图片

选择完平台后,会进入到主界面,如果需要切换平台,可以点击界面左上角的箭头按钮,切换目标平台。

 

我们先来回顾一下切图知识点重点提示:

1)、所有切图必须为偶数。不管是ios的切图 还是android 的切图。

2)、可平铺部件切图时可如下图:

Image title

带圆角按钮切图时可如下图

Image title

同理

Image title

并在效果图中标出具体大小和尺寸。

3)、ios切图需要切出2套,一套是@2x png和一套@3x的png、png格式为24位的png。

APP界面具体的切图细分:引导页、启动页、APP图标、需要作为整块的元素都是要切除@2x和@3×2套的切图素材。

如果需要平铺的元素:如背景、线条、按钮、渐变等等 都是切.9.png   点九图是适合ios和android 2大系统的。

现在精准化的元素切图是保证还原高品质app界面设计的保证。切图的技巧决定移动app界面设计美观度。当然还有标注。

4)、所有表单元素务必切两种状态:比如按钮的正常状态和按下状态  checkbox的选中状态和未选中状态等等。如下图的图标切图状态示例图:

Image title

 

25学堂的关于Cutterman切图的干货教程有:

1、易上手的APP切图教程以及Cutterman切图视频演示

2、移动APP设计之PS切图插件大汇总,值得收藏

3、移动APP切图工具Cutandslice以及使用教程

4、Android APP界面标注、尺寸换算和APP标注工具

5、Android尺寸标注设计大全和Android切图规范

 

Cutterman ps插件安装完成之后,如何来使用cutterman工具进行切图。3步轻松搞定Cutterman切图。算是一个比较简单的Cutterman切图教程。

Image title

Cutterman切图简单步骤:

第一种情况:导出一个图层的切图素材。

1. 选中一个你需要输出的图层。

2. 点击“保存路径”按钮,设置你想导出到本地的某个文件夹。

3. 点击“导出选中图层”按钮。

注意 !一个图层组对Cutterman而言,仍然表示一个图层,会将组里头的所有内容合并作为一个图层输出。

 

第二种情况:导出多个图层切图素材:

Image title

1. 选中多个图层

2. 点击“保存路径”按钮,设置你想导出到本地的某个文件夹

3. 点击“导出选中图层”按钮

 

注意 !选中多个图层进行导出,默认会逐一输出每个选中的图层,如果希望将选中的多个图层合并导出,请在界面又上角的设置项里头进行设置。

 

第三种情况:固定切图尺寸来切图素材

Image title

1. 在固定尺寸的位置填入你希望输出的宽和高,注意必须要比icon的尺寸要大。

2. 点击导出选中图层按钮。

注意 !设置固定尺寸后,icon会默认居中显示。如果设置的尺寸比icon尺寸小,会出现icon被裁剪的现象

以上就是使用Cutterman切图的三种情况一一跟大家讲解啦。这回是不是很容易上手来进行Cutterman切图啦。

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » Cutterman切图简单教程!UI设计小白最爱的切图攻略

4
分享到:更多 ()