好的好的，这是一份非常详细、从零开始的PS静态网页制作教程，这份教程将带你一步步了解如何使用 Adobe Photoshop 来设计、切图并导出一个完整的静态网页。

ps静态网页制作教程
（图片来源网络，侵删）

教程前言：为什么用PS做静态网页？

虽然现在主流的前端开发会使用 Figma、Sketch 等更专业的UI设计工具，但 Adobe Photoshop 依然是许多设计师和开发者的首选,原因如下：

  • 功能强大：PS拥有强大的图像处理、合成和绘图功能,可以创造出极其丰富的视觉效果。
  • 普及度高：作为行业标杆，几乎每个设计师都会使用,文件易于协作。
  • 学习曲线平滑：对于有PS基础的人来说,上手网页切图非常快。

重要提示：PS制作的是网页的视觉稿（视觉稿），它本身不是可以直接运行的网站，你需要通过“切图”和“导出”功能，将设计稿转化为网页所需的图片、图标和CSS样式代码,然后再交给前端开发人员用HTML和CSS将其还原成真正的网页。

教程目录

  1. 第一步：前期规划与准备
  2. 第二步：创建画布与设置参考线
  3. 第三步：设计网页布局
    • 1 头部区域
    • 2 导航栏
    • 3 主要内容区
    • 4 页脚
  4. 第四步：切图与导出
    • 1 导出图片素材
    • 2 导出CSS Sprites（雪碧图）
    • 3 测量并导出CSS代码
  5. 第五步：给开发者的交付物

第一步：前期规划与准备

在打开PS之前,先想清楚你要做什么。

  1. 确定网页内容：这是一个关于什么的网页？（个人博客、企业官网、产品展示页）
  2. 规划布局：在纸上或用思维导图画出大致的布局，头部、导航、主要内容区、侧边栏、页脚分别放什么内容？
  3. 收集素材：准备好你需要的所有图片、Logo、文案等。

第二步：创建画布与设置参考线

这是将想法变为现实的第一步。

ps静态网页制作教程
（图片来源网络，侵删）

  1. 新建文档

    • 打开 Photoshop，点击 文件 > 新建 (File > New)。
    • 预设：选择 Web。
    • 宽度：根据你的需求设置，常见宽度有 1920px（大屏）、1280px（标准）、1024px（旧标准），我们这里以 1280px 为例。
    • 高度：由于网页是垂直滚动的，高度可以先设为 2000px 或更大,后续根据内容调整。
    • 分辨率：网页图片分辨率设置为 72 PPI 即可，印刷品才需要300 PPI。
    • 颜色模式：选择 RGB 颜色。
    • ：选择 白色 或 透明。

  2. 设置参考线 参考线是帮你对齐元素的“隐形标尺”,是专业布局的关键。

    • 显示/隐藏参考线：视图 > 显示 > 参考线 (View > Show > Guides)。
    • 创建参考线：
      • 方法一（推荐）：从顶部标尺或左侧标尺处拖动鼠标到画布上，即可创建参考线，拖动一个到 1280px 的宽度中间（640px）,来居中内容。
      • 方法二：视图 > 新建参考线 (View > New Guide),可以精确输入位置。
    • 设置参考线颜色和样式：编辑 > 首选项 > 参考线、网格和切片 (Edit > Preferences > Guides, Grid & Slices)，可以自定义参考线的颜色和虚线样式,方便区分。

    示例布局参考线：

    • 两侧留白：50px
    • 内容区域宽度：1280px - 50px * 2 = 1180px
    • 在画布上创建 x: 50px 和 x: 1230px 的两条垂直参考线,你的所有主要内容都应该在这两条线之间。

第三步：设计网页布局

我们开始使用PS的各种工具来填充我们的画布。

ps静态网页制作教程
（图片来源网络，侵删）

1 头部区域

  • 背景：可以使用纯色填充，也可以创建一个渐变 (图层 > 新建填充图层 > 渐变...) 或使用一张高质量图片作为背景。
  • Logo：将你的Logo图片拖入PS,调整大小和位置。
  • 标语/副标题：使用文字工具 (T) 输入文字，在右侧的“字符”面板中调整字体、大小、颜色、字间距等。

2 导航栏

  • 背景：通常是一个色块，比头部背景稍深或稍浅，使用矩形工具 (U) 绘制一个矩形，然后双击图层打开“图层样式”，添加 内阴影 或 颜色叠加 来增加质感。
  • 菜单项：使用文字工具 (T) 逐个输入“首页”、“关于我们”、“服务”、“联系我们”等。
  • 对齐：使用移动工具 (V) 配合参考线,将所有菜单项精确地对齐。

3 主要内容区

这是网页的核心部分,通常由多个区块组成。

  • 区块划分：使用矩形工具 (U) 绘制不同颜色的矩形框来代表不同的内容区块（如：轮播图区、产品展示区、新闻列表区）,这有助于你规划布局。
  • 图片占位符：从网上找一些合适的图片（如 unsplash.com），拖入PS中调整大小和位置，可以给图片加上边框或阴影 (图层 > 图层样式 > 描边/投影)。
  • ：使用文字工具 (T) 输入标题、段落文字，注意使用不同的字号和粗细来建立视觉层级（标题 > 副标题 > 正文）。
  • 按钮：使用圆角矩形工具 (U) 绘制按钮形状，添加图层样式（如渐变、描边、内发光）使其更立体，再用文字工具 (T) 在按钮上添加文字。

4 页脚

  • 背景：通常是一个深色背景。
  • 放置版权信息、备案号、联系方式、社交媒体图标等。

小技巧：

  • 图层命名：养成良好习惯，给每个图层命名（如 header-bg, logo, nav-item-home）,方便后期管理和切图。
  • 图层编组：将相关的图层放入一个组中（如 header, main-content, footer），按 Ctrl + G (Windows) 或 Cmd + G (Mac),这会让你的图层面板非常整洁。

第四步：切图与导出

这是从“设计稿”到“网页素材”最关键的一步。

1 导出图片素材

你需要将设计稿中的每一个独立元素（Logo、图标、按钮背景等）都单独导出成图片。

  1. 使用“导出为”功能 (推荐)

    • 在图层面板中，选中你想要导出的图层（例如一个Logo）。
    • 点击顶部菜单 文件 > 导出 > 导出为 (File > Export > Export As)。
    • 在右侧的设置面板中：
      • 格式：通常选择 PNG-24，它支持透明背景，并且色彩质量高，如果是不需要透明背景的简单图片，可以选择 JPG。
      • 预设：选择“艺术-适合屏幕”。
      • 调整大小：可以勾选“调整大小”，并设置导出图片的宽度（如 200px）,高度会自动按比例调整。
    • 点击“导出”,选择保存位置即可。

  2. 使用“存储为Web所用格式” (旧版但功能强大)

    • 选中图层。
    • 点击 文件 > 导出 > 存储为Web所用格式 (旧版) (File > Export > Save for Web (Legacy))。
    • 在弹出的窗口中，选择 PNG-24 或 JPEG,并可以预览不同格式下的文件大小和效果。
    • 点击“存储”。

2 导出CSS Sprites（雪碧图）

如果网页有很多小图标（如社交媒体图标），为了减少HTTP请求，提高加载速度，通常会使用“雪碧图”技术,将多个小图标合并成一张大图。

  • 操作方法：
    1. 在PS中,将所有需要合并的图标图层移动到一起。
    2. 使用矩形工具 (U) 或裁剪工具 (C)，将它们整齐地排列在一张画布上,并确保它们之间有合适的间距。
    3. 将所有图标图层合并 (Ctrl + E / Cmd + E)。
    4. 使用 导出为 或 存储为Web所用格式,将这个合并后的图层导出为一张PNG图片。
  • 交付：除了导出图片，你还需要提供一个详细的坐标说明（每个图标在雪碧图中的x, y坐标和宽高），方便开发人员使用 background-position 来定位。

3 测量并导出CSS代码

PS有一个非常方便的功能可以直接测量元素的尺寸和间距,并生成CSS代码。

  1. 打开信息面板：窗口 > 信息 (Window > Info)。
  2. 使用测量工具：
    • 选择 矩形选框工具 (M) 或 裁剪工具 (C)。
    • 在你想要测量的元素上拖动一个选框。
    • 查看 信息面板，它会实时显示选区的 宽度 和 高度 (W, H)。
  3. 复制CSS代码：
    • 选中你想要生成CSS的图层（例如一个按钮）。
    • 点击顶部菜单 图层 > 复制CSS代码 (Layer > Copy CSS)。
    • PS会将该图层的尺寸、位置（相对于画布左上角）、颜色、阴影、圆角等样式信息,以CSS代码的形式复制到你的剪贴板。
    • 你可以直接将其粘贴到文本编辑器或发给前端开发者。

注意：复制的CSS代码是基于你当前画布的,开发人员可能需要根据最终的HTML结构进行调整。

第五步：给开发者的交付物

当你完成所有设计和导出工作后，你需要整理一个“交付包”给前端开发人员,一个专业的交付包通常包含：

  1. 设计稿文件：
    • .psd 文件：这是源文件，方便开发人员查看图层结构、参考线和样式设置。
  2. 图片素材文件夹：
    • 包含所有导出的 .png、.jpg 文件，并按照类型分好子文件夹（如 icons, images, buttons）。
  3. CSS/HTML说明文档：
    • 一个 .txt 或 .md 文件，里面包含：
      • 页面整体尺寸：如 1280px 宽。
      • 颜色代码：列出所有用到的颜色值（如 #333333 是主标题颜色）。
      • 字体信息：列出所有用到的字体、字号和行高。
      • 雪碧图说明：如果使用了雪碧图,提供每个图标的详细坐标。
      • 特殊交互说明：如“鼠标悬停在按钮上时，背景色变为 #XXXXXX”。

总结与进阶

恭喜你！现在你已经掌握了使用PS制作静态网页视觉稿的全过程。

  • 核心流程：规划 -> 设计 -> 切图 -> 导出 -> 交付。
  • 关键工具：参考线、图层编组、图层样式、导出为、测量工具。
  • 核心理念：PS是设计工具，不是开发工具，你的目标是提供清晰、准确的设计稿和素材,为后续的开发工作打下坚实的基础。

进阶学习：

  • 响应式设计：你可以尝试制作不同尺寸的设计稿（如 1280px 的桌面版和 375px 的手机版）,来模拟响应式布局。
  • UI组件化：思考如何将按钮、输入框、卡片等设计成可复用的组件,提高设计效率。
  • 学习Figma：虽然本教程是关于PS的，但强烈建议你了解Figma，它是一款基于浏览器的UI/UX设计工具，在协作和原型制作方面有巨大优势,是现代网页设计的趋势。