&&&&&& 我们都知道一套完整的 App 通常会有很多张，不管是 iPhone 需要 1x、2x、3x 图档，Android 需要至少 3 种 hdpi、xhdpi、xxhdpi。在庞大的数量下如何让负责套图的 RD 快速找到所需图档，档名的命令方式就需要双方统一格式方便大家作业。所以，制定一套非常有效而方便的APP切图命名规范非常有用的。
下面就跟随小编来详细了解APP切图命名的流程和命名规范。
ios切图尺寸规则
目 前iPhone有10种型号，5种屏幕尺寸，再加上6plus的&降采样& （Downsampling）（），还有iPhone6和6+上的放大模式（）和默认模式（）， 是不是感觉好恐怖？但是不用怕，我分享一套超简单的适配方法，看完你都不信有这么简单~
美术交付给开发的资料有
1、&&标注图（以640为宽度尺寸为基准标注）
2、&&2x切图（以640为宽度尺寸为基准切图）
3、&&3x切图（以1280为宽度尺寸为基准切图）
开发看到这份标注图，可以自己用上面的数字，乘以1.5得出3X的数字。
1.为什么3x切图要以1280来为宽度？
其实iPhone6+的尺寸作为3X，怎么算都又难记又不能整除，我们直接640*2得到相差也没几十个像素，最重要的是不虚边啊，放在真机上看（处女座除外）看不出差别的。
2.为什么只设宽度？
为了保持长宽比例。iPhone的这几个尺寸不是正好的，宽度放大后高度总差那么几个像素，这不要紧，千万别去改高度，手机屏幕是可以上下滑动的嘛。不可以滑动必须保证一屏显示的除外，手动去调整好了。
3.为什么开发不是乘以2而是乘以1.5来算尺寸和字号？因为大屏手机就是要显示更多内容而存在的。纯等比放大界面看起来傻大傻大的，实验证明1.5倍是正好的。
移动端IOS知识普及：IOS标准分辨率：1242px * 2208px&
切片要求：
1、设计稿是按标准分辨率设计，图片资源尺寸则是3倍图尺寸，将整个设计图压缩成750X1334，图片资源尺寸则是2倍图尺寸，在二倍图的基础上压缩成50%，图片资源尺寸则是1倍图尺寸；
2、产品效果图独立切片，即是每张效果图独立建立一个文件夹（命名以效果图名称为准），文件夹内容包含1倍图文件、2倍图文件、3倍图文件和标识文件
3、图片命名要求语义化，格式为png；
4、图片资源需要备有1倍图、2倍图、3倍图，3倍图命名规则为：添加后缀@3x；2倍图命名规则为：添加后缀@2x；例如：1倍图：abg.png，2倍图则为：abc@2x.png，3倍图则为：abc@3x.
字体:IOS默认字体&& 英文& HelveticalNeue&& 中文
黑体；字体大小采用点pt，设计稿以相对单位px，字体大小需要进行转化，转化公式为：px*72/96=pt（eg：12px*72/96=9pt），
字体颜色只需给出rgb值（eg：color：rgb（255，255，255））；
6、页面纯色背景需标出rgb值，如果有透明度则需标出rgba值，其他特殊背景直接切图；
7、页面的图标、色块、按钮的高度都必须是4的倍数，最小像素不能低于44px，如不够可以添加补白；
8、页面外边距留白为10px；
9.启动图标,png格式，不能透明底，透明的部分补白色。
IOS切图规范：
三倍图：按来切& iphone plus
二倍图：将整个设计图压缩成750X1334 按750X1334切
一倍图：在二倍图的基础上压缩成50%一倍图&
Ios启动图：图标按照最大来设计，之后按照比例缩小到每个尺寸，再进行调整，提交没有高光和阴影的直角方形图即可；
Android切图尺寸规则
px（像素）是我们师在PS里使用的（不解释），同时也是手机屏幕上所显示的（也不解释）
dp是开发写layout的时候使用的尺寸单位，sp是开发写layout时关于字体的字号单位，且dp与sp总为1：1关系。
Android支持四种不同的dpi模式：ldpi mdpi hdpi xhdpi&xxhdpi
一般地，手机分辨率与所运行的dpi模式是匹配的，例如
hvga(320&480像素)的手机屏幕一般在3.5英寸左右，运行在mdpi模式下（也有例外，稍后解释）（这个是ROM控制的，app不能改变）。
当运行在mdpi下时，1dp=1px：也就是说设计师在PS里定义一个item高48px，开发就会定义该item高48dp；Photoshop中
14px大的字体，开发会定义为14sp。
对于一部wvga（480&800）手机（G7、N1、NS），一般是运行在
hdpi模式下。当运行在hdpi模式下时，1dp=1.5px：也就是说设计师在PS里定义一个item高72px，开发就会定义该item高
48dp；Photoshop中21px大的字体，开发会定义为14sp。
所以，当你的app需要适配多个dpi模式的时候（例如同时适配mdpi与
hdpi），若你在wvga下做设计，你需要将你的各数值都为3的倍数，并在切图标注时将所有的数字除以3乘以2换算成dp，这样开发的同一套
layout就能用在两个不同的dpi模式下，而不是写两套layout。
mdpi与hdpi是2：3的关系
mdpi与xhdpi是1：2的关系
ldpi与mdpi是3：4的关系
Galaxy Nexus 是720P屏幕，就是运行在xhdpi下的。
再补充一种例外，有些比较山寨的Pad有可能是7英寸屏幕，分辨率为wvga（480&800）运行在mdpi下，所以一部wvga手机是320x533dp，一部wvga平板是480x800dp，可以显示的内容会多很多。
从2013年开始ldpi mdpi hdpi相继退出了历史舞台！以0P主要机型占据了主流，即xhdpi。
2015年预计将会是1080P的天下了，因为从14年下半年到2015年推出的android手机均为1080P，可以预见未来的趋势！
以下是当前android主要机型规范：
手机常见分辨率:
VGA&&&& 640*480 (Video Graphics Array)
QVGA& 320*240 (Quarter VGA)
HVGA& 480*320 (Half-size VGA)
SVGA& 800*600 (Super VGA)
WVGA& 800*480 (Wide VGA)
FWVGA 854*480 (Full Wide VGA)
High Definition
QHD&&&& 960*540
720p&&& & 标清
小米1&&&&&&&&&&&& 854*480(FWVGA)
小米2&&&&&&&&&&&&
小米4 & & & & & &
分辨率对应DPI
"HVGA&&& mdpi"
"WVGA&& hdpi "
"FWVGA hdpi "
"QHD&&&&& hdpi "
"720P&&&& xhdpi"
"1080P&& xxhdpi "
&APP切图命名规则
基本上 App 的切图可分为下面几大类：
背景、按钮、图示、图片、照片、TabBar icon 等。
为了让切图便於管理，通常会依图片性质命名。例如
bg-xxx.png、btn-xxx.png、img-xxx.png、tab-xxx.png。当图档要做给 Retina
萤幕使用时，只要在副档名前加上「@2x」就可以了。如bg-xxx@2x.png、btn-xxx@2x.png&、icon-xxx@2x.png。
在命名时 bg-xxx.png 中间的 & 可以改为 _ 。
iOS HIG 上写著 Desktop icon 档案命名使用
-，如果切图只给 iOS 使用，可以和 iOS 采用相同的命名方式。请注意 Android 不支援 & 的命名方式，如果图档要运用在
Android 上，请把所有的 & 改成 _ 底线。最好不要把数字或符号当成档名的开头，如&3-icon.png 、+abc.png之类。
bg-xxx.png，从整个页面的大底图、某个 TableView 的字段底图、Navigation Bar 的底图都可算在背景范围内。
要留意整个画面的高度，大多数的页面需要扣除状态列和 Navigation Bar 高度，如果画面上有 Tab Bar 的话，底图尺寸会更小。
TableView 字段底图
运用在列表。列表字段内容可能包含缩图、说明文字、箭头等。为了美感或是加快开发效率，有时会将缩图和箭头等直接做在底图上，遇到这种情形请先向 RD 讨论确认单一字段内拥有哪些元素、又有哪些元素要直接做在底图上。
按钮有很多种不同的作法，有的是将整个按钮连带文字一起切图，有的运用在内建按钮上、底图和文字是分开的。在这边指的是底图和文字分开的按钮，这种作法优点在于按钮可随文字长度自行加长缩短，底图也会自行延展，不需将 App 内所有的按钮都切图出来。
按钮的切图常以 btn-xxx.png 来命名 。App 里的按钮拥有 4 种属性，分別为一般、点击、不能点击、选中。但不追求精致与完整度的话，只出一般属性按钮图档就可以了，在 iOS 上 RD 能在使用者点击按钮时将原图档变暗做为点击提示。
（Android App 按钮就一定要 2 张图，一般状态、点击状态。）
一般（normal）：btn-xxx-n.png，最基本的按钮外观。
点击（highlight）：btn-xxx-h.png，使用者触摸萤幕碰到按钮，为了告知使用者有点击到而出现的回应提示。
不能点击(disabled)：btn-xxx-d.png，代表App有这功能但使用者无法使用。例如如安装在iPod上的App有播打电话功能时。既然不能被点击干脆直接隐藏的作法也是有的。要直接将按钮隐藏或是以不能被点击的状态呈现需视情况决定。
选中(selected)：btn-xxx-s.png，选中出现在有复数选项时，但通常不会把按钮拿去做复数选项控件，这种按钮状态出现的机会不高。
此外，图示、图片、照片我也习惯有固定的命名方式。主要是让 RD 能够快速套图，并没有硬性规定该如何将图档分类命名。
图示：icon-xxx.png。
图片：pic-xxx.png 或是 img-xxx.png。
照片：pho-xxx.png。
PS.如果是流水号的话，要从 0 开始编号喔！
TabBar 上的 icon 作法较特殊，虽然它是 icon，但我不会以 icon-xxx.png 来命名。为了和其他 icon 作区隔，我会使用 tab-xxx.png 来表示。（App：App Store）
若使用 iOS 内建的 TabBar，则 icon
尺寸、制图方式都需依照规范。在 iOS5 之后 TabBar 可以变更 底图和 icon 图，不受黑底白 icon 的限制。TabBar
可分成三层：底图层、选中时的高光层、icon层。（App：Find my friends）
底图层、高光层会因为 TabBar 个数不同而自动延伸，高度为
49px。icon 需依 Guideline 制作 30x30px。加上选中时 icon 会改变，因此 TabBar 的切图共有 4
个部份：底图、选中时的高光、一般情况下的 icon、被选中时的 icon。
IOS机Android切图标注与命名规范
APP各模块命名规范：
以上为冰冰根据网络现有资料进行整理归纳，版权不归冰冰所有！冰冰在归纳时做了删减修正添加处理！
PS:在外企也好，合资也罢，职场中每个人都有自己的代号，不仅仅是Peter、Mary、Jack、Rose，还有各种PM、RD、QA、OP！这些英文缩写都是什么意思？初入职场或者准备踏入职场的你是不是已经有点犯晕了？今天小编就来给大家科普一下那些听起来神秘又高端的英文职位缩写。
1.PM: Product Manager，产品经理，又称品牌经理（Brand Manager）。产品从创意到上市，所有相关的研发、调研、生产、编预算、广告、促销活动等等，都由产品经理掌控。
2.RD: Research and Development engineer，，对某种不存在的事物进行系统的研究和开发并具有一定经验的专业工作者,或者对已经存在的事物进行改进以达到优化目的的专业工作者。
3.FE: FE有多种解释，在实体经济中，FE可以指Facility Engineer，，主要负责工厂的外围的一些支持系统。在网络经济中，FE可以指Front-End Development，，新新职业。
4.QA: Qualtiy Assurance，品质保证。QA的主要职责就是质量保证工作。
5.OP: Operator，操作员，管理员。
看了解释之后是不是清楚了很多？
阅读(...) 评论() &pdf切图方式要满足1，必须为矢量（现在应该没有小朋柳不画矢量icon吧）2，各自的矢量环境下导出pdf格式切图（ps绘画的矢量图要在ps里导出，ai同理）pdf切图直接好处1，优化下载体验，减少app大小2，自动适配
在ios某个版本之后（原谅我只是一个设计师并不是很清楚到底是哪个版本正式开始启用pdf格式载入的），xcode6具有了基于矢量图像(PDF文件)的编译能力。
UI设计师都会涉及到的一个问题，切图。在完成页面设计之后，需要导出@1x @2x @3x三个尺寸的png图像资源。哦呵呵呵呵呵呵，我每天都是带着计算器在按。
然而，现在xcode6有了pdf辨识的功能！直接带来的2个非常直观的影响。
1，ios切图从此只要切@1x，然后不论是哪个尺寸都能完美适配，达到最佳效果
2，缩减app大小，优化用户下载体验。（因为切图成pdf并且是@1x的时候占用空间非常小，并且省去了一整套@2x和@3x的切图所占用的空间，喔呵呵呵呵呵想到app一下子减少了那么多大小，真是睡觉都笑出声呢。）
现在，一步步教大家如何切图。
一，photoshop，如果是在ps里绘制的矢量图，请在ps里切pdf。
以上图为例，这是一个求攻略出品的翻译软件，目前处于开发状态。这是一个在ps里用矢量画的volume图标。切记，icon务必要用矢量画，切图pdf格式也仅支持矢量图形。
选中volume icon选区，快捷键 command+鼠标左键，然后按照选区大小新建大小相同的新文件。
这时候，你会看到图中所示。因为在设计ui的时候是以iphone6为尺寸，也就是750。是@2x的时候的图，所以此时，我们切出来的图是@2x的。
还需要注意的一点，当从画布1将icon 复制到画布2的时候，要保持icon一直处在矢量状态。切勿删格化！否则大业未成，前功尽弃！
如上图所示，这时候点开调整画布，control＋command＋i快捷键，将宽高百分比调整到50%，也就是说这时候你的icon切图是@1x的状态了。
为什么要调整到@1x的状态呢，因为@1x的时候扩展成@2x和@3x只要往上乘，而不是往下减。
避免了切图像素不整除的情况，但是我还是建议大小要取一个吉利的像素尺寸。
此处晤面。记住，要把背景去掉，因为你需要的是一个透明的背景。
现在开始储存动作，点开另存为，找到photoshop pdf格式，勾选“作为副本”
颜色什么的那么基础的就淡淡的略过吧。
点击保存，之后会弹出来这么一个框。
将“保留photoshop”编辑功能勾掉，
只剩下“嵌入页面缩览图”以及“优化快速web预览”然后点击保存
储存出来直接是pdf格式，这时候你打开预览不论是放多大缩多小都是十分清晰，并且占用空间很小。
这个volume切出来只有10kb！！！是不是为你app太大无法优化的困扰顿时就在梦里笑醒。
二，illustrator，如果是在ai里绘制的矢量图，请在ai里切pdf。
也是按照@1x的大小建立画板调整好大小，并且另存为pdf格式。
勾选“嵌入页面缩览图”以及“从顶层图层穿件Acrobat图层”然后点击保存。
切记切记，ps和ai的矢量图要在各自的软件环境下切图。所以比较推荐制作页面的时候绘制icon在一个环境下绘画。
到这里，设计师部分的就结束了，看着一大堆，其实我是很详细的把每一步都拆分的很仔细，自己操作一遍其实很迅速。如果有心者可以试着做一个动作会更方便，如果自己将来做动作了会及时上传上来。
然后就是放入xcode6中，因为我并不懂xconde6是什么，特意从我们公司程序员大大讨来教程贴在下面，所以下面的教程来自引用。因为我一个字都看不懂。
如果你是设计师，这一段请拉的快一点，因为我保证你连读都无法读通顺，就别想看懂了。
1，如果你不已经有一个XCAsset文件，然后创建一个; 否则，打开一个你已经在你的项目中。
2，从编辑菜单中的“新建映像集”。
3，在出现新的图像集，选择空白图像集，然后显示在工具面板。
4，选择属性检查器。
5，根据类型下拉菜单中选择“矢量”。
6，图像设置将变成只有一个放置点，标有“全部 - 通用”
7，拖放上面创建到落点的矢量PDF文件。
接下来，您将只需使用设置，你会与任何其他的图像（无论是在代码或通过接口生成器）Xcode的图像目录的图像。例如，要求-imageNamed：在代码中，并通过在图像集的NSString的文字名称。
当你建立你的项目时，Xcode会去工作，创造@ 1倍，2倍@和@从您在Xcode的资产类别已经使用的PDF 3倍PNG文件。举例来说，如果你有一个@ 1X PDF，这是150像素x 150像素，然后Xcode中会生成以下PNG大小在应用程序中使用：
·@ 1X PNG在150像素x 150像素
·@ 2倍PNG在为300px x 300px的
·@ 3倍PNG在450px x 450px
当你运行应用程序，iOS的会自动选择合适的@ 1倍，2倍@或@ 3倍的形象，Xcode的基础上产生的设备需求。请务必注明您的自动版式的限制，使得图像不调整对大型设备，否则你会最终与模糊的图像。xcode中产生基于所述@ 1倍的PDF图像代替缩放矢量在运行时对光栅图像。
有关将图像添加到您的项目中此方法的一些注意事项：
这不是充满载体的支持 - 在编译时生成PNG图像，而你保持在这个没有控制权。
你不能选择一个新大小的图像，一旦你指定使用矢量缩放后的图像在你的应用程序。坚持使用您指定的大小，或者创造更大的尺寸新的PDF。否则，如果缩放与自动版式，例如图像将被扭曲。
虽然iOS的8不包括全矢量支持（而不是Xcode的只是建立你的PNG在生成时） - OS X那样- 如果你使用同样的方法。在OS X中，你可以扩展你的代码，或者使用自动版式图像而没有任何失真。
没有与以前的IOS版本不能向后兼容。所有的资产都被编译成一个Assets.car文件只能够通过的iOS 7和iOS 8读取这是用于与资产目录与iOS 7开头的同一个文件。
如果你已经有一个脚本或其他工具，可自动实现这个要求，那么你可能看不到一个好处使用自动生成的PNG这种方法; 但是，如果你使用的OS X和iOS应用程序之间共享资源，它可能是一个方便的工具。
可以记录推荐数据哦！
收录收藏夹
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友
下次自动登录
没收到验证码?
下次自动登录
第三方帐号登录
微信二维码登录CSS切图问题,所有背景图标都集合在一张图上,这图是怎么切出来的?求大神指点._百度知道
CSS切图问题,所有背景图标都集合在一张图上,这图是怎么切出来的?求大神指点.
我有更好的答案
可以省去不少请求数量。用作背景。用作一般图片：与上面原理相同，只不过是设置该图片的pisotion将需要的部分显示出来，通过background-position调整背景图的位置：设置一个元素的高宽，对性能和语义化都有比较大的影响，很少有人这么用:hidden。由于需要多加无谓的标签，频繁使用定位是sprite吧，使需要的部分露出来。当然，我这里说的也比较片面，这种方法用来处理背景图片比较好，其余地方被隐掉，父元素overflow
采纳率：32%
CSS的背景定位就OK了。比如 background:url(..&#47。这样就能通过定位来实现了。;images/ico.png) no-repeat -20px -100如果ico.png就是你给的这张图的话，那么这个背景图片的显示位置就是从这张图的横坐标左移20px.纵坐标上移100px处开始。知道这个原理了我想你应该知道怎么弄了吧。比如你的一个按钮要用到图中的某个按钮，你只要通过切图软件知道该按钮的宽和高，然后知道该按钮距离左边界有多远，距离上边距是多少
一般称这种图为sprites。css里把这张图设成background-image.然后用background-position就可以切了。你上网搜css sprites教程，就会有很详细的介绍。
TexturePacker可以用这个软件打包
其他1条回答
为您推荐：
其他类似问题
切图的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。这个ps圆角神器想必很多UI设计师已经使用过了，如果你还没有用上这么一个ps可编辑路径圆角神器，那么你今天就有福了。
学堂君重新给大家推荐这样一款可以轻松绘制手机APP图标，比如线APP性图标。或者辅助你去设计一些好看的图形logo设计等等
这样一款可以绘制APP图标和矢量logo设计辅助神器—Corner Editor
其实Corner Editor属于Photoshop软件下面的一个脚本。打开Corner Editor的时候，是从ps软件的脚本处打开。如下图
使用Corner Editor可以干些啥？我们先来一睹为快
看到这里，想必大家知道这个Corner Editor可以干些啥东东了吧
Corner Editor下载地址：
Corner Editor汉化版本地址：
2步操作即可完成：
1、将这个文件拷贝到 Photoshop 的 Presets\Scripts 之下（Windows 是 \Photoshop CSX\Preset\Scripts，MAC 是 Applications & Photoshop CSX & Presets & Scripts）
2、重启 Photoshop 就可以在 File & Scripts 菜单下看到这个脚本了，但是使用之前需要先选中至少一个路径
下面我们再看看下使用Corner Editor绘制logo图形的案例：
通过这样一个ps圆角脚本即可绘制很多不一样的有意思的图形或者是图标。 更多惊喜值得大家去挖掘。
分享一下,与TA一见钟情~~
本文标题：
本文地址：http://www.25xt.com/allcode/17368.html
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
移动APP设计入门课程
为你推荐的相关文章
Copyright@ www.25xt.com All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。