UI切图插件Cutterman使用方法
UI设计者 – 一个免费自学UI设计APP
UI切图插件Cutterman使用方法
发表于: &?
?& 1,045 views &?&
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。
***前准备：
1、一款可用的photoshop，目前支持的版本有cs6/cc/cc2014，那种绿色免***的不行噢~
2、Adobe Extension Manager。它是用来管理PS插件的（如右图），一般会随着PS***而携带着，如果没有，请到这个地址下载***。注意这个软件的版本要和你PS的版本保持一致，不能用Adobe Extension Manager CS6来给PS CC***插件。
3、下载最新版本的Cutterman，它是一个.zxp后缀的***包。
　　开始***：
1. 双击下载的***包，默认就会用Extension Manager，按照提示步骤进行***即可。
2. ***完成之后，打开/重启photoshop，在菜单栏选择”窗口” -& “扩展功能” -& Cutterman就可以打开啦。
如果你是要给CC2014***cutterman，需要先将Adobe Extension Manager CC的版本升级到7.2的版本才行。
　使用方法
目标平台选择：
Cutterman提供了面向三种平台的切图特性
IOS: 如果你是为Iphone设计界面，请使用ios标签，它能够为你生成符合ios系统的单/双倍图
Android: 如果你是为Android设计界面，请使用Android标签，它能够生成符合Android系统的各种DPI分辨率图片
PC: 如果你是做web端的设计，请使用PC标签，它可以支持输出png/jpg/gif等各种格式和质量大小的图片
选择完平台后，会进入到主界面，如果需要切换平台，可以点击界面左上角的箭头按钮，切换目标平台。
　　导出图层
导出单个图层：
1. 选中一个你需要输出的图层。
2. 点击“保存路径”按钮，设置你想导出到本地的某个文件夹。
3. 点击“导出选中图层”按钮。
　　注意 !一个图层组对Cutterman而言，仍然表示一个图层，会将组里头的所有内容合并作为一个图层输出。
导出多个图层：
1. 选中多个图层
2. 点击“保存路径”按钮，设置你想导出到本地的某个文件夹
3. 点击“导出选中图层”按钮
注意 !选中多个图层进行导出，默认会逐一输出每个选中的图层，如果希望将选中的多个图层合并导出，请在界面又上角的设置项里头进行设置。
　　导出固定尺寸图片
对于大多数icon而言，在输出的时候，会将icon周围的透明像素进行裁剪，只保留有像素的内容。这样输出的图片尺寸即是icon的绝对像素尺寸。
但是很多时候，我们处于美观统一、开发易用等因素，希望能够输出固定的icon尺寸，这时就需要用到Cutterman的“固定尺寸”设置。
1. 在固定尺寸的位置填入你希望输出的宽和高，注意必须要比icon的尺寸要大。
2. 点击导出选中图层按钮。
注意 !设置固定尺寸后，icon会默认居中显示。如果设置的尺寸比icon尺寸小，会出现icon被裁剪的现象。
本文链接: http://www.//uiqietuchajiancuttermanshiyongfangfa/
你在找他们吗?
学员自发组织群
Copyright&2016&&& 京ICP备号 |举报该问题：
含有法律法规禁止的内容
含有违反《玩家守则》的内容
含有违反《推广员守则》的内容
含有无意义的内容
含有广告相关的内容
含有抄袭或***行为的内容
含有不文明言论的内容
含有信息安全问题的内容
含有游戏意见或建议反馈的内容
含有与“知道”定位不符的内容
投票得出最佳***
F 10系统设置里有那个，镜头缩放效果，设置下就可以了
擅长：任务玩法
官阶：七品云骑尉
其它高悬赏问题
网易通行证使用 Adobe Illustrator 做 UI设计----切图、导出的秘诀
本帖最后由 高志远老师 于
21:16 编辑
在上一课《使用 Adobe Illustrator 做 UI设计----多重填充与多重描边》里，我们学习了如何使用 Adobe Illustrator 的多重填充和多重描边功能制作一个简单的界面。这个界面背景是浅灰色，上面有一个绿色的按钮：
现在，这个界面设计好了，问题出来了，如何导出成 iOS 或 Web 前端工程师可以用的界面？一般来说，切图是设计师最痛恨的工作流程环节，因为只是按部就班的工作，而且麻烦繁琐，始终要小心谨慎地去做。不过，由于 AI 是基于矢量对象进行创作的，切图这个环节不算太麻烦。在这一节教程里，就说说 AI 基于矢量对象强大的切图、导出功能。1. 导出界面设计图如果要是想导出整个界面设计图的话，那很好说。AI 有两个关于导出的命令，一个就叫「导出」，另一个叫「存储为 Web 所用格式」。在这里要使用后者。因为只有「存储为 Web 所用格式」才能保证导出的文件是像素精确的。在执行这个命令之前，确保设计图上所希望显示的东西都没有被隐藏掉。然后执行命令，格式选择 PNG，点击「存储」按钮就可以导出整个设计图了。一般来说，做 UI 设计导出成品，格式除了 PNG 以外基本没有其他的选择。BMP 太大了，微软自己都基本不用了。用 JPG 图片的锐边、线条等部分（学名称之为图像的高频分量）会因为有损压缩而须掉。只有 PNG 在保证文件大小不会太大的同时，仍然为无损格式，这一点对 pixel-perfect 要求较高的 UI 设计是至关重要的。并且 PNG 还有一个好处：PNG 支持半透明。所以说，如果没有特殊要求的话，导出应一律为 PNG 格式。为 iOS 做设计的话，UI 资源，包括切图、主屏幕图标、启动画面等等应全部使用 PNG 格式。导出后查看图像，可以看到图像的大小就是我们预定的 320×480 像素大小，且按钮做到了像素精确，边缘没有糊掉：～～～2. 导出每一个 UI 元素在正式聊这个话题之前，为方便说明，我们再放上去一个按钮。选中按钮，复制一下，新建一个新图层，把这个按钮粘贴到新图层里去。再根据上一节课所学的办法，把按钮的底色改成灰色。改好后差不多应该是这个样子：现在的任务是，分别导出两个按钮的切图，供前端工程师使用。
更多详细切图技巧回复帖子可见哦。。。
游客，如果您要查看本帖隐藏内容请
牛帖: 5 好贴: 5 &
来学习& && && && && && && && && &&&
高老师，有相关的视频吗，很期待高老师系统的视频哦
要好好学习 有人吗？加我QQ
一起交流UI
很不错呀 一直都想学切图呢
来看看，希望老师多分享一下切图的知识，谢谢老师。
快速切图对于我来说还是个蛮大的问题
看看切图。。。。。。。。。。。。。。。。。。。。。。。。
谢谢你的分享哦！
谢谢你的分享哦！
谢谢你的分享哦！
不错哦。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
学习切图技术
使用 Adobe Illustrator 做 UI设计----切图
学习学习学习学习学习学习
谢谢老师， 辛苦了
轻松打造安卓高级工程师打造会代码的全能UI设计师做被争抢的ios开发者
? ? ? ? ? ? ? ? ? ?
Powered by