平面設(shè)計(jì)中二維動(dòng)態(tài)圖形教學(xué)與實(shí)踐
前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了平面設(shè)計(jì)中二維動(dòng)態(tài)圖形教學(xué)與實(shí)踐范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。
摘要：本文結(jié)合學(xué)生的學(xué)習(xí)興趣，在二維動(dòng)態(tài)圖形課程教學(xué)中對(duì)學(xué)生進(jìn)行階段性訓(xùn)練，并在教學(xué)實(shí)踐中歸納了動(dòng)態(tài)圖形教學(xué)的基本規(guī)律。文章通過(guò)教與學(xué)的過(guò)程詳細(xì)介紹了二維動(dòng)態(tài)圖形設(shè)計(jì)創(chuàng)意及軟件應(yīng)用技巧，通過(guò)教學(xué)設(shè)計(jì)案例的制作方式結(jié)合平面圖形設(shè)計(jì)軟件和動(dòng)態(tài)圖形設(shè)計(jì)軟件等計(jì)算機(jī)輔助教學(xué)軟件探索動(dòng)態(tài)平面的設(shè)計(jì)方法。了解動(dòng)態(tài)圖形設(shè)計(jì)的原理及方法。該方法可為設(shè)計(jì)教學(xué)提供參考。
關(guān)鍵詞：計(jì)算機(jī)軟件二維圖形動(dòng)態(tài)圖形
一、二維動(dòng)態(tài)圖形教學(xué)內(nèi)容
二維動(dòng)態(tài)圖形起源于19世紀(jì)60年代，美國(guó)動(dòng)畫(huà)師約翰•惠特尼第一次使用這個(gè)名字，是指在平面設(shè)計(jì)背景下，簡(jiǎn)單化和抽象化的動(dòng)態(tài)圖象形式，主要用來(lái)傳達(dá)信息和視覺(jué)設(shè)計(jì)。1955年，平面設(shè)計(jì)師索爾•巴斯制作的動(dòng)態(tài)圖形電影片頭應(yīng)用他對(duì)平面字體和當(dāng)代設(shè)計(jì)的經(jīng)驗(yàn)，影響了二維動(dòng)態(tài)圖形的設(shè)計(jì)發(fā)展。此后，在不斷的探索中，二維動(dòng)畫(huà)課程教學(xué)也成為平面設(shè)計(jì)專業(yè)教學(xué)的一個(gè)重要組成部分。通過(guò)近幾年的課程教學(xué)，我認(rèn)為二維圖形的內(nèi)涵主要表現(xiàn)在以下方面：第一，在電腦屏幕中，二維作為平面范圍內(nèi)的視覺(jué)形式通過(guò)景深形成有形空間。其畫(huà)面中的圖像具有圖形和影像兩種視覺(jué)形式。二維的圖片可以傳遞出具體的觀點(diǎn)或情感，吸引觀眾的注意力，進(jìn)一步豐富觀眾的想象力，最終突出和強(qiáng)調(diào)所傳遞的視覺(jué)信息。第二，在二維動(dòng)畫(huà)教學(xué)中，圖形是說(shuō)明性的圖畫(huà)形象，例如象形文字，圖像字符，繪畫(huà)，插畫(huà)，照片以及印刷等，盡管每一種圖像都有自己獨(dú)特的特點(diǎn)和功能，相對(duì)視覺(jué)文字，它們都可能成為文字的補(bǔ)充。第三，圖像可以是二維的或虛擬的，例如照片，插畫(huà)或顯示屏，它也可以是三維的，像雕塑作品，圖像還可以通過(guò)一些視覺(jué)工具捕捉到，例如照相機(jī)，鏡子，激光，望遠(yuǎn)鏡或顯微鏡，以及人眼等自然物和水面的倒影等自然現(xiàn)象。在學(xué)校的課程設(shè)置中，二維動(dòng)畫(huà)教學(xué)是基于平面圖形的教學(xué)設(shè)計(jì)思維的軟件應(yīng)用型課程，教學(xué)目的圍繞著平面圖象的基本設(shè)計(jì)思維而展開(kāi)，讓學(xué)生在對(duì)設(shè)計(jì)基礎(chǔ)知識(shí)的掌握中也適應(yīng)數(shù)碼時(shí)代的設(shè)計(jì)應(yīng)用，通過(guò)該課程的學(xué)習(xí)，理解傳統(tǒng)動(dòng)畫(huà)、MG動(dòng)畫(huà)、微電影、動(dòng)態(tài)網(wǎng)頁(yè)、網(wǎng)絡(luò)廣告、微視頻、UI動(dòng)效等動(dòng)畫(huà)設(shè)計(jì)領(lǐng)域的基本特點(diǎn)。
二、二維動(dòng)態(tài)圖形課程階段性教學(xué)
相對(duì)來(lái)說(shuō)，二維圖象的構(gòu)成方式主要有靜態(tài)和動(dòng)態(tài)兩種。由于我們?cè)谟^看動(dòng)態(tài)圖形的時(shí)候，是一系列靜態(tài)圖片以序列的方式運(yùn)動(dòng)，因此在教學(xué)中，我將二維動(dòng)態(tài)圖形的課程分為兩個(gè)步驟來(lái)進(jìn)行階段性訓(xùn)練。
（一）二維靜態(tài)圖形圖像
通過(guò)對(duì)二維靜態(tài)圖形圖像課程的訓(xùn)練，能培養(yǎng)學(xué)生的平面空間概念，增強(qiáng)對(duì)圖象構(gòu)成的認(rèn)識(shí)，并有助于提高平面設(shè)計(jì)課程教學(xué)的質(zhì)量。1.圖像表現(xiàn)：圖像有不同的風(fēng)格和表現(xiàn)形式，例如圖標(biāo)，符號(hào)，記號(hào)或徽標(biāo)。文字，圖片和插畫(huà)都是以內(nèi)容，結(jié)構(gòu)和風(fēng)格為基礎(chǔ)的圖像表現(xiàn)形式。《舊唐書(shū)•張行書(shū)傳》中說(shuō)“觀古今用人，必因媒介?！眻D象的傳達(dá)媒介在藝術(shù)范疇內(nèi)指繪畫(huà)顏料的表現(xiàn)技法；無(wú)論是基于顏料的繪畫(huà)形式，還是以數(shù)碼為載體進(jìn)行創(chuàng)意的圖象都是設(shè)計(jì)的不同表現(xiàn)形式，無(wú)論是來(lái)源于網(wǎng)絡(luò)上的視覺(jué)圖片，還是生活中拍攝的素材，各種數(shù)碼設(shè)備豐富的編修功能可以直接模擬出全景或是暈映風(fēng)格的圖象。2.圖像合成：圖像合成是一種圖形處理的方式，歷史上有許多圖形藝術(shù)家使用這種方法，在現(xiàn)代主義時(shí)期，圖像合成和拼貼是一種歷史悠久的藝術(shù)處理手法，將照片，圖形，文字和版面組合在一起形成新的圖像或使作品具有新的含義。計(jì)算機(jī)軟件對(duì)這種設(shè)計(jì)方法進(jìn)行了延伸和加強(qiáng)，可以消除各個(gè)元素之間的合成痕跡，拼貼圖片。在不斷的教學(xué)摸索中，我發(fā)現(xiàn)對(duì)于平面廣告專業(yè)的學(xué)生而言，在課堂教學(xué)中采用合成與拼貼的方法可以提高學(xué)生學(xué)習(xí)興趣，更自主地搜集素材和設(shè)計(jì)實(shí)踐。3.圖文結(jié)合：無(wú)論文字還是圖象都是影響二維動(dòng)畫(huà)視覺(jué)效果的重要因素。文字和圖形的結(jié)合也是設(shè)計(jì)中常用的視覺(jué)形式。在有些設(shè)計(jì)中，文字和插圖的界限也含混不清，例如Bespoke字體是一種帶動(dòng)畫(huà)模糊效果的字體，其圖象使人聯(lián)想到顯示屏的光點(diǎn)，可以應(yīng)用在展示ATM技術(shù)的設(shè)計(jì)中，寓意數(shù)據(jù)傳輸?shù)某焖俣取?/p>
（二）二維動(dòng)態(tài)圖形圖像
二維動(dòng)畫(huà)是二維平面圖形圖像的延伸，在創(chuàng)建動(dòng)態(tài)圖片過(guò)程中，應(yīng)引導(dǎo)學(xué)生運(yùn)用圖形的線條，色彩等和攝影蒙太奇處理的視覺(jué)思維方式展開(kāi)創(chuàng)意。最典型的移動(dòng)圖像是電影或電視，當(dāng)然還包括數(shù)碼視頻。它可以通過(guò)活動(dòng)的幻境實(shí)現(xiàn)動(dòng)畫(huà)的效果。除了傳統(tǒng)的電影外，數(shù)碼相機(jī)，手機(jī)也可以捕捉到移動(dòng)的圖像。動(dòng)態(tài)圖形設(shè)計(jì)就是在靜態(tài)視覺(jué)表現(xiàn)基礎(chǔ)上創(chuàng)建出來(lái)的動(dòng)態(tài)視覺(jué)形式，任何視覺(jué)元素，例如文字、圖片、材質(zhì)、圖形或者線條，都可以被用于動(dòng)態(tài)圖形制作。在二維動(dòng)畫(huà)課程教學(xué)中，我根據(jù)自己對(duì)二維動(dòng)畫(huà)的理解安排課程，使學(xué)生學(xué)習(xí)從二維動(dòng)畫(huà)原理，到掌握?qǐng)D形動(dòng)態(tài)制作的技巧。
1.以畫(huà)面為中心的動(dòng)畫(huà)
動(dòng)態(tài)畫(huà)面是由連續(xù)的畫(huà)面構(gòu)成的，并通過(guò)景別和鏡頭的運(yùn)動(dòng)實(shí)現(xiàn)畫(huà)面情景，畫(huà)面的視覺(jué)效果具有綜合性的視覺(jué)印象。簡(jiǎn)單的如INTERPHOTO，是一款與相片相關(guān)的相片處理軟件，能拍攝不同影像風(fēng)格的相片，并采用寬熒幕模式記錄影像，以及編輯音樂(lè)，文字和色彩。
2.蒙太奇組合畫(huà)面動(dòng)畫(huà)
“蒙太奇手法”指電影剪輯中的鏡頭剪接特效手法，在二維動(dòng)畫(huà)表現(xiàn)中常將多幅圖片進(jìn)行有機(jī)的剪接組合，形成插畫(huà)風(fēng)格的圖片。即是連續(xù)性的畫(huà)面組合。在設(shè)計(jì)中，若能有效結(jié)合文本和圖像，以對(duì)比的方式呈現(xiàn)形狀和顏色，再加上招牌上的動(dòng)畫(huà)等，就能引起觀眾的注意。
三、二維動(dòng)態(tài)圖形課程形式
在二維動(dòng)畫(huà)課程教學(xué)中，重點(diǎn)是訓(xùn)練學(xué)生：1計(jì)算機(jī)輔助設(shè)計(jì)表現(xiàn)基礎(chǔ)；2二維圖形設(shè)計(jì)的設(shè)計(jì)表現(xiàn)形式；3動(dòng)態(tài)圖形的表現(xiàn)技巧；4二維動(dòng)畫(huà)在設(shè)計(jì)中的應(yīng)用。課程分一個(gè)設(shè)計(jì)思考和三個(gè)設(shè)計(jì)表現(xiàn)環(huán)節(jié)；圖像符號(hào)在平面中的重要表現(xiàn)、圖像表現(xiàn)、圖案表現(xiàn)以及圖形表現(xiàn)。通過(guò)教學(xué)摸索，我認(rèn)為在二維動(dòng)畫(huà)教學(xué)中，應(yīng)使學(xué)生認(rèn)識(shí)到動(dòng)態(tài)圖象教學(xué)需要學(xué)生不僅理解二維圖形的基本原理，也要了解平面媒介形態(tài)下視覺(jué)效果的應(yīng)用，并通過(guò)教授計(jì)算機(jī)圖像軟件使用方法，使學(xué)生可以利用計(jì)算機(jī)圖像軟件有效地學(xué)習(xí)設(shè)計(jì)基礎(chǔ)的不同形式。
（一）計(jì)算機(jī)輔助設(shè)計(jì)表現(xiàn)基礎(chǔ)
PS，F(xiàn)L等是圖形設(shè)計(jì)中常用的電腦軟件工具。在教學(xué)中，通過(guò)講解軟件命令操作為主要內(nèi)容并輔于操作練習(xí)，課程設(shè)置力圖使同學(xué)們?cè)谟?jì)算機(jī)思維環(huán)境中掌握設(shè)計(jì)基本規(guī)律。例如AdobeIllustrator是Adobe系統(tǒng)公司推出的基于矢量的圖形制作軟件。能與位圖圖形處理軟件Photoshop共享一些插件和功能，其靜態(tài)圖象格式為JPG，PDF格式，同時(shí)它也可以將文件輸出為Flash格式，并與Flash連接使用。在Illustrator工作環(huán)境中，基本圖形主要包括直線、弧線、矩形、橢圓形、星形和多邊形等對(duì)象。在靜態(tài)圖形表現(xiàn)中，Illustrator能做出集中，放射的效果，可以將暈染的方向從中心往外擴(kuò)展，或是看起來(lái)像在旋轉(zhuǎn)。Illustrator文件也能制作動(dòng)態(tài)圖形。作為動(dòng)態(tài)圖形設(shè)計(jì)軟件之一，F(xiàn)lash具有圖形編輯的重要功能。與下載類似的位圖圖像相比，下載矢量圖形的速度比較快。Flash是二維矢量動(dòng)畫(huà)軟件，使用Flash可以設(shè)計(jì)簡(jiǎn)單的動(dòng)畫(huà)，包含豐富的視頻、聲音、圖形。使用Flash可以導(dǎo)入Illustrator制作的矢量圖，并制作動(dòng)畫(huà)效果，也可以直接在舞臺(tái)上繪制圖形，可以創(chuàng)建壓縮矢量圖形并將它們制作為動(dòng)畫(huà)，也可以導(dǎo)入和處理在其他應(yīng)用程序中創(chuàng)建的矢量圖形和位圖圖像。一方面，計(jì)算機(jī)輔助教學(xué)帶給二維動(dòng)畫(huà)設(shè)計(jì)教學(xué)新的理念，使平面構(gòu)成表現(xiàn)形式更為具體化；另一方面，由于軟件教學(xué)內(nèi)容模式容易固化思維，二維動(dòng)畫(huà)教學(xué)應(yīng)該將課程軟件教學(xué)與設(shè)計(jì)創(chuàng)意有效銜接整合。
（二）靜態(tài)圖形設(shè)計(jì)的設(shè)計(jì)表現(xiàn)形式
形狀是二維的平面，我們?cè)谡n程中大致將其分為三類：幾何圖形圓形，正方形，長(zhǎng)方形和三角形，有棱有角邊緣鮮明。圖形具有直觀，快捷的特點(diǎn)。圖形以具體可視的形象來(lái)表述信息。在二維動(dòng)畫(huà)設(shè)計(jì)教學(xué)中，我將圖形的概念引入軟件工具的掌握中，教學(xué)課程涵蓋二維圖形的創(chuàng)建到動(dòng)態(tài)圖形的展示。二維圖形即自然的具象形態(tài)與抽象的形態(tài)。抽象圖形包括有棱有角邊緣鮮明的幾何圖形；有機(jī)圖形是從自然界或者生命組織中衍生出的圖形是最接近自然的；隨機(jī)圖形是從想象和發(fā)明中得到的圖形。首先，我主要從以下三個(gè)方面來(lái)講解創(chuàng)建二維圖形的基本方法，（1）繪制基本圖形：即繪制點(diǎn)、線、網(wǎng)格等。基本圖形主要包括直線、弧線、矩形、橢圓形、星形和多邊形等對(duì)象。（2）圖形繪制功能：繪制對(duì)象主要使用工具箱中的填色和描邊按鈕、漸變面板、畫(huà)筆面板、圖形樣式面板來(lái)實(shí)現(xiàn)。并通過(guò)單色填充、漸變填充和圖案填充創(chuàng)建圖形。（3）幾何圖形構(gòu)成：無(wú)論是在CorelDRAW還是Illustrator中，基本圖形都是制作任何復(fù)雜圖形的最基本元素。如像是數(shù)字照片和位圖圖像，不是矢量圖像，但如果需要使用數(shù)字照片，就可以使用實(shí)時(shí)描摹功能來(lái)轉(zhuǎn)換它。在二維動(dòng)畫(huà)教學(xué)中，在創(chuàng)意階段，我引導(dǎo)同學(xué)們先在生活中拍攝的100張同一物象的不同角度，不同呈現(xiàn)方式的圖片中，從中尋找靈感，發(fā)現(xiàn)并體會(huì)從第一張照片開(kāi)始到后來(lái)直至第100張時(shí)的觀念與思維上的變化，并做相關(guān)文字記錄：然后在100張圖片的拍攝過(guò)程所給予思維啟發(fā)繪制矢量圖形完成動(dòng)態(tài)作品。強(qiáng)調(diào)圖形化的，素描方式的，符號(hào)化的，手繪的表現(xiàn)，充分運(yùn)用矢量圖形的繪制技巧。如圖，在這幅學(xué)生作品中，同學(xué)將符號(hào)進(jìn)行有序排列并稍加變化，以正方形的圖形創(chuàng)意為基本元素，應(yīng)用對(duì)比構(gòu)成的形式展現(xiàn)圖示的動(dòng)態(tài)變化效果。將動(dòng)態(tài)圖形的創(chuàng)意有步驟地以平面的形式設(shè)計(jì)表現(xiàn)。
（三）動(dòng)態(tài)圖形圖像的表現(xiàn)技巧
使用Flash也可以創(chuàng)建二維圖形，F(xiàn)lash包括多種繪圖工具，它們?cè)诓煌睦L制模式下工作。Flash動(dòng)畫(huà)播放原理與影視播放原理是一致的，產(chǎn)生動(dòng)畫(huà)最基本的元素也是一系列靜止的圖片，比如要制作一個(gè)10幀的從圓形到多邊形的動(dòng)畫(huà)，只要在第1幀處繪制圓形，在第10幀繪制多邊形，然后利用“創(chuàng)建補(bǔ)間形狀”命令，自動(dòng)添加出兩幀之間的其余幀即可。由于動(dòng)態(tài)圖形設(shè)計(jì)動(dòng)畫(huà)融合了視聽(tīng)語(yǔ)言，聲音和畫(huà)面，在創(chuàng)建動(dòng)態(tài)圖形過(guò)程中，應(yīng)巧妙地運(yùn)用圖形、線條、色彩等和攝影蒙太奇處理的視覺(jué)思維方式展開(kāi)音畫(huà)創(chuàng)意，同時(shí)，手繪形式的記錄鏡頭運(yùn)動(dòng)也是一個(gè)好的動(dòng)畫(huà)創(chuàng)意的開(kāi)始。
四、二維動(dòng)態(tài)圖形課程教學(xué)案例
1.自然形態(tài)表現(xiàn)：從具象圖形到抽象圖形在課程中將生活中常見(jiàn)的物像概括并以點(diǎn)線面的抽象形態(tài)表現(xiàn)出來(lái)，提取物像圖形圖案的構(gòu)成形式，以手繪的形式對(duì)圖形進(jìn)行表現(xiàn)，并使用圖形設(shè)計(jì)軟件Illustrator加以編輯，然后用故事板的形式展現(xiàn)。學(xué)生運(yùn)用了抽象的手法將身邊的物品固體膠以點(diǎn)線面的形式歸納并表現(xiàn)出來(lái)，并且分別將情感與表情例如高興，失望，通過(guò)固體膠表現(xiàn)出來(lái)。2.影像蒙太奇：靜態(tài)圖像拼貼任意選擇四張圖片，將其組合在一起構(gòu)成新的含義。可以用打散，改變尺寸，僅顯示局部等方法來(lái)幫助構(gòu)思。3.動(dòng)態(tài)表現(xiàn)：使用二維動(dòng)畫(huà)軟件FLASH為視頻或網(wǎng)絡(luò)創(chuàng)建動(dòng)態(tài)圖形內(nèi)容以文字，圖形，圖像或圖案為主要?jiǎng)討B(tài)表現(xiàn)，運(yùn)用時(shí)間軸和關(guān)鍵幀處理Bitmap位圖格式或是Vector矢量圖形格式的圖像，在探索性的練習(xí)中要求學(xué)生在選擇一句話后用動(dòng)態(tài)來(lái)展現(xiàn)這句話的意義，并為學(xué)生提供一個(gè)可以將自己的愛(ài)好通過(guò)動(dòng)態(tài)來(lái)表達(dá)的機(jī)會(huì)，學(xué)生在選題時(shí)可以根據(jù)自己的愛(ài)好出發(fā)，制作簡(jiǎn)潔的圖形動(dòng)畫(huà)。
教學(xué)總結(jié)
隨著計(jì)算機(jī)的普及和互聯(lián)網(wǎng)的廣泛運(yùn)用，作為視覺(jué)符號(hào)新事物的動(dòng)態(tài)圖形設(shè)計(jì)近幾年逐漸應(yīng)用于動(dòng)態(tài)海報(bào)，表情動(dòng)畫(huà)，網(wǎng)絡(luò)動(dòng)畫(huà)，動(dòng)畫(huà)導(dǎo)航，網(wǎng)絡(luò)視頻。作為會(huì)動(dòng)的圖像設(shè)計(jì)，動(dòng)態(tài)圖形設(shè)計(jì)的視覺(jué)形式更趨向于簡(jiǎn)潔抽象的矢量圖形，并通過(guò)對(duì)靜幀圖形的運(yùn)動(dòng)、旋轉(zhuǎn)、縮放或添加旁白，音樂(lè)等傳達(dá)視覺(jué)信息。目前針對(duì)動(dòng)態(tài)圖像的特點(diǎn)，我在教學(xué)中歸納出動(dòng)態(tài)設(shè)計(jì)規(guī)律和方法，引導(dǎo)學(xué)生繪制草圖創(chuàng)作圖形的同時(shí)，也引入計(jì)算機(jī)輔助教學(xué)的形式。在二維動(dòng)畫(huà)教學(xué)實(shí)踐中，尤其注重引導(dǎo)學(xué)生在不同設(shè)計(jì)軟件的工作場(chǎng)景中實(shí)現(xiàn)視覺(jué)符號(hào)的圖示過(guò)程，使視覺(jué)資訊更清晰地呈現(xiàn)。在未來(lái)的教學(xué)中會(huì)不僅強(qiáng)調(diào)不同創(chuàng)意設(shè)計(jì)軟件的綜合運(yùn)用，課程也組織學(xué)生運(yùn)用圖形進(jìn)行視覺(jué)溝通的教學(xué)互動(dòng)，通過(guò)師生的設(shè)計(jì)實(shí)踐加深對(duì)設(shè)計(jì)知識(shí)的認(rèn)識(shí)，為平面專業(yè)應(yīng)用教學(xué)提供參考。
參考文獻(xiàn)
[1]（英）阿爾弗雷登•C•哈登.藝術(shù)的進(jìn)化[M].廣西廣西師范出版社，2010：6.
[2]王雪青，鄭美京.二維設(shè)計(jì)基礎(chǔ)[M].上海人民美術(shù)出版社，2018：13.
[3]何風(fēng)梅，易熙瓊.計(jì)算機(jī)輔助工業(yè)設(shè)計(jì)課程的項(xiàng)目化教學(xué)實(shí)踐[J].設(shè)計(jì)，2018，23（12)：110-111.
[4]唯美世界.中文版PremiereProCC從入門到精通[M].北京：中國(guó)水利水電出版社，2019：05.
作者：陳瑤 單位：湖北工業(yè)大學(xué)藝術(shù)設(shè)計(jì)學(xué)院