厦门响应式网页设计之响应式网页设计不能千篇一律,需要艺术设计

广告中的艺术方向 我们来看一些广告艺术方向的例子。以下是一些具有令人惊讶的艺术方向的广告。 厦门响应式网站建设 Fedex:中国 – 澳大利亚 动物园Safari:狮子 卡皮蒂:设计师冰淇淋 联邦快递:始终是第一辆卡车 地球工厂:工厂 看这些广告横幅创造一个情感的联系,并唤起一个我不会很快忘记的经验。是的,这是艺术方向的力量! 响应式网页设计中的艺术指导是什么? 虽然这些是广告艺术设计的绝佳例子,但我们的重点是在响应式网页设计中提供有影响力的图像。那么,这方面的艺术方向是什么,它如何影响您的网页平台上的响应图像? 艺术方向是一种技术,可以引起人们对最重要的部分的关注,或者针对图像的特定功能,即使在不同的设备或平台上进行观看也是如此。考虑这个例子: 厦门响应式网站建设 资料来源:ResponsiveImages.org 可以在宽显示屏上看到完整的图像,例如2560 x 1600。但是当在iPad或iPhone上观看时,狗是中心焦点。对于这个图像,艺术总监,如设计师,开发人员或视觉指导,希望观众比该图像中的任何其他对象看到更多的狗。 我们来看看另一个例子。它是由Eric Portis创作的艺术导向的首页。 视频播放器 您可以在这里查看:https://ericportis.com/etc/cloudinary/ 所以,现在你可能会想,“哇,这很酷”还是“这真棒”,想知道你可以如何实现自己,给观众一个引人入胜的艺术指导页面? 制作艺术导向的响应图像 这样做不需要复杂。要自己实现这一点,您必须手动裁剪单个图像以适应各种分辨率。另一个选择是去除所有图像的路线,以集中在图像的中心。正如你可能已经意识到的那样,重要的内容可能会失去尝试使用“一刀切”的方法。 最简单的方法之一是利用Cloudinary 的脸部检测,裁剪,调整大小和优化功能,以提供艺术导向的图像。我们从下面的图像开始: Serena Williams以这个形象为中心(1600 x 700) 我们将使用各种属性到这个图像并查看结果,然后将它们放在一起使用<picture>和<source>来查看艺术方向的全部影响。新对<画面>元素?看看这个关于<图片>元素如何工作的这个很好的帖子。 Cloudinary使我们能够提供如下所示的特定宽高比: 来源:http : //res.cloudinary.com/unicodeveloper/image/upload/ar_16 :  9,w_600/4739297-free-images_mostdh.jpg 我们使用Cloudinary提供的c_fill参数裁剪图像。它像背景适合: CSS 覆盖。您会发现图像将被拉伸以适应宽度。注意区别? 资料来源:http : //res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_16 :  9,w_600/4739297-free-images_mostdh.jpg 当裁剪时,Cloudinary默认关注图像的中心。现在,专注于中心并不总是像我前面提到的那样工作。一个例子会更好地说明我的观点。 检查下面这只可爱的猫: 我们应用了“c_fill”过滤器,并且将猫图像的大部分放在了背景上。这是我们想要的吗?当然不! 厦门响应式网站建设 来源:http : //res.cloudinary.com/demo/image/upload/c_fill,ar_4 :6/  white_cat.jpg 使用重力属性(如g_auto)在另一个点上进行裁剪给我们所需的输出,如下所示: 资料来源:http : //res.cloudinary.com/demo/image/upload/c_fill,ar_4 :6,  g_auto/white_cat.jpg 我就是这个意思。哇!哇! 现在回到我们原来的例子,让我们使用裁切上的另一点的重力  属性,像这样: 使用g_south,您可以看到它如何显示图像的底部,并从头部切下来 资料来源:http : //res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_4:1,  w_800,g_south/4739297-free-images_mostdh.jpg 使用g_north,您可以看到它如何显示顶部,并从底部显示作物。 资料来源:http : //res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_4:1,  w_800,g_north/4739297-free-images_mostdh.jpg 但是默认情况下,我们可以看到更加集中的图像。 资料来源:http : //res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_4:1,  w_800/4739297-free-images_mostdh.jpg 在非常小的装置中,我们可以采取的优点Cloudinary  c_thumb试图把重点放在图像上为1的纵横比参数:1,如下所示: 资料来源:http : //res.cloudinary.com/unicodeveloper/image/upload/c_thumb,ar_1 :1,  w_600/4739297-free-images_mostdh.jpg 可见艺术指导 现在,我们来看看它在网页中的运作方式。创建一个`index.html`文件并插入这个代码,就像这样: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Art Direction</title> </head> <body> <picture> <!– wide crop –> <source media=”(min-width: 600px)” srcset=”http://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_800/4739297-free-images_mostdh.jpg 800w, http://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_1600/4739297-free-images_mostdh.jpg 1600w” sizes=”100vw” /> <!– standard crop –> <img srcset=”http://res.cloudinary.com/unicodeveloper/image/upload/f_auto,q_70,w_800/4739297-free-images_mostdh.jpg 800w, http://res.cloudinary.com/unicodeveloper/image/upload/f_auto,q_70,w_1600/4739297-free-images_mostdh.jpg 1600w” src=”https://res.cloudinary.com/unicodeveloper/image/upload/f_auto,q_70,w_800/4739297-free-images_mostdh.jpg” alt=”Serena Williams Jumping” sizes=”100vw” /> </picture> </body> </html> 浏览器将使用srcset根据视口大小和显示密度选择要加载的图像。 我们已经在源代码中定义了断点。一旦浏览器在较大的屏幕上打开,图像可视化地适应较大的视口。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 厦门响应式网页设计之响应式网页设计不能千篇一律,需要艺术设计
分享到:
赞(0)
广告位820*80