安卓开发（23）
APP切图那点事儿–详细介绍android和ios平台
/&&|&&|&来源:&|&作者:亚茹有李&
从2011年开始接触APP，到现在为止也做了几个了，发现了一个共同点就是和每一个技术搭档切图的时候，会遇到不同的问题，因为技术的水平高低有限，所以他们要求你给切图的时候也会不一样，针对切图后来我总结了一套规律分享给大家，希望互相学习~
相关阅读：
一.android版
在做android版本的时候，尺寸有很多种，这时我们要以一种尺寸为基准，那这个基准尺寸是480px*800px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：
当看到上边这张的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）；
1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）
2、顶部栏目的背景切图：
由于顶部导航栏的是渐变样式，所以切图只需要切一小条，技术来平铺拉伸就可以~（PS：如果是花纹背景，就必须切整条了，因为花纹切一小条就会被拉伸了~）
3、标注文字大小和行间距：（以这张图为例子，我标注好了，请看下图）
需要注意的：
A：android主要有3种屏，即：
QVGA和WQVGA屏density=120;
HVGA屏density=160;
WVGA屏density=240;
B：apk的资源包中，
当屏幕density=240时使用hdpi标签的资源
当屏幕density=160时使用mdpi标签的资源
当屏幕density=120时使用ldpi标签的资源；
C：我们标注的是PX，但是技术的算法是DP，所以需要PX和DP进行转化，PX和DP的转化主要跟密度有关系，当密度density=160即（屏幕尺寸：320*480）时，1PX=1DP；当密度density=240即（屏幕尺寸：480*800）时，1PX=0.75DP；当屏幕的尺寸大于480*800的时候，密度都按照240计算即可；当密度density=120即（屏幕尺寸：240*320）时，这个现在几乎没有人用了，所以我也不知道转化公式，如果您知道，可以留言告诉我啊~
注意：因为我们做的是基于480*800尺寸的，大家都知道android的尺寸太多了，要想适配现在流行的尺寸，比如：640*960；720*1280等，唯一的解决办法就是图标可以根据不同尺寸各做一套，也就是图标需要做480、640和720共3套图标，不过如果你们的产品的要求不严格，做一套就可以，只不过是在大于480尺寸的屏幕上有些图标被拉大变虚而已~
在做ios版本的时候，尺寸有3种，分别是：320*480、640*960、640*1136；这时我们要以一种尺寸为基准，那这个基准尺寸是640px*960px，设计图完成之后就开始切图了，我拿我之前设计的一张图为例子讲解下：
当看到上边这张的时候，我们首先分析下应该给技术切哪些图（为了避免以后少改动，建议切图之前最好和技术先沟通下，怎么切）；
1、底部栏目的icon和背景：
这个一般有2种切法：（有默认和选中之后的效果）
2、顶部栏目的背景切图：
由于顶部导航栏的是多颜色的，所以只能切一整条给技术，商圈的图标要单独切出来
3、二级标题栏目的切图：
4、主体栏目的切图：
5、标注文字大小和行间距：（以这张图为例子，我标注好了，请看下图）
需要注意的：
A：我们标注的尺寸是像素px，技术那边的实际运用到技术中的是像素的一半，即像素的一半=技术的尺寸；例如：“分类”2个字，我标准的是36px，技术那边的尺寸就是18px；
B：所有文字，行间距的标注的尺寸都是偶数；因为技术那边都是根据我们的尺寸除以2；
C：颜色的标注有的技术要求16进制，有的技术要求RGB，由于页面的限制所以我只标注了16进制的，按16进制和RGB都标注的是最好的~
注意：因为我们做的基于640*960尺寸的，ios共有3套尺寸，因为640*960和640*1136的宽度是不变的，所以图标没有变化重新切，只是行间距需要调整下；320*480尺寸的是640*960的一半，所以技术完全可以根据你标注的640的尺寸做就可以~
三.android和ios的转化关系
1.因为ios的尺寸是640*960，android当密度等于120即（320*480）时，1PX=1DP，所以android和ios的标注之间的换算关：即ios像素尺寸*1/2=android
2.如果你们的产品同时做android和ios，你只想标注一套尺寸的时候，就可以标注ios版的标注去计算即可。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1692897次
积分：17209
积分：17209
排名：第624名
原创：264篇
转载：436篇
评论：235条
(2)(2)(2)(1)(7)(8)(8)(8)(3)(2)(11)(2)(5)(6)(1)(4)(25)(21)(12)(12)(16)(6)(22)(33)(20)(31)(10)(4)(5)(19)(10)(4)(14)(16)(10)(24)(8)(63)(19)(25)(22)(44)(13)(7)(15)(15)(22)(14)(41)(11)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'用户手中看到的产品界面，并非设计师呕心沥血创作的效果图，而是一个个单独的切图经由开发同学技术实现。切图作为设计师与开发者之间的桥梁，它的作用很关键，合适的切图、精准的位置可以最大限度的还原效果图的设计，精妙的切图更会有事半功倍的效果哦！
我们经常会做一个俗称“点九”的切图，什么是“点九”呢？“点九”是Android平台处理图片的一种特殊的形式，由于文件的扩展名为：“.9.png”，所以被称为“点九”。“点九”也是由于Android平台多种分辨率需适配的需求下，发展出来的一种独特的技术。它可以将图片横向和纵向随意进行拉伸，而保留像素精细度、渐变质感和圆角的原大小，实现多分辨率下的完美显示效果，同时减少不必要的图片资源，可谓切图利器。
“点九”的制作工具为“draw9patch”，具体制作步骤这里不多讲了，插播小贴士第一条：舍弃这个制作工具吧，减少繁琐的步骤，不要再每张图片都拖到工具里画啦！直接用ps＋铅笔就可以画哦。
“点九”的学问当然很大，但不仅需要清楚“点九”的方法，还有其他各种小技巧。下面为大家分享我在工作中总结的几个关于切图的心得。
(一)站在开发的角度来切图
了解技术实现方式，就像了解一位开发同学，更多的了解，会让工作更加顺畅。
如为下图按钮做“点九”图，一部分同学可能会这样做：
这是一张高度不变左右拉伸的“点九”图片，内容显示区域为整个按钮范围。按钮效果图上看，文字是垂直居中显示的，开发同学拿到这张“点九”图片，就会在代码里写上center的属性，此属性就是设定让文字在按钮的垂直居中位置。说到这，有没有察觉出问题呢？先让我们看一下实现出来的效果怎么样。
拥有像素眼的设计师们，立刻会察觉文字偏下了。然后找开发同学调整文字的位置，“把文字向上n个像素吧，没有居中”等等，这是很经常发生的对话，开发同学会增加代码微调文字的位置以达到效果图效果。事情圆满解决了吗？不然。其实是我们错了。
当我们了解开发同学实现方法后，我们可以试试用逆推法验证这张“点九”图片是否还有进一步精确的可能。
如上图，设计效果图中红色区域是文字排版区域，是理想化的位置，1和2的高度是相等的；而实现效果图中3和4的高度是相等的。问题出现了！在我们画点九的时候，把投影的高度也画进去了，所以视觉上文字就偏下了。
我们通常的画法应该是：
1. 在高度不拉伸的情况下，在空白区域点一像素的点。
这是与开发同学之间约定俗成的习惯，凭着默契就知道此按钮高度不进行拉伸，而且就是被拉伸了，拉伸的是空白区域，视觉上也不会造成影响。
对比如图所示：
2. 内容显示区域的高度要避开投影区域，这样可以保证文字视觉的居中。
“点九”图片的内容显示区域，我喜欢称为内容排版区域。在切图的过程中，还会发现不同的情景，要时刻想着你要的结果，通过对此区域的仔细处理，可以更好的为图片上所承载的内容做排版。这样开发同学只要通过一些简单的属性设定，就可以实现效果图上精确的布局。同时减少不必要的开发，精简代码，提高产品的性能，积少成多，带给用户更好的体验感受。
(二)选择更优的切图方式
当我们遇到异形或较为复杂的切图时，往往需要抛开固有的思维程式，去找到更适合的切图方式。举例如为下图浮层切图的时候，我们还可以用我们的利器“点九”么？
首先分析一下此浮层的几个特点：一是半透明渐变有厚度又有投影的效果；二是有三角异形，而且位置不固定。在切图的时候先走了一下小弯路，用固有思维把浮层分成了上下两个部分，下面方形做成“点九”，上面三角形单独一个切图，用拼接的方式去实现。这是符合开发同学的原子拆分设计模式的，把会变化的部分取出并封装起来，让其他部分不受到影响。所以开发同学很快做好了实现，但效果不尽人意。我们其实可以预想得到，因为有投影效果上下拼接一定有重叠，这样拼接处就会有一条明显的线。
那怎么办呢？经过设计师的进一步思考，终于找到了一种更适合的切图方式：
左右分割成两个“点九”图片，这样即能保证连接处的效果，又能灵活三角指向的位置。思考好如何切图的同时也要跟技术同学沟通能否实现，衡量实现的成本。最后值得高兴的是，实现出来的效果-跟设计效果图没有任何出入。
(三)尽可能的减小资源的大小
切图的时候尽可能减小资源的大小，为产品安装包瘦身。
1.“点九”图片拉伸1个像素与拉伸10个像素效果上是没有区别的，所以尽量缩小图片的尺寸。
(在上面的例子当中，为了保持看得清楚，没有缩小到最小情况，在实际工作中可以稍加注意。)
2.当我们遇到有纹理的背景或有纹理的按钮时，切图原则为：找到纹理的规律，用最小的切图去平铺，可以想象中图案叠加的原理。
第一种纹理背景，如输入法多媒体中随写输入的界面，不同的信纸，我们就用了尽可能最小的切图去平铺而实现的。如下图：
这是我们输入法中信纸的切图，遵循用最小切图的原则，按照不同纹理的规律调整到最小的切图，所以可以看出不同纹理的切图尺寸是不一样的。
第二种有纹理的按钮，我们一般会这样处理：
我们的目标是把按钮分成三段，保留左右圆角部分，找到中间纹理可复用平铺的部分，同事确保中间纹理可以与左右两张图无缝连接，这样按钮的长度就变成可控的了，可以适用于不同的场景。
首先找到纹理的规律，这里的斜线纹理只需切宽为3px的图即可；然后用纹理图片去尝试左右圆角部分，连接到圆角部分的纹理就成功咯。遇到其他类型纹理切图时，思路是可以复用的。
3.适当压缩图片质量，在单色或没有过多效果时可存储为png8位或索引模式。
这里就不做举例了。
设计师在提供设计规范后愁苦实现效果不尽如人意的同时，可以尽可能的利用一些切图手段，帮助你的设计达到零差别的呈现，同时也帮助开发同学减少了很多不必要的开发负担，对于产品本身也有提高运行速度等很多不言而喻的好处。让设计师同学与我们亲爱的开发同学成为更贴心更默契的合作伙伴吧！
以上为工作中关于的一点小经验，如有错误或不足的地方请大家指正，同时欢迎大家分享更多的切图经验与技巧。
原文链接：
转载请注明： &
学UI就上学UI网！越努力，越幸运！
“学UI网 ”最值得关注的UI学习平台！ 每天发布高质量的设计教程和分享设计经验，服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课（），给大家提供更多免费学习的机会。想成为设计师的你快来关注吧！
【特色推荐】
” 海量APP截图，让你灵感爆发！国内最好的APP截图站。
“” 每一个作业题都尽量配有教程，交作业就有大神免费帮你点评作业，爽歪歪！
“” 专为UI设计学习者打造的资源＋学习，双用途的网址导航站。亲爱的，你收藏了吗？
【学UI网 原创文章 投稿邮箱：，也可以找各个群的管理】
你可能喜欢的：后使用快捷导航没有帐号？
只需一步，快速开始
查看: 16719|回复: 18
切图怎么切图片才最清晰？
UID383740在线时间 小时积分646帖子离线17486 天注册时间
高级会员, 积分 646, 距离下一级还需 354 积分
切图怎么切图片才最清晰？我保存的PNG，不清晰，但我同事同样是切PNG很清晰，我保存JPG，质量高也还是不清晰，这是为什么？
UID610827在线时间 小时积分1090帖子离线17486 天注册时间
银牌会员, 积分 1090, 距离下一级还需 1910 积分
应该是一样的，你不会用的qq截图吧
UID383740在线时间 小时积分646帖子离线17486 天注册时间
高级会员, 积分 646, 距离下一级还需 354 积分
我晕，谁切HTML用QQ切图啊
UID536289在线时间 小时积分3781帖子离线17486 天注册时间
金牌会员, 积分 3781, 距离下一级还需 1219 积分
，竟然还有用QQ切图的，正常的都是用FW,PS的嘛
UID610827在线时间 小时积分1090帖子离线17486 天注册时间
银牌会员, 积分 1090, 距离下一级还需 1910 积分
那怎么可能不一样呢，要么是图片就不一样，要么就是你的心里作用
UID664260在线时间 小时积分50帖子离线17486 天注册时间
初级会员, 积分 50, 距离下一级还需 150 积分
PS切图就好了， 一般原图清晰的话切的图不会模糊到哪里去。
UID383740在线时间 小时积分646帖子离线17486 天注册时间
高级会员, 积分 646, 距离下一级还需 354 积分
我切的有点模糊，另一同事切的就清晰，同一个PSD图
UID610827在线时间 小时积分1090帖子离线17486 天注册时间
银牌会员, 积分 1090, 距离下一级还需 1910 积分
存图的时候是不是选的gif，或者是清晰度没那么高的格式
UID664180在线时间 小时积分58帖子离线17486 天注册时间
初级会员, 积分 58, 距离下一级还需 142 积分
如果大家用的同一个软件，没有理由清晰度不一样的，很明显那是心理作用。
UID406317在线时间 小时积分1968帖子离线17486 天注册时间
银牌会员, 积分 1968, 距离下一级还需 1032 积分
你把你模糊的，还有你同事清晰的都打包发上来，大家就能帮你分析问题了
UID383740在线时间 小时积分646帖子离线17486 天注册时间
高级会员, 积分 646, 距离下一级还需 354 积分
他用CS2我用CS3，他硬说我的不清晰，我看着没感觉
UID516164在线时间 小时积分1122帖子离线17486 天注册时间
银牌会员, 积分 1122, 距离下一级还需 1878 积分
本帖最后由 jjsamuel 于
14:56 编辑
一般色彩多的用 jpg格式的，一是在不影响视觉效果的同时可以控制图片质量大小，如果是背景类型 颜色少或者颜色单一，如渐变类型的 用 png 的这样不仅颜色清晰而且质量还小！回去试试吧
UID657579在线时间 小时积分3065帖子离线17486 天注册时间
金牌会员, 积分 3065, 距离下一级还需 1935 积分
存储为web格式
UID383740在线时间 小时积分646帖子离线17486 天注册时间
高级会员, 积分 646, 距离下一级还需 354 积分
好蛋疼，为嘛我总是切图不清晰
UID380428在线时间 小时积分2920帖子离线17486 天注册时间
银牌会员, 积分 2920, 距离下一级还需 80 积分
本帖最后由 4511916 于
09:14 编辑
那是因为ps文件分辨率的问题
如果分辨率300，图片绝对清晰，但是文件很大。
分辨72，图片不大，但背景类的有些问题，不注意看是看不出来的。如果字体要切片，那么是锐化类的字体是不清楚的，而且图片小或宋体字小于12，大于14也不清楚
如果上面都不是，那么你电脑分辨率有问题
UID662800在线时间 小时积分333帖子离线17486 天注册时间
中级会员, 积分 333, 距离下一级还需 167 积分
用Png就行鸟：）
UID662800在线时间 小时积分333帖子离线17486 天注册时间
中级会员, 积分 333, 距离下一级还需 167 积分
，竟然还有用QQ切图的，正常的都是用FW,PS的嘛
FW用的人多，还是PS多？
UID536289在线时间 小时积分3781帖子离线17486 天注册时间
金牌会员, 积分 3781, 距离下一级还需 1219 积分
还是根据个人习惯喽，现在我就是FW的多，偶尔会用用PS，
UID548013在线时间 小时积分919帖子离线17486 天注册时间
高级会员, 积分 919, 距离下一级还需 81 积分
ps web切图&&导出的时候 右侧有质量选择 还有色差饱和度等选项 你看一下 一般jpg的话 质量在70 png8的话 我色彩值选256
Powered by优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 7 分钟
编者按：周末也有干货！今天腾讯的同学分享了一篇切图的基础好文，你能以最简单快速的方式了解到那些非学不可的切图知识，专门给新手设计师准备的，图示用心，通俗易懂，文末还有神器推荐，千万别放过咯。
想了解最新的切图技术？右戳学习！
以及网页切图小技巧：
如何切图？
了解iphone界面的尺寸
最小的分辨率是320×480，我们把这个尺寸定为基准界面尺寸（baseline），基准尺寸所用的图标定为1倍图（1x）。
在实际设计过程中，为了降低设计成本，一般拿设备最高的分辨率作为设计稿的原始尺寸，拿iphone来说就是iphone5或5s的640×1136啦，当然也可以用iphone4或4s的640×960，因为宽度都是640px，他们切图的标准是一样的。显然，以1倍图的基准尺寸（宽320px）为相对的参考依据，宽640px的设计稿，以原始尺寸切出来的图标称为2倍图（2x）。
有人可能会问：为什么不拿320px作为设计稿的原始尺寸呢？因为1倍图放大成为2倍图远比2倍图缩小成1倍图来得模糊！
于是，在不考虑iphone 6和iphone 6 plus的情况下，为了适配iphone，每个图标需要切两份。
Android —— 更为繁多的界面尺寸
Android开源自由的代价就是设备规范的不可控，市面上充斥着各种品牌的android手机，有着各种各样的尺寸和分辨率，为了适配各种不同分辨率的设备，同一个图标需要切成N份，每一份对应一个尺寸。
另外需要注意的是，Android里面开发用的尺寸单位是dp或sp（dp为元素表现尺寸，sp为字体尺寸）而不是iphone中的px。。。
对于分辨率繁多的android设备，为了方便原生应用的界面适配，Google按照dpi大小将它们分成了4中模式（MDPI、HDPI、XHDPI和XXHDPI，也许有一天会增加第五种XXXHDPI，谁知道呢）：
看到这里，传统的web前端同学可能已经凌乱了，iphone用px，android用dp，而视觉设计稿则统一用的px，怎么将使用px作为单位的psd给使用dp作为单位的android app切图啊???
显然，我们得花点脑细胞去弄清楚px与dp的换算关系。
px与dp的换算关系
一般情况下，手机分辨率与所运行的dpi模式是匹配的，例如hvga(320×480像素)的手机屏幕一般在3.5英寸左右，运行在mdpi模式下。当运行在mdpi下时，1dp=1px：也就是说设计师以320×480作为设计稿的尺寸时，在PS里定义一个item高48px，开发就会定义该item高48dp；Photoshop中14px大的字体，开发会定义为14sp。
对于一部wvga（480×800像素）的手机（G7、N1、NS），一般是运行在hdpi模式下。当运行在hdpi模式下时，1dp=1.5px：也就是说设计师以480×800作为设计稿的尺寸时，在PS里定义一个item高72px，开发就会定义该item高48dp；Photoshop中21px大的字体，开发会定义为14sp。
关于px与dp的更多详细信息，请参考文章 ：
iPhone应用切图尺寸与Android应用切图尺寸的对应关系
在Android应用中，以MDPI为基准界面尺寸，恰好对应上面提及的iphone应用的基准界面尺寸（320×480），所需的切图图标为iphone中对应的1倍图；XHDPI则对应2倍图，HDPI和XXHDPI可依此类推。
换一种说法再看看：如果要以最低的设计成本做一个app，iphone版和android版用的同一套设计稿，那么设计稿的尺寸最好是640×960像素。因为这个尺寸切出来的图标尺寸涵盖了iphone 3 ~ 5的分辨率，以及android的MDPI、HDPI、XHDPI模式。XXHDPI模式会自动利用低一级的XHDPI的图标进行放大展示。
把切图交给工具
看了上面提及的各种界面尺寸，如果全手工切，一次切完你能忍。如果切完了还有各种图标的增加、修改，没几次你多半会崩溃血喷屏幕～
幸好我们有一些很好的切图工具可以用，具体使用方法可参考它们的官网教程。
直接来优设，有具体的神器与教程哟！
神器推荐：
神器教程：
注：damao推荐，看了官网好像很强悍的样子，但是收费哦。
借助工具，原生App中的切图变得简易，但是“一个图标要切多套尺寸”的问题依旧没有改变，有没有更好的图标解决方案呢？譬如应用网页应用中的图标字体？ 敬请期待《Iconfont在原生App中的应用》。
新手必备的指南类好文强烈推荐！
每个网站都有的404页面创建指南！
配色弱、非科班的设计师童鞋必备！
专为设计师写的Github学习方法！
原文地址：
作者：LV主唱大人
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量86万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
PS教程！教你创建俏皮可爱的岩石质感文字
编者按：今天来点不一样的教程，适合有基础的同学作进阶学习。以往为了打造某种效果，过于强调参数设置，以至于效果出来，思路忘了，下次依...
@十萬個為什麽 ：初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来...编者按：如果大多数竞品的UI 设计和交互方式都差不多，设计师如何才能突破限制，表现出独特的创意和技法？今天@小乖乖老爸 这篇好文结合了自己的实战案例，来聊聊...编者按：同学们期待已久的苹果官方人机指南第二章终于来咯！仅仅会画图标的美工不能叫UI设计师，想尽快达到合格线，熟读苹果官方的人机界面指南是最方便科学的方法之...时代总是在螺旋式地发展变化中，设计潮流也是如此。随着移动端扁平化设计推进，越来越多的设计师不满足于仅仅是色块、图标和系统字体的枯燥组合，而把更多的心思投入到...编者按：前两天发了一篇价值4000元的收费可商用Web 模版，今天来一波同样高质量的的App UI KIT，包括音乐/餐厅/运动等等类型的App，无论是下载...@姬小光 ：在互联网产品的研发流程中，页面的视觉还原是很重要的一个步骤，也往往是问题最多的一个环节。如果一些细节问题在这个环节没有被有效地发现并解决，那么后...@苏大牙牙牙 ：作为APP狂热分子，定期去App Store或者其他渠道找新鲜的产品来玩儿，已经持续了很多年。但是光浮于表面的玩儿，还不够。因为只有了解产品...justinlam：“我总觉得页面不太好看但是我又说不出来”，“我不懂设计，但是我就是觉得不协调”，“你觉得这好看？你的审美要加强啊”这些听着熟悉的话往往是...编者按：今天分享两个小技巧，第一个教你如何通过按键颜色的对比来引导用户，第二个是让进度条看起来“快一点”的方法。站在用户角度，这两个不仅细腻体贴，而且确实能...
我们的团队
大家在关注
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里