平面設(shè)計中二維動態(tài)圖形教學(xué)與實踐

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了平面設(shè)計中二維動態(tài)圖形教學(xué)與實踐范文，希望能給你帶來靈感和參考，敬請閱讀。

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

關(guān)鍵詞：計算機(jī)軟件二維圖形動態(tài)圖形

一、二維動態(tài)圖形教學(xué)內(nèi)容

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

二、二維動態(tài)圖形課程階段性教學(xué)

相對來說，二維圖象的構(gòu)成方式主要有靜態(tài)和動態(tài)兩種。由于我們在觀看動態(tài)圖形的時候，是一系列靜態(tài)圖片以序列的方式運(yùn)動，因此在教學(xué)中，我將二維動態(tài)圖形的課程分為兩個步驟來進(jìn)行階段性訓(xùn)練。

（一）二維靜態(tài)圖形圖像

通過對二維靜態(tài)圖形圖像課程的訓(xùn)練，能培養(yǎng)學(xué)生的平面空間概念，增強(qiáng)對圖象構(gòu)成的認(rèn)識，并有助于提高平面設(shè)計課程教學(xué)的質(zhì)量。1.圖像表現(xiàn)：圖像有不同的風(fēng)格和表現(xiàn)形式，例如圖標(biāo)，符號，記號或徽標(biāo)。文字，圖片和插畫都是以內(nèi)容，結(jié)構(gòu)和風(fēng)格為基礎(chǔ)的圖像表現(xiàn)形式?！杜f唐書•張行書傳》中說“觀古今用人，必因媒介。”圖象的傳達(dá)媒介在藝術(shù)范疇內(nèi)指繪畫顏料的表現(xiàn)技法；無論是基于顏料的繪畫形式，還是以數(shù)碼為載體進(jìn)行創(chuàng)意的圖象都是設(shè)計的不同表現(xiàn)形式，無論是來源于網(wǎng)絡(luò)上的視覺圖片，還是生活中拍攝的素材，各種數(shù)碼設(shè)備豐富的編修功能可以直接模擬出全景或是暈映風(fēng)格的圖象。2.圖像合成：圖像合成是一種圖形處理的方式，歷史上有許多圖形藝術(shù)家使用這種方法，在現(xiàn)代主義時期，圖像合成和拼貼是一種歷史悠久的藝術(shù)處理手法，將照片，圖形，文字和版面組合在一起形成新的圖像或使作品具有新的含義。計算機(jī)軟件對這種設(shè)計方法進(jìn)行了延伸和加強(qiáng)，可以消除各個元素之間的合成痕跡，拼貼圖片。在不斷的教學(xué)摸索中，我發(fā)現(xiàn)對于平面廣告專業(yè)的學(xué)生而言，在課堂教學(xué)中采用合成與拼貼的方法可以提高學(xué)生學(xué)習(xí)興趣，更自主地搜集素材和設(shè)計實踐。3.圖文結(jié)合：無論文字還是圖象都是影響二維動畫視覺效果的重要因素。文字和圖形的結(jié)合也是設(shè)計中常用的視覺形式。在有些設(shè)計中，文字和插圖的界限也含混不清，例如Bespoke字體是一種帶動畫模糊效果的字體，其圖象使人聯(lián)想到顯示屏的光點(diǎn)，可以應(yīng)用在展示ATM技術(shù)的設(shè)計中，寓意數(shù)據(jù)傳輸?shù)某焖俣取?/p>

（二）二維動態(tài)圖形圖像

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

1.以畫面為中心的動畫

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

2.蒙太奇組合畫面動畫

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

三、二維動態(tài)圖形課程形式

在二維動畫課程教學(xué)中，重點(diǎn)是訓(xùn)練學(xué)生：1計算機(jī)輔助設(shè)計表現(xiàn)基礎(chǔ)；2二維圖形設(shè)計的設(shè)計表現(xiàn)形式；3動態(tài)圖形的表現(xiàn)技巧；4二維動畫在設(shè)計中的應(yīng)用。課程分一個設(shè)計思考和三個設(shè)計表現(xiàn)環(huán)節(jié)；圖像符號在平面中的重要表現(xiàn)、圖像表現(xiàn)、圖案表現(xiàn)以及圖形表現(xiàn)。通過教學(xué)摸索，我認(rèn)為在二維動畫教學(xué)中，應(yīng)使學(xué)生認(rèn)識到動態(tài)圖象教學(xué)需要學(xué)生不僅理解二維圖形的基本原理，也要了解平面媒介形態(tài)下視覺效果的應(yīng)用，并通過教授計算機(jī)圖像軟件使用方法，使學(xué)生可以利用計算機(jī)圖像軟件有效地學(xué)習(xí)設(shè)計基礎(chǔ)的不同形式。

（一）計算機(jī)輔助設(shè)計表現(xiàn)基礎(chǔ)

PS，F(xiàn)L等是圖形設(shè)計中常用的電腦軟件工具。在教學(xué)中，通過講解軟件命令操作為主要內(nèi)容并輔于操作練習(xí)，課程設(shè)置力圖使同學(xué)們在計算機(jī)思維環(huán)境中掌握設(shè)計基本規(guī)律。例如AdobeIllustrator是Adobe系統(tǒng)公司推出的基于矢量的圖形制作軟件。能與位圖圖形處理軟件Photoshop共享一些插件和功能，其靜態(tài)圖象格式為JPG，PDF格式，同時它也可以將文件輸出為Flash格式，并與Flash連接使用。在Illustrator工作環(huán)境中，基本圖形主要包括直線、弧線、矩形、橢圓形、星形和多邊形等對象。在靜態(tài)圖形表現(xiàn)中，Illustrator能做出集中，放射的效果，可以將暈染的方向從中心往外擴(kuò)展，或是看起來像在旋轉(zhuǎn)。Illustrator文件也能制作動態(tài)圖形。作為動態(tài)圖形設(shè)計軟件之一，F(xiàn)lash具有圖形編輯的重要功能。與下載類似的位圖圖像相比，下載矢量圖形的速度比較快。Flash是二維矢量動畫軟件，使用Flash可以設(shè)計簡單的動畫，包含豐富的視頻、聲音、圖形。使用Flash可以導(dǎo)入Illustrator制作的矢量圖，并制作動畫效果，也可以直接在舞臺上繪制圖形，可以創(chuàng)建壓縮矢量圖形并將它們制作為動畫，也可以導(dǎo)入和處理在其他應(yīng)用程序中創(chuàng)建的矢量圖形和位圖圖像。一方面，計算機(jī)輔助教學(xué)帶給二維動畫設(shè)計教學(xué)新的理念，使平面構(gòu)成表現(xiàn)形式更為具體化；另一方面，由于軟件教學(xué)內(nèi)容模式容易固化思維，二維動畫教學(xué)應(yīng)該將課程軟件教學(xué)與設(shè)計創(chuàng)意有效銜接整合。

（二）靜態(tài)圖形設(shè)計的設(shè)計表現(xiàn)形式

形狀是二維的平面，我們在課程中大致將其分為三類：幾何圖形圓形，正方形，長方形和三角形，有棱有角邊緣鮮明。圖形具有直觀，快捷的特點(diǎn)。圖形以具體可視的形象來表述信息。在二維動畫設(shè)計教學(xué)中，我將圖形的概念引入軟件工具的掌握中，教學(xué)課程涵蓋二維圖形的創(chuàng)建到動態(tài)圖形的展示。二維圖形即自然的具象形態(tài)與抽象的形態(tài)。抽象圖形包括有棱有角邊緣鮮明的幾何圖形；有機(jī)圖形是從自然界或者生命組織中衍生出的圖形是最接近自然的；隨機(jī)圖形是從想象和發(fā)明中得到的圖形。首先，我主要從以下三個方面來講解創(chuàng)建二維圖形的基本方法，（1）繪制基本圖形：即繪制點(diǎn)、線、網(wǎng)格等。基本圖形主要包括直線、弧線、矩形、橢圓形、星形和多邊形等對象。（2）圖形繪制功能：繪制對象主要使用工具箱中的填色和描邊按鈕、漸變面板、畫筆面板、圖形樣式面板來實現(xiàn)。并通過單色填充、漸變填充和圖案填充創(chuàng)建圖形。（3）幾何圖形構(gòu)成：無論是在CorelDRAW還是Illustrator中，基本圖形都是制作任何復(fù)雜圖形的最基本元素。如像是數(shù)字照片和位圖圖像，不是矢量圖像，但如果需要使用數(shù)字照片，就可以使用實時描摹功能來轉(zhuǎn)換它。在二維動畫教學(xué)中，在創(chuàng)意階段，我引導(dǎo)同學(xué)們先在生活中拍攝的100張同一物象的不同角度，不同呈現(xiàn)方式的圖片中，從中尋找靈感，發(fā)現(xiàn)并體會從第一張照片開始到后來直至第100張時的觀念與思維上的變化，并做相關(guān)文字記錄：然后在100張圖片的拍攝過程所給予思維啟發(fā)繪制矢量圖形完成動態(tài)作品。強(qiáng)調(diào)圖形化的，素描方式的，符號化的，手繪的表現(xiàn)，充分運(yùn)用矢量圖形的繪制技巧。如圖，在這幅學(xué)生作品中，同學(xué)將符號進(jìn)行有序排列并稍加變化，以正方形的圖形創(chuàng)意為基本元素，應(yīng)用對比構(gòu)成的形式展現(xiàn)圖示的動態(tài)變化效果。將動態(tài)圖形的創(chuàng)意有步驟地以平面的形式設(shè)計表現(xiàn)。

（三）動態(tài)圖形圖像的表現(xiàn)技巧

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

四、二維動態(tài)圖形課程教學(xué)案例

1.自然形態(tài)表現(xiàn)：從具象圖形到抽象圖形在課程中將生活中常見的物像概括并以點(diǎn)線面的抽象形態(tài)表現(xiàn)出來，提取物像圖形圖案的構(gòu)成形式，以手繪的形式對圖形進(jìn)行表現(xiàn)，并使用圖形設(shè)計軟件Illustrator加以編輯，然后用故事板的形式展現(xiàn)。學(xué)生運(yùn)用了抽象的手法將身邊的物品固體膠以點(diǎn)線面的形式歸納并表現(xiàn)出來，并且分別將情感與表情例如高興，失望，通過固體膠表現(xiàn)出來。2.影像蒙太奇：靜態(tài)圖像拼貼任意選擇四張圖片，將其組合在一起構(gòu)成新的含義?？梢杂么蛏?，改變尺寸，僅顯示局部等方法來幫助構(gòu)思。3.動態(tài)表現(xiàn)：使用二維動畫軟件FLASH為視頻或網(wǎng)絡(luò)創(chuàng)建動態(tài)圖形內(nèi)容以文字，圖形，圖像或圖案為主要動態(tài)表現(xiàn)，運(yùn)用時間軸和關(guān)鍵幀處理Bitmap位圖格式或是Vector矢量圖形格式的圖像，在探索性的練習(xí)中要求學(xué)生在選擇一句話后用動態(tài)來展現(xiàn)這句話的意義，并為學(xué)生提供一個可以將自己的愛好通過動態(tài)來表達(dá)的機(jī)會，學(xué)生在選題時可以根據(jù)自己的愛好出發(fā)，制作簡潔的圖形動畫。

教學(xué)總結(jié)

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

參考文獻(xiàn)

[1]（英）阿爾弗雷登•C•哈登.藝術(shù)的進(jìn)化[M].廣西廣西師范出版社，2010：6.

[2]王雪青，鄭美京.二維設(shè)計基礎(chǔ)[M].上海人民美術(shù)出版社，2018：13.

[3]何風(fēng)梅，易熙瓊.計算機(jī)輔助工業(yè)設(shè)計課程的項目化教學(xué)實踐[J].設(shè)計，2018，23（12)：110-111.

[4]唯美世界.中文版PremiereProCC從入門到精通[M].北京：中國水利水電出版社，2019：05.

作者：陳瑤 單位：湖北工業(yè)大學(xué)藝術(shù)設(shè)計學(xué)院