Web设计师如何制作Retina显屏设备的图片

下面是Web设计师制作Retina屏幕设备图片的攻略：

1. 理解Retina屏幕设备的特点和需求

首先，我们需要理解Retina屏幕设备的特点和需求。 Retina屏幕设备比传统屏幕设备拥有更高的分辨率和像素密度，例如iPhone的Retina屏幕设备像素密度达到每英寸326个像素。这种高像素密度使得普通图片在Retina屏幕设备上显示效果模糊不清，因此需要重新制作高像素密度的Retina图片。

2. 制作Retina屏幕设备的图片

接下来，我们需要对普通图片进行制作，生成适用于Retina屏幕设备的高像素密度图片。以下是两条制作Retina图片的示例说明：

示例1： Photoshop软件制作Retina图片

1. 打开Photoshop软件，并新建一个文档，宽度和高度为普通图片的2倍大小。
2. 将普通图片复制到新建的文档中，并缩小一半尺寸，宽度和高度调整为与普通图片相同。
3. 使用“文件”→“存储为Web设备所用格式”将图片导出，保存时勾选“图片调整大小”选项。

示例2： 使用CSS3技术制作Retina图片

1. 使用CSS3技术制作一个div元素，并设置宽度和高度为普通图片的尺寸大小。
2. 将普通图片设置为div元素的背景图片，并使用“background-size”属性将背景图片放大到2倍大小。
3. 使用“media query”技术在显示器像素密度为2时，使用新的Retina图片。

3. 导入Retina图片到网页中

最后，在网页中导入Retina图片，确保图片以2倍像素大小显示。在HTML中使用“”标签导入图片时需注意，需要在“src”属性中指定Retina图片的链接，在“width”和“height”属性中设定普通图片的尺寸大小。

以上就是Web设计师制作Retina屏幕设备图片的完整攻略。