| 522: 链接超时
-- Event ID: 2c69bf27de001e89
如果您是网站管理员，点击查看。如需网站监控，可以使用。
您的浏览器
百度云加速只需一步，快速开始
扫一扫，访问微社区
后使用快捷导航没有帐号？
切图居然可以这么快-多种切图方式对比分析
马上登录，结交更多好友，享用更多资源，如有社区相关问题，可至此帖下留言/bbs/thread-.html（将网址复制粘贴即可）让你轻松玩转社区。
才可以下载或查看，没有帐号？
前言Fireworks向来擅长切图，不过到了FireworksCs6版本的时候，Adobe对它停止了更新，网页三剑客Fireworks估计会慢慢淡出我们的工作界面。因为与此通过Adobe在Photoshop CC版本开始，不断强化切图功能，让我们来探索一下。
一. 传统PS切图
1. 切片工具我们都知道PS里面有个切片工具，可以给页面的模块划出不同的切片分区，并根据需求导出。
1.png (4.19 KB, 下载次数: 1)
13:59 上传
效果如下：
2.png (62.17 KB, 下载次数: 0)
13:59 上传
但是这样的PS切图其实带来诸多不便，效率低下，比如不能很好的导出当前所选切片，但不到切片分区的宽高。这些功能在Fireworks都是很基本，很实用的。
2. 复制图层新建画布导出
当然也有些人这样子用不着切片工具。根据图层建一个选区，按Ctrl+shift+C，复制盖印图层，
3.png (40.28 KB, 下载次数: 0)
13:59 上传
Ctrl+N，新建画布，填入刚刚复制图层，
4.png (18.59 KB, 下载次数: 1)
13:59 上传
最后在Ctrl+Alt+Shift+S，存储为Web格式。
5.png (72.94 KB, 下载次数: 1)
13:59 上传
这样子能比较方便观察到图片，分区的大小，但是步骤太多，也不太合适。
二. 其他切图方式
高效切图方式也有挺多，比如说用切图的动作，安装切图的扩展插件。
1. 切图动作
安装非常便捷，双击即可安装完成，在PS界面按F9调出动作面板，你会发现多了2个动作，并自带设置了对应的快捷键F5和F6.
6.png (2.08 KB, 下载次数: 1)
13:59 上传
有了切图动作后，选中图层或分区，按F5 即可立刻导出，我们切图效率几乎是飞一般的提升。
&优点&可以认为上面传统的复制图层，新建画布，导出等一系列操作，现在变成了个快捷键 F5，一键即可切图.
&缺点&当然这一种方式切图方式也有些不足的地方，如每次只能切一个，而且每次保存的时候还得重命名。
2. 扩展插件
&安装&按照提示安装好拓展插件后，在PS的窗口菜单 & 扩展功能& Cutterman
7.png (13.24 KB, 下载次数: 1)
13:59 上传
点击后我们会得到如下面板。
8.png (15.54 KB, 下载次数: 1)
13:59 上传
&使用&对于CutterMan来说，他提供了一个切图面板，切图面板我们可以设置导出的格式，品质，同时设置好保存目录后，点击 “导出所选中图层”大按钮后，即可按照当前图层名称导出切图到对于的目录。
9.png (27.55 KB, 下载次数: 1)
13:59 上传
为了导出图层命名更为方便，我们可以预先给图层命名，那么导出的图片就不需要重新命名。
10.png (2.24 KB, 下载次数: 1)
13:59 上传
11.png (54.17 KB, 下载次数: 1)
13:59 上传
对于CutterMan插件，我们还可以设置导出图片的大小。
12.png (15.12 KB, 下载次数: 1)
13:59 上传
导出图片如下：
13.png (37.85 KB, 下载次数: 0)
13:59 上传
&优点&可根据项目需求切片预设尺寸，格式，品质和保存目录，只要图层命名规范，切图也就是点一下按钮的事情，切一堆图，也只是点点点。
&缺点&插件的安装步骤比较复杂，悬浮面板占界面位置，影响视线，改名字导出需要手动删除旧图片。
三. Photoshop 全自动切图
在Photoshop CC 开始，为我们提供了便捷的多种切图方式，如图像导出，图像资源生成器。
1. 快速导出
在图层菜单下，多了快速导出的选项，并且赋予了快捷键，我们不需要安装任何插件和动作，即可一键导出。
14.png (11.29 KB, 下载次数: 1)
13:59 上传
2. 图像资源生成器
图像资源生成器才是重点，切图都是全自动的事情。
&准备工作&1.在Photoshop中点击“编辑”&“首选项”&“增效工具”，选择启用生成器，重启PS
15.png (39.39 KB, 下载次数: 0)
13:59 上传
2. “文件”&“生成”&“图像资源”
16.png (29.79 KB, 下载次数: 1)
13:59 上传
&自动切图&我们只需要把图层命名好，并带图片格式后缀名即可自动导出切图。
17.png (3.39 KB, 下载次数: 0)
13:59 上传
在PSD源文件同级目录下，自动生成一个文件夹，里面存放的就是刚刚修改过命名的两张图片。
18.png (13.2 KB, 下载次数: 0)
13:59 上传
19.png (28.89 KB, 下载次数: 3)
13:59 上传
以后我们切图都变成了修改图层名称的事情了，连点击按钮的步骤都省略了。
&图像品质&
默认jpg格式以90%品质生成，png格式以32为图像生成，gif以alpha透明度生成。1.Jpg格式在后缀后面加上1-10，即可导出 10%~100%的图片品质。
20.png (3.15 KB, 下载次数: 1)
13:59 上传
21.png (12.79 KB, 下载次数: 1)
13:59 上传
2.png格式输出品质可以设置为8，24，32
22.png (3 KB, 下载次数: 1)
13:59 上传
&图像大小&要导出不同的大小分辨率的图片，可设置大小参数，参数尺寸要和名称之间加一个空格。
23.png (3.45 KB, 下载次数: 0)
13:59 上传
24.png (13.76 KB, 下载次数: 0)
13:59 上传
&图像缩放&当然也可以设置图片缩放，缩放的话，参数单位换成百分比即可。
25.png (3.94 KB, 下载次数: 0)
13:59 上传
26.png (12.21 KB, 下载次数: 1)
13:59 上传
&优点&图像资源生成器切图只需要改图层名称，修改图层名称，图片名称同步更新，删除后缀名，图片资源同步删除。出图的时候图层命名足够规范，几乎就把所有切图的步骤都省略了，全部PS自动完成，解放我们切图的双手。
总结经过对比和研究，其实Photoshop切图的方式比Fireworks更加多元化，并且在Photoshop CC版本以上对切图功能有了飞跃的进步，几乎可以解放我们的双手，让我们更专注于布局本身，大大提高我们的工作效率。
步骤这么详细，我学会了，非常感谢
很棒的小技巧啊
太赞啦，棒棒哒
这个得收藏▲ 点击“设计物语”，关注与设计有关的故事文 | 转自：briefecho# 最开初开始学习UI设计时，可能很多同学都是先从临摹图标开始的吧。之后要从临摹到原创，我们需要积攒很多的知识，其中制作技巧和创意思考一个不能少。 因此UI范儿开设了“临摹”板块。为了大家更方便交流互相学习，&成为UI设计师&微信群已经开通，加我微信入群学习，微信号：zhegdc（请注明：临摹） 希望借此能为大家提供更多的灵感并激励大家不断的学习，成为真正的UI设计师。#刚入门UI的小伙伴是不是不知道app该怎么切图、规范是什么？怎么和程序员同学配合，用什么工具更方便，怎么标注自己的设计稿，怎么做到一稿适配多种机型，这篇文章将一一解答你的疑问!依旧声明：这里写的不是一种规范，只是一种工作方法，大家在具体工作中，一定要灵活运用。另外，技术的更新是非常快的，所以，还是要灵活运用~我本身是一名GUI设计师，所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写，相当于工作流程的介绍吧；公司不同，流程不尽相同，但是终究还是能有些帮助。这里我们只说IOS系统下的设计，至于Android，因为尺寸太多，涉及的东西比较乱，我整理好以后再说吧。页面篇幅比较长，不推荐一次性看完，那样你潜意识里就会对它厌烦了，所以可以有时间读一读，看一看。Part 1 项目立项完善的公司会把项目相关人员聚集起来，产品经理会把产品详细的用原型展示出来，包括产品定位，市场需求，主打卖点，产品性质以及各模块具体功能，逻辑跳转演示一下；之后会评估项目用时，各部门协调，项目启动。话不多说，接到原型，那我们应该做什么准备工作呢？在项目设计之初，就该进行项目归档整理，我的习惯是“项目名称+版本序列”；没有最正确的工作方法，只有最适合自己的工作习惯。我个人习惯把不同类型的文件划分到不同类型的文件夹里，有的设计师习惯全都放在一个文件夹里，如果文件少还说的过去，如果页面过多，就知道这样的利弊了。工欲善其事必先利其器，基本上我做界面设计用的最多的就是PS和AI了，版本无所谓，用着舒服就行，推荐版本高一点的，低版本好多方便功能都没有。标注工具：PxCook，目前我还没用上Mac，所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手，虽然它还附带切图功能，但是比较鸡肋，不推荐用它切图。切图工具：Cutterman 点击下载一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS 6的已经不维护更新了。推荐安装官方完整版PS cc，然后自行破解。官网上有安装使用教程，自己研究下吧，因为我也是最近才开始接触这款插件。Assistor PS 也是一款PS的切图标注插件，也被誉为神器；我使用了下，感觉相当不错，就是标注还没太适应，推荐一下这个。标注工具以及这两款插件我都会上传，至于安装方法去“百度一下”吧，易学易用。Part 2 Photoshop现在常用的几种设计尺寸1. 640*960 4时代的尺寸，刚接触APP设计用的是这个尺寸，拟物盛行的时代(现在用这个尺寸设计的应该比较少了吧)；2. 640*1136 5/5S/5C，IPhone更新，咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸)，进入扁平的时代了；3. 750*1334 6 目前我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6 plus；我记得IP6推出后，我问总监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x了，改一改上下都能照顾到。推荐做设计稿的时候使用IPhone6的尺寸进行设计。IP 6的尺寸相比于IP 5来说，很多系统控件尺寸并未变化，只是高度也就是内容显示区域发生了变化。下面是IPhone 6的空白文档，我建立了参考线。文档建立之初就设置好参考线是个很好的工作习惯，我希望更多的设计师可以养成更好的工作习惯。上下的参考线很容易设置，因为是根据IPhone自身系统设置的，左右的参考线我习惯设置为24px，也就是显示内容距离边框的距离。这不是绝对的，我和总监研究过，究竟是设置为左右30px还是24px比较好，通过对国内国外各种APP的对比，觉得24px更适合一些，不宽不窄，这个完全是设计师个人的设计习惯，所以不要当成什么规范，确切的说，整个屏幕你都可以随便做，但是我们这里说的是正常页面。Part 3 页面标注标注是重中之重，工程师能不能完整的还原设计稿，很大一部分取决于标注；如果不清楚你该怎么标，一定要和工程师沟通！每个工程师实现效果的方法不同，我在这里所说的，是我的标注习惯，但应该适用于大部分的设计师和工程师。不需要每一张效果图都进行标注，你标注的页面能保证工程师开发每个页面的时候都能顺利进行即可；这里的标注软件使用的是PxCook，先标一个空白文档，看看都需要什么吧这里要说一句，PxCook虽然可以自动读取颜色，但是还不能对PSD文档里设置的透明度读取，所以如果你用了透明色，推荐你用文字标注直接写出来原色值以及透明度。基本上我并不使用PXCook里面的颜色标注工具，而是使用文字标注工具，因为要标识两种色值，PxCook只能显示一种色值。一般我的习惯是PS和标注软件同时打开，因为有时候标注软件并不能完全的把PSD文件里的东西标注出来，所以标注也要灵活运用，如果无法标注，就到PS里查看一下，然后再使用文字标注说明一下。标注颜色是使用16进制，还是RGB：都用得到，要看实现什么东西，建议标注颜色时，两种色值表达都标上(16进制&RGB)。你需要标注的内容有：1.文字需要提供：字体大小(px),字体颜色；2.顶部标题栏的背景色值，透明度；3.标题栏下方以及Tab bar上方其实有一条分割线，需要提供色值；4.内容显示区域的背景色(如果是全部页面白色，那就和工程师说一句就行)；5.底部Tab bar的背景色值。因为页面的种类成千上万，我想每种页面都讲一下，但是不现实，希望可以举一反三。下面的是一个比较普通的首页页面，但是基本上一款APP中应该标的元素都有了~一般页面你需要标注这些地方：所有元素统一距离屏幕最左24px(全局性的数据可以直接和工程师沟通，也可以标注，推荐标注出来)1.标题栏：背景色，标题栏文字大小，文字颜色(不再赘述)；2.Banner：所有撑满横屏的大图，不需要横向尺寸，把高度标出了就可以了;3.菜单图标：图标的大小和图标的可点击区域不一定一致也就是说，图标可以做的很小，但是为了保证点击的准确性和流畅性，工程师可以把可点击区域设置的很大，这样标注和切图的时候就要注意，标注的是可点击区域的大小，切图切的也是可点击区域的大小，也就是用透明区域去补上，否则图片会模糊。在设计的时候就要考虑可点击区域的范围，比如X宝购物车页面左侧的小圈，可点击区域要比实际小圈尺寸大很多。这种类型的图标需要标注图标点击区域大小，图标距离屏幕最左最右以及上下的距离。至于图标的间距，因为有些时候可能 设计师不能完全做到1px不差，所以我基本不标，交给工程师让他们去处理，其实等距排列的图标不需要标间距，因为工程师还要动态适应不同的屏幕，标了间距也是白标(还是要和你的搭档沟通怎么去标注）；4.模块间隔：这个位置其实不是太重要，我习惯标注上这里，麻烦能少则少。5.图片+文字：这个应该比较常见，只标注一个单位(图+文)就可以了。图片需要标注宽高，因为工程师要设置图片区域，从后台调取，可以这么说，软件里除了横屏撑满的图，基本上所有的图片都要标注宽高。图片距离上下左右的距离，文字大小颜色，这里的文字其实算两个控件，标题文字以及说明文字，需要单独标出。Tab Bar：这个位置其实比较特殊，你可以单独标注图标大小+文字大小；还可以图标文字算作一个控件，整个切出来；我们工程师的习惯是用整个的，也就是图标+文字算作一个ICON，所以我基本不怎么标注单独的图标(这里可以和你的搭档去沟通一下，看他是什么开发习惯)。关于列表页类型的标注问题普通的列表有两种方法(去问你的搭档，他喜欢用什么方法)：1.标出行高，行内元素居中；2.标出行内元素，元素上下间距，确定行高；每种元素的位置如何确定：通常标注的都是元素距离屏幕最左侧的距离，比如上图的图标元素距离左侧24px，文字元素距离左侧100px。标注这个东西没有固定的方法，工程师的开发习惯不同，标注方法也不同。该怎么标注虽然可以在网上找到方法，但那不一定适合你，一定和自己的搭档勤沟通，方法是死的，人是活的……所有的页面标注总结起来就是：标文字，标图片，标间距，标区域；(上述图标出现了45px的单数，因为软件自动吸附上去了显示了图标本身的尺寸，切图的时候记得输出个偶数尺寸的切片)Part 4 切片资源的输出切之前务必要和你的工程师搭档沟通一下，该如何去切才能配合他的开发。全局性的切图常见问题① 你的所有设计尺寸，包括图形效果，应该尽量使用偶数。技术开发使用的尺寸是设计稿像素尺寸的一半，也就是说，如果你用24px的字体，技术那边就是设置为12px；所以标注的时候务必使用偶数，为了保证最佳的设计效果，避免出现0.5像素的虚边。② 切图尺寸应该提供几套？ico_car.png IPhone2G，3G，3GS使用(好像没人用这手机了吧)ico_car@2x.png IPhone4，5，6优先加载此尺寸图片(不是必须使用这个尺寸，是优先加载调用这个尺寸)ico_car@3x.png IPhone6 plus使用的尺寸可以简单的理解为倍数关系(其实是为了满足不同分辨率，我觉得不用过于深究)，如果你使用IPhone 6尺寸做设计稿，那么切片输出就是@2x，缩小2倍就是@1x，扩大1.5倍就是@3x了。理论上，为了达到最好的视觉效果，你应该输出三套尺寸，推荐输出三种尺寸的切片资源。我的工程师搭档要求我给两套尺寸就可以，也就是@1x @2x的两种尺寸，因为我们没有6 plus的测试机，所以看不到效果，据他说应该不会太失真，但是为了保证效果，我还是给三套尺寸。另外现在几乎看不到3GS了，所以需不需要提供一倍图，还是要和工程师讨论一下~@1x @2x @3x是开发工具Xcode软件需要的UI资源，命好名称后，IOS设备会自动的选取合适尺寸。③共用资源的图片，输出一张就可以<img src="/?url=/mmbiz/anThhEfibFljT9kjN9u设计物语(design-story)　
　文章为作者独立观点，不代表微头条立场
的最新文章
design-story|设计物语| 设计师交流平台，聚集30万设计师在这里分享阅读。这里每天分享与设计、设计师有关的故事。热门文章最新文章design-story|设计物语| 设计师交流平台，聚集30万设计师在这里分享阅读。这里每天分享与设计、设计师有关的故事。学习笔记：Cutterman切图与图层渐变样式的纠结_詹梦怡 - 厚朴〖HOPE〗工作室 >> 唯美设计 >>
学习笔记：Cutterman切图与图层渐变样式的纠结_詹梦怡
文章录入：詹梦怡　责任编辑：詹梦怡
上一篇文章：下一篇文章：
山居活计总天然　不落时人窠臼边Cutterman：是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 &#8220;导出web所用格式&#8221; 以及使用切片工具进行挨个切图的繁琐流程。
它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。
功能特性：
一键切图，真正解放双手
Cutterman能够让你只需要点击一个按钮，就自动输出你需要的各种各样的图片，快到没有朋友！
支持IOS平台
输出支持IOS平台的单倍图、双倍图，支持IPHONE6/6P尺寸比例。
支持ANDROID平台
输出支持Android平台的各种分辨率大小图片，什么XXHPDI，XHDPI，HDPI啊之类的，通通自动化输出，为你节省出更多的时间陪小伙伴好好玩耍。
支持各种图片格式输出
什么png、jpg、gif通通不在话下，还可以自己缩放、压缩大小呢。从此，就告别那个所谓的“存储为web所用格式”的功能啦~~
多个图层合并、单独输出
图层太多？木关系！可以多选嘛！支持选中多个图层合并输出，也可以逐一输出的哦，简直方便到爆！
固定尺寸输出
想要输出固定尺寸的ICON，多种姿势让你选择，秒秒钟的事情~~
资源整理者简介：
可能感兴趣的文章
按分类快速查找
关于资源导航
伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1306 项工具资源。
关于资源导航
伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。
新浪微博：
推荐微信号
（加好友请注明来意）
- 好的话题、有启发的回复、值得信赖的圈子
- 分享和发现有价值的内容与观点
- 为IT单身男女服务的征婚传播平台
- 优秀的工具资源导航
- 翻译传播优秀的外文文章
- 国内外的精选博客文章
- UI,网页，交互和用户体验
- 专注iOS技术分享
- 专注Android技术分享
- JavaScript, HTML5, CSS
- 专注Java技术分享
- 专注Python技术分享
& 2016 伯乐在线