来源:站酷 作者:小猫2955

关于ps的一些制作规范

1 文件管理

我们从PS文件管理开始，合适的命名项目时间加项目名称

(戳开我，查看更多)

千万不要撒欢儿似的使用Ctrl/Cmd+N（创建新文件）：用最少的PSD文件个数完成你的设计。

将你的UI元素制作成模板

大型网站需要这种UI元素的统一，建立一个统一的模板对前端工作人员也是有益的。

2 psd命名图层

命名图层 & 而且要合理且精确地命名

不要嫌麻烦，一旦设计的层次多了，要找到一个图层就非常困难。对每一个图层都要命名，”图层1 副本 副   本2″这样的图层名字是要严格禁止的。

合理使用图层分组（图层文件夹）

图层分组可以更快地看清楚整个文件的架构，并且可以很快的找到想要的那一层。

删除不必要的图层

你是一个图层堆积狂吗？ 删除不必要的图层会使文件更易用。

整合合并共同元素

把一个logo复制5遍并且分别为他们设置不同的样式是没有理由的，如果可以的话，尽量做一个主图层，其他   的把样式设置在一个这个对象上。

使用图层复合和智能对象

智能对象可以不用建立很多PSD文件，同时在修改的时候可以反映到任何一个使用了同样的智能对象的图层。

一定要记得好好的给图层命名哦！

图片

对图片的处理一切都要是非破坏性的，你肯定不希望添加了不可挽回的效果导致图片或者按钮再也无法被继续修改了。相信我！哪怕只犯一次，也会痛不欲生。

不要强行拉伸或者压扁按钮。智能图层是不错的选择

最好的情况：尽量让所有元素保持矢量，这样你在拉伸的时候可以保持元素的精度，否则的话将矢量文件备份，再进行操作，以便随时恢复。

将遮罩统一化

将遮罩放在图层组上而不是图层上，这样修改的时候可以非常方便的应用到整个组的图层。

对齐

对齐网格，对齐像素，对齐任何一切可以对齐的东西，做一个火眼金睛的像素眼！

谨慎使用混合模式

那个颜色是怎么得到的？ 别告诉我你用了两层叠加，4个副本和16个颜色的渐变混合的啊啊啊?

非破坏性设计

善用蒙版，智能对象，各种方式尽量保证原图没有没损伤任何内容。

一定要记得哦保持可扩展性。

字体

不管PS和浏览器的字体渲染多么不一样，Photoshop字体的问题还是无法得到完美解决，但是你可以控制的是，设计里面文本的各种参数和属性。

使用整数值

使用PS的字体调整工具调整字体，尽量给字号一个整数。

使用正版字体

不要超越版权界限，确保你所使用的字体都是正版的，保护其他同样和你一样职业的设计师们。

不要随意拉伸字体

除了会使字体变得难看模糊之外， HTML/CSS也无法实现这种效果。

控制你的文本框（PS文本框）

先赞一下使用文本框（PS文本框）的你，只是不要让他们比实际的文本长5公里。

使用分开的文本框（PS文本框）

标题？单独用一个文本框处理，正文？也单独使用一个文本框处理，不要混合在一起。

一定要记得让你的PSD在控制之中。

这些所有的Photoshop礼仪都不能让你摇身一变变成一个优秀的设计师，但是它们会让你逐步蜕变，下面是你可以考虑的5条关于练习的内容。

使用栅格系统

你不可能打破常规，如果你连栅格都没用过。

温和地使用投影

打开你设计稿的一刹那，如果你很容易就被阴影吸引，那么说明它已经很重了。

使用WEB字体

不要把字体的选择工作交给前端，当字体不可用时随意选择一个，可以使用Google的WEB字体。（天朝例外^_^）

考虑设备宽度

你的设计需要响应式么？

使用正版的图标库，图片

Google和百度可不是一个免费获得版权图片的地方，最好在使用别人的图片的时候看清楚使用规范。

一定要记得持续学习新的知识

测试

有时候专注于像素里会让你忽略掉一些明显的错误，聘请一些测试人员吧，让他们帮助评审你的设计。

校对

设计稿正式发出去之前先找人帮忙看看，要不然别人会很不留情的挑出你的错误导致你很难堪。

与线框图比较，确保各元素位置正确---保障与客户需求一致。

客户：”我的logo去哪了？” 你说：”哦，你不是想这么做么？

确保你对图像拥有所有权---水印太难看，不对齐太难看

使用带水印的图时，最好100%保证不会被发现，不然，不要冒险去做让自己难堪的事情。

熟悉浏览器的兼容性

和前端开发基友保持友好！在设计之前搜索一些相关信息，看看自己的设计是否得到浏览器的支持，适当时候要放弃圆角/渐变/阴影等特性。

一致性检查

你是不是用了低3度的蓝呢？你的红色和他们logo的色值一样么？