聊一聊一些熒幕和現(xiàn)場背后的圖像故事(24)--超采樣和像素畫
審美就是一個圈。沒有誰好誰壞,不同時期,不同人會喜歡不同的色彩風格,線條風格一樣
看多了精雕細琢的精美插畫,就會有人喜歡起純色的像素畫一樣
?? ? 圖像重采樣包含兩種情形,一種是下采樣(downsampling),把圖像變??;另一種是上采樣(upsampling),把圖像變大。
?

縮小圖像(或稱為下采樣(subsampled)或降采樣(downsampled))的主要目的有兩個:1、使得圖像符合顯示區(qū)域的大小;2、生成對應圖像的縮略圖。
根據Nyquist采樣定律,采樣頻率大于等于2倍的圖像的最大頻率。
? ? ? ?對于高清圖片,如果直接采樣,采樣頻率很高。如果先對圖像進行模糊化處理(高斯濾波),就可以降低采樣頻率了,最后進行次級采樣(sub-sampling),就可以得到小一倍的圖片了。總結:下采樣=高斯濾波+次級采樣。
放大圖像(或稱為上采樣(upsampling)或圖像插值(interpolating))的主要目的是放大原圖像,從而可以顯示在更高分辨率的顯示設備上。對圖像的縮放操作并不能帶來更多關于該圖像的信息, 因此圖像的質量將不可避免地受到影響。然而,確實有一些縮放方法能夠增加圖像的信息,從而使得縮放后的圖像質量超過原圖質量的。
下采樣原理:對于一幅圖像I尺寸為M*N,對其進行s倍下采樣,即得到(M/s)*(N/s)尺寸的得分辨率圖像,當然s應該是M和N的公約數(shù)才行,如果考慮的是矩陣形式的圖像,就是把原始圖像s*s窗口內的圖像變成一個像素,這個像素點的值就是窗口內所有像素的均值:
上采樣原理:圖像放大幾乎都是采用內插值方法,即在原有圖像像素的基礎上在像素點之間采用合適的插值算法插入新的元素。
? ? 無論縮放圖像(下采樣)還是放大圖像(上采樣),采樣方式有很多種。如最近鄰插值,雙線性插值,均值插值,中值插值等方法。在AlexNet中就使用了較合適的插值方法。各種插值方法都有各自的優(yōu)缺點。
圖像重采樣包含兩種情形,一種是下采樣(downsampling),把圖像變??;另一種是上采樣(upsampling),把圖像變大。

1、次級采樣(sub-sampling)
每隔一個,扔掉行和列,創(chuàng)建一個更小的圖像。

2、下采樣(downsampling)
根據Nyquist采樣定律,采樣頻率大于等于2倍的圖像的最大頻率。

對于高清圖片,如果直接采樣,采樣頻率很高。
如果先對圖像進行模糊化處理(高斯濾波),就可以降低采樣頻率了,
最后進行次級采樣(sub-sampling),就可以得到小一倍的圖片了。
總結:下采樣=高斯濾波+次級采樣
3、高斯金字塔(Gaussian pyramids)
在下采樣過程中圖,所有模糊化處理之前的圖片構成一個高斯金字塔。最底層為原圖。

高斯金字塔實際上是圖像的多尺度表示法。模仿人眼在近處看到的圖像細致,對應金字塔底層;在遠處看到圖像較為模糊,但可以看到整個輪廓,對應金字塔頂層。
4、上采樣(upsampling)
插值(interpolation):離散信號之間插入新的值。
但實際情況,函數(shù)F[x]是未知的。

圖像的插值也可以通過構造函數(shù)與圖像的卷積運算實現(xiàn)。插入的新值即為新的像素色度值。
對于相同的離散信號,使用不同的構造函數(shù),最后得到的結果也不一樣。如下圖所示,

其它的構造濾波器




圖像的實際效果

Nyquist采樣定律
? ? ???采樣定理的提出者不是 Nyquist而是 Shannon, Nyquist定理/頻率是用來描述給定帶寬的最高傳輸速率。因為結果相似,所以大家把 Nyquist的名字加在采樣定理之前作為一種榮譽。它的標準名字應該是 Nyquist- Shannon采樣定理。我們可以用一個旋轉輪來形象理解這個定理,如下圖:

? ? ? ?這是一個各個軸之間間隔45度的輪子,每個輪子都被標上了標識,?假設這個輪子以每秒45度來轉動,那么每個軸返回原位需要8秒(采樣周期)。那么如果我們每8,16,24秒來用相機拍照,是不是每次都可以拍攝到原圖像靜止不動??這是因為在采樣周期內,車輪旋轉的整數(shù)周期都會回到原位,不論旋轉方向如何。那么就有了一個非常重要的結論:釆樣周期的整數(shù)倍不能檢測到相位(狀態(tài))變化。
? ? ? ?我們來減少一點拍攝周期,如果以每4秒的速度拍攝呢?每4秒拍照一次,輪子只能轉一半,那么我們可以在照片中檢測到輪子正在旋轉,雖然依然不能區(qū)分它的旋轉方向,但是輪子的狀態(tài)(相位)已經可以區(qū)分了。
? ? ? ??那么再減少一點拍攝周期,以每3秒的速度拍攝呢?無論順時針還是逆時針,都可以看到輪軸的錯位(相位的變化)。
? ? ? ??這就是?Nyquist- Shannon采樣定理,我們希望同時看到輪子的旋轉和相位變化,采樣周期要小于整數(shù)周期的1/2,采樣頻率應該大于原始頻率的2倍。同理,對于模擬信號,我們希望同時看到信號的各種特性,采樣頻率應該大于原始模擬信號的最大頻率的兩倍,否則將發(fā)生混疊(相位/頻率模糊)。
常用的插值方法? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
1、最鄰近元法
這是最簡單的一種插值方法,不需要計算,在待求象素的四鄰象素中,將距離待求象素最近的鄰象素灰度賦給待求象素。設i+u, j+v(i, j為正整數(shù),u, v為大于零小于1的小數(shù),下同)為待求象素坐標,則待求象素灰度的值 f(i+u, j+v) 如下圖所示:
?
如果(i+u, j+v)落在A區(qū),即u<0.5, v<0.5,則將左上角象素的灰度值賦給待求象素,同理,落在B區(qū)則賦予右上角的象素灰度值,落在C區(qū)則賦予左下角象素的灰度值,落在D區(qū)則賦予右下角象素的灰度值。
最鄰近元法計算量較小,但可能會造成插值生成的圖像灰度上的不連續(xù),在灰度變化的地方可能出現(xiàn)明顯的鋸齒狀。
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)
雙線性內插法的計算比最鄰近點法復雜,計算量較大,但沒有灰度不連續(xù)的缺點,結果基本令人滿意。它具有低通濾波性質,使高頻分量受損,圖像輪廓可能會有一點模糊。
3、三次內插法
該方法利用三次多項式S(x)求逼近理論上最佳插值函數(shù)sin(x)/x, 其數(shù)學表達式為:
待求像素(x, y)的灰度值由其周圍16個灰度值加權內插得到,如下圖:
?
待求像素的灰度計算式如下:
f(x, y) = f(i+u, j+v) = ABC
利用了 次級采樣和超采樣次級采樣原理,我們能夠實現(xiàn)在數(shù)字環(huán)境還原“筆觸”感?
以及創(chuàng)造一種獨特的風格“像素風”
像素風
像素風作為一種獨特的美術風格一直有著一定的受眾,因為時代遺留因素,而擁有著獨特的魅力
最早像素風誕生是因為計算機圖形處理能力,以及圖像編輯器的功能受限導致,但隨著計算機圖像處理軟件的進步,漸漸被遺忘,現(xiàn)在又有了復興的傾向
我們經常會聽見這些和像素有關的詞:點陣、8bit等等。
“點陣圖”就是位圖。
在電腦課上我們學過,矢量圖無論在屏幕上放多大,它的邊緣都是清晰的;位圖不然,將其放大會發(fā)現(xiàn)一個個小方塊,那就是所謂的像素。我們熟悉的720p、1080p,所代表的都是圖像縱向像素點數(shù)量。
嚴格地來說,再精細的位圖都是像素構成的,我們所稱“像素風”,往往是指肉眼可見有小方塊的美術風格。拼豆、十字繡、馬賽克、led燈牌……其實都是一種像素藝術。
像素往往代表著復古。
過去之所以采用像素游戲畫面,一是顯示設備的限制,二是游戲機內存大小的限制。
下面是像素時代幾個著名的游戲機,它們代表作的圖片都可以在本文中找到(一眼就可以認出來):
任天堂Game Boy掌機(***年)為黑白液晶顯示屏,僅能顯示4級灰階。代表作《俄羅斯方塊》;
任天堂紅白機FC(1983年)可以顯示48色和5灰階,同屏幕最多顯示其中13色。代表作《超級馬里奧兄弟》;
雅達利2600(1977年)支持160 X 192分辨率屏幕,最高128色。代表作《吃豆人》。

1、顏色
我們常說的8位、16位、32位指顏色深度(n-bit colour),也稱為位深度。位數(shù)越大意味著圖像的顏色可以更加豐富和過渡自然。
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等等。
“點陣圖”就是位圖。
在電腦課上我們學過,矢量圖無論在屏幕上放多大,它的邊緣都是清晰的;位圖不然,將其放大會發(fā)現(xiàn)一個個小方塊,那就是所謂的像素。我們熟悉的720p、1080p,所代表的都是圖像縱向像素點數(shù)量。
嚴格地來說,再精細的位圖都是像素構成的,我們所稱“像素風”,往往是指肉眼可見有小方塊的美術風格。拼豆、十字繡、馬賽克、led燈牌……其實都是一種像素藝術。
像素往往代表著復古。
過去之所以采用像素游戲畫面,一是顯示設備的限制,二是游戲機內存大小的限制。
下面是像素時代幾個著名的游戲機,它們代表作的圖片都可以在本文中找到(一眼就可以認出來):
任天堂Game Boy掌機(***年)為黑白液晶顯示屏,僅能顯示4級灰階。代表作《俄羅斯方塊》;
任天堂紅白機FC(1983年)可以顯示48色和5灰階,同屏幕最多顯示其中13色。代表作《超級馬里奧兄弟》;
雅達利2600(1977年)支持160 X 192分辨率屏幕,最高128色。代表作《吃豆人》。

“位”是什么東西:
據說減少顏色位數(shù)、使用8bit音樂可以讓游戲作品更有像素復古風味。
1、顏色
我們常說的8位、16位、32位指顏色深度(n-bit colour),也稱為位深度。位數(shù)越大意味著圖像的顏色可以更加豐富和過渡自然。
1位:黑白二色;
4位:2^4=16種顏色;
16位:RGB模式下,R(紅)B(藍)各有2^5=32種取值;G(綠)有2^6=64種。
24位(真彩色):RGB各有2^8=256種取值
2、音頻
8bit風音樂中的8bit,從定義上來講指音頻采樣位深。
我們現(xiàn)在所謂8bit風格,其實叫芯片音樂(Chiptune),是一種使用可編程音頻發(fā)生器芯片合成的電子音樂,盛行于1980年代到1990年代間,因此格外有年代感。
part 2 像素圖形風格
到了最喜歡的欣賞像素游戲藝術魅力的環(huán)節(jié)!其實并沒有嚴格的像素風分類,參考了部分資料后,筆者按主觀感受將其大致劃分了六種。
下例手游的截圖均來自論壇玩家/游戲官圖,具體都有什么游戲先有請課代表來作答(x)
一、黑白
顧名思義,除了黑白色系沒有其他任何顏色,有灰階的存在所以并非等于1位色游戲。聽上去簡約,但運用一定技法也可以表現(xiàn)相當復雜的圖案。
同為黑白,以下三者大相徑庭:



最后這個游戲額外特別?!秺W伯拉丁的回歸》(Return of the Obra Dinn),今年3月獲得了GDCA的最佳敘事獎,IGF的最佳敘事獎和Grand Price三個獎項。最新消息于2019年秋季登陸Switch平臺。
這張截圖看上去包含了灰階,但卻是不折不扣完全黑白的1位色游戲——其大量運用了“抖動”技法(part 3見)。
二、簡約色塊風
無描邊,用色塊來表現(xiàn)形狀的風格。色塊上表達立體感的陰影較少。
雖然乍看之下不那么精致,但能形成獨特的氛圍,在劇情游戲中恰好能不喧兵奪主。




三、簡約卡通風
色彩鮮亮,有描邊,立體感表現(xiàn)不深。選擇這種風格的游戲作品都和可愛、輕松、治愈聯(lián)系在一起。(你摸著良心再說幾遍)
優(yōu)秀的配色可以讓畫面豐富而不雜亂,讓人賞心悅目~
用以角色塑造的效果非常好。




最簡單的像素風格是純平面的,要達成立體過渡的效果,其一是增加顏色數(shù)量,其二是運用陰影、“抖動”等技法。
抖動是將兩種顏色的像素網狀排布,當圖片尺寸較大,像素較多時可以使用這種手法。為了過渡自然,兩種顏色不應差距過大。
像素藝術指南:抖動及抗鋸齒教學

抖動的功能類似于漫畫中網點承擔的部分功能。抖動不一定是規(guī)律的,不同抖動手法能產生不同效果,如上圖所示:第一張是在抖動中加入一些形狀;第二張是抖動疊加,多種顏色得以構成過渡;第三張是隨機抖動(通常不建議使用)。
關于手動抗鋸齒:因為像素的限制,斜線的邊緣不可能是平滑的,而是呈現(xiàn)階梯鋸齒狀。下圖左上的鱷魚輪廓因此稍顯生硬。此時我們可以對其進行抗鋸齒處理(下圖右)。在黑色輪廓線上填上少量綠色像素,使整體視覺效果更加柔和。

像素動畫在不同家數(shù)位板中如何設置
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),彈出框里選著鉛筆;調節(jié)畫筆大小為最小號;不透明度100%;關閉壓 力;平滑0%。



3.橡皮(E)模式改為鉛筆;不透明度100%;平滑0%;關閉壓力。

4.選取框(M)羽化改為0像素

5.油漆桶(G)容差改為0;取消消除鋸齒;連續(xù)的分情況開關。

6.編輯——所選項——單位與標尺。將單位全部改成像素

7.關閉對齊;ctrl+H顯示隱藏網格;關閉像素網格


這樣,選著鉛筆(B)畫的每一筆都是一個像素,選取框可以精確到每一個像素的框選,油漆桶不會溢出。接下來就簡單了(個錘子)
1、首先新建文件,點擊“文件”,“新建”。為了簡單一點就做一個長寬都為十像素的圖片。

2、圖片非常小,我們需要放大很多倍,到自己適合的大小??旖萱Ictrl“+”


3、此時我們需要看到像素網格。新建一個圖層,填充背景色黑色。


4、單擊“視圖”-----“顯示”----“顯示像素網格”


6、我們改用鉛筆工具,改為方形。CS6中一般自動就是方形。然后就可以涂網格啦。


5、這是我們一般使用鉛筆,涂出來自己想涂的網格。(畫筆有時會帶暈染效果。)類似下圖,如果喜歡這樣風格,可以使用畫筆。

7、但是這時它的大小是非常小的,我們需要將它變成正常大小,并且不影響像素畫。(當然除了你取消網格線,截屏)
8、我們新建一個圖片,更改為自己需要的大小。將像素圖片移到新的圖片上。(按住左鍵不放,直接移到新建的圖片上。)可以看出來,在新的畫布上,她是非常小的。


9、簡單的放大,回讓圖片模糊?,F(xiàn)在我們選擇像素畫所在圖層,單擊鼠標右鍵,選擇“轉化為智能對象”

10、然后“編輯”----“首選項”----“常規(guī)”


11、然后選擇“保留硬邊緣”

我們先搞一個參考(舉個例子,可能對于剛開始的同學有點難。具體的細節(jié),處理方法后面再說,需要一些概括能力,也需要一些經驗和套路,先看看流程就行)

1.先畫出外輪廓

2.填上固有色

3.我們需要給小黃加一點陰影。
