ps做网站画布大小是多少？这3个尺寸定生死

改个需求建站公司拖一周，这行当里谁没被坑过？

别怪设计师懒，是底图没定好。

ps做网站画布大小是多少，这问题看似简单，实则藏着无数血泪教训。很多新手一上来就建个1920x1080的画布，结果切图切到手软，前端还原度惨不忍睹。

今天不整虚的，直接上干货。

一、 别纠结“标准”，要看“断点”

先泼盆冷水：根本没有唯一的“标准画布大小”。

如果你还在问“是不是1920x1080”，那你的思维还停留在PC Web 2.0时代。现在的项目，90%以上都要兼顾移动端。

我见过太多设计师，在PS里把PC端做得花里胡哨，结果前端一适配，手机端全是裂图、错位。为什么？因为设计稿的画布尺寸，决定了前端的切图策略和响应式断点。

1. 主流画布尺寸参考

根据近三年的项目复盘，以及百度搜索资源平台对移动端友好性的最新建议，目前行业内通用的画布设置如下：

设备类型	推荐PS画布宽度	推荐高度策略	适用场景
桌面端 (Desktop)	1440px 或 1920px	根据内容高度，通常1500-3000px	品牌官网、大型商城首页
平板端 (Tablet)	768px 或 1024px	根据内容高度	较少单独设计，多靠缩放适配
移动端 (Mobile)	375px 或 390px	根据内容高度，通常2000-4000px	小程序、H5活动页、移动端官网

注意： 这里的宽度是CSS像素（CSS px），不是物理像素。在PS中，新建画布时分辨率一定要选 72 PPI，色彩模式选 RGB。如果你选了300 PPI，切出来的图会大得离谱，加载速度直接崩盘。

2. 为什么是1440px而不是1920px？

很多老设计师习惯用1920px。但现实是，现在设计师用的显示器大多是1440x900（MacBook Pro）或2560x1440（27寸4K屏）。

• 1920px画布：在1440p屏幕上显示，你会被迫频繁缩放视图（Zoom In/Out），容易看花眼，对齐像素也容易出错。
• 1440px画布：是大多数主流笔记本和浏览器的“舒适区”。它足够宽，能展示丰富的桌面端布局，同时又不会让切图尺寸过大。

我的建议： 桌面端主设计稿用 1440px，移动端单独建一个 375px 的画布。千万不要试图在一个画布里通过缩放来搞定两端，那是自欺欺人。

二、 布局与间距：8px网格是铁律

画布建好了，下一步就是布局。新手最容易犯的错：间距随意，今天用10px，明天用15px，后天又用12px。

前端还原的时候，看着你的标注，一脸懵逼。

1. 建立栅格系统

在PS中，务必开启 视图 > 新建参考线布局。

• 列数： 桌面端建议 12列，移动端建议 4列。
• 边距（Gutter）： 建议 24px 或 32px。
• 页边距（Margin）： 建议 60px 或 80px（桌面端），16px 或 20px（移动端）。

核心原则：所有间距必须是 8 的倍数。

即：8px, 16px, 24px, 32px, 48px, 64px。

为什么？因为 8px 是移动设备触控目标的最小推荐单位，也是大多数UI组件（如按钮、输入框）的天然节奏。遵循这个规则，你的设计稿会有一种“呼吸感”，前端写代码时，CSS变量也能直接对应，减少沟通成本。

2. 模块间距与内边距

• 模块之间（Section Spacing）： 建议 80px - 120px。这是大板块之间的留白，给视觉喘息空间。
• 卡片内边距（Padding）： 建议 24px 或 32px。
• 元素之间（Margin）： 建议 8px - 16px。

避坑指南： 不要使用奇数间距（如 15px, 25px）。除非你有极强的理由，否则坚持 8px 网格。这不仅是为了美观，更是为了开发效率。

三、 色彩与字体：少即是多，但要有逻辑

设计稿里颜色堆砌、字体超过3种，是前端工程师的噩梦。

1. 色彩规范：建立Token

不要直接在图层上填色。使用PS的 颜色样式 功能，或者建立一套全局变量。

• 主色（Primary）： 1个。用于按钮、链接、强调。
• 辅助色（Secondary）： 1-2个。用于图表、次要按钮。
• 中性色（Neutral）： 5-7个。用于文字（黑、灰、浅灰）、背景、边框。
  • 标题：#333333 或 #222222
  • 正文：#666666 或 #555555
  • 辅助文字：#999999 或 #AAAAAA
  • 背景：#F5F5F5 或 #FFFFFF
  • 边框：#E0E0E0 或 #EEEEEE

注意事项： 在PS中，尽量使用 HEX色值，避免使用CMYK或Lab颜色。前端CSS只认RGB/HEX。

2. 字体规范：系统字体优先

• 中文字体： 优先使用 PingFang SC（苹果）、Microsoft YaHei（微软雅黑）。如果商用项目需要特殊字体，务必确认版权，并准备 WOFF2 格式的文件。
• 英文/数字字体： 建议使用 Inter、Roboto 或 Helvetica Neue。这些字体在Web端显示效果极佳，且开源免费。
• 字号阶梯：
  • H1: 32px / 40px (行高)
  • H2: 24px / 32px
  • H3: 20px / 28px
  • Body: 16px / 24px
  • Caption: 14px / 20px
  • Small: 12px / 16px

移动端字号注意： 正文最小不要低于 14px。低于14px，在手机上阅读体验极差，且容易触发浏览器自动缩放，导致布局混乱。

四、 组件设计：切图与标注的艺术

设计稿不是画完就完事，可交付性才是关键。

1. 组件化思维

在PS中，使用 组件（Components） 功能。将按钮、输入框、卡片、导航栏等做成智能对象或组件。

• 好处： 修改一处，全局更新。
• 切图： 导出时，直接选择所有组件，批量导出。

2. 切图规范

• 格式：
  • 图标、Logo：优先 SVG。矢量，无限放大不失真，文件极小。
  • 背景图、装饰图：WebP 或 JPEG。WebP体积更小，兼容性已覆盖主流浏览器。
  • 照片：JPEG (质量80%) 或 WebP。
• 尺寸：
  • 移动端切图：1x, 2x, 3x。但建议只提供 2x 版本，前端通过CSS缩放适配。
  • 桌面端切图：1x 即可，或提供 2x 用于高分屏。
• 命名： button-primary.png, icon-search.svg。清晰、简短、见名知意。

3. 标注工具

虽然PS自带标注功能，但强烈建议使用 蓝湖（Lanhu） 或 MasterGo 等协同工具。

• PS标注的痛点： 字体信息丢失、间距不精确、无法自动识别。
• 协同工具的优势： 自动识别字体、颜色、间距，支持前端直接复制CSS代码，支持移动端实时预览。

如果必须用PS标注：

• 使用 注释工具，写明字号、颜色、间距。
• 使用 形状图层，对齐关键元素，方便前端查看对齐方式。

五、 前端实现：从PS到代码的翻译

设计稿再完美，代码还原不了也是白搭。这里给出一个基于上述规范的 CSS基础重置与布局代码示例，供设计师参考，也供前端直接使用。

/* 1. 基础重置 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;color: #333333;background-color: #FFFFFF;line-height: 1.5;-webkit-font-smoothing: antialiased;
}/* 2. 容器：响应式最大宽度 */
.container {max-width: 1440px; /* 对应桌面端画布 */margin: 0 auto;padding: 0 60px; /* 页边距 */
}@media (max-width: 768px) {.container {max-width: 100%;padding: 0 20px; /* 移动端页边距 */}
}/* 3. 栅格系统：12列 */
.grid {display: grid;grid-template-columns: repeat(12, 1fr);gap: 24px; /* 列间距 */
}@media (max-width: 768px) {.grid {grid-template-columns: repeat(4, 1fr); /* 移动端4列 */gap: 16px;}
}/* 4. 按钮组件示例 */
.btn-primary {display: inline-block;padding: 12px 24px; /* 内边距：8的倍数 */background-color: #1890FF; /* 主色 */color: #FFFFFF;font-size: 16px;font-weight: 500;border-radius: 4px;border: none;cursor: pointer;transition: background-color 0.3s ease;
}.btn-primary:hover {background-color: #40A9FF;
}/* 5. 卡片组件示例 */
.card {background-color: #FFFFFF;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);padding: 24px; /* 内边距：8的倍数 */transition: transform 0.3s ease, box-shadow 0.3s ease;
}.card:hover {transform: translateY(-4px);box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}.card-title {font-size: 20px;color: #222222;margin-bottom: 16px; /* 间距：8的倍数 */
}.card-content {font-size: 14px;color: #666666;line-height: 1.6;
}

代码解析：

1. Box-sizing: border-box：确保 padding 不会撑大元素，这是前端布局的基石。
2. Max-width: 1440px：严格对应PS画布宽度，保证设计稿与开发稿一致。
3. Grid Layout：现代CSS栅格方案，比Float布局更强大、更简洁。
4. CSS变量：在实际项目中，建议将颜色、间距定义为CSS变量（如 --primary-color），便于全局维护。

上线前的最后检查

在交付设计稿前，务必进行以下检查：

1. 对齐检查： 放大到100%视图，检查所有元素是否对齐。
2. 对比度检查： 使用工具检查文字与背景的对比度，确保符合WCAG 2.1 AA级标准（正文对比度至少4.5:1）。
3. 移动端预览： 在PS中模拟375px宽度，检查是否有文字溢出、元素重叠。
4. 切图完整性： 确认所有切图已导出，命名正确，格式无误。

结语

ps做网站画布大小是多少，这个问题没有标准答案，但有最佳实践。

1440px桌面端 + 375px移动端，8px网格间距，系统字体优先，SVG图标，WebP图片。

这些不是教条，而是经过无数项目验证的效率公式。

遵守这些规范，你的设计稿不仅能好看，更能快落地。前端工程师会感谢你，产品经理会点赞，你自己也会少熬夜。

记住：设计不是画画，是工程。

建站花了多少钱？留言说说真实价格。