这是去年为新员工写的一篇教程，由于公司内部设计师使用的操作系统不一致，为保证设计出图的一致性，加速开发推进。同时把自己的高效率传承下去，高效率来自于两个方面，“全方位的思考与取舍”+“熟练的使用工具”。
涉及到的内容包含设计基础及常用软件工具，共分两部分，第一部分为PC上的设计，第二部分为Mac上的设计。PC上的设计工具，Mac上也可以用，不过既然有Mac，那就用更高效率的软件吧，下一篇讲。
此文为PC部分，目录：
1：基于实时预览的设计；
2：PS图层命名规范
2.1：直接切图
2.2：分辨率命名
2.3：图标尺寸的统一
2.4：常用的切图格式
2.5：图片格式规范及注意事项
3：PS尺寸标注插件Specking
4：ps—键切图插件Layercraft
5：PS导出SVG脚本PStoSvg
6：图片压缩技术及工具tinypng．
7：其他辅助设计工具介绍
1：基于实时预览的设计
由于手机跟PC的屏幕显示效果略有差异，为了保证设计稿在实际使用环境中，能有一个优秀的视觉展现，在设计时需要基于目标平台，对设计进行实时的预览，设计时需要以目标平台为准，目标是用于PC的WEB页面，则使用PC来预览设计稿，目标是手机APP界面，则需要使用手机对设计稿进行实时预览，为WEB设计的界面，直接通过屏幕预览即可。但是由于色域的区别，设计稿在还原成Html网页的时候，仍然会产生偏差。这时候需要对设计稿进行灵活的调整，建议设计师了解基本的DIV和CSS,方便对已经web化的设计稠进行调整。
为手机设计的界面，在预览时并不是十分方便，通过辅助工貝，可以轻松实现设计稿的真机实时预览。PC上常用的手机端实时预览工貝是腾讯ISUX出品的一款叫做PsPlay的软件。
关于PSPlay的下载及具体使用请考：https://isux.tencent.com/ps-play-seamless-mobile-ui-design.html
2：PS图层命名规范
设计师需要养成良好的图层命名习惯，不止要自己看的懂，其他设计师也能一下就能理解，才能方便对设计进行管理。以下设计规范基于Mac平台的一款Slicy的规范进行设计，后面单独讲解这个切图神器。
2.1 直接命名并切图
如图示：可以直接切图的图层或文件夹，命名规范：命名+后缀；举例：star1.png
还可以为切图进行分类命名，如加前缀“icon/”，代表的就是图标类的切图，“btn/”可以
代表这是一个按钮类型的切图。这么操作还有一个好处，在某些自动化切图软件中，可以直接
将切图结果进行文件夹分类。文件夹会被命名为icon或btn。
如图示的切图结果为：
2.2 多分辨率切图
需要提供名分辨率支持的图层文件夹，规范：命名+@2x+后缀。举例：star@2x.png
2.3 图标尺寸的统一
图标尺寸的统一，有助于开发过程的简化和后期的修改调整。例如有三个图标，尺寸分别为：12*13，12*14，13*15。在切图时，可以将单个图标统一为16*16，图标之外的区域用透明填充。
图标尺寸需要保持一致，为保证统一，可以采用以下方法：
1：建立文件夹，并在文件夹底部增加一个矩形，命名为@bounds,并设置为透明（如图黄色部分）；
2：建立文件夹，给文件夹增加一个矢量蒙版位图蒙版，蒙版尺寸设置为需要的尺寸；
2.4 常用的切图格式
对于各平台的不统一性，针对性的整理格式如下，并统一设计的出图格式：
WEB：jpg、png、icon-font、svg;
iOS：jpg、png、icon-font、pdf;
Android：jpg、png、icon-font、svg（5.0以上）;
相关文件格式暂定为：@2x.png、@3x.png、hdpi.png、.pdf、.svg
以test文件为例，提供以下文件名及格式：
一倍大小格式：test.pdf、test.svg
两倍大小：test@2x.png、
三倍大小：test@3x.png、test.png
2.5 图片格式规范及使用注意事项
后綴使用规范：
1：jpg格式，压缩率较高，适用于色彩信息丰富的图片切图，如照片；
2：png格式，无损格式，用于颜色较为单一的图片切图，如单色图标、三种以内颜色的图片；
注意事项：
设计需要以@2x为基础设计，要求精确到像素，图标一律使用钢笔或矢量工具等进行设计；
图层不得出现重复俞名，内容相同的除外。
3：APP端设计尺寸不得低于640*1136，能方便的适配720P、1080P、iPhone5-7Plus.
4：WEB端设计尺寸不低于1024*768，同时需要设定最大尺寸（建议宽度不超过1440，避免在大显示器上因为宽度适配造成的阅读困难）。
3：PS尺寸标注插件Specking
尺寸标注有相当多的软件可以使用，本节主要介绍Specking。
Specking是款Photoshop插件，可以非常方便的在PS内对尺寸进行标注。标注方式包括宽度高度标注，距离标注，颜色标注和字体标注，还可以为设计稿打标签。自动生成的标注会被整合在一个图层文件夹，你可以根据需要方便的对图层进行显示和隐藏。
插件可以很程度上提高工作效率，目前这款插件独立授权的售价是19$。
4：PS—键切图插件Layercraft
这款插件可以很方便的把切图导出符合iOS和Android规范的格式，并能自动缩放尺寸，在UI设计时，务必使用矢量设计，配合插件即可做到无损的以格式输出。
设计时需要基于1倍大小设计（目前来说一倍大小可以设置为@2x的尺寸），插件提供缩放200％和50％来满足高低分辩率的需求。同时还提供透明像素自动裁剪的功能，以减小图片尺寸。新版还提供出路径的选择。插件完全免费，请配合插件管理器Adobe Extension Manager使用。
下载地址：http://7kts35.com5.z0.glb.clouddn.com/LayerCraft.zxp
5：PS导出SVG脚本PStoSvg
随看技术的发展，iOS、Android、Web基本上都支持矢量格式的切图了。使用矢量格式的好处就是在不同的尺寸和分辮率下都能有一个优秀的视觉展现，
目前比较通用的矢量格式就是svg，以很方便的转换成pdf、字体等。iOS客户端目前可以使用pdf格式的图标，WEB支持svg和字体图标，Android支持字体图标（5.0以上版本支持）
所以在PS中使用矢量绘图和导出svg变得很重要。PS没有自带的导出svg的功能，好在有插件和脚本。下面简单介绍下PS导出SVG格式的脚本：PStoSvg。
安装方法，下载后拖拽到Adobe Photoshop/presets/scripts文件夹下。
使用方法很简单，参考之前的命名方法，将图层者文件夹俞名为svg，保存psd文件，然后点击文件>脚本>Save as SVG即。
导出的文件会被命名为.svg.ai，这是因为没有开启A|造成的，打开Adobe Illustrator后，再次执行脚本，就能看到svg格式的文件了。
缺点：不支持文件夹内的svg导出，不能自行选择导出，需要配合AI使用。
另一款SVG插件Zeick-Photoshop SVG export 4.0，需要付费19.99$，更好用一些，自行了解：
特点：Vectorshapelayers、GroupOfshapes、Multiplelayersexport、ShapeColor、ShapeGradient(beta)、ShapeStroke(beta)、Coloroverlay(beta)、Gradientoverlay
6：图片压缩技术及工具tinypng
下載APP安装包访问网站时，除了网络环境，影响加载速率和用户体验的最关键因素就是文件大小了。减小文件大小的方法有很多，大都是采用有损压(jpg和gif)的方式，压后图片会变得模糊不清，为了解决这些问题，需要使用png的无损格式出图，出图后使用TinyPNG的图片压技术进行压缩。
目前提供压缩图片压缩技术的平台挺多，TinyPNG是目前压缩速度和压率最好的。经过测试试，一张1.1MB（1072KB）的png格式图片，在腾讯智图可以压到1019KB，而TinyPNG可以压到369KB，压率为66％。
在以往的常规使用中，APP使用的图标类切图，压缩率接近90％。比如APP所有切图为10MB，压缩后能达到1MB以内。减少了9MB的大小，从而减小APP的尺寸，加快用户下载速度，同时降低服务器流量支出。
常规使用流程只需要打开网站(https://tinypng.com/)把要压的图片上传，等待压缩完成后下载即可。
重度使用者，建议购买Photoshop插件($50)，安装后可以直接通过文件>导出>TinyPNG and TinyJPG。结合photoshop的动作和批处理功能，对所有图片进行批量压缩和优化，
插件同时支持jpg和png格式的压缩，同时可以对图片的尺寸比例进行放。提供100％、50％、33.33％和25％四个常用固定比例。
7：其他辅助设计工具介绍
此部分工具只做简短介绍，详细文档请参考官方使用说明。
SizeMarks，免费插件。选中选区，按下快捷键（自行设置）即快速标注尺寸。插件会根据宽高自动选择长边进行标注。比如你画了个25*30px的矩形，那么它就以30px来标注，如果是正方形，默认为垂直标注。
CutterMan：收费的国产软件。操作方式类似Specking。CutterMan同时提供屏幕实时预览、尺寸标注、切图等软件，部分收费。
软件类：
马克曼：是一款基于AdobeAiR平台的一款方便高效的标注工貝，极大节省设计师在设计稿上添加和修改标注的时间，让设计更有爱。支持以种图片格式、设计稿自动刷新、定制标记样式、支持Retina@2x图。60RMB每年。
Dorado：腾讯CDC出品的尺寸标注软件。无需安装，更加绿色。
7.2：其他图片压缩工具
此部分不做详细介绍，感兴趣的请自行了解。推荐使用Tinypng作为主力压缩工貝。
源文档不知道扔哪儿了，只剩下pdf版，重新截屏的图片有点模糊，最后再单独贴上高清pdf下载吧。
