广告中的艺术方向
我们来看一些广告艺术方向的例子。以下是一些具有令人惊讶的艺术方向的广告。
响应式网站建设
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根据视口大小和显示密度选择要加载的图像。
我们已经在源代码中定义了断点。一旦浏览器在较大的屏幕上打开，图像可视化地适应较大的视口。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/260647.html