CHUTTERAN对界面切图的好处和教程

在目前主流的界面设计切图工具中,ui设计师们都比较喜欢使用Cutterman工具进行切图,因为这款切图工具是国内研制的,一方面体现中国设计师的爱国,另一方面,这款切图工具自身的功能使用起来非常方便,并且有个平台的切图方式。

新版cutterman的插件新功能如下:

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

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

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

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

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

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

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

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

同理

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

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

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

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

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

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

软件的使用:

如何来使用cutterman工具进行切图。3步轻松搞定Cutterman切图。算是一个比较简单的Cutterman切图教程。

Cutterman切图简单步骤:

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

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

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

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

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

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

1. 选中多个图层

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

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

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

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

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

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

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

相信还没有使用这个软件的ui设计师们,在使用过后应该会发现这个切图工具的好处。

更多的ui培训文章--ios 3d touch设计的秘密

每天都一点点ui培训,每天多一点点经验。

找在线ui设计培训机构,就找趣达ui培训学院。

原文来自:25学堂

UI设计

时间: 2024-10-10 07:41:33

CHUTTERAN对界面切图的好处和教程的相关文章

【转】APP界面切图命名和文件整理规范

转自:http://www.chinaz.com/design/2015/0908/443732.shtml 规范的命名方式可以提高客户端程序员的开发效率和团队协作.个人觉得标识符命名原则:尽可能的用最少的字符而又能完整的表达标识符的含义. 切图命名英文缩写三个原则: 1 较短的单词可通过去掉"元音"形成缩写 2 较长的单词可取单词的头几个字母形成缩写 3 此外还有一些约定成俗的英文单词缩写. 第一部分:iOS  APP界面设计切图命名规范 以上切图命名规范信息图来源:http://w

PSD网页切图制作HTML全过程教程

今天的这个教程,教大家如何把psd页面利用div+css切割成html页面,这类的教程,本站做的一直都很少,大多讲的都比较零碎的一些东西,在今后,我们将慢慢发布翻译出更多这类的教程,供大家学习,转载请著名来源,以及站码翻译,谢谢.... 首先看看效果 下面的图片就是效果图,切割出来后,可能头部和底部会宽点..... 新建文件夹 开始时,在您的计算机中创建一个文件夹.我把它命名为zmool.再在文件夹中创建新文件夹images,放网站的所有图像.接下来打开代码编辑器(Dreamweaver),并在

iOS界面设计切图小结

iOS界面设计切图小结 APR 12TH, 2013 1.基本尺寸 (1)界面 实际设计时按: iPhone4.4s:640px*960px iPhone5: 640px*1136px iPad:1536px*2048px (2) 图标: 1024px*1024px 圆角180px 提交1024px*1024px 方角 png格式图片 2.图形部件及字体 (1) 为显示清晰 所有图形部件尺寸必须为偶数 样式中阴影.发光.描边的数值也必须为偶数 (2) 为方便用户点击 所有可点击的部件需大于88p

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松

切图及效果图管理

前言 设计师和程序猿沟通总是需要花费不少时间,并且很多时候因为没有规范可依最终导致设计师修改设计或切图(开发童鞋一般比设计师更强势).凡是这类问题都可以通过规范来改善和提高效率.网上很多编码规范和设计规范,但是缺乏程序猿和设计师之间沟通的规范.下面我和大家分享一下目前我工作中程序猿和设计师的沟通规范--切图命名及切图管理.如果你有更好沟通规范欢迎留言分享,也可以加群沟通:196761677.311536202. 命名规范 目前存在的问题 设计师不知切图如何命名,尤其是图片多了之后. 设计师不知道

前端必备技能之Photosh切图

切图:即从设计稿里面切出网页素材 一.使用Photoshop工具 工具的使用: 1.将文字与标尺的单位的设置为像素 2.打开这五个窗口,关闭其它窗口,保存工作区方便以后使用 3.工作区弄乱时,可以使用上图中的复位,或者在下图中选择工作区: 4.切图常用工具 注意:在工具菜单栏中右击会出现同组备选工具: 5.放大缩小画布: 1).点击缩放工具 2).ctrl  + 加号/减号 3).alt  + 鼠标滚轮 6.辅助视图 标尺快捷键:ctrl + r 7.获取文字大小和行高 1).文字是单独图层,使

ps切图步骤

我们要用到的切图工具有两个,一个是切片工具,另一个是切片选择工具.左边有个小按钮,你按住它这三个选项就会显示出来. 2.这是我等下用做示范的图片. 3.在切图之前有一点需要说明的是,如果你需要辅助切图,你可以先添加参考线.在PS上方的菜单栏,你可以在视图里找到新建参考线选项.如上图,我已经添加两条参考线,因为参考线在鼠标靠近的时候有吸附功能,所以切图不容易切错位置. 4.好了现在我们开始切图,我用切图工具先裁一个框出来,我们可以看到图片上已经有01的框,但是右边02显示为灰色. 5.我继续用切图

PS切图篇

一.PS界面设置 1.新建(ctrl+n) 初始化尺寸参数 预设:自定 宽度:1920px 高度:自设(如:2000px) 分辨率:72像素/英寸 颜色:RGB/8位 背景内容:透明 存储为预设 2.移动工具设置 快捷键:V 作用:选择和移动图层 2.1选择图层 自动选择不用勾选,将后面设置为图层 windows系统:Ctrl键+单击鼠标左键 苹果系统:command+单击鼠标左键 2.2显示/隐藏图层 点击图层前面的小眼睛 显示/隐藏所有图层: 在小眼睛那里选中一个图层右键点击->显示/隐藏所

做一个会PS切图的前端开发

系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方