本文关键词：ps做网页设计的尺寸
说实话，刚入行那会儿我也傻，觉得网页嘛，不就是拉个框框然后往里填内容？那时候做设计，随便开个1920宽的画布，心里美滋滋的，觉得够大气。结果呢？开发大哥盯着我的图看了半天，眉头紧锁，问我：“你这左边留白这么多，右边又塞满，移动端怎么适配？你考虑过手机用户吗？”我当时就懵了，完全没概念。后来被怼了无数次，才慢慢摸出门道。今天不整那些虚头巴脑的理论，就聊聊ps做网页设计的尺寸这个让人头秃的问题。
首先，你得有个基准。现在主流还是1920px或者1440px作为设计稿宽度，但千万别真就按1920去死磕每一个像素。为什么？因为屏幕太多了！笔记本、台式机、超大屏、还有各种奇葩比例。我一般习惯设1440px宽，高度不设死，内容撑多少是多少。为啥选1440？因为它是目前中高端笔记本和显示器的常见分辨率，而且在这个宽度下，内容布局比较舒适，不会太挤也不会太空。你要是做1920，有时候在普通屏幕上看着还行，一换小屏笔记本，字就挤成一团了，难受得要死。
再说说栅格系统。很多新手做图，喜欢自由发挥，想在哪放元素就在哪放。大错特错！ps做网页设计的尺寸里，栅格是灵魂。我常用12列栅格，每列宽80px，间距20px。这样算下来，总宽就是1280 + 1120 = 1160px的有效内容区。剩下的空间左右各留140px做边距。这样设计出来的页面，结构严谨，开发切图的时候也方便，直接按列数给宽度，不用猜你的意图。你要是没有栅格，后期改稿能改到你怀疑人生。
还有，别忽略移动端！现在谁还只盯着PC端啊？很多人做设计，先做PC版，做完再想怎么挪到手机上。这是最笨的方法。正确的姿势是，先想清楚核心内容在手机上的呈现逻辑。虽然PS做网页设计的尺寸主要是针对PC，但你心里得有个大概的映射关系。比如，PC上占两列的内容，在手机上可能就占满一行。我在PS里通常会单独建一个375px或390px宽的画布，把关键页面过一遍，看看有没有特别别扭的地方。这一步能省掉后期大量的返工。
切图的时候更是有讲究。别把所有东西都切成一张大图，那样加载速度慢得让人想砸电脑。按钮、图标、背景纹理，能拆分的尽量拆分。特别是背景，如果是纯色或者简单渐变，用CSS写就行，别切图。只有复杂的图形才需要切。还有，记得给开发留标注！PS里的文字注释要清晰，颜色值、字体大小、间距，最好用插件自动生成标注，或者手动标清楚。我之前有个项目，因为没标清楚间距，开发按他感觉给的5px，我要的是8px，来回改了三轮，累觉不爱。
另外，关于分辨率。做屏幕设计，72dpi就够了，别搞300dpi，文件大得吓人，还容易卡顿。除非你要做打印物料，否则屏幕显示根本用不到那么高。我见过有人做网页设计，图都糊了还在那纠结分辨率，真是服了。
最后，跟开发多沟通。别闷头设计，设计完先拉着开发过一遍，问问他们觉得实现起来难不难。有些效果看着炫酷，实现成本极高，甚至可能影响性能。这时候，稍微妥协一下，换个简单的方案，大家都轻松。
总之，ps做网页设计的尺寸不是死记硬背几个数字，而是要理解背后的逻辑：响应式、栅格、性能、沟通。别把自己当成画图机器，要当成解决问题的设计师。
如果你还在为尺寸纠结，或者不知道如何高效切图，欢迎来聊聊。别自己瞎琢磨了，容易走弯路。
