平面設計中的二維動態圖形教學與實踐

陳瑤

摘要：本文結合學生的學習興趣，在二維動態圖形課程教學中對學生進行階段性訓練，并在教學實踐中歸納了動態圖形教學的基本規律。文章通過教與學的過程詳細介紹了二維動態圖形設計創意及軟件應用技巧，通過教學設計案例的制作方式結合平面圖形設計軟件和動態圖形設計軟件等計算機輔助教學軟件探索動態平面的設計方法。了解動態圖形設計的原理及方法。該方法可為設計教學提供參考。

關鍵詞：計算機軟件 二維圖形 動態圖形

中圖分類號：G642文獻標識碼：A文章編號：1003-0069（2019）11-0080-02

一、二維動態圖形教學內容

二維動態圖形起源于19世紀60年代，美國動畫師約翰·惠特尼第一次使用這個名字，是指在平面設計背景下，簡單化和抽象化的動態圖象形式，主要用來傳達信息和視覺設計。1955年。平面設計師索爾·巴斯制作的動態圖形電影片頭應用他對平面字體和當代設計的經驗，影響了二維動態圖形的設計發展。此后，在不斷的探索中，二維動畫課程教學也成為平面設計專業教學的一個重要組成部分。通過近幾年的課程教學，我認為二維圖形的內涵主要表現在以下方面：第一，在電腦屏幕中，二維作為平面范圍內的視覺形式通過景深形成有形空間。其畫面中的圖像具有圖形和影像兩種視覺形式。二維的圖片可以傳遞出具體的觀點或情感，吸引觀眾的注意力，進一步豐富觀眾的想象力，最終突出和強調所傳遞的視覺信息。第二，在二維動畫教學中，圖形是說明性的圖畫形象，例如象形文字，圖像字符，繪畫，插畫，照片以及印刷等。盡管每一種圖像都有自己獨特的特點和功能，相對視覺文字，它們都可能成為文字的補充。第三，圖像可以是二維的或虛擬的，例如照片，插畫或顯示屏，它也可以是三維的，像雕塑作品，圖像還可以通過一些視覺工具捕捉到，例如照相機，鏡子，激光，望遠鏡或顯微鏡，以及人眼等自然物和水面的倒影等自然現象。在學校的課程設置中，二維動畫教學是基于平面圖形的教學設計思維的軟件應用型課程，教學目的圍繞著平面圖象的基本設計思維而展開，讓學生在對設計基礎知識的掌握中也適應數碼時代的設計應用，通過該課程的學習，理解傳統動畫、MG動畫、微電影、動態網頁、網絡廣告、微視頻、UI動效等動畫設計領域的基本特點。

二、二維動態圖形課程階段性教學

相對來說，二維圖象的構成方式主要有靜態和動態兩種。由于我們在觀看動態圖形的時候，是一系列靜態圖片以序列的方式運動，因此在教學中，我將二維動態圖形的課程分為兩個步驟來進行階段性訓練。

（一）二維靜態圖形圖像

通過對二維靜態圖形圖像課程的訓練，能培養學生的平面空間概念，增強對圖象構成的認識，并有助于提高平面設計課程教學的質量。

1.圖像表現：圖像有不同的風格和表現形式，例如圖標，符號，記號或徽標。文字，圖片和插畫都是以內容，結構和風格為基礎的圖像表現形式。《舊唐書·張行書傳》中說“觀古今用人，必因媒介。”圖象的傳達媒介在藝術范疇內指繪畫顏料的表現技法;無論是基于顏料的繪畫形式，還是以數碼為載體進行創意的圖象都是設計的不同表現形式，無論是來源于網絡上的視覺圖片，還是生活中拍攝的素材，各種數碼設備豐富的編修功能可以直接模擬出全景或是暈映風格的圖象。

2.圖像合成：圖像合成是一種圖形處理的方式，歷史上有許多圖形藝術家使用這種方法，在現代主義時期，圖像合成和拼貼是一種歷史悠久的藝術處理手法，將照片，圖形，文字和版面組合在一起形成新的圖像或使作品具有新的含義。計算機軟件對這種設計方法進行了延伸和加強，可以消除各個元素之間的合成痕跡，拼貼圖片。在不斷的教學摸索中，我發現對于平面廣告專業的學生而言，在課堂教學中采用合成與拼貼的方法可以提高學生學習興趣，更自主地搜集素材和設計實踐。

3.圖文結合：無論文字還是圖象都是影響二維動畫視覺效果的重要因素。文字和圖形的結合也是設計中常用的視覺形式。在有些設計中，文字和插圖的界限也含混不清，例如Bespoke字體是一種帶動畫模糊效果的字體，其圖象使人聯想到顯示屏的光點，可以應用在展示ATM技術的設計中，寓意數據傳輸的超快速度。

（二）二維動態圖形圖像

二維動畫是二維平面圖形圖像的延伸，在創建動態圖片過程中，應引導學生運用圖形的線條，色彩等和攝影蒙太奇處理的視覺思維方式展開創意。最典型的移動圖像是電影或電視，當然還包括數碼視頻。它可以通過活動的幻境實現動畫的效果。除了傳統的電影外，數碼相機，手機也可以捕捉到移動的圖像。動態圖形設計就是在靜態視覺表現基礎上創建出來的動態視覺形式，任何視覺元素，例如文字、圖片、材質、圖形或者線條，都可以被用于動態圖形制作。在二維動畫課程教學中，我根據自己對二維動畫的理解安排課程，使學生學習從二維動畫原理，到掌握圖形動態制作的技巧。

1.以畫面為中心的動畫

動態畫面是由連續的畫面構成的，并通過景別和鏡頭的運動實現畫面情景，畫面的視覺效果具有綜合性的視覺印象。簡單的如INTERPHOTO.是一款與相片相關的相片處理軟件，能拍攝不同影像風格的相片，并采用寬熒幕模式記錄影像，以及編輯音樂，文字和色彩。

2.蒙太奇組合畫面動畫：“蒙太奇手法”指電影剪輯中的鏡頭剪接特效手法，在二維動畫表現中常將多幅圖片進行有機的剪接組合，形成插畫風格的圖片。即是連續性的畫面組合。在設計中，若能有效結合文本和圖像，以對比的方式呈現形狀和顏色，再加上招牌上的動畫等，就能引起觀眾的注意。

三、二維動態圖形課程形式

在二維動畫課程教學中，重點是訓練學生：1計算機輔助設計表現基礎;2二維圖形設計的設計表現形式;3動態圖形的表現技巧;4二維動畫在設計中的應用。課程分一個設計思考和三個設計表現環節;圖像符號在平面中的重要表現、圖像表現、圖案表現以及圖形表現。通過教學摸索，我認為在二維動畫教學中，應使學生認識到動態圖象教學需要學生不僅理解二維圖形的基本原理，也要了解平面媒介形態下視覺效果的應用，并通過教授計算機圖像軟件使用方法，使學生可以利用計算機圖像軟件有效地學習設計基礎的不同形式。

（一）計算機輔助設計表現基礎

P5.FL等是圖形設計中常用的電腦軟件工具。在教學中，通過講解軟件命令操作為主要內容并輔于操作練習，課程設置力圖使同學們在計算機思維環境中掌握設計基本規律。例如Adobe Illustrator是Adobe系統公司推出的基于矢量的圖形制作軟件。能與位圖圖形處理軟件Photoshop共享一些插件和功能，其靜態圖象格式為JPg.PDF格式，同時它也可以將文件輸出為Flash格式，并與Flash連接使用。

在Illustrator工作環境中，基本圖形主要包括直線、弧線、矩形、橢圓形、星形和多邊形等對象。在靜態圖形表現中，Illustrator能做出集中，放射的效果，可以將暈染的方向從中心往外擴展，或是看起來像在旋轉。Illustrator文件也能制作動態圖形。作為動態圖形設計軟件之一，Flash具有圖形編輯的重要功能。與下載類似的位圖圖像相比，下載矢量圖形的速度比較快。Flash是二維矢量動畫軟件，使用Flash可以設計簡單的動畫，包含豐富的視頻、聲音、圖形。使用Flash可以導入Illustrator制作的矢量圖，并制作動畫效果，也可以直接在舞臺上繪制圖形，可以創建壓縮矢量圖形并將它們制作為動畫，也可以導入和處理在其他應用程序中創建的矢量圖形和位圖圖像。

一方面，計算機輔助教學帶給二維動畫設計教學新的理念，使平面構成表現形式更為具體化;另一方面，由于軟件教學內容模式容易固化思維，二維動畫教學應該將課程軟件教學與設計創意有效銜接整合。

（二）靜態圖形設計的設計表現形式

形狀是二維的平面，我們在課程中大致將其分為三類：幾何圖形圓形，正方形，長方形和三角形，有棱有角邊緣鮮明。圖形具有直觀，快捷的特點。圖形以具體可視的形象來表述信息。在二維動畫設計教學中，我將圖形的概念引入軟件工具的掌握中，教學課程涵蓋二維圖形的創建到動態圖形的展示。二維圖形即自然的具象形態與抽象的形態。抽象圖形包括有棱有角邊緣鮮明的幾何圖形;有機圖形是從自然界或者生命組織中衍生出的圖形是最接近自然的;隨機圖形是從想象和發明中得到的圖形。

首先，我主要從以下三個方面來講解創建二維圖形的基本方法，（1）繪制基本圖形：即繪制點、線、網格等。基本圖形主要包括直線、弧線、矩形、橢圓形、星形和多邊形等對象。（2）圖形繪制功能：繪制對象主要使用工具箱中的填色和描邊按鈕、漸變面板、畫筆面板、圖形樣式面板來實現。并通過單色填充、漸變填充和圖案填充創建圖形。（3）幾何圖形構成：無論是在Core0DRAW還是Illustrator中，基本圖形都是制作任何復雜圖形的最基本元素。如像是數字照片和位圖圖像，不是矢量圖像，但如果需要使用數字照片，就可以使用實時描摹功能來轉換它。

在二維動畫教學中，在創意階段，我引導同學們先在生活中拍攝的100張同一物象的不同角度，不同呈現方式的圖片中，從中尋找靈感，發現并體會從第一張照片開始到后來直至第100張時的觀念與思維上的變化，并做相關文字記錄：然后在100張圖片的拍攝過程所給予思維啟發繪制矢量圖形完成動態作品，如圖1。強調圖形化的，素描方式的，符號化的，手繪的表現，充分運用矢量圖形的繪制技巧。如圖，在這幅學生作品中，同學將符號進行有序排列并稍加變化，以正方形的圖形創意為基本元素，應用對比構成的形式展現圖示的動態變化效果。將動態圖形的創意有步驟地以平面的形式設計表現。

（三）動態圖形圖像的表現技巧

使用Flash也可以創建二維圖形，Flash包括多種繪圖工具，它們在不同的繪制模式下工作。Flash動畫播放原理與影視播放原理是一致的，產生動畫最基本的元素也是一系列靜止的圖片，比如要制作一個10幀的從圓形到多邊形的動畫，只要在第1幀處繪制圓形，在第10幀繪制多邊形，然后利用“創建補間形狀”命令，自動添加出兩幀之間的其余幀即可。由于動態圖形設計動畫融合了視聽語言，聲音和畫面，在創建動態圖形過程中，應巧妙地運用圖形、線條、色彩等和攝影蒙太奇處理的視覺思維方式展開音畫創意，同時，手繪形式的記錄鏡頭運動也是一個好的動畫創意的開始，如圖2。

四、二維動態圖形課程教學案例

1.啟然形態表現：從具象圖形到抽象圖形

在課程中將生活中常見的物像概括并以點線面的抽象形態表現出來，提取物像圖形圖案的構成形式，以手繪的形式對圖形進行表現，并使用圖形設計軟件Illustrato加以編輯，然后用故事板的形式展現，如圖3。學生運用了抽象的手法將身邊的物品固體膠以點線面的形式歸納并表現出來，并且分別將情感與表情例如高興，失望，通過固體膠表現出來。

2.影像蒙太奇：靜態圖像拼貼

任意選擇四張圖片，將其組合在一起構成新的含義。可以用打散，改變尺寸，僅顯示局部等方法來幫助構思。

3.動態表現：使用二維動畫軟件FLASH為視頻或網絡創建動態圖形

內容以文字，圖形，圖像或圖案為主要動態表現，運用時間軸和關鍵幀處理Bitmap位圖格式或是vector矢量圖形格式的圖像，在探索性的練習中要求學生在選擇一句話后用動態來展現這句話的意義，并為學生提供一個可以將自己的愛好通過動態來表達的機會。學生在選題時可以根據自己的愛好出發，制作簡潔的圖形動畫。

教學總結

隨著計算機的普及和互聯網的廣泛運用，作為視覺符號新事物的動態圖形設計近幾年逐漸應用于動態海報，表情動畫，網絡動畫，動畫導航，網絡視頻。作為會動的圖像設計，動態圖形設計的視覺形式更趨向于簡潔抽象的矢量圖形，并通過對靜幀圖形的運動、旋轉、縮放或添加旁白，音樂等傳達視覺信息。目前針對動態圖像的特點，我在教學中歸納出動態設計規律和方法，引導學生繪制草圖創作圖形的同時，也引入計算機輔助教學的形式。在二維動畫教學實踐中，尤其注重引導學生在不同設計軟件的工作場景中實現視覺符號的圖示過程，使視覺資訊更清晰地呈現。在未來的教學中會不僅強調不同創意設計軟件的綜合運用，課程也組織學生運用圖形進行視覺溝通的教學互動，通過師生的設計實踐加深對設計知識的認識，為平面專業應用教學提供參考。