您现在的位置: 火星网 > 经验频道 > 其他 > 其他 > 视网膜屏幕技术在网页设计中的运用
  • 视网膜屏幕技术在网页设计中的运用
  • 使用软件: 点击: 2209
  • 选择: \ \
  • 发布时间:2013-12-13
  • 免责声明:火星网文章来源于作者原创或整理自互联网,仅为提供更多信息,不代表火星时代同意其观点或描述,版权归原作者所有,如需转载,请联系原作者并注明出处,如涉及作品内容、版权或其他问题,请及时与我们联系,我们将在第一时间予以更改或删除,感谢您的理解和包容!

       

随着苹果产品的不断创新和增加,(Retina)视网膜屏幕技术的使用也越来越广泛。如今,我们有具备视网膜屏幕的iPhone,iPod,ipad和 Mac。这些产品拥有大量的用户,就像您周围看到的,这群庞大的用户正逐渐深入到人们的生活。接下来,咱们就看看如何把这项技巧运用在网页设计当中,让你的作品也看起来更加锐利,清晰。为什么要支持视网膜屏幕?

 

起初,我觉得视网膜屏幕并没有多大的用户基础,毕竟这是个新技术。 然而,当我浏览了一下软件分析数据,发现苹果的所有设备都已经支持了视网膜屏幕技术,包括Macbook 13寸和15寸的使用者,再加上Chrome, firefox,IE浏览器的支持,使得视网膜屏幕技术的使用者越来越庞大起来,所以作为网页开发者不得不重视他们的视觉体验了。

 

 

如何制作图片

 

你会猜测视网膜技术是把图片存储成高分辨率的,提高单位面积的像素率?其实,你只需要做一步,把你的图片存成他的像素的两倍大小,也就是把一张200×200的图片存成400×400的。然后把大图的尺寸改成小图的,这样你的图片就会在高分辨率屏幕上看起来犀利很多。上面的方法听起来很简单,但是我们如何去做呢?

 

 

矢量图片是最佳途径。假如我们有个logo是AI的或eps的,这样我们改起来很方便,因为我们可以随意的调整他的大小,无论是在AI里还是在PS里,然后导出就可以了,在ps里可以粘贴成适量对象。

 

 

但是,我们如何用Photogshop做呢?Photoshop不是矢量软件,这不表示PS不能做矢量图片,形状图层就可以制作出完美的矢量图像,放大两倍完全不是问题。

 

 

现在有个关键问题,设计师们放大或缩小图片不是什么问题,但是如果你已经做好了你的网页,然后你想让这个页面也支持视网膜屏幕,我想你也不能毫无办法的把页面上的图片去重新做一份两倍大小的吧。盲目的放大 又会产生锯齿。下面就是我的办法:在图像—图像大小里面有个选择叫“邻近”。 这个操作对于小图标和单色图像很有用处,虽然不如矢量图片放大两倍之后 的效果好,不过在时间紧急的时候是个不错的选择。将大图缩小成小图的办法是否可行?你也许会问我做一张大图,然后缩小一倍,这样不行吗? 理论上来说,在印刷领域这是没啥问题的,不过在网页设计当中,是以像素为基础的,以至于我们缩小图片之后,也会产生锯齿,而且图片越小锯齿越明显!

 

 

 

注意以上的问题,您就可以让访问者通过他们的视网膜屏幕更清晰锐利的访问您的网页作品了,是不是很酷?赶紧来改造您的页面吧。

分享是一种态度 一句中肯的评价可能改变一个行业 一次用心的分享可能改变他人的一生
你的态度和观点将让我们的行业更强大

匿名用户

按Ctrl+Enter发送消息