Web设计师如何制作Retina图像

标签: 设计 Retina 网页设计 苹果 设计师 | 发表时间:2012-12-17 01:51 | 作者:
出处:http://blog.jobbole.com

英文原文: how to create retina graphics for your web designs,编译: w3cplus – 大漠

苹果公司发布了更多的产品适应Retina屏幕。到目前为止,我们知道苹果设备中支持Retina屏幕技术的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,这些设备能为用户呈现更细腻、平滑和高质量的图片效果,提高了用户的视觉体验。做为一名Web设计师如何为你的网站创建这些适合Retina显屏设备的图片呢?这就是我们今天要学的一个东东。

为什么要支持Retina显示

Web设计师如何制作Retina图像

最初我并期望采用较大的图片来满足Retina屏幕显示采用巨大的图像,因为他毕竟是一个全新的技术。但后来我花了点时间做了一个统计,才意识到苹果的设置占据了很多移动端的份额,这些设备大多数是“iPhone”、“iPod”和”iPad”,而且这些设备都支持Retina屏幕技术。大部分使用13、15寸Retina显示屏的用户都通过”Chrome“、”Firefox“、”Safari“和”IE“上网,如果你需要支持”Opera“ 浏览器,那是你在迎合一些小众用户。(我自己的网站统计数据,就是这样的一个情况)

如何创建Retina图像

Web设计师如何制作Retina图像

你可能为认为,Retina图像只需要使用高分辨率(PPI)来保存就可以,但事实并不是如此。所有你需要做的是为Retina显屏保存放大两倍的中图片,比如说你保存一张200×200像素(css像素)的图生,你需要将图片保存成400×400像素。这些超大型的图像显示成原始图像的大小尺寸,有助于在Retina屏幕上创建光滑和清爽的外观效果。

听起来很简单,那你要怎么获取双倍大小的图像呢?

使用Illustrator设计Logo和Icon图标

Web设计师如何制作Retina图像

矢量图是创建Retina图像的完美解决方案。如果你有一个Logo或ICON是EPS或者Ai文件,在导出或者复制图片到Photoshop时,矢量图它能够扩展到任何尺寸大小。粘贴的元素可以作为一个智能对象,经将保留其矢量路径,因此他可以翻一番,导了出来,作为适合Retina的一个特殊图像。

使用Photoshop的矢量特性

Web设计师如何制作Retina图像

Photoshop是一个像素图形的应用软件,但这并不意味着他不具有制作矢量图形的特性。每一个图形工具都可以创建一个矢量层,而不仅仅是像素层,这样一来所有图层样式效果依然可以伸缩的。如果你把元素都乘以2,所有的效果几乎都能精确的放大两倍大小。

扩大你的像素图像

Web设计师如何制作Retina图像

其中有一条规则,作为设计师的我们不想轻意的去扩大一个图像,但是如果想回去给已经你设计的网站添加Retina屏幕显示的图像,而且你也不想手动的去重新创建每个图像。通常扩展一个图像会层致一个模糊和锯齿点状,但是有一个小选项在Photoshop的图像有一个菜单选择”Neares Neighbor”,这样就可以勉强帮你避免模糊的外观和大量的锯齿,这样图像就可以用了。在元素还没有加载完时,他不会加载进来,但是他提供了一个晳时的替换

设计在200%,然后是缩小?

Web设计师如何制作Retina图像

你可能会想,我为什么不能创建一个两倍大小的Web布局页面,这样我就可以缩小元素来创建需要的图标。在传统的印刷设计理论中是可行的,但是在Web设计中是不行的。因为Web设计是工作在一个像素的基础上,用来创造完美的形状和线条。就算是我们按一定的比例绽放图片,然后通过Photoshop软件导出来,那么导出来 的图片也是一个外表模糊的,特别是小图标的时候。

如何代码控制Retina图像

一旦你创建了一个标准图片的副本,而且这个副本是标准图片大小的两倍像素,那么你就可以使用不同的方法把他们加载到你的页面中。这里有一个快速对文件命名的方法,把标准图片和Retina屏幕下图片放在一个相同的文件目录下,并且Retina下图片命名的方式是在普通图像的文件名的末尾上加个” @2x“,比如说普通图像文件名是”snarf.jpg“,在Retina下我们就把图像另外命名为” snarf@2x.jpg“。

简单的javascript方法

<script src="js/retina.js"></script>

绝对简单的方法,就是使用 retina.js脚本来控制调用Retina图像。简单点说, retina.js会自动检查你图片目录中的”@2x“图像,然后在Retina设备下替换普通的图片。

CSS修改方法

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  header h1 a {
    background-image: url(images/blogspoon-logo@2x.png);
    background-size: 164px 148px;
  }
}

或者,你可以通过手动修改css文件来控制Retina设备下调用Retina图像。通过媒体查询,如果媒体中条件含有”min-device-pixel-ration:2“,在目标元素上就调用适合Retina设备的图片”@2x“,但是不能忘了结对对应的元素设置”background-size“背景图片的尺寸和常规图片大小一样。

HTML的img标签

<img src="images/snarf@2x.jpg" width="300px" height="150px" />

CSS的方法是通过”media queries“来控制元素的背景图片,但是在HTML中可以使用”img“的图片标签,非常的简单,在”img”标签中加载”@2x“图像,然后通过”img“标签的”width“和”height“属性值来缩放图像,以达到普通图像的尺寸。

译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

相关文章

相关 [web 设计师 制作] 推荐:

Web设计师如何制作Retina图像

- - 博客 - 伯乐在线
英文原文: how to create retina graphics for your web designs,编译: w3cplus – 大漠. 苹果公司发布了更多的产品适应Retina屏幕. 到目前为止,我们知道苹果设备中支持Retina屏幕技术的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,这些设备能为用户呈现更细腻、平滑和高质量的图片效果,提高了用户的视觉体验.

Web设计师能从游戏中学到些什么

- Guan - 所有文章 - UCD大社区
Smashing Magazine版权所有. 作者:Smashing Magazine. 译者:UCD翻译小组,波希米亚. 原文地址: http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/.

50 个Web 设计师必备的超便利工具

- Zhang Yi - 菠菜博
作为一个 Web 设计师并不容易,不仅考虑设计与架构,还要时刻注意各种小细节,设计师的工作被各种各样的问题包围,你需要一套超级便利的工具帮你解决各种消耗时间和精力的问题. 本文介绍了50个非常强大的工具,你会发现,其中的一些工具会让你感到惊艳在. 站点发布前的工作清单,预设了28个需要检查的事项,也可以自定义.

WEB设计师和开发人员需要的新鲜资源

- redhobor - 互联网的那点事
网页设计正在进入全新的领域,各种技术每天都在涌现. 网页设计师和开发人员都需要不停的去改进自己的思维不停的去创新用户体验,才能让项目在众多的网页中脱颖而出. 但是不管是WEB设计师还是开发人员,都需要有一套属于自己的素材库,里面有各种资源可随时调用. 下面是我们分享给大家的一些非常实用和新鲜的资源,其中有关于幻灯片插件,有CSS框架,有HTML5和CSS3还有GUI,jQuery等等.

热点争议:Web设计师需要编程知识吗?

- - Web App Trend
Web设计师是否应该学习编写代码是个充满争议的问题. 通常,在完成了一件网页设计后他们把创建网页代码的繁重工作都留给了程序员们. 这种现象不只出现在网络开发行业,在软件及游戏开发业也是如此.  在本篇文章中,作者 Deepu Balan 和大家分享了一些为什么Web设计师需要学习编写代码的理由,这会使广大的Web设计师们受益匪浅.

从Web到移动应用——谈设计师的思维转换

- - legene的交互设计博客
随着移动互联网的快速发展,很多web产品经理、设计师转而投身至移动应用领域. 看起来非常相关的工作,却可能给他们带来了不小的困扰. 很多刚刚接触移动应用的产品经理、设计师依然习惯用Web的思维去做APP,从而导致一系列问题. 张小龙在谈微信时曾经说过: 绝不考虑Web形态,一切考虑都基于APP. 那么,移动应用和Web相比,区别到底在哪里呢.

Web设计师能从游戏中学到些什么 - UCD大社区

- Kenji Kee - ucdchina.com
Smashing Magazine版权所有. 作者:Smashing Magazine. 译者:UCD翻译小组,波希米亚. 原文地址: http://www.smashingmagazine.com/2011/07/27/what-web-designers-can-learn-from-video-games/.

对web设计师而言最有价值的20个移动app

- - Web App Trend
如果你经常外出,需要 mobile apps 来帮你完成工作,而不是在长途旅行中消磨时光,那么这篇文章将会对你有用. 我们总结了该行业排名前 20 的 apps. 自从第一部iPad发布以来,该设备一直遭受PC忠实粉丝的抨击,他们声称它仅仅是消费品而已. 任何使用了iPad(或类似的智能手机或平板)的人都知道这是毫无意义的废话.