[IOS实例]从设计稿到切图全过程
如何Photoshop进行切图[图文]
![如何Photoshop进行切图[图文]](https://img.taocdn.com/s3/m/0b34e3a1284ac850ad0242f1.png)
如何用Photoshop进行切图一、基本概念1，切图，是一种网页制作技术，它是将美工效果图转换为页面效果图的重要技术。
Photoshop、Fireworks 等软件提供了切图技术，切图后可以直接导出为网页格式。
2，切片，是切图的直接结果，切图实际上就将图切分为一系列的切片。
二、切图操作过程1，切图工具图标的识别2，切图基本操作（最好是先拉出参考线）1)基本操作有两个：划分切片和编辑切片。
划分切片，是使用切片工具，在原图上进行切分的操作。
编辑切片，是对切分好的切片进行编辑的操作，编辑包括对切片的名称、尺寸等的修改等等下面我们看一下这两个操作2)基本操作如果想移动某个切片，可以使用“切片选择工具”选择某个切片，并用鼠标进行拖动，也可以使用实现，另外如果想精确的细微移动，则可以使用实现如果想将某个切片存为某个图片输出，可以使用“切片选择工具”选择某个切片，然后选择“文件”菜单，并选择“存储为Web所用格式(W)...”，然后在弹出的界面中...3，切图技巧1)一张图，可以有多种切分方式，如下：既然存在n多种切图方式，那么是不是哪种方式都可以满足要求?答案：不是的。
一般对页面的要求是，当页面大小发生变化时，页面的各部分可以相对自由地伸缩，而不会使页面发生错乱或变形等问题。
我们切分好的图是要输出为Html格式的网页文件的，然后通过网页编辑器，将该页面进行加工，做成符合要求(例如可以根据内容多少，自由伸缩等)的模板页面。
这其中，切图的方式直接影响着模板页面是否能够满足实际的要求。
我们来看一个例子：2)切图技巧主要有几下几点：属性均匀的区域适合分为一个切片，均匀主要是指颜色和形状都没有变化，或者在X或在Y方向上没有变化。
属性渐变的区域适合分为一个切片，渐变有两种表现形式：颜色渐变、形状渐变。
根据原图的内容布局，确定整体的切分策略，即切分要有分块的思想，要在想象中将整个布局看成是一个两个table，然后在具体到每个table，去考虑里面应该如何切。
使用Photoshop进行网页UI设计和切图的技巧
使用Photoshop进行网页UI设计和切图的技巧第一章：准备工作在开始进行网页UI设计和切图之前，首先需要准备一些必要的工作。
首先，了解网页设计的基础知识和原则，包括色彩搭配、平衡和对比等。
其次，确定网页设计的尺寸和页面布局，以及主题和风格。
最后，准备好所需要的素材，包括图标、背景图片等。
第二章：UI设计UI设计是网页设计的核心环节，它决定了网页的外观和用户体验。
在进行UI设计时，可以先使用草图或线框图搭建网页的框架和布局。
然后，使用Photoshop的绘画工具，如画笔、橡皮擦等，进行具体的设计。
可以设计网页的背景、导航栏、按钮、表单等元素，并运用各种图层样式、滤镜和渐变效果，增加网页的美感和层次感。
第三章：图层管理在进行UI设计时，图层管理是非常重要的一步。
在Photoshop 中，可以通过图层面板对各个元素进行组织和调整。
可以使用图层文件夹功能，将相同类型的图层放置在同一个文件夹下，便于管理和操作。
还可以使用图层样式和图层组，对图层进行样式和效果的统一。
此外，可以使用锁定和隐藏图层的功能，避免不必要的操作和干扰。
第四章：切图技巧切图是将UI设计转化为实际网页的关键步骤。
在进行切图之前，可以使用Photoshop的标尺和参考线功能，确定准确的切割尺寸和位置。
然后，可以使用选框工具或裁剪工具，进行切割和裁剪。
可以根据需要选择JPEG、PNG或GIF等不同的图片格式，并调整图片的压缩比例和质量。
最后，可以使用切片工具将整个网页切割成多个小的图片，以便在网页中进行加载和显示。
第五章：导出和优化切割完成后，需要对切割的图片进行导出和优化，以提高网页的加载速度和性能。
在导出过程中，可以选择以Web格式保存图片，以减小图片文件的大小。
可以设置透明度、压缩比例和颜色表等参数，优化图片的质量和大小。
此外，可以使用Photoshop的“保存为Web所用格式”功能，预览和比较不同设置下的图片效果，并选择最佳的导出选项。
页面切图教程
页面切图教程页面切图是一种将设计师的设计稿转化为网页代码的过程。
它是建立一个网页的基础，决定了网页最终的外观和布局。
下面是一个简单的页面切图教程，帮助你了解如何进行页面切图。
第一步是准备工作。
在开始页面切图之前，你需要有一个设计师提供的设计稿。
确保你已经了解设计师的设计意图，并确定了网页的整体布局和元素。
第二步是创建一个基本的HTML结构。
通过使用HTML标记语言，你可以在页面上定义元素和其结构。
创建一个基本的HTML结构，包含标题、段落和容器等基本的元素。
这些元素将作为页面显示内容的基础。
第三步是将设计稿中的图像和文本内容添加到HTML结构中。
使用合适的标签和属性，将设计稿中的图像和文本内容插入到HTML结构中。
确保将图像放置在合适的位置，并使用正确的相对路径链接到图像文件。
第四步是添加CSS样式。
CSS样式表可以控制网页的外观和布局。
根据设计稿的要求，创建一个CSS样式表，并将其链接到HTML文件中。
使用合适的选择器和属性，将样式应用到HTML元素上，以实现设计稿中的外观效果。
第五步是优化页面的响应式布局。
考虑到不同设备和屏幕尺寸的差异，你应该为页面添加响应式布局。
使用媒体查询和CSS网格系统等技术，确保页面在不同设备上都能正常显示。
第六步是测试和调试。
在完成页面切图后，进行测试和调试是非常重要的。
确保页面在不同浏览器和设备上都能正常显示，并检查页面是否存在代码错误或布局问题。
最后，将切好的页面上线。
将完成的页面上传到服务器，并确保它在互联网上能够正常访问。
同时，在网页上添加必要的元标记和元数据，以便搜索引擎能够正确地索引和显示你的网页。
通过以上的步骤，你可以成功地完成一个网页的切图。
准备工作、HTML结构、添加图像和文本、CSS样式、响应式布局、测试和调试以及页面上线是实现这个过程的关键步骤。
希望这个教程对你有所帮助！。
AppStore应用截图设计全攻略
AppStore应用截图设计全攻略虽然应用截图对于app 在App Store 中的榜单排名以及搜索结果排名的提升没有直接影响，但在驱动用户的下载行为方面的作用还是非常大的。
而下载转化率以及下载量的提升，自然会作用于产品的权重、排名等。
目前App Store 可上传的截图数量是 5 张，自动展现出来的约为 2 张，如何充分利用它们呢？近日，小七将与应用截图相关的内容进行了比较全面的整理，发出来供大家参考。
一、应用截图的规格要求针对不同的设备，苹果给出了不同的屏幕截图要求：面向iPhone 的有 4 种，分别是 5.5 英寸、4.7 英寸、4 英寸、3.5 英寸。
面向iPad，有 2 种：9.7 英寸、12.9 尺寸……以下是苹果公布的规格要求：iPhoneA.3.5 英寸Retina 显示屏屏幕快照要求B.4 英寸Retina 显示屏屏幕快照要求C.7 英寸Retina 显示屏屏幕快照要求D.5.5 英寸Retina 显示屏屏幕快照要求iPad对于9.7 英寸Retina 显示屏屏幕快照的要求，苹果做了如下规定：对于12.9 英寸Retina 显示屏屏幕快照的要求，苹果除了在像素上与9.7 英寸Retina 显示屏屏幕快照做了区分之外，其他基本类似：72 dpi、RGB、平展、不透明高品质JPEG 或PNG 图像文件格式大小范围：高分辨率纵向不能超过2048 x 2732 像素高分辨率横向不能超过2732 x 2048 像素注：为了方便开发者，苹果已经允许使用一套截图了。
也就是说，如果你的应用只支持iPhone，且没有基于设备的型号采用不同的UI 或操作、在本地化方面也没有特殊的要求，只需提供 5.5 英寸的屏幕截图（像素-纵向：1242 x 2208，横向：2208 x 1242）即可。
如果你的应用支持iPad，一套12.9 英寸的屏幕截图就可以满足要求。
二、如何设计更吸睛的应用截图将最亮眼的截图放在最前面在选取应用截图时，很多开发者存在这样的想法：用户最期待看到的是遵循某种顺序或者某些故事情节的图片。
iphone界面设计流程
iphone界面设计流程下载温馨提示:该文档是我店铺精心编制而成，希望大家下载以后，能够帮助大家解决实际的问题。
文档下载后可定制随意修改，请根据实际需要进行相应的调整和使用，谢谢!并且，本店铺为大家提供各种各样类型的实用资料，如教育随笔、日记赏析、句子摘抄、古诗大全、经典美文、话题作文、工作总结、词语解析、文案摘录、其他资料等等，如想了解不同资料格式和写法，敬请关注!Download tips: This document is carefully compiled by theeditor. I hope that after you download them,they can help yousolve practical problems. The document can be customized andmodified after downloading,please adjust and use it according toactual needs, thank you!In addition, our shop provides you with various types ofpractical materials,such as educational essays, diaryappreciation,sentence excerpts,ancient poems,classic articles,topic composition,work summary,word parsing,copy excerpts,other materials and so on,want to know different data formats andwriting methods,please pay attention!1. 需求分析与项目团队、利益相关者和用户进行沟通，了解产品的目标、功能和用户需求。
ios移动端切图及前端规范
ios移动端切图及前端规范移动端IOS知识普及：IOS标准分辨率：1242px * 2208px切⽚要求：1、设计稿是按标准分辨率1242X2208设计，图⽚资源尺⼨则是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.png;5、字体: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.启动图标1024*1024,png格式，不能透明底，透明的部分补⽩⾊。
IOS切图规范：设计图：1242X2208三倍图：按1242X2208来切 iphone plus⼆倍图：将整个设计图压缩成750X1334 按750X1334切⼀倍图：在⼆倍图的基础上压缩成50%⼀倍图Ios启动图1. 图标按照最⼤1024*1024来设计，之后按照⽐例缩⼩到每个尺⼨，再进⾏调整，提交没有⾼光和阴影的直⾓⽅形图即可；2. 29*293. 58*584. 40*405. 80*80。
ui切图规范
ui切图规范UI切图规范是指在进行UI设计切图时遵循的一套标准和规范，旨在保证切图效果的一致性和高质量。
以下是UI切图规范的一些重要内容，共计1000字。
1. 文件类型和分辨率UI切图通常使用PNG或者JPEG格式，对于有透明背景的图像，应使用PNG格式。
切图时要确保分辨率与设计稿一致，不要缩放。
如果设计稿尺寸过大，可以通过缩小比例来适应切图。
2. 图层命名和分组切图前应对设计稿中的图层进行合理的命名和分组，以方便后续的切图工作。
图层命名要简洁明了，能够清晰地表达图层的含义。
图层分组要合理，相同类型的图层要放在一起，方便定位和使用。
3. 图片大小和优化在切图时要根据需求和使用场景来选择合适的图片大小，避免不必要的加载和占用空间。
对于需要显示在高分辨率屏幕上的图像，可以使用矢量图或者高分辨率的位图，以保证图像的清晰度。
同时，对于切图后的图片要进行压缩和优化，减小文件大小，提高加载速度，保证用户体验。
4. 边界和间距在切图时要注意图元素之间的边界和间距，在设计稿中留有足够的空隙，避免图层之间相互重叠或者挤压。
同时，对于需要对齐的图层和元素，要使用对齐工具进行精确对齐，保证切出的图像符合设计要求。
5. 切图工具和技巧在进行UI切图时，可以使用一些专业的切图工具和技巧来提高效率和准确性。
例如，可以使用切图工具中的切片功能来快速切割图层，并设置输出路径和格式。
另外，可以使用取色器工具来获取设计稿中的颜色值，保证切出的图像颜色一致。
6. 图像质量和实际效果切图前应仔细审查设计稿，确保图像质量和实际效果的一致性。
例如，注意字体的平滑性和清晰度，保证切出的文字图像不会出现锯齿现象。
另外，注意对细节部分的处理，避免模糊和失真，特别是在缩小图像大小时要特别注意。
7. 标注和导出切图完成后，应进行标注和导出，方便开发人员的使用。
标注要包括图层尺寸、字体大小、颜色值等信息，并与开发人员进行沟通，确保理解和一致性。
导出时要注意导出格式和文件命名，方便后续的开发和使用。
photoshop网页切图怎么用？ps网页切图图文教程
photoshop⽹页切图怎么⽤？ps⽹页切图图⽂教程
⽹页设计在技术层⾯上，第⼀步是美⼯做出⽹页效果图，第⼆步就是⽹页前端进⾏⽹页切图。
⽹页切图⼯具常⽤的有fireworks、PS，这⾥主要向各位介绍怎么使⽤PS进⾏⽹页切图。
1、⽤PS打开⽹页效果图PSD⽂件，根据⽹页效果图拉出参考线，同时为了⽅便切图可以右键点击把⾯板的颜⾊⾃定成对⽐鲜明的颜⾊。
2、在PS图层中找出主背景图层，如果背景图是渐变的话可以只切出⼀两像素，后⾯再代码中设置填充。
3、隐藏其他图层，把背景图切出来。
如果背景图很⼤，可以考虑分段切出，这样可以加速⽹页加载。
4、切出背景后，就从上到下，先把LOGO切出。
这⾥同样要隐藏其他图层，输出图⽚的时候保存⽂件类型选择png，因为这样可以使得图⽚背景透明。
5、导出图⽚可以选择⽂件——存储为web和设备所有格式
6、在保存切出图⽚的时候，选择保存HTML和图⽚，这样导出来的就会⾃动⽣成⼀个⽹页页⾯和切图图⽚
7、在切像尾部版权部分的背景时候，发现这个是渐变图层，这样就可以只切出⼀个像素的长度。
然后在代码中设置repeat-x 横轴填充。
一款APP，从设计稿到切图（Android篇）
一款APP，从设计稿到切图（Android篇）~汇集了之前的三篇Android帖子的精髓~IOS篇：一款APP，从设计稿到切图依旧声明：这里写的依旧只是某一种工作方法，而不是一种规范，你可以参考，但不要照搬，在具体工作中，一定要灵活运用。
汇总贴，整理了之前三篇零散的关于Android的文章……这里我把Android的开发文档，字体，以及不同设计尺寸的文档图片上传了，喜欢的下载；切图的工具在IOS的帖子里，喜欢可以去那下载，这里就不上传了。
如果看了IOS篇，对标注切图的问题会有更全面的理解，建议去看一下……Part 1 基础概念① 你需要知道的一些铺垫：手机分辨率：分辨率就是手机屏幕的像素点数，类似480*800、720*1280、1080*1920这个意思……手机屏幕尺寸：手机对角线的物理尺寸，单位是英寸；比如小米4的尺寸就是5英寸，IPhone 6的尺寸就是4.7英寸……手机屏幕密度：dpi或PPI，每英寸的像素点数，数值越高显示的越逼真细腻。
下面是屏幕密度的计算方法~可以尝试算算自己手机的屏幕密度~②Android自身设定的屏幕密度安卓尺寸众多，按每个屏幕去适配肯定不现实；所以为了解决这个问题，安卓手机屏幕有自己初始的固定密度，安卓会根据这些屏幕不同的密度自己进行适配。
这一点内容掌握到能满足自己设计工作需要就可以了……以下是Android的密度划分以及代表的分辨率，这里你可以发现已经和设计稿尺寸和切图输出开始挂钩了……你需要了解IPhone各个版本的手机屏幕密度：IPhone 4/4s/5/5s/5c/6 ≈320dpi你会发现单从屏幕密度来说，IPhone可以算是超高密度了。
下面来说说这几个密度：LDPI 120dpi 低密度不考虑这个了，消失了……MDPI 160dpi 中密度这个目前少见……HDPI 240dpi 高密度常见xHDPI 320dpi 超高密度常见xxHDPI 480dpi 超超高密度常见xxxHDPI 640dpi 超超高密度 Android4.3推出了对此密度的支持，也就是平板电视的4K分辨率你的切图会根据这几个密度来决定输出多少套~Part2 标注切图你需要知道的Android的一些开发使用的单位：dp：android开发使用的单位，其实相当于一种比例换算单位，它可以保证控件在不同密度的屏幕上按照这个比例单位换算显示相同的效果。
UI设计网页美工设计师的Photoshop CC 生成器切片全攻略
UI设计网页美工设计师的Photoshop CC 生成器切片全攻略在很多的设计项目中都会用到PS软件，PS功能强大功能中有一个切片工具，这是UI设计师和网页美工设计人员需要的掌握的使用方法。
来自非凡学院UI设计培训的武老师为同学们带来了PS 切片工具的教程的全攻略。
在非凡学院学习UI设计培训、网页设计培训、网页美工培训等课程的同学使用的都是学院默认版本CS6进行练习，虽然老师们在课堂上都会强调PS的版本再高，但使用得最多最实用的功能仍然是那几个，事实也确实如此。
但对于切片功能，CC版本以后确实发生了重大变化，使得原来的切片输入工具失去了意义。
以下仅针对需要经常使用Photoshop进行切片的同学，请安装至少Photoshop CC2014以上版本才能使用生成器。
打开编辑菜单——首选项，在增效工具下勾选启用生成器，然后关闭软件重开。
一、单个形状切片输出值得注意的是，生成器并不支持像素对象的输出，所以首选的是形状图层，请同学们注意。
1，首先我创建一个“切图示范”的文件，保存在指定位置，格式是psd。
2，接下来使用形状层绘制两个图标，比较常见的填充色和描边色图标，分别按要求进行命名，然后在图层名称的后缀加上 . png3，保存。
选择文件菜单——生成——图像资源。
4，在保存psd文件的位置会自动生成一个同名assets文件夹，然后在里面就可以找到刚刚命名为.png 的图标文件，它们被自动切片输出，怎么样？很方便吧？5，但大家仔细看一下，发现由于图标锁定宽高比的关系，变成了39*40。
按照设计规范，这显然是不合格的，图标尺寸出现奇数，并且不是我们规范中的44*44的尺寸。
接下来我们在原来图标图层的下方，分别创建两个44*44的正方形形状层。
6，分别各自选中上方图标，按住Ctrl载入选区的方式载入下方正方形选区并添加图层蒙版。
原有的两个正方形最后可以删除或隐藏。
7，再次保存刷新，在输出位置可以看到输出的png尺寸，变成了规范要求的44*44，同时周围保持透明边距。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
9月17日凌晨，IOS9正式推送，它使用的字体最终还是变了，我下面写的内容你们也要酌情更新，因为我写的实在赶不上它更新的速度了(泪奔中...)iOS9使用的西文字体由Helvetica Neue变更为San Francisco,iOS9中文字体由此前的黑体-简变更为苹方黑体依旧声明：这里写的不是一种规范，只是一种工作方法，大家在具体工作中，一定要灵活运用。
另外，技术的更新是非常快的，我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了，所以，还是要灵活运用~我本身是一名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设备会自动的选取合适尺寸。
③共用资源的图片，输出一张就可以类似这种重复的按钮之类的，只要提供一张共用的资源就可以了;上面的文字是技术写上去的。
理论上按照最佳视觉效果，你应该提供多尺寸的图片;但通常我只提供最大尺寸的一张图片即可，这一点要和你的搭档沟通好，却问他需要什么方式。
④切片的输出格式文件→存储为Web所用格式位图格式：PNG 24，PNG 8，JPG在JPG和PNG两种格式图片大小相差不是很大的情况下，推荐使用PNG;如果图片大小相差很大，使用JPG。
欢迎页面，ICON一定要使用PNG格式，在不影响视觉效果的前提下，可以考虑使用PNG 8;矢量图格式：PDF，SVGIOS原生支持的两种矢量图片格式，但是支持的一般，并不能保证100%把所有图片效果渲染出来;为了保险起见，我通常不使用这两种格式，推荐还是使用位图，如果以后技术提升，100%支持SVG和PDF这种矢量格式图，那个时候也许不用提供这么多套尺寸了~⑤图标的点击区域最小点击区域问题：IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44 point(点)，在设备上1 point等于1像素，所以转换成像素就是44*44像素，换算成物理尺寸大概是7mm左右吧(人机工效学研究中得出的结论：用食指操作，触击范围在7mm左右合适;用拇指操作，范围在9mm左右合适)。