在 Retina 15 的显示屏下,做 1280*800 的网页设计图时保证输出效果

提供一些解决办法,希望对你有帮助:1. 使用Retina.js | Retina graphics for your website ,在Retina屏幕下自动切换@2x的高清图片2.图标尽量使用矢量的,比如SVG或图标font,如果不方便,就要输出两倍大小的图片3. 使用类似的响应式CSS代码来适配高分辨率图片@mediascreen and (-webkit-min-device-pixel-ratio: 1.5),screen and (-moz-min-device-pixel-ratio: 1.5),screen and (min-device-pixel-ratio: 1.5) {\t#img {\t\tbackground-image: url(img@2x.jpg);\t}}4.请更新你的Photoshop至最新版本,会有ratina屏的支持,HiDPI and Retina Display Support,Adobe的产品,特别是图像处理产品在R屏下的支持会不断更新换代,各大软件公司也在解决这个问题。5.所有素材图片一律使用智能对象,方便变换尺寸输出至于web的设计尺寸,依然使用72dpi来设计!因为使用其它的dpi会增加单位换算的复杂程度,不是非常熟练的话使用大的DPI将增加前端切图和web规范的难度,大大降低工作效率。我们只要在设计过程中保证图片的输出质量就OK。如果觉得在R屏下设计不方便,建议外接一个大的显示屏来进行设计,如果不出门,我一般笔记本都另外配一个显示屏做,比较方便。
■网友
是会遇到问题的,在rMBP的高分屏下,普通网页中的图片素材等会因为屏幕分辨率太高而被放大,以避免网页过小导致的用户看不清,进而就会出现模糊的现象。基于这种情况一直没有敢入手,苹果太超前了,希望有好的解决方案出现。
■网友
我是楼主。经过试验,我是这样解决这个问题的:按照原有长宽分辨率乘以2来作设计图,做完后,在图像大小里更改尺寸(除以2)然后另存为文件,把这份PSD文件给前端,貌似可以解决(用貌似这个词,是因为不知道是不是错觉,总觉得有点不对劲)。不过楼主测试过,以形状为例,除以2后,完全不模糊,比例正好。希望大家能提供一些不同的方案,谢谢了。
■网友
我和匿名用户是一个办法,p把“以低分辨率打开”关掉,出1280*800的图就直接做2560*1600的,图标全用形状画,做完了以后缩到一半大小,不是形状画出来的视觉元素要重新调整过,再给前端。以低分辨率打开的话,缩放是方便了,但是字体显示太折磨人了。乘以2这个方法的痛苦之处就是文件越来越大机器会越来越卡。。。做web的好方法同求高人指点啊。(rMBP的高分辨率做移动APP确实效率很高,不用像过去一样频繁地把图片输出到手机里查看效果。)


    推荐阅读