PS如何用960网格模板排版布局？

下面我将为你提供一个详细的、分步的教程，教你如何在 PS 中设置和使用 960 网格模板。

第一步：理解 960 网格系统的基本概念

在开始之前,我们需要了解几个关键术语：

• 总宽度: 960 像素,这是整个画布或内容区域的宽度。
• 列: 构成网格的基本垂直单元，最常用的是 12列，因为它能被 2、3、4、6 整除,灵活性最高。
• 槽: 列与列之间的空白空间,用于创建间距和呼吸感。
• gutter (沟槽): 指的是槽的宽度，在 960 网格系统中，槽的宽度通常是 20px。
• 列宽: 单个列的宽度，可以通过公式计算：列宽 = (总宽度 - (列数 - 1) * 槽宽) / 列数
  • 以 12列 为例：(960 - (12 - 1) * 20) / 12 = (960 - 220) / 12 = 740 / 12 ≈ 61.67px，每个列的宽度约为 61.67px。

核心思想： 你的所有内容（文本框、图片、按钮等）都应该对齐到这些列的边缘上，而不是随意放置,这能确保视觉上的秩序感和一致性。

第二步：创建 960 网格模板

有两种主要方法：手动创建 和 使用预设/插件，我强烈推荐使用预设，因为它更精确、更高效。

使用预设（推荐）

这是最简单、最准确的方法，你可以从网上下载现成的 960 Grid System PSD 文件。

1. 下载预设文件：

   • 访问 gs 官网或其他可靠的资源网站。
   • 下载适用于 Photoshop 的 PSD 文件，通常会提供不同列数（如 12列、16列）的版本。

2. 加载和使用预设：

   • 打开 Photoshop，将下载的 .psd 文件直接拖拽到 PS 界面中打开。
   • 这个文件通常已经为你创建好了所有的辅助线,你可以将其作为基础模板。
   • 在你的设计中，新建一个文件，尺寸为 960x... (高度根据你的设计需求定)。
   • 将下载的模板文件中的图层（通常是所有辅助线所在的图层）复制并粘贴到你的新设计文件中。
   • 将这个辅助线图层命名为“960 Grid”并锁定,防止误操作。

手动创建（如果你找不到预设或想自己定制）

1. 新建画布：

   • 打开 PS，按 Ctrl + N (Mac: Cmd + N) 新建文件。
   • 宽度: 输入 960 像素。
   • 高度: 根据你的设计需求输入，1500 像素或更多。
   • 分辨率: 对于网页设计，72 PPI 足够。
   • 点击“创建”。

2. 创建辅助线：

   • 按 Ctrl + R (Mac: Cmd + R) 显示标尺。
   • 在顶部标尺和左侧标尺上点击并拖动,可以创建垂直和水平的辅助线。
   • 我们以创建 12列网格 为例，槽宽为 20px：
     • 第一根垂直线： 在 0px 处创建。
     • 第二根垂直线： 在 0 + 61.67 + 20 = 81.67px 处创建。 (列宽+槽宽)
     • 第三根垂直线： 在 67 + 61.67 + 20 = 163.34px 处创建。
     • ...以此类推，直到第13根线（最右边）在 960px 处。
   • 提示： 这个手动计算和放置的过程非常繁琐且容易出错。强烈建议使用方法一。

3. 创建网格图层（可选但推荐）：

   • 为了更直观，你可以用矩形工具在辅助线之间填充颜色（比如半透明的灰色）,创建一个可视化的网格。
   • 新建一个图层，命名为 "Grid"。
   • 使用矩形选框工具，沿着第一和第二根辅助线之间创建一个选区，填充 10% 灰色。
   • 重复此操作,为所有列都填充颜色。
   • 将这个图层的不透明度降低到 20%-30%,这样它就不会干扰你设计内容的查看。

第三步：使用 960 网格进行布局

现在你已经有了模板,是时候开始设计了。

内容对齐

这是使用网格系统最关键的一步,你的所有设计元素都应该对齐到网格线上。

• 文本框/段落： 文本框的左边框和右边框应该对齐在某几根垂直网格线上。
  • 例子： 创建一个占满 4 列宽度的内容区域，那么它的左边框对齐第 1 根线，右边框对齐第 5 根线（因为 4 个列 + 3 个槽 = 4 61.67 + 3 20 ≈ 286.68px）。
  • 例子： 创建一个占 8 列宽度的主内容区，两边各留 2 列作为侧边栏。

计算元素尺寸

利用网格的数学特性来快速计算元素尺寸。

• 占满 3 列的图片： 宽度 = 3 * 61.67 + 2 * 20 = 185.01 + 40 = 225.01px。
• 占满 6 列的横幅： 宽度 = 6 * 61.67 + 5 * 20 = 370.02 + 100 = 470.02px。

你可以直接使用 PS 中的参考线来精确放置和调整元素大小。

使用智能对象

对于重复使用的元素（如 Logo、图标、按钮样式），将它们转换为智能对象,这样做的好处是：

• 可以无损缩放。
• 修改源文件后,所有实例都会自动更新。
• 保持了对齐关系。

实践示例：设计一个简单的网页布局

假设我们要设计一个包含 Header（页眉）、Main Content（主内容）和 Sidebar（侧边栏） 的页面。

1. Header: 通常占满整个宽度，从第 1 根线到第 13 根线（0px - 960px）。
2. Main Content & Sidebar:
   • 占 8 列，侧边栏占 4 列。
   • 区： 左边框对齐第 1 根线，右边框对齐第 9 根线。
   • 侧边栏： 紧挨着主内容区，左边框对齐第 9 根线，右边框对齐第 13 根线。
3. • 区内，再创建一个文本框，让它占 6 列宽度,并居中对齐或左对齐到网格线上。
   • 在侧边栏内，放置一个占 3 列宽度的“关于我们”模块,对齐到网格线上。

通过这种方式，你的整个布局会显得非常规整、专业,并且各个元素之间的间距是和谐统一的。

第四步：导出和切图

当你完成设计后，960 网格系统也能帮助你更精确地进行切图。

• 切片工具： 使用切片工具，沿着你的网格线和内容边缘进行切割，这样切出的图片尺寸（如 225px x 300px）正好对应网格中的某个单元,方便前端开发。
• 导出为 Web 所用格式 (Save for Web): 按 Ctrl + Alt + Shift + S (Mac: Cmd + Option + Shift + S),可以针对不同切片进行优化导出。

总结与技巧

• 辅助线是关键： 养成随时显示/隐藏辅助线的习惯 (Ctrl + H),以便在查看最终效果和精确编辑之间切换。
• 图层命名： 给不同的图层组（如 Header, Content, Footer）和辅助线图层清晰的命名,保持文件整洁。
• 从简单开始： 如果你刚开始，先用 12 列网格，它是最通用、最容易上手的。
• 不要被网格束缚： 网格是工具，不是枷锁，如果某个特殊的设计需要打破网格，只要理由充分（为了视觉焦点或动态感），大胆去做,但前提是你已经理解并掌握了网格的规则。

通过以上步骤，你就可以在 Photoshop 中熟练地使用 960 网格系统来创建专业、整洁且易于开发的排版布局了。