做网页设计，别一上来就打开PS死磕像素。这篇文直接告诉你，怎么用PS高效出图，以及为什么你做了半天最后还得切图给前端。
很多人问，ps怎么做网站首页？其实这问题本身就有坑。PS是位图软件，不是代码编辑器。你画出来的再好看，最后也得拆成一张张图片。
我刚开始入行那会儿，也是这么想的。觉得只要设计稿漂亮，前端照着做就行。结果呢？被骂得狗血淋头。因为尺寸对不上，字体渲染有问题，还有那个该死的圆角。
现在回头看，ps怎么做网站首页，核心不在“画”，而在“切”和“布局逻辑”。
先说工具。PS确实能画，但现在的趋势是Figma或者Sketch。不过既然你问PS，我就按PS的流程说。别嫌我啰嗦，这都是血泪教训。
第一步，建立画布。别搞那些花里胡哨的分辨率。网页是72dpi就够了，别搞300dpi，那是印刷用的。画布宽度设1920px，高度先别定，根据内容来。
这里有个小细节，很多人容易忽略。就是参考线。一定要拉参考线。通常网页设计是12列栅格系统。每列宽80px，间隙20px。这样你的元素对齐起来才舒服。
我有一次偷懒没拉参考线，结果给前端交稿时，他说“这个按钮怎么偏了5个像素？”我一看，确实偏了。那种尴尬，谁懂啊。
第二步，分层。这是PS的强项，也是弱项。强项在于你可以随时修改某个图层。弱项在于，如果你图层命名乱糟糟，过两天你自己都看不懂。
我现在的习惯是，每个模块一个组。比如“头部导航”、“Banner区”、“产品展示”。组里面再分图层。命名要规范，比如“btn_login_normal”，“btn_login_hover”。
别嫌麻烦，等你项目大了，就知道这有多重要了。
第三步，颜色管理。网页颜色用RGB，别用CMYK。这点常识，但总有人犯错。还有，Hex码一定要标清楚。别只给个色块，让前端去取色。
前端取色往往不准，因为屏幕色差。你最好直接在PS里复制Hex码，或者用吸管工具取色后，在旁边标注清楚。
说到这，不得不提一下ps怎么做网站首页中的切图问题。这是最头疼的。
以前我们手动切图，用切片工具。现在有了自动导出功能，方便多了。但要注意，SVG图标一定要导出SVG，不要导出PNG。PNG有压缩，放大会有锯齿。SVG是矢量，无限放大清晰。
还有，字体。如果你用了特殊字体，记得嵌入或者提供字体文件。不然前端用默认字体，效果大打折扣。
我有个朋友，设计稿里用了“思源黑体”，但没提供字体文件。前端用了Arial，结果整个页面看起来就像个山寨网站。
最后，交付。别只给一个PSD文件。给一个压缩包，里面包含PSD、切好的图片、字体文件、还有标注文档。
标注文档可以用蓝湖或者摹客，这些工具能自动帮你生成标注。比你自己手写要靠谱得多。
总结一下，ps怎么做网站首页？
1. 建立正确的画布和栅格。
2. 规范分层和命名。
3. 准确标注颜色和字体。
4. 合理切图，优先SVG。
5. 完整交付，包括标注。
别指望PS能解决所有问题。它只是设计工具，不是开发工具。
现在的设计流程，越来越倾向于协作。PS负责视觉，Figma负责原型，前端负责实现。各司其职，才能高效。
如果你还在用PS做所有事，那真的有点过时了。但作为设计师，懂PS依然是基本功。毕竟，很多老项目还是PSD交付。
希望这篇文能帮你少走点弯路。
记得，设计是为了沟通，不是为了炫技。
把话说清楚，把图切干净，比什么都强。
以上。
