淺談傳統國畫與H5新技術的結合
——以《夜·虞歌暢晚圖為例》

許紅燕

（常熟市融媒體中心，江蘇 常熟 215500）

5G的網絡傳播速度可以達到1Gb每秒，遠遠超過4G一百多倍，隨著5G時代的到來，智能化的3D技術、游戲、高清畫質的電影等等都悄悄改變著我們的生活。在5G技術逐漸成熟背景下，傳統媒體與新媒體的有機結合塑造了一個融合新技術、新手段、新渠道、新載體、新平臺、新用戶的融媒體時代。

1 傳統國畫與H5新技術的結合

為了更好地適應時代的要求，我們尋求運用新技術，通過H5的形式，展現全圖片形式的純原創的場景。在這個過程中，嘗試了國畫、水彩等傳統的手繪形式，但最終選擇了國畫的形式。原因主要有兩方面，一方面，國畫是中國的傳統繪畫形式，代表了我國的國粹。希望通過新技術把這門傳統的技術傳承下去；另一方面，江南水鄉深邃的歷史文化底蘊、清麗婉約的水鄉古鎮風貌，在世界上獨樹一幟，只有國畫的水墨韻味才能表現出來。最終，形成了h5原創作品——《夜·虞歌暢晚圖》。

那么我們在這個過程中是如何制作完成的呢？其實，主要分為兩部分，一部分，是頁面的前期制作，另一部分是H5技術合成。

1.1 頁面前期制作

首先，為了更好的表現江南水鄉的特色，我們進行了多方考察，最終選擇了江南水鄉常熟的古里文學街作為樣本。“七溪流水皆通海，十里青山半入城”，江南小城--常熟，不僅有青山綠水、碧水長流的生態，更有深厚的歷史底蘊和人文積淀。站在常熟鼓勵文學街，時不時可見河道交錯的水網，白墻灰瓦的人家，這就是一幅江南水鄉的畫卷。古里文學街古色古香的建筑特色，也是非常適合用繪畫來表現。在制作過程中，我們首先實地到常熟古里的文學街，運用手機拍攝的方法，把整個古里街區拍攝下來。接著運用了圖片整合的方式，刪繁取簡，選擇有特色的景點，開始進行鉛筆手繪。繪畫的過程中，我們應該選擇一些比較長條的紙張，進行整體的手繪。我們第一次制作，考慮得不周到，選了正常大小的紙張，畫了很多幅作品，最后是運用ps進行技術鏈接的，整個過程稍有些繁瑣。

其次，文學街的形態都畫好以后，基本的景物，綠植全都繪制完成以后。我們選擇一些人物，各色各樣的人物，有逛街、賣菜、游玩、做商業、擺渡的人物，當然，這個過程需要歐美實地搜集素材，多去采集，并穿插一些清代的圖片，讓這些人物出現在畫面里后，主要展現街區的繁華景象，基本就到線稿的最后的制作過程了。這時候我們要選擇透氣性好，紙張細膩的國畫宣紙，可以選擇紅星等相對品牌比較好的紙張，宣紙的種類比較多，可以選擇熟宣或者是半生半熟的宣紙，顏色這次選擇了仿古色。當然我們拓到宣紙上，要求紙張也相對長一點，這樣就能減少后期制作的工作。要用比較細的勾線筆人物、景物、船只都依次勾線后，就可以進入到色彩的渲染了，運用水筆和色筆，把色彩依次的渲染出來。這部分工作完成后，H5頁面的首張白天景色的頁面已經準備妥當，后期還可以運用photoshop工具，適當增加一些古代人物，體現古里文學街的特點。

1.2 H5技術合成

接下來的工作，就需要我們運用電腦，通過軟件，表現出常熟古里文學街黑夜點燈的樣貌特點，這個過程并不是很復雜。只需要把原先的畫作掃描進入電腦，然后把圖片倒入到photoshop中，連接wacom手寫板，這樣前期工作已經準備好了。然后，在制作過程中，要表現好黑夜的燈光效果，首先要運用白天的手繪圖，ps里的圖片處理成黑夜模式，再用粉刷工具把要提亮的地方提亮，最后用wacom手寫板，用點的形式把燈光點出來。用wacom手寫板點燈重點講一下，先要在photoshop軟件里制作好發光的筆刷工具，打開photoshop軟件中，選擇圓角矩形，右鍵填充，選擇白色，圖層填充的參數選擇為0，描邊白色（或者淡黃色，這副圖選擇的淡黃色），給筆刷工具做效果。緊接著選擇圖層樣式，點開斜面和浮雕，在小窗口的樣式中:選擇外斜面，數值可根據圖片調整內發光模式:線性光添加外發光混合到這一步，筆刷工具基本完成。接下來只要運用wacom手寫板，把你要畫的燈光一點點點上去就可以了。整個黑夜模式的古里文學街街景已經完成了。

最后，就要靠程序的合成，把白天黑夜的效果做個轉接的動畫，實現H5的制作。白天黑夜如何切換呢？點擊小燈籠點亮熄滅操作后，背景圖片在兩張圖片之間切換。白天切換黑夜效果實現原理，首先把準備好的兩幅街區白天和黑夜背景圖，白天背景圖覆蓋在黑夜背景圖上，當點亮小燈籠時，觸發白天背景圖淡出效果，同時觸發黑夜背景圖淡入效果，此時白天背景圖從視線中消失，黑夜背景圖慢慢顯示。黑夜切換白天效果實現原理反之。當然，在這個過程中，出現了一點點問題，就是大背景圖，加載過慢。當滑動操作過快時，會出現圖片先空白后顯示，這樣就不利于整幅畫作的展現了。我們是通過CSS截取圖片操作解決的，css通過控制顯示圖片的位置來實現圖片的剪切，定位大圖片中某一塊元素，將背景圖進行分塊顯示，從而克服了先前出現的問題。還有，在制作過程中，發現某些手機打開自動旋轉之后，頁面會隨著設備旋轉而旋轉，導致頁面元素混亂。針對這個問題，我們在不改變原有實現的情況下，通過CSS媒體查詢方式，判斷當前設備豎排還是橫屏，根據屏媒情況利用CSS的transform屬性對頁面元素進行旋轉。這些問題克服以后，我們運用技術，倒入到h5頁面中去，然后通過代碼的運用，在白天和黑夜之間做一個動畫的過渡，從而實現了原創國畫和H5新技術的結合，也表現了生動活潑的古里文學街亮燈動畫。中華文化在五千年的發展歷程中不斷推陳出新，發展壯大，凝聚了全民族的精華，孕育出中華民族優秀傳統的文化，以國畫為代表的國粹，具有強烈的中國特色和歷史感，是延續我國精神的血脈，是中華民族的瑰寶。而在時代的發展中，信息時代極速的到來，優秀傳統文化的傳播方式也要順應時代的發展，積極汲取新媒體的力量，利用新媒體傳播速度快的優勢，革故鼎新，才能進一步傳承好傳統國粹。當然在這個過程中，對于新技術的研究也是非常重要的。

2 結束語

“潮平兩岸闊，風正一帆懸”。時代的發展，孕育了新的機遇。在這個自媒體時代，我們只有緊跟潮流，不斷的運用新技術，才能更好的做好新媒體，在手機盛行的今日，看圖了解世界成為一種趨勢，我們制作的國畫與h5頁面結合的方式，是將原創手繪和新技術結合的一個嘗試，雖然還有很多不足的地方，但至少已經踏出了最原始的一步，希望在接下來的工作中，繼續努力創新，更好的運用新技術，展示更好的作品。