栈设计师指南 - 做21世纪有尊严的PSD

1、低调のPSD

PS的使用你们肯定都很熟悉，如果不会用，我强制假设你会用。我们今天说一说如何让你的设计图不仅看起来美观，使用起来也一样爽爆，做个外表高调图层低调的PSD。

PSD是Photoshop的源格式，可保存Photoshop的图层、通道、路径等信息。而与前端的配合中，客户端不需要给源文件，网页端则需要提供源文件，这就意味着PSD大小和内容有一定要求，动辄几个G的单文件估计会直接让前端人员和电脑一起崩溃。

所以为了避免一些沟通问题，低调的PSD有必要这样做：

• 图层命名合理，如果量太大，至少编组命名；

• 图层需分离的尽量少用图层混合模式；

• 删除不需要的图层；

• 常更新文字尽量用雅黑、宋体、思源黑、苹方等系统默认字体，如果必须用字体，打包发给前端；

• 常更新文字字号取整且别变形拉伸；

• 常更新文字颜色别用颜色叠加，慎用图层混合模式；

• 常更新文字尽量不用描边、渐变色；

• 有状态的元素把状态做全，把其他状态的图层标色区分可隐藏；

• 需要做动画的元素有动画序列或者动画说明；

• 网页开发加载是自上而下的，所以PSD的图层也尽量从上而下分层；

• 用色统一有阶次，如黑(#333)、深灰(#666)、灰(#999)

• PSD文件分辨率72像素/英寸，颜色模式RGB

2、切图の托尼

在互联网设计领域里，你应该能经常听到切图这个词，上一篇也有说到。在很久以前，这个词刚开始的时候，前端还叫切图仔，那时的网页真的就是切图，主要由图片堆叠，但是这个关键字延续到现在，其用法早就变了。这里得感谢PS，尽管他一家独大看起来发展的慢，但每次更新都有很多实用并且与时俱进的小功能，这里包括切图（导图）。

在13年的时候遇到一个很牛的平面设计转行入职做网页设计，第一次跟她说切图的时候，她是拒绝的，好好一个图为什么要切，还要打印出来用剪刀那么麻烦。

这不是段子，设计师的种类那么多，等于是隔了行，术语关键字自然不那么容易理解。

切图这个词其实最初来源于PS里的一个工具（其名称就叫切图），可能你们曾经摸索性的尝试使用过，麻烦且不实用。比如按照这个工具的用法，要切出一个透明底的图标，需要把其他图层隐藏掉再切，但是PS CC版本之后图层上右键是可以直接导出图片的，还可以选择导出图片的格式（还有一个生成-图像资源工具）。

所以在做设计的时候，分层是个大学问。那些可编辑会变动的文字你做了很考究的效果，并且用了图层的混合模式，前端在PSD里看到的是浅绿色，切出来的却是很深的绿色甚至别的颜色，基本就崩溃倒计时了，所以你右眼跳的时候想一想图层有没有用混合模式，前端可能在诅咒你PSD做一半没保存就崩溃。

3、图层の状态

网页设计里常见的是字号和字体，字号可以由设计设定，但是切记在12px以下的时候某些浏览器是不能实现的，当然目前是可以用css3的缩小去实现；至于字体就比较讲究了，常规的网页在window上尽量用微软雅黑或者宋体，移动端没有微软雅黑可以使用系统字体，ios8以后是苹方字体，安卓是roboto或者思源。

假如你为了设计效果用了其他字体，前端则需要在原本几百K的项目里加上动辄几兆的字体文件，为了兼容还得把字体转不同的格式才能完美显示，也有工具可以单独剥离出需要的文字，但是不确定的文字内容只能全部引用了。

另外一个常见的是按钮或者链接，新版的PS有可以直接导出css的功能，由于最近几年的设计形式的原因，扁平化的按钮很多，基本上都可以css去实现，譬如宽高，圆角，阴影，渐变，描边，纯背景色，透明度，或者很炫的背景图，但是文字在代码上能做的效果相对较少，譬如文字没有描边，只有颜色、渐变、阴影，透明度。

可交互的元素状态一般有默认状态、按压状态、已操作、PC端还有鼠标滑过的hover状态、文字链接点击状态、还有图片文本等的状态，这些也都需要做一下区分，类似下图：

4、其他

项目中的图片，基本上没有限制，上篇有说到图片格式的注意事项，点击去看。在图片命名上需要遵循 位置-作用-状态，类似：nav-home-press.png，或者与客户端统一规范。另外图片在做响应式网页的时候要注意主体内容尽量在中间或者多做几个尺寸给前端在不同分辨率下去显示，否则图片可能会变形或者裁切到重要内容。

当然有些传统的公司，基本都是平面设计，做网页或者APP界面的设计很少。如果你们有网页设计或者APP设计的活，也请你们的AI源文件轻量一点，图层混合是平面设计里最常用的技巧，这个在网页上实现起来很难，还有就是前端拿到AI文件切图也是及其不方便，不过你可以引导前端安装最新版的AI，新版AI的导图功能已经很好用了。

PS：文中难免有疏漏，但还是希望大家喜欢，轻拍求关注公众号：全栈设计邦 ( fullDesigner ) 。