《响应式Web图形设计》一7.2 使用Photoshop

    xiaoxiao2023-12-18  160

    本节书摘来异步社区《响应式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图像格式后,选择“优化”选项卡,单击“存储”按钮。

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

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)