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

广告中的艺术方向 我们来看一些广告艺术方向的例子。以下是一些具有令人惊讶的艺术方向的广告。 WP响应式网站建设 Fedex:中国 – 澳大利亚 动物园Safari:狮子 卡皮蒂:设计师冰淇淋 联邦快递:始终是第一辆卡车 地球工厂:工厂 看这些广告横幅创造一个情感的联系,并唤起一个我不会很快忘记的经验。是的,这 WP网站建设

广告中的艺术方向

我们来看一些广告艺术方向的例子。以下是一些具有令人惊讶的艺术方向的广告。

厦门响应式网站建设

厦门响应式网站建设

Fedex:中国 – 澳大利亚

lion动物园Safari:狮子

卡皮蒂:设计师冰淇淋

watch

联邦快递:始终是第一辆卡车

leaf地球工厂:工厂

看这些广告横幅创造一个情感的联系,并唤起一个我不会很快忘记的经验。是的,这是艺术方向的力量!

响应式网页设计中的艺术指导是什么?

虽然这些是广告艺术设计的绝佳例子,但我们的重点是在响应式网页设计中提供有影响力的图像。那么,这方面的艺术方向是什么,它如何影响您的网页平台上的响应图像?

艺术方向是一种技术,可以引起人们对最重要的部分的关注,或者针对图像的特定功能,即使在不同的设备或平台上进行观看也是如此。考虑这个例子:

厦门响应式网站建设

厦门响应式网站建设

资料来源:ResponsiveImages.org

可以在宽显示屏上看到完整的图像,例如2560 x 1600。但是当在iPad或iPhone上观看时,狗是中心焦点。对于这个图像,艺术总监,如设计师,开发人员或视觉指导,希望观众比该图像中的任何其他对象看到更多的狗。

我们来看看另一个例子。它是由Eric Portis创作的艺术导向的首页。

视频播放器

您可以在这里查看:https://ericportis.com/etc/cloudinary/

所以,现在你可能会想,“哇,这很酷”还是“这真棒”,想知道你可以如何实现自己,给观众一个引人入胜的艺术指导页面?

制作艺术导向的响应图像

这样做不需要复杂。要自己实现这一点,您必须手动裁剪单个图像以适应各种分辨率。另一个选择是去除所有图像的路线,以集中在图像的中心。正如你可能已经意识到的那样,重要的内容可能会失去尝试使用“一刀切”的方法。

最简单的方法之一是利用Cloudinary 的脸部检测,裁剪,调整大小和优化功能,以提供艺术导向的图像。我们从下面的图像开始:

serena_0Serena Williams以这个形象为中心(1600 x 700)

我们将使用各种属性到这个图像并查看结果,然后将它们放在一起使用<picture><source>来查看艺术方向的全部影响。新对<画面>元素?看看这个关于<图片>元素如何工作的这个很好的帖子。

Cloudinary使我们能够提供如下所示的特定宽高比:

serena_1来源:http : //res.cloudinary.com/unicodeveloper/image/upload/ar_16 :  9,w_600/4739297-free-images_mostdh.jpg

我们使用Cloudinary提供的c_fill参数裁剪图像。它像背景适合: CSS 覆盖。您会发现图像将被拉伸以适应宽度。注意区别?

serena_2资料来源: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,您可以看到它如何显示图像的底部,并从头部切下来

serena_4资料来源:http : //res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_4:1,  w_800,g_south/4739297-free-images_mostdh.jpg

使用g_north,您可以看到它如何显示顶部,并从底部显示作物。

serena_5资料来源:http : //res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_4:1,  w_800,g_north/4739297-free-images_mostdh.jpg

但是默认情况下,我们可以看到更加集中的图像。

serena_6资料来源:http : //res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_4:1,  w_800/4739297-free-images_mostdh.jpg

在非常小的装置中,我们可以采取的优点Cloudinary  c_thumb试图把重点放在图像上为1的纵横比参数:1,如下所示:

serena_7资料来源: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根据视口大小和显示密度选择要加载的图像。

我们已经在代码中定义了断点。一旦浏览器在较大的屏幕上打开,图像可视化地适应较大的视口。

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/7614

发表评论

电子邮件地址不会被公开。 必填项已用*标注