聊一聊一些荧幕和现场背后的图像故事(24)--超采样和像素画
审美就是一个圈。没有谁好谁坏,不同时期,不同人会喜欢不同的色彩风格,线条风格一样
看多了精雕细琢的精美插画,就会有人喜欢起纯色的像素画一样
图像重采样包含两种情形,一种是下采样(downsampling),把图像变小;另一种是上采样(upsampling),把图像变大。

缩小图像(或称为下采样(subsampled)或降采样(downsampled))的主要目的有两个:1、使得图像符合显示区域的大小;2、生成对应图像的缩略图。
根据Nyquist采样定律,采样频率大于等于2倍的图像的最大频率。
对于高清图片,如果直接采样,采样频率很高。如果先对图像进行模糊化处理(高斯滤波),就可以降低采样频率了,最后进行次级采样(sub-sampling),就可以得到小一倍的图片了。总结:下采样=高斯滤波+次级采样。
放大图像(或称为上采样(upsampling)或图像插值(interpolating))的主要目的是放大原图像,从而可以显示在更高分辨率的显示设备上。对图像的缩放操作并不能带来更多关于该图像的信息, 因此图像的质量将不可避免地受到影响。然而,确实有一些缩放方法能够增加图像的信息,从而使得缩放后的图像质量超过原图质量的。
下采样原理:对于一幅图像I尺寸为M*N,对其进行s倍下采样,即得到(M/s)*(N/s)尺寸的得分辨率图像,当然s应该是M和N的公约数才行,如果考虑的是矩阵形式的图像,就是把原始图像s*s窗口内的图像变成一个像素,这个像素点的值就是窗口内所有像素的均值:
上采样原理:图像放大几乎都是采用内插值方法,即在原有图像像素的基础上在像素点之间采用合适的插值算法插入新的元素。
无论缩放图像(下采样)还是放大图像(上采样),采样方式有很多种。如最近邻插值,双线性插值,均值插值,中值插值等方法。在AlexNet中就使用了较合适的插值方法。各种插值方法都有各自的优缺点。
图像重采样包含两种情形,一种是下采样(downsampling),把图像变小;另一种是上采样(upsampling),把图像变大。

1、次级采样(sub-sampling)
每隔一个,扔掉行和列,创建一个更小的图像。

2、下采样(downsampling)
根据Nyquist采样定律,采样频率大于等于2倍的图像的最大频率。

对于高清图片,如果直接采样,采样频率很高。
如果先对图像进行模糊化处理(高斯滤波),就可以降低采样频率了,
最后进行次级采样(sub-sampling),就可以得到小一倍的图片了。
总结:下采样=高斯滤波+次级采样
3、高斯金字塔(Gaussian pyramids)
在下采样过程中图,所有模糊化处理之前的图片构成一个高斯金字塔。最底层为原图。

高斯金字塔实际上是图像的多尺度表示法。模仿人眼在近处看到的图像细致,对应金字塔底层;在远处看到图像较为模糊,但可以看到整个轮廓,对应金字塔顶层。
4、上采样(upsampling)
插值(interpolation):离散信号之间插入新的值。
但实际情况,函数F[x]是未知的。

图像的插值也可以通过构造函数与图像的卷积运算实现。插入的新值即为新的像素色度值。
对于相同的离散信号,使用不同的构造函数,最后得到的结果也不一样。如下图所示,

其它的构造滤波器




图像的实际效果

Nyquist采样定律
采样定理的提出者不是 Nyquist而是 Shannon, Nyquist定理/频率是用来描述给定带宽的最高传输速率。因为结果相似,所以大家把 Nyquist的名字加在采样定理之前作为一种荣誉。它的标准名字应该是 Nyquist- Shannon采样定理。我们可以用一个旋转轮来形象理解这个定理,如下图:

这是一个各个轴之间间隔45度的轮子,每个轮子都被标上了标识, 假设这个轮子以每秒45度来转动,那么每个轴返回原位需要8秒(采样周期)。那么如果我们每8,16,24秒来用相机拍照,是不是每次都可以拍摄到原图像静止不动? 这是因为在采样周期内,车轮旋转的整数周期都会回到原位,不论旋转方向如何。那么就有了一个非常重要的结论:釆样周期的整数倍不能检测到相位(状态)变化。
我们来减少一点拍摄周期,如果以每4秒的速度拍摄呢?每4秒拍照一次,轮子只能转一半,那么我们可以在照片中检测到轮子正在旋转,虽然依然不能区分它的旋转方向,但是轮子的状态(相位)已经可以区分了。
那么再减少一点拍摄周期,以每3秒的速度拍摄呢?无论顺时针还是逆时针,都可以看到轮轴的错位(相位的变化)。
这就是 Nyquist- Shannon采样定理,我们希望同时看到轮子的旋转和相位变化,采样周期要小于整数周期的1/2,采样频率应该大于原始频率的2倍。同理,对于模拟信号,我们希望同时看到信号的各种特性,采样频率应该大于原始模拟信号的最大频率的两倍,否则将发生混叠(相位/频率模糊)。
常用的插值方法
1、最邻近元法
这是最简单的一种插值方法,不需要计算,在待求象素的四邻象素中,将距离待求象素最近的邻象素灰度赋给待求象素。设i+u, j+v(i, j为正整数,u, v为大于零小于1的小数,下同)为待求象素坐标,则待求象素灰度的值 f(i+u, j+v) 如下图所示:
如果(i+u, j+v)落在A区,即u<0.5, v<0.5,则将左上角象素的灰度值赋给待求象素,同理,落在B区则赋予右上角的象素灰度值,落在C区则赋予左下角象素的灰度值,落在D区则赋予右下角象素的灰度值。
最邻近元法计算量较小,但可能会造成插值生成的图像灰度上的不连续,在灰度变化的地方可能出现明显的锯齿状。
2、双线性内插法
双线性内插法是利用待求象素四个邻象素的灰度在两个方向上作线性内插,如下图所示:
对于 (i, j+v),f(i, j) 到 f(i, j+1) 的灰度变化为线性关系,则有:
f(i, j+v) = [f(i, j+1) - f(i, j)] * v + f(i, j)
同理对于 (i+1, j+v) 则有:
f(i+1, j+v) = [f(i+1, j+1) - f(i+1, j)] * v + f(i+1, j)
从f(i, j+v) 到 f(i+1, j+v) 的灰度变化也为线性关系,由此可推导出待求象素灰度的计算式如下:
f(i+u, j+v) = (1-u) * (1-v) * f(i, j) + (1-u) * v * f(i, j+1) + u * (1-v) * f(i+1, j) + u * v * f(i+1, j+1)
双线性内插法的计算比最邻近点法复杂,计算量较大,但没有灰度不连续的缺点,结果基本令人满意。它具有低通滤波性质,使高频分量受损,图像轮廓可能会有一点模糊。
3、三次内插法
该方法利用三次多项式S(x)求逼近理论上最佳插值函数sin(x)/x, 其数学表达式为:
待求像素(x, y)的灰度值由其周围16个灰度值加权内插得到,如下图:
待求像素的灰度计算式如下:
f(x, y) = f(i+u, j+v) = ABC
利用了 次级采样和超采样次级采样原理,我们能够实现在数字环境还原“笔触”感
以及创造一种独特的风格“像素风”
像素风
像素风作为一种独特的美术风格一直有着一定的受众,因为时代遗留因素,而拥有着独特的魅力
最早像素风诞生是因为计算机图形处理能力,以及图像编辑器的功能受限导致,但随着计算机图像处理软件的进步,渐渐被遗忘,现在又有了复兴的倾向
我们经常会听见这些和像素有关的词:点阵、8bit等等。
“点阵图”就是位图。
在电脑课上我们学过,矢量图无论在屏幕上放多大,它的边缘都是清晰的;位图不然,将其放大会发现一个个小方块,那就是所谓的像素。我们熟悉的720p、1080p,所代表的都是图像纵向像素点数量。
严格地来说,再精细的位图都是像素构成的,我们所称“像素风”,往往是指肉眼可见有小方块的美术风格。拼豆、十字绣、马赛克、led灯牌……其实都是一种像素艺术。
像素往往代表着复古。
过去之所以采用像素游戏画面,一是显示设备的限制,二是游戏机内存大小的限制。
下面是像素时代几个著名的游戏机,它们代表作的图片都可以在本文中找到(一眼就可以认出来):
任天堂Game Boy掌机(***年)为黑白液晶显示屏,仅能显示4级灰阶。代表作《俄罗斯方块》;
任天堂红白机FC(1983年)可以显示48色和5灰阶,同屏幕最多显示其中13色。代表作《超级马里奥兄弟》;
雅达利2600(1977年)支持160 X 192分辨率屏幕,最高128色。代表作《吃豆人》。

1、颜色
我们常说的8位、16位、32位指颜色深度(n-bit colour),也称为位深度。位数越大意味着图像的颜色可以更加丰富和过渡自然。
1位:黑白二色;
4位:2^4=16种颜色;
16位:RGB模式下,R(红)B(蓝)各有2^5=32种取值;G(绿)有2^6=64种。
24位(真彩色):RGB各有2^8=256种取值




像素风是久盛不衰的游戏美术类型,像素给人的第一印象是简单,但深究起来有着大大的学问。我们熟悉的开罗系列、元气骑士、我的世界……说来都是像素风,但是它们美术上的差异也十分明显。
下面一起来简单了解下像素风到底是什么风吧!

目录:
part 1像素那点事
part 2像素风的分类
part 3来学像素画吧
part 1
我们经常会听见这些和像素有关的词:点阵、8bit等等。
“点阵图”就是位图。
在电脑课上我们学过,矢量图无论在屏幕上放多大,它的边缘都是清晰的;位图不然,将其放大会发现一个个小方块,那就是所谓的像素。我们熟悉的720p、1080p,所代表的都是图像纵向像素点数量。
严格地来说,再精细的位图都是像素构成的,我们所称“像素风”,往往是指肉眼可见有小方块的美术风格。拼豆、十字绣、马赛克、led灯牌……其实都是一种像素艺术。
像素往往代表着复古。
过去之所以采用像素游戏画面,一是显示设备的限制,二是游戏机内存大小的限制。
下面是像素时代几个著名的游戏机,它们代表作的图片都可以在本文中找到(一眼就可以认出来):
任天堂Game Boy掌机(***年)为黑白液晶显示屏,仅能显示4级灰阶。代表作《俄罗斯方块》;
任天堂红白机FC(1983年)可以显示48色和5灰阶,同屏幕最多显示其中13色。代表作《超级马里奥兄弟》;
雅达利2600(1977年)支持160 X 192分辨率屏幕,最高128色。代表作《吃豆人》。

“位”是什么东西:
据说减少颜色位数、使用8bit音乐可以让游戏作品更有像素复古风味。
1、颜色
我们常说的8位、16位、32位指颜色深度(n-bit colour),也称为位深度。位数越大意味着图像的颜色可以更加丰富和过渡自然。
1位:黑白二色;
4位:2^4=16种颜色;
16位:RGB模式下,R(红)B(蓝)各有2^5=32种取值;G(绿)有2^6=64种。
24位(真彩色):RGB各有2^8=256种取值
2、音频
8bit风音乐中的8bit,从定义上来讲指音频采样位深。
我们现在所谓8bit风格,其实叫芯片音乐(Chiptune),是一种使用可编程音频发生器芯片合成的电子音乐,盛行于1980年代到1990年代间,因此格外有年代感。
part 2 像素图形风格
到了最喜欢的欣赏像素游戏艺术魅力的环节!其实并没有严格的像素风分类,参考了部分资料后,笔者按主观感受将其大致划分了六种。
下例手游的截图均来自论坛玩家/游戏官图,具体都有什么游戏先有请课代表来作答(x)
一、黑白
顾名思义,除了黑白色系没有其他任何颜色,有灰阶的存在所以并非等于1位色游戏。听上去简约,但运用一定技法也可以表现相当复杂的图案。
同为黑白,以下三者大相径庭:



最后这个游戏额外特别。《奥伯拉丁的回归》(Return of the Obra Dinn),今年3月获得了GDCA的最佳叙事奖,IGF的最佳叙事奖和Grand Price三个奖项。最新消息于2019年秋季登陆Switch平台。
这张截图看上去包含了灰阶,但却是不折不扣完全黑白的1位色游戏——其大量运用了“抖动”技法(part 3见)。
二、简约色块风
无描边,用色块来表现形状的风格。色块上表达立体感的阴影较少。
虽然乍看之下不那么精致,但能形成独特的氛围,在剧情游戏中恰好能不喧兵夺主。




三、简约卡通风
色彩鲜亮,有描边,立体感表现不深。选择这种风格的游戏作品都和可爱、轻松、治愈联系在一起。(你摸着良心再说几遍)
优秀的配色可以让画面丰富而不杂乱,让人赏心悦目~
用以角色塑造的效果非常好。




最简单的像素风格是纯平面的,要达成立体过渡的效果,其一是增加颜色数量,其二是运用阴影、“抖动”等技法。
抖动是将两种颜色的像素网状排布,当图片尺寸较大,像素较多时可以使用这种手法。为了过渡自然,两种颜色不应差距过大。
像素艺术指南:抖动及抗锯齿教学

抖动的功能类似于漫画中网点承担的部分功能。抖动不一定是规律的,不同抖动手法能产生不同效果,如上图所示:第一张是在抖动中加入一些形状;第二张是抖动叠加,多种颜色得以构成过渡;第三张是随机抖动(通常不建议使用)。
关于手动抗锯齿:因为像素的限制,斜线的边缘不可能是平滑的,而是呈现阶梯锯齿状。下图左上的鳄鱼轮廓因此稍显生硬。此时我们可以对其进行抗锯齿处理(下图右)。在黑色轮廓线上填上少量绿色像素,使整体视觉效果更加柔和。

像素动画在不同家数位板中如何设置
1.wacom
dpi 36
中高透视
2.绘王
dpi 72
超高透视
3.友基
dpi 108
不明
4。mooiuu
dpi 144
中透视
5. parblo
dpi 180
中低透视
6.xencelabs
dpi 216
低透视
以PS为例,画之前的基本设置。(每个设置都有原因)
1.新建(ctrl+N)一个100*100像素大小画布。

2.鼠标长按画笔(B),弹出框里选着铅笔;调节画笔大小为最小号;不透明度100%;关闭压 力;平滑0%。



3.橡皮(E)模式改为铅笔;不透明度100%;平滑0%;关闭压力。

4.选取框(M)羽化改为0像素

5.油漆桶(G)容差改为0;取消消除锯齿;连续的分情况开关。

6.编辑——所选项——单位与标尺。将单位全部改成像素

7.关闭对齐;ctrl+H显示隐藏网格;关闭像素网格


这样,选着铅笔(B)画的每一笔都是一个像素,选取框可以精确到每一个像素的框选,油漆桶不会溢出。接下来就简单了(个锤子)
1、首先新建文件,点击“文件”,“新建”。为了简单一点就做一个长宽都为十像素的图片。

2、图片非常小,我们需要放大很多倍,到自己适合的大小。快捷键ctrl“+”


3、此时我们需要看到像素网格。新建一个图层,填充背景色黑色。


4、单击“视图”-----“显示”----“显示像素网格”


6、我们改用铅笔工具,改为方形。CS6中一般自动就是方形。然后就可以涂网格啦。


5、这是我们一般使用铅笔,涂出来自己想涂的网格。(画笔有时会带晕染效果。)类似下图,如果喜欢这样风格,可以使用画笔。

7、但是这时它的大小是非常小的,我们需要将它变成正常大小,并且不影响像素画。(当然除了你取消网格线,截屏)
8、我们新建一个图片,更改为自己需要的大小。将像素图片移到新的图片上。(按住左键不放,直接移到新建的图片上。)可以看出来,在新的画布上,她是非常小的。


9、简单的放大,回让图片模糊。现在我们选择像素画所在图层,单击鼠标右键,选择“转化为智能对象”

10、然后“编辑”----“首选项”----“常规”


11、然后选择“保留硬边缘”

我们先搞一个参考(举个例子,可能对于刚开始的同学有点难。具体的细节,处理方法后面再说,需要一些概括能力,也需要一些经验和套路,先看看流程就行)

1.先画出外轮廓

2.填上固有色

3.我们需要给小黄加一点阴影。
