最新的Photoshop软件已经到Photoshop CC 14.2.1的版本了，它的出现，为设计师设计网页界面、创建CSS样式代码实现跨平台开发提供了无限可能。它操作简单，图像处理功能强大。本节内容，我们一起来分享网页图像的4项基础知识。

1.3.1 网页图像的大小

网页界面设计中，图像的大小与分辨率高低有很大的关系，同样大小的图像，分辨率越高图像就越清晰。其中，单位面积内所包含的像素数量是决定分辨率的重要因素。在像素数量一定的情况下，如果更改分辨率，那么图像的尺寸也会发生相应的变化。在网页设计中，我们一般设置文件大小为1024x768像素、1280x720像素、1440 x900像素，分辨率设置为72像素/英寸，如图1.30所示。

当设计师创建网页文件时，我们可自由确定文件的大小。在Photoshop CC软件中，为了便于设计师合理设置文件的大小，在“新建”对话框中提供了“存储预设”选项，我们可单击此按钮，保存我们常用的文件设置选项，如图1.31所示。

此外，有时我们在设计网页时仅需使用图像的一部分或缩小图像，这样也会改变图像原有的尺寸。

1.3.2 网页图片格式

网页图像格式的选择和应用，直接关系到网页的下载速度和打开速度。即使相同大小的图像，选择不同的图像格式其文件的大小也会有所差异。本节内容笔者与大家一起分享网页设计中常用的3种图像格式。

形式简单的图形或图像文件的首选格式：PNG格式

PNG是一种无损耗的图像格式，我们可以对PNG格式图像做任何操作也不会使图像质量产生损耗。这也使得PNG格式可以作为JPEG编辑的过渡格式。当我们保存文件时可选择8位256色的PNG和24位的全色PNG。它完全支持图像的透明、半透明和不透明，但在IE浏览器（6.0）会出现怪异的现象，即半透明的8位256色的PNG格式图像会显示为全透明.

色彩丰富的图形或图像文件的首选格式：JPEG格式

JPEG格式是在互联网及其他联机服务上常用的一种图像格式，它支持CMYK、RGB和灰度颜色模式，不支持透明度。但保留RGB图像中的所有颜色信息，可以通过有选择地扔掉数据来压缩文件大小。当我们在保存文件时，可以确定文件的压缩级别，压缩级别越高，得到的图像品质越低；压缩级别越低，得到的图像品质越高。一般来说，我们的压缩品质不要低于5，否则图像的色彩损失就比较明显了，如图1.33所示。

对图像的颜色要求不高的图形或图像文件的首选格式：GIF格式

GIF 格式也是在互联网及其他联机服务上常用的一种文件格式，用于显示超文本标记语言（HTML）文档中的索引颜色图形和图像。它是一种用 LZW 压缩的格式，目的在于最小化文件大小和节省文件的传输时间。GIF格式保留索引颜色图像中的透明度，但不支持Alpha通道。

1.3.3 Web图像优化的3个关键点

网页图像的优化是每一位设计师都关心的问题，我们必须在图像的质量和压缩比之间找到平衡点，进而获得满意的视觉效果。对于网页图像的优化，重点需要处理好以下3个关键点：

1 选择正确的保存格式；

2 文件的分辨率大小；

3 图像包含的颜色数量。

很多时候，我们的图像尺寸太大都是没有处理好以上3个关键点。下面青岛网站建设公司一起分享图像优化的技巧。

01 如果仅仅满足图像浏览的需要，而无需用户下载打印，笔者建议大家可采用GIF格式保存图像，因为GIF格式的图像多采用索引模式显示，最多支持256种颜色，基本上满足了视觉浏览的需要。GIF格式适合那些使用纯色或是有限色彩的图像，如标志、背景、色条等。

02 如果是JPEG格式的图片，在保存时需结合图像的主体对象、背景的色彩灵活选择压缩品质高、中、低下的效果。根据网站的目标浏览者，可在保存图像时勾选“连续”选项。这样在加载图像时，JPEG格式的图像会逐渐呈现，使浏览者在图像完全加载之前便可快速预览到图像的基本面貌，如图1.34所示。

03 网页图像的分辨率数值，只可以由大改小，减少图像的大小，能源行业网站建设解决方案而不要想当然地由小改大，这样不仅不会提升图像的质量，还会增加文件的保存大小。

04 必要时，可选择其他专门用来优化网页图像的工具软件，例如，RIOT（基本图像优化工具）、Online Image Optimizer（在线图像优化）。

1.3.4 网站效果图的切图

在切割网页效果图时，通过添加参考线，可以很明确地对页面图像进行划分，明确页面中哪些内容需要被切割为图像、哪些内容被切割为背景色，从而的切图技巧。

01 切割网站图像之前要首先分析网站的结构特点。打开设计效果图1.35以后，我们发现，页面主要分为上中下3部分，页面上部主要包括了网站导航、logo、导航栏等内容，中间部分又分为左、中、右3部分。其中左边与右边在基本布局形式上都相同，而中间部分看似简单，只有一则突出的banner，但由于涉及倒影、光照等因素，在裁切时一定要格外小心。

02 仔细观察页面我们还发现网页的背景是一个具有渐变平滑过渡效果的渐变色背景，如图1.36所示。网站的导航设计比较特别，所以可整体进行裁切。

03 网站的主题banner所包含的各个图像、图形在后期将进行图层合并，所以不需要再次进行单独切割。

04 网站的正文文案不需要裁切，只需标注文字的字号、颜色、字体即可。执行“视图”→“标尺”命令，在工作区显示标尺，单击标尺，并拖曳鼠标至页面中需要进行模块划分的区域，松开鼠标即可产生一条参考线。重复类似的操作，完成页面中所有参考线的添加。

05 背景的切割:打开图层面板，隐藏除背景效果以外的其他图层，选择矩形选框工具，绘制出如图1.37所示的矩形选框，按Ctrl+C组合键复制所选区域的内容，执行“文件”→“新建”命令，然后按Ctrl+V组合键粘贴所选区域的内容到当前文档中。

06 执行图像裁切命令，然后在弹出的对话框中选择“左上角像素颜色”选项，这样可以保证所裁切的图像不包含多余的非透明内容，如图1.38所示。

07 保存文件：执行“文件”→“存储为…”命令，然后设定保存文件的名称和保存位置，我们设定的品质值一定不要低于5，否则系统会产生额外的优化算法，在图像的周围产生影响视觉浏览的噪点，如图1.39、图1.40所示。

08 重复以上操作即可完整整个网站的裁切。如图1.41所示，为笔者用同样的方法裁切网站的导航。