平面设计及网页设计是具有不同需求、最佳实践和方法的两个截然不同的视野。例如，在网页设计中使用基于像素/光栅的文件格式(如JPG, GIF或PNG)要容易得多。相反，像EPS和AI这样的矢量文件——它们是可伸缩的，不会导致像素化——更适合平面设计，比如可以使用各种大小的徽标。
到目前为止，为web设计的基于矢量的图形(如SVG或HTML5画布)并不是所有浏览器都普遍和统一地支持。此外，用于web使用的图形有一些与之相关的最佳实践。这些最佳实践之一是您应该注意文件的重量，因为您希望如此你的网页要尽可能快．
作为一个网页设计师，你必须尝试减少你的图形所做的HTTP请求的数量——无论是通过降低你使用的图像的数量还是通过降低你使用的图像的数量将其中一些组合成CSS精灵-以及确保你选择了正确的图像格式，在文件大小和图像质量之间取得完美的平衡。Photoshop是平面设计师和网页设计师都使用的行业标准工具。下面是一些简单的技巧，当你创建用于网站的图形时可以遵循。
1.使用“Save for Web & Devices”命令保存图形
在网页设计中，你必须确保你的图片文件大小尽可能小。但不仅如此，你的图像也需要看起来很好。在Photoshop中创建图形的完美方法是平衡图像质量和文件大小。
网页设计师常犯的一个错误是使用另存为命令，而不是保存为Web和设备命令在Photoshop。
的保存为Web和设备命令创建的文件优化的网页设计，在图像质量，图像分辨率，浏览器兼容性和文件大小。该命令还有一个对话框窗口，您可以使用它来微调图像。
当你调整你的图形设置时，它会告诉你它对文件大小和图像质量的影响。
相比之下，另存为对话框窗口没有那么多选项，通常创建的图像在文件大小方面比较大。
方法保存的相同图像的比较保存为Web和设备命令和另存为命令。
请注意，文件大小差异非常大。
2.考虑使用网络安全的颜色
网络安全颜色将在大多数浏览器和大多数显示器上正确显示，确保您的网站无论在哪里查看都看起来相同。确保你使用的颜色是网络安全的两种最简单的方法如下。
“只有网页颜色”选项
在颜色选择器对话框窗口，检查位于左下角的“仅Web颜色”选项。
这将限制在窗口中显示的颜色为网络安全的颜色。
将颜色转换为网络安全的颜色
通过点击颜色选择器中的小方块(在“当前”和“新建”颜色框旁边)，将任何颜色转换为最近的网络安全颜色。
3.考虑使用“渐进式扫描”选项JPG
JPG文件格式是摄影和高分辨率图像的理想格式。根据您的预期受众，渐进式扫描JPG可能是可行的方法，因为图像将随着站点加载而逐渐呈现(尽管在现代宽带互联网连接上，这种类型的等待时间很少是问题)。这使得用户能够在完全下载之前快速看到图像，使网页感觉反应更灵敏。
有关该主题的更广泛的指南，请阅读JPEG 101:关于JPEG的速成课程指南。
4.将透明图形保存为png
PNG图像格式非常适合需要透明渲染的图像。
PNG透明度为大多数主流浏览器都支持但是要注意如果你发现自己不得不迎合IE6:你的PNG部分是透明的将显示为灰色。有一些变通方法可以避免这个问题(例如，IE PNG修复JavaScript库)，但实现起来很麻烦。
有关png的更多信息，请阅读网页设计师指南的PNG图像格式。
5.将动画图形保存为gif
GIF图像格式，虽然现在大部分被PNG取代，但仍然有用。虽然GIF图像格式明显比PNG和JPG文件更细，但GIF图像格式的一个重要特征是其动画化的能力。
而有一种PNG图像格式的扩展叫做APNG(代表动画便携式网络图形)，它缺乏浏览器支持．
如果你在PNG和GIF之间选择，它是通常选择PNG是个好主意除非图像是动画。
6.注意“下载时间”信息
确保网站加载速度快、外观好看是至关重要的，这就是为什么保存和优化你的图形是很重要的。下面，看看文件保存选项的简单更改对图像文件大小的影响。
最高质量的JPEG
低质量JPEG
一个好的做法是降低质量，直到你明显地注意到图像质量下降。
当你在优化你的图像时，一定要注意下载时间，显示在界面左下角保存为Web和设备对话框窗口。下面，您可以看到，保存的图像在当前设置下，在DSL Internet连接上下载大约需要2秒钟。
相关内容
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
