为标题设计图形不仅仅是设计图像，而是了解标题的整体外观。如果您只提供图片，则制作网站的其他人可能会只放一个很小的版本，或者例如变形的版本。

所以第一步是准备一个画布模拟不同的屏幕设备，比如说：1920宽，1280宽，还有一些手机。你不能做出所有的决议，只有几个样本。

但是您在屏幕上看到的文件与移动设备不成比例，因此，作为练习，您可以像这样打印真实尺寸的表格来“感受”尺寸。

当然，或者准备一个更专业的模型（网上有几个免费的模板）。

并为响应式网站导出一些 2 或 3 个不同的图形文件。

光栅文件格式

导出照片的典型文件格式是：jpg。

具有纯色或一些渐变和透明度的插图： png。不要使用 jpg，因为压缩伪影会很明显。

这个文件的 ppi 信息无关紧要，只要注意像素大小。

矢量文件

但是现在你可以导出一个svg 矢量文件，但我建议保留效果，比如渐变透明度。您可以提供单个 svg 文件和推荐大小的预览。

更新。

您通常希望以矢量格式进行设计，因此您可以灵活地以不同的分辨率导出。

需要考虑的一件事是，您“应该”（或“可以”，如果您愿意的话）以 100% 进行设计，然后为视网膜设备生成 2 倍和 3 倍大的附加资产。

在我的第一个示例中，中间图像显示 480 像素宽度。这是手机声明的分辨率，如果它们实际上能够显示全高清（1080 像素宽度），他们将获取 3 倍版本进行显示，但同样，他们声明 480 像素是为了让设计师的生活更轻松。如果他们不这样做，16px 的字体会非常小。

只要您在 Illustrator 中使用形状和钢笔工具，这并不重要。转换为路径的字母也可以。不确定其他工具。

由于您正在使用这些工具创建矢量图形（使用 Illustrator 时），它们可以无限放大而不会损失质量。

将您的文件保存为 EPS、AI、PDF 或 SVG。这些是支持基于矢量的图形的文件类型。可能还有更多，但这些是我所知道的常见的。

如果您在想阅读一些一般信息之前从未听说过矢量图形；http://en.wikipedia.org/wiki/Vector_graphics

祝你好运！

答案取决于您的布局。

如果您使用的是光栅元素（jpg、gif、png），则最佳尺寸是布局中所需的最大尺寸。请小心，因为大图像会导致在浏览器上加载文件的等待时间增加。

光栅的一些提示：

• 尝试将图像分解为元素，例如。将徽标与背景分开
• 在 Web 开发中，您可以在后台重复使用小图案图像，从而节省大量下载时间
• 您可以使用多种工具压缩光栅文件以减小文件大小
• 注意需要更高分辨率图像的视网膜图像

最后，您可能想要使用像 SVG 这样的无损文件，现在是使用它的好时机，因为 IE8 开始逐步淘汰并且浏览器支持非常好。SVG 还具有其他优点，例如能够应用效果。