用ps设计网站做多大的尺寸？新手入门避坑指南

刚开始搞建站，对着PS软件发呆，最让人头大的不是配色，而是画布到底拉多宽？很多新手在后台看到“备案流程一头雾水”，以为那是服务器的事，其实设计稿尺寸不对，上线后全是坑。这行干了十年，见过太多人因为初始尺寸没定好，导致后期切图崩盘、手机端适配崩盘。今天咱们就掰开了揉碎了，聊聊用ps设计网站做多大的这个核心问题。别嫌基础，这正是新手入门最容易栽跟头的地方。

用ps设计网站做多大的宽度最合适？

很多小白喜欢把画布拉得特别宽，比如1920px甚至更宽，觉得这样“大气”。错了。目前主流的设计基准宽度是1440px或1920px，但核心内容区（Container）通常控制在1200px左右。为什么是1200px？这是行业公认的“黄金阅读宽度”。你去看那些顶级企业官网，虽然背景图可能是全屏的，但文字、按钮、卡片这些核心交互元素，基本都集中在中间这1200px的范围内。

如果你做响应式设计，PS里的画布尺寸其实代表的是“最大宽度”。建议你在PS里新建一个1440px宽的画布，然后在中间画一个1200px宽的辅助线区域。所有的排版、对齐都在这1200px里进行。这样切图出来的组件，无论用户屏幕是1366px的笔记本，还是2560px的4K屏，中间的内容块都能完美居中，两边的背景图或留白会自动延展。如果你直接把设计稿定成1080p（1920x1080）的电视比例，那切出来的图在网页上会被拉伸变形，字体也会显得极小，体验极差。记住，网页设计不是做PPT，它是有流体性的。

高度应该设置为多少？固定高度还是自适应？

这是新手最容易搞混的点。在PS里，你可以随便拉高度，但在代码实现中，严禁固定高度（除了某些特定的Banner区域）。网页是纵向滚动的，内容多少取决于文案长度、图片数量。你在PS里做的高度，仅仅是一个“视觉参考”或“模块示意”。

比如你设计一个“关于我们”板块，在PS里你画了800px高。但到了代码里，这个板块的高度是由里面的文字和图片撑起来的。如果文案多了，高度就会增加；文案少了，高度就会缩短。如果你强行在CSS里写 height: 800px，一旦内容溢出，要么被裁剪，要么破坏布局。

所以，PS设计稿的高度是动态的。你只需要关注行高（Line Height）和模块间距（Spacing）。通常，标题与正文间距设为20px-30px，段落之间间距设为10px-15px，模块与模块之间的大间距设为60px-100px。在PS里，你要利用“参考线”和“智能参考线”功能，确保这些间距是统一的。不要凭感觉画，要用标尺工具量出来。很多新手在PS里画得很随意，结果切图时，间距忽大忽小，前端开发拿到源文件会直接崩溃。

移动端尺寸怎么做？要不要单独开一个PS文件？

必须做，而且建议单独开一个文件，或者在一个大文件里分层管理。现在流量大头都在移动端，如果你只设计了PC端，然后让前端开发去“自适应”，那是灾难现场。移动端不是PC端的缩小版，它是重新排版。

移动端的设计基准宽度通常是375px（iPhone标准）或390px（较新款iPhone）。你在PS里新建一个375px宽的画布。这时候，你会发现之前的1200px内容区没法直接缩过来。你需要重新排版：

1. 单列布局：PC端可能是三列卡片，移动端必须变成单列垂直排列。
2. 字体大小调整：PC端标题32px，移动端可能要缩小到24px甚至20px，否则一屏看不全。
3. 交互元素放大：按钮、链接的热区要变大，因为手指点击不如鼠标精准，最小点击区域建议不小于44x44px。

不要试图在PS里做一个“响应式预览”，那是浏览器的事。你的PS稿应该是静态的切图来源。做好PC端（1440px宽）和移动端（375px宽）两套图，给开发清晰的标注。如果预算有限，至少保证移动端的视觉层级是清晰的，哪怕布局简化。

图片导出格式选JPG、PNG还是WebP？

这直接影响网站加载速度，进而影响SEO排名。很多新手在PS里导出一堆PNG，结果网站打开慢得像蜗牛。

• JPG/JPEG：适合照片、色彩复杂的背景图。压缩比高，文件小，但有损压缩，放大会有锯齿。导出时，质量选80%-85%即可，肉眼看不出区别，但体积能减小一半。
• PNG：适合需要透明背景的元素（如Logo、图标、按钮阴影）。PNG是无损压缩，但文件很大。如果不需要透明背景，千万别用PNG存照片。
• WebP：这是目前的主流推荐。它结合了JPG和PNG的优点，支持透明背景，且体积比JPG小25%-35%。PS CC 2018及以后版本都支持直接导出WebP。如果前端开发不支持，那就导出JPG（照片）和PNG（图标），并在代码里注明。

实操建议： 在PS里导出时，不要直接“存储为”，要用“导出为”。

1. 选中所有图层，文件 -> 导出 -> 导出为。
2. 格式选WebP（如果支持）。
3. 设置尺寸：如果是图标，按实际像素导出（如24x24），不要导出一张500x500的图然后让浏览器缩小，那样浪费带宽。
4. 批量处理：建立好“导出预设”，一次性导出所有切图。

字体在PS里怎么设计？会不会乱码？

网页字体不是PS里的字体。PS里你用了“思源黑体”，代码里如果服务器没装这个字体，用户看到的就会变成系统默认的宋体或Arial，风格全乱。

解决方案有两种：

1. 使用Web Font（网页字体）：在CSS里通过 @font-face 引入字体文件（如woff2格式）。这需要你有字体的授权。免费字体如“思源黑体”、“阿里普惠体”都可以商用。
2. 字体切片/图片化：对于Logo、特殊标题，如果字体很独特，可以直接在PS里转曲（创建轮廓），然后导出为SVG或PNG图片。SVG是矢量图，无限放大不失真，且体积小，是现在做图标和Logo的首选。

新手入门建议： 正文部分尽量用系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;。这样加载最快，兼容性最好。 标题部分如果需要设计感，可以用Web Font，但要控制字体文件大小，首屏加载的字体尽量小，或者使用 font-display: swap 优化加载体验。

颜色规范怎么定？RGB还是CMYK？

PS默认是RGB模式，网页也是RGB。千万不要在PS里用CMYK模式设计，那是印刷用的。CMYK色域比RGB小，转回来颜色会发灰、变暗。

建立**颜色样式（Color Swatches）**是专业做法。

1. 打开PS的“色板”面板。
2. 新建一个组，命名为“品牌色”。
3. 添加主色、辅助色、背景色、文字色。
4. 确保每个颜色都有明确的十六进制代码（Hex Code）。

注意：

• 正文文字不要用纯黑（#000000），太刺眼。建议用深灰（#333333或#222222）。
• 背景不要用纯白（#FFFFFF），可以加一点点灰度（#F5F5F5），让视觉更柔和。
• 对比度要符合无障碍标准。在百度搜索资源平台的《移动网站质量评估规范》中提到，文本与背景的对比度应足够高，以便所有用户阅读。你可以通过在线工具（如WebAIM Contrast Checker）检查你设计的颜色对比度是否达标。

切图时图层怎么命名？开发看得懂吗？

图层命名乱，开发会骂娘。PS里的图层名字，直接决定了切图文件的文件名。如果你导出后，文件叫 Layer 1.png, Group 2.png，开发拿到后根本不知道哪个图用在哪里。

命名规范：

• header-logo.png（头部Logo）
• nav-btn-home-hover.png（导航-首页按钮-悬停状态）
• banner-bg.jpg（Banner背景图）
• icon-arrow-right.svg（图标-右箭头）

实操技巧：

1. 在PS里，选中图层，按 Ctrl+J 复制，重命名。
2. 使用“智能对象”包装复杂图形，方便后期修改。
3. 导出前，检查所有图层的可见性，隐藏的图层不要导出。
4. 最好做一个“标注稿”，在PS里用文字工具标出每个模块的尺寸、颜色代码、字体大小。虽然麻烦，但能减少90%的沟通成本。

设计稿如何交付给前端开发？

很多新手做完PS就完事了，丢给开发一句“照着做”。这是大忌。

交付清单应包括：

1. PSD源文件：保留所有图层、参考线、颜色样式。
2. 切图文件夹：按模块分类（如 /header, /hero, /footer），文件命名规范。
3. 标注文档：可以是PDF，也可以是在线工具（如蓝湖、MasterGo）生成的链接。标注里要包含：
   • 尺寸（宽、高、间距）
   • 颜色（Hex代码）
   • 字体（字号、行高、字重、颜色）
   • 交互状态（默认、悬停、点击）
4. 响应式说明：明确告诉开发，PC端和移动端的断点（Breakpoint）在哪里。通常断点设为768px和1024px。

特别提醒： 关于备案，虽然设计阶段不涉及，但你要知道，如果网站涉及ICP备案，域名解析到国内服务器前，页面必须能正常访问（通常是一个静态的“备案中”页面）。你的设计稿里，最好预留一个位置放备案号，通常在Footer（页脚）部分。备案号字体小，颜色浅，但必须清晰可见。这是合规的底线，别等被挂了才想起来。

网站建设是个系统工程，PS只是第一步。尺寸定对、格式选对、标注清楚，能帮你省掉后续无数的返工。技术选型、服务器部署、SEO优化，每一步都有讲究。

还有什么建站疑问？评论区留言挨个回