充电站

⬤线上课程  ⬤工作坊 ⬤游学 ⬤实习

vol.01

DIA 是一家总部位于纽约的策略和设计咨询公司

https://dia.tv/

小编在逛 DIA Studio 的官网时，发现他们的主页上多了 Input 和 Output 两个单词，引起了我的好奇心！

点进去一看，原来这个 Input 指的是 DIA 的精神和创作过程。

Output 代表着 DIA 的精神和创作过程的结果，也就是最终的作品。

在 The Brand Identity 采访中，DIA 创意总监 Mitch Paone 解释道： “我们希望网站上能以‘WHY‘和‘HOW‘为主导，而不是放一堆很有吸引力的图像等等的东西。希望能够展示出 DIA 的哲学实践和创作过程。”

对于他们来说，过程、思维、策略和概念对于他们的客户而言才是真正的价值。

By DIA Studio

DIA 的“输入”

你所经历的事情

都将成为你的灵感

在 It‘s Nice That 的讲座上，Mitch Paone 将创作比喻成一个从输入到输出的过程。他认为将自身的经历与学识作为输入，再将此转化为作品作为输出。

区分开这两个部分对于创作来说非常重要，因为你可以在这其中尽情地探索和实验。

为了更好地解释他的概念，他从自身的经历开始讲起，他是如何形成现在的风格以及背后的理论支撑。

为什么他们设计的动态会如此自然舒服？灵感又是来源于哪？

By DIA Studio

A。音乐

在 Mitch 15，16 岁时，他被爵士音乐家 Herbie Hancock 的音乐 Thurst 所打动。当年，音乐人 Herbie 约 85 岁的时候出了一张非常优秀的专辑，他一生都在不断地学习和创作，不断地进步做出越来越高品质的作品，突破自我。

这对年轻的 Mitch 有很大的启发，让 Mitch 有了学习爵士乐的动力，也是他跨入艺术领域的第一步。

为 Squarespace 公司设计的品牌标志性的短片中，能感受到爵士乐对作品的影响。

Squarespace Brand Identity Film 2018 by DIA

B。规律

他认为事物的运动规律能体现出事物本身。就像是你的老朋友从远方走来，你能立刻认出来是他，因为你熟悉他走路的方式，而不是通过看到他的脸来认出。

猫的运动规律 By DIA Studio

他发现这些自然规律是可以变成数学的方式被展现出来，将此结合编程运用到平面设计中，并且尝试不同的组合效果，这个过程让他们非常兴奋。

将蜗牛的运动方式转换到设计中 By DIA Studio

将蛇的运动方式转换到设计中 By DIA Studio

从大自然中提取并归纳出一些动态规律，并将此转化为数据运用到动态海报的设计中，因此他们最终输出的作品看起来如此自然舒服。

By DIA Studio

你可以看到，DIA 的 Input 是多元化的，由文化、生活经历、爱好等等组成。对于我们，应该探索哪些自然规律和规律背后的数据作为 Input 呢？

其实 Input 可以理解为一种创作积累、一种创作手法、思路与习惯；除此之外，还有很多不同元素的 Input 是我们可以运用在设计中的。

在抽象概念中，你可以 Input 你的兴趣爱好来输出视觉。在具象概念中，你可以 Input 一些数据、一段声音来输出视觉；还可以 Input 一些图像来输出一个滤镜等等。Input 和 Output 这个概念，是很重要的新媒体艺术创作思维，结合技术，可以挖掘出自己的无限可能。

那么今天小编就来带大家看看，不同的数据输入能给视觉带来怎么样的可能性！

数据输入：像素

 

提取图像中的像素

输出更好玩的视觉

 

 

其实每一张数码图像中都包含着庞大的数据，而这些数据都是能够被使用的。那么以图片作为 Input 都有哪些玩法呢？

不停放大图片后看到的像素

一般情况下，数码图片是由像素组成的，像素决定着图像的大小尺寸。抛开这些术语，我们来看看像素能做什么。

A。像素排序 Pixel Sorting

像素排序（Pixel Sorting）是以无序的方式引入秩序，可以做出故障艺术的风格。它是一种有趣的、模糊的效果，它有选择地按照图像的行/列对像素排序。

以下面的图片为例，左上角是原图。右上角是亮度阈值以外的像素替换为黑色的图像，其余部分则填充为白色。左下角的图像是用随机颜色填充的间隔–每个颜色代表一个不同的间隔。

By Satyarth

下面这个作品是由作者提取出图片中的某些像素进行位移得到的结果。

By mithran1

在创意编程领域中，想要做出这个效果只需要两个步骤：

1. 将图像的行/列分为“间隔”。

2. 以某种规律重新排列每个间隔中的像素。

一张图玩出多种效果 By Kapilan Naidu

浪花移动的效果 By Bileam Tschepe

B。像素拉伸 Pixel Stretching

顾名思义，与其他故障风格的技术相比，像素拉伸（Pixel Stretching）是非常直接的手法。只需选择单行或一列像素，并将它们伸展到图像上，创建出一个扭曲的，超现实的视觉效果。

By Factory Settings

By 디자인학교

By Factory Settings

By Joe Cavazos

进阶玩法 By Francois Vogel

数据输入：颜色

提取图片中的颜色

可以控制和影像你的视觉变化

除了像素之外，我们还能运用图片中的色彩值。下图中可以看到随着我的鼠标指着不同的色块，对应的 RGB 值也随之改变。

会用 PS 的同学对 RGB 通道值应该不陌生。RGB 分别代表着红色，绿色和蓝色，通过这三个颜色不同的组合来产生其他颜色。

RGB 通道中的红绿蓝通道

RGB 色彩模式为图像中每一个像素的 RGB 分量分配一个 0~255 范围内的数值。那提取出的 RGB 值，能如何运用呢？

A。控制位移

通过色值来控制位移。下面的案例中，运用了动态的黑白噪音值控制上方的静态渐变色。将两者组合后形成了一个流动的渐变色。

在TD中让颜色动起来 By 最毕设

在 TouchDesginer 中使用 Noise 加 Ramp 可以做出这样的视觉。还能够将色彩抽离出动态，产生这种像隐形人的特效。

TD课程内容 By Barak Chamo

RGB 值同时也能应用在三维中，根据明暗度来决定三维的立体程度。你可以看到白色的字体非常突出，黑色的背景在底部。

TD练习 By 最毕设

同理也能用于视频，当我尝试把我喵喵的视频导入到球体上后......

由于浅色部分会更突出，形成了这个诡异的画面...

By 最毕设

B。快速吸色

在 TD 中，你能够快速提取 RGB 值来修改你的设计图色彩，再也不用油漆桶了！同理，也可以用在视频调色和摄像头滤镜等等。

 

 

用TD调色 By 最毕设

 

简单调下颜色，一张像丝网印刷的复古效果就出来了！后期如此简单！

 

 

 

添加鼠标交互后，可以实时改影像颜色。

 

 

通过 RGB 蒙版，实时控制图片色彩 By 最毕设
 

 

还有一个更好玩的是通过提取摄像头中的色彩来重新上色视频。所以当你在摄像头前运动，提取出的 RGB 色彩也会一起变化。

 

 

TD课程内容 By Barak Chamo

通过换色来改变“滤镜”后的颜色 By 最毕设

切换不同的颜色输入 By 最毕设

熟练运用 RGB 值后，可以在 TD 中 轻松做出可交互的动态视觉噢～
 

 

TD 允许你将颜色与数据互相转换。你可以看到下图中，左边的红线代表着 0-1 的数值被转化为右边的从黑到白的渐变色。反之，也可以将颜色转变为数值。

 

 

By 最毕设
 

下图将黑白渐变转化为了三条从 0 到 1 的线，分别代表着 R，G，B。有了这个具体的数据后可以实现许多创作的可能性。

By 最毕设

在这个例子中只运用了图像的宽度数据。在一个图像中所包含的信息量，也取决于此图像的大小。

今天信息量有点大，就先讲到这里啦！希望大家可以慢慢消化，理解其中的含义。除了图片之外其实还有很多可以运用的数据，好好利用起来，可以让你的作品更有说服力。

总的来说，

🤔️ 学会分析大神项目背后的创作逻辑，是一种重要的学习方法。

TD课程内容 By Barak Chamo

  

本文部分内容参考链接：

https://www.youtube.com/watch?v=qTynk4wmXD8

https://the-brandidentity.com/feed/dia/

http://satyarth.me/articles/pixel-sorting/#:~:text=Pixel%20sorting%20is%20an%20interesting,(processing%20source%20code%20here).

     

     

     

编辑：K7

审核：叶欣

未经授权 请勿转载（不免费授权）