Adobe ImageReady 已经是一个被 Adobe 公司停止开发并淘汰的软件。 它的最后一个版本是 CS2，随 Adobe Photoshop CS2 一起发布，之后，Adobe 将其核心功能（主要是用于网页的切片、动画和优化）完全集成到了 Adobe Photoshop 中，并推出了全新的网页和UI设计工具 Adobe Fireworks（Fireworks 后来也于 2025 年停止开发）。

现在没有人会再去单独安装和使用 ImageReady，所有它的功能，你都可以在 现代版的 Adobe Photoshop 中找到，并且功能更强大、更完善。

这份“ImageReady 教程”实际上会分为两部分：

1. ImageReady 的历史功能和概念介绍：让你了解它曾经是做什么的,以及它的核心思想。
2. 在现代 Photoshop 中实现这些功能的详细教程：这才是你今天真正需要学习的内容。

第一部分：认识 Adobe ImageReady 的历史与核心功能

ImageReady 的主要使命是连接 Photoshop 的强大图像处理能力和网页设计的实际需求,它的三大核心功能是：

1. 图像切片：将一张大图切割成多个小图,这样做的好处是：

   
   （图片来源网络，侵删）
   • 加快网页加载速度：浏览器可以同时下载多个小文件,而不是等待一个大文件。
   • 实现复杂的页面布局：可以给不同的切片应用不同的链接、优化格式和颜色模式。

2. 创建 GIF 动画：ImageReady 是制作早期网页动画（主要是 GIF）的利器，它通过一个叫“帧”和“时间轴”的界面，让你像制作翻页动画一样，逐帧设置图像的变化，从而导出为动态的 GIF 文件。

3. 图像优化：提供比 Photoshop 更直观的界面来导出适合网页的图片,你可以：

   • 在一个窗口中同时预览不同格式（如 GIF, JPG, PNG）和不同质量设置下的效果。
   • 实时查看文件大小和预计下载时间。
   • 对切片进行独立的优化设置。

第二部分：在现代 Photoshop 中学习 ImageReady 的替代功能

让我们打开你的 Adobe Photoshop（CC 2025 及以上版本），来学习如何完成 ImageReady 的核心工作。

图像切片与导出

目标：将一张设计好的网页稿,切成多个部分并导出为独立的图片文件。

步骤：

1. 打开设计稿：在 Photoshop 中打开你想要切片的图片（一个完整的网页界面设计图）。

2. 使用切片工具：

   • 在左侧工具栏中找到并长按“裁剪工具”，在弹出的菜单中选择“切片工具”。
   • 在选项栏中，确保是“基于切片的切片”模式。
   • 在画布上，按住鼠标左键，像创建选区一样，框选出你想要导出的第一个区域（网站的 Logo 部分）。

3. 创建所有切片：

   • 重复上一步，为需要独立导出的所有部分（如导航栏、Banner、图片、按钮等）创建切片，你也可以使用“划分切片”功能来自动平均分割。
   • 技巧：对于一些有规律的、重复的切片（如多张产品图），可以先创建一个，然后按住 Alt 键拖动,可以复制出带相同切片设置的切片。

4. 为切片设置不同格式（可选）：

   • 使用“切片选择工具”（在切片工具上右键选择）点击一个切片。
   • 在顶部菜单栏选择“文件 > 存储为 Web 所用格式 (旧版)...”。
   • 在弹出的窗口中，你可以选择单个切片，然后在右侧的预设中选择格式。
     • Logo：通常选择 PNG-24 以保留透明背景。
     • 照片：通常选择 JPEG,并调整质量。
     • 带颜色的简单图标：通常选择 GIF。

5. 导出所有切片：

   • 这是最关键的一步，在“存储为 Web 所用格式”窗口中，确保所有切片都处于选中状态（或者什么都不选，导出所有切片）。
   • 点击右下角的“存储”按钮。
   • 在弹出的“将优化结果存储为”窗口中：
     • 格式：选择“HTML 和图像...”。
     • 设置：可以选择“仅限图像”或“HTML 和图像”，选择后者，Photoshop 会自动生成一个包含所有切片图片引用的 HTML 文件,非常方便。
     • 点击“保存”。

结果：你会在你选择的文件夹里得到一个文件夹，里面包含了所有导出的图片文件，以及一个 .html 文件。

创建 GIF 动画

目标：制作一个简单的 GIF 动画,比如一个文字闪烁或图片淡入淡出的效果。

步骤：

1. 准备图层：

   • 动画的每一帧都对应一个或多个图层的可见状态。
   • 打开 Photoshop，创建你的图层，创建两个图层：一个写着“欢迎”的图层，另一个写着“光临”的图层。

2. 打开时间轴：

   • 在顶部菜单栏选择“窗口 > 时间轴”。
   • 如果出现的是“时间轴 - 视频”面板，点击右上角的三道横线，选择“创建时间轴”或“转换为帧动画”。

3. 创建关键帧：

   • 你会看到时间轴面板底部有一排小图标，这就是“帧动画”模式。
   • 默认情况下,你只有一个空白帧。
   • 第一帧：在图层面板中，只显示“欢迎”图层，隐藏“光临”图层，然后点击时间轴面板右上角的“复制所选帧”按钮（像一张纸的图标）。
   • 第二帧：现在你有两个帧了，在图层面板中，隐藏“欢迎”图层，显示“光临”图层。
   • 你现在就得到了两帧动画：第一帧显示“欢迎”，第二帧显示“光临”。

4. 设置动画参数：

   • 帧延迟：点击每一帧下方的“0秒”字样，可以设置该帧显示的时间（0.5秒、1秒）。
   • 循环选项：点击时间轴面板右上角的“永远循环播放”图标，可以设置动画的循环次数（如“一次”、“永远”）。

5. 预览动画：

   • 点击时间轴面板底部的“播放”按钮（一个向右的三角形）,即可在画布上预览你的动画效果。

6. 存储为 Web 所用格式并导出：

   • 动画制作完成后，同样通过“文件 > 存储为 Web 所用格式 (旧版)...”来导出。
   • 在弹出的窗口中，预设会自动选择“GIF 128 仿色”。
   • 你可以在这里进一步调整颜色、损耗等参数。
   • 点击“存储”，选择一个位置和文件名，保存即可，导出的就是一个 .gif 文件。

总结与学习建议

给你的学习建议：

1. 忘记 ImageReady：直接把它当作一个历史名词来了解。
2. 拥抱现代 Photoshop：花时间熟悉 Photoshop 的“时间轴”和“切片工具”,这些是网页设计师和UI设计师的必备技能。
3. 探索新工具：如果你对网页和UI设计有更高要求，可以了解一下 Adobe Fireworks（虽然已停止，但很多教程和理念仍值得学习）或者目前行业主流的 Figma、Sketch、Adobe XD 等专业工具。

希望这份详细的教程能帮助你理解 ImageReady 的过去，并顺利掌握在现代 Photoshop 中实现其功能的正确方法！