本节书摘来异步社区《响应式Web图形设计》一书中的第7章，第7.2节，作者： 【美】Christopher Schmitt 译者： 曾斌 责编： 赵轩，更多章节内容可以访问云栖社区“异步社区”公众号查看。

7.2　使用Photoshop

响应式Web图形设计
早在网页出现之前，Photoshop就已经成为图像处理软件的典范了。到目前为止，它依然是最好的图像处理软件，其内置工具足以胜任处理在网页中使用的图像。

7.2.1　新建文档

选择“文件>新建”，调出“新建”对话框（见图7.22）。

从预设下拉菜单中选择“Web”。根据项目需求，从预先设定好的尺寸里挑出适合你的网站或banner（横幅广告）的尺寸。

如果是针对移动设备的设计，那就选择专为移动设备所做的预设。正如图7.23所呈现的，这里也有针对Retina屏幕和常规屏幕的选项。

除Photoshop之外的其他工具

Photoshop并不是唯一的图像处理软件。还可以试试Adobe Fireworks，特别是在创建和优化网页图像方面，这是款非常卓越的软件。

7.2.2　导出光栅图像

等你准备好用于网页的图像或者logo，接下来就要将其以网络图像格式导出。让我们重新梳理一遍准备网页图像的流程。

按照下面的7个步骤，在Photoshop中导出光栅图像:

① 准备好图像后，选择“文件>存储为Web和设备所用格式”，弹出对话框。

② 在右上方选择想要保存的图像格式：GIF、JPEG或者PNG-8。与PNG-24相关的内容请参见第8章。

③ 如果需要的话，对各种格式的设置进行相应调整。

④ 在双联或者四联视图中，比较不同格式的最终效果，检查图像质量和文件尺寸。

⑤ 单击“Device Central中测试”按钮，查看图像下载速率。

⑥ 等准备好的图像存储为Web图像格式后，选择“优化”选项卡，单击“存储”按钮。

⑦ 在“将优化结果存储为”对话框中为文件命名，之后单击“保存”按钮。