Animate動(dòng)畫制作案例教程 課件 項(xiàng)目二 Banner設(shè)計(jì)與制作

項(xiàng)目二Banner設(shè)計(jì)與制作

任務(wù)1

熟識(shí)Banner

任務(wù)目標(biāo)1234

了解Banner的應(yīng)用領(lǐng)域

認(rèn)識(shí)Banner設(shè)計(jì)的重要性熟悉構(gòu)圖的定義及法則掌握構(gòu)圖的樣式和結(jié)構(gòu)

1.了解Banner的應(yīng)用領(lǐng)域

Banner的核心使命就是吸引用戶關(guān)注，是大多數(shù)新產(chǎn)品，新事物，各種優(yōu)惠活動(dòng)呈現(xiàn)給用戶的最主要的途徑，所以Banner的主題要明確，關(guān)鍵內(nèi)容要突出，要能夠有效的抓住用戶眼球。Banner的應(yīng)用領(lǐng)域也越來越廣泛，我們常見的應(yīng)用有：網(wǎng)幅廣告旗幟廣告橫幅廣告網(wǎng)站Banner手機(jī)Banner淘寶Banner微信Banner微博Banner2.認(rèn)識(shí)Banner設(shè)計(jì)的重要性

Banner設(shè)計(jì)的初衷就是被點(diǎn)擊。所有的設(shè)計(jì)和創(chuàng)意都是圍繞著吸引用戶為目的來進(jìn)行的。一個(gè)好的設(shè)計(jì)，主題要明確。一個(gè)核心內(nèi)容，幾個(gè)圍繞說明，在有效吸引用戶的前提下，能夠很自然的融合到不同頁面是Banner的成功設(shè)計(jì)。下面通過兩個(gè)應(yīng)用實(shí)例對(duì)比來說明Banner設(shè)計(jì)的重要性。

如圖2-1-1所示的網(wǎng)站Banner廣告，整體畫面看起來就比較凌亂，東西太多，想表達(dá)的內(nèi)容也太多，這時(shí)候需要用戶去花時(shí)間思考，而這時(shí)候用戶往往是不愿意去思考的。所以這個(gè)Banner的設(shè)計(jì)是比較失敗的，一是不知道畫面要表達(dá)內(nèi)容的沒有核心主題；二是整體上沒有吸引用戶眼球的地方。2.認(rèn)識(shí)Banner設(shè)計(jì)的重要性

圖2-1-1網(wǎng)站Banner廣告2.認(rèn)識(shí)Banner設(shè)計(jì)的重要性相比之下，圖2-1-2中的團(tuán)購網(wǎng)站Banner的文案設(shè)計(jì)簡練、清晰，虛化的背景圖片更好地映襯了實(shí)物的主題圖片，再加上簡明扼要的文字“最愛金秋葡萄香”及“葡萄義賣·為山區(qū)貧困家庭奉獻(xiàn)一份愛心”的主題，仿佛迎面而來，就能聞到滿籃瓜果飄香。圖2-1-2團(tuán)購網(wǎng)站Banner3.熟悉構(gòu)圖的概念及法則

1．構(gòu)圖的概念構(gòu)圖是指創(chuàng)作者在一定的空間范圍內(nèi)，對(duì)自己要表現(xiàn)的形象進(jìn)行組織安排，形成形象的部分與整體之間，形象空間之間的特定的結(jié)構(gòu)、形式。簡單來說，構(gòu)圖是對(duì)畫面的內(nèi)容和組織形式進(jìn)行整體設(shè)計(jì)。任何構(gòu)圖都離不開點(diǎn)、線、面這3個(gè)元素，以點(diǎn)成線，以線構(gòu)面，它們是視覺構(gòu)成的基本元素，具有不同的情感特征，因此，要善于采用不同的組合，呈現(xiàn)不同的Banner構(gòu)圖。點(diǎn)的聚合點(diǎn)的排列所引起的視覺流動(dòng)，引入了時(shí)間因素，利用點(diǎn)的大小、形狀及距離的變化，可以設(shè)計(jì)出富于節(jié)奏韻律的畫面。如圖2-1-3所示，點(diǎn)的連續(xù)排列構(gòu)成線，點(diǎn)與點(diǎn)之間的距離越近，線的特性就越顯著；同樣，點(diǎn)的密集排列構(gòu)成面，點(diǎn)的距離越近，面的特性就越顯著。3.熟悉構(gòu)圖的概念及法則圖2-1-3點(diǎn)的聚合示例1圖2-1-4點(diǎn)的聚合示例23.熟悉構(gòu)圖的概念及法則線的流動(dòng)線是點(diǎn)移動(dòng)的軌跡，可在頁面上起到強(qiáng)調(diào)、分割、引導(dǎo)視線作用。在設(shè)計(jì)中，利用線對(duì)頁面空間進(jìn)行分割的方法也很普遍，不同方向、長度、寬度、形態(tài)的線會(huì)給人以不同的感受。圖2-1-5所示是曲線的流動(dòng)示例。圖2-1-5曲線的流動(dòng)示例3.熟悉構(gòu)圖的概念及法則

圖2-1-6是直線的流動(dòng)示例，畫面中利用嚴(yán)謹(jǐn)?shù)木€條流動(dòng)來展示產(chǎn)品信息，使頁面穩(wěn)重富有理性。

圖2-1-6直線的流動(dòng)示例3.熟悉構(gòu)圖的概念及法則面的分割面在設(shè)計(jì)中的概念，可以理解為點(diǎn)的放大，點(diǎn)的密集或線的重復(fù)。Banner元素在不同大小色塊元素的風(fēng)格對(duì)比下，能獲得清晰、條理的秩序，同時(shí)在整體上也顯得和諧統(tǒng)一。圖2-1-7是面的分割示例，清晰突出的圖片是吸引用戶關(guān)注的第一視覺點(diǎn)。圖2-1-7面的分割示例

3.熟悉構(gòu)圖的概念及法則

2．構(gòu)圖的形式美法則在Banner設(shè)計(jì)中采用特殊的形式結(jié)構(gòu)，會(huì)使畫面變得個(gè)性十足并能更好的區(qū)別于其它的同類產(chǎn)品，讓人印象深刻。（1）有機(jī)形的柔和與美有機(jī)形是由一定數(shù)量的曲線組合而成，是自然界外力與內(nèi)力相抗衡而形成的形態(tài)。圖2-1-8所示的曲線與個(gè)性化的插圖形成強(qiáng)烈的對(duì)比。

圖2-1-8有機(jī)形構(gòu)圖法則示例3.熟悉構(gòu)圖的概念及法則（2）偶然形的獨(dú)特魅力偶然形是在力的作用下隨機(jī)形成的圖形，它具有天然成趣的效果，是利用偶然因素提煉美的方法，讓Banner設(shè)計(jì)更加與眾不同，圖2-1-9所示的偶然形構(gòu)圖使頁面產(chǎn)生趣味性。圖2-1-9偶然形構(gòu)圖法則示例4.掌握構(gòu)圖的樣式和結(jié)構(gòu)

將表現(xiàn)主體的各個(gè)構(gòu)成要素按照主次關(guān)系放置在畫面相應(yīng)的區(qū)域，形成視覺感受，達(dá)到設(shè)計(jì)意圖。主體元素、輔助元素按照什么形式規(guī)格出現(xiàn)就是構(gòu)圖的樣式，不同的主體，產(chǎn)品使用不同的構(gòu)圖樣式有著內(nèi)在的規(guī)律。下面來介紹幾種構(gòu)圖的樣式。（1）垂直構(gòu)圖圖2-1-10垂直構(gòu)圖示例4.掌握構(gòu)圖的樣式和結(jié)構(gòu)（2）平衡式構(gòu)圖圖2-1-11平衡式構(gòu)圖示例（3）斜線構(gòu)圖圖2-1-12斜線構(gòu)圖示例4.掌握構(gòu)圖的樣式和結(jié)構(gòu)(4)放射線構(gòu)圖

(5)對(duì)角線構(gòu)圖圖2-1-13放射線構(gòu)圖示例圖2-1-14對(duì)角線構(gòu)圖示例4.掌握構(gòu)圖的樣式和結(jié)構(gòu)(6)三角形構(gòu)圖(7)框架式構(gòu)圖圖2-1-15三角形構(gòu)圖示例圖2-1-16框架式構(gòu)圖示例4.掌握構(gòu)圖的樣式和結(jié)構(gòu)(8)九宮格構(gòu)圖圖2-1-17九宮格構(gòu)圖示例案例2-1-1中國傳統(tǒng)美食效果圖的設(shè)計(jì)制作下面通過案例分析Banner設(shè)計(jì)制作的構(gòu)圖、配色、以及編排等。濃郁中國風(fēng)的“?！弊职导y搭配復(fù)古邊框背景，與中國傳統(tǒng)美食“餃子”的食物圖片及“中華味道”文字相得益彰，可以完美呈現(xiàn)主題內(nèi)容，效果如圖2-1-18所示。圖2-1-18中國傳統(tǒng)美食效果圖本節(jié)小結(jié)

本節(jié)主要介紹了Banner的應(yīng)用領(lǐng)域，Banner設(shè)計(jì)的重要性，構(gòu)圖的定義、法則和構(gòu)圖的樣式、結(jié)構(gòu)等相關(guān)知識(shí)。通過設(shè)計(jì)制作Banner案例，了解Banner的構(gòu)圖、配色、以及編排等。模擬實(shí)訓(xùn)一、實(shí)訓(xùn)目的1．了解Banner的應(yīng)用領(lǐng)域。2．熟悉構(gòu)圖的定義和法則。3．掌握構(gòu)圖的樣式和結(jié)構(gòu)。二、實(shí)訓(xùn)內(nèi)容1.

分析“我要自學(xué)網(wǎng)”網(wǎng)站首頁Banner效果圖的構(gòu)圖、配色，以及編排效果，完成Banner的設(shè)計(jì)制作，如圖2-1-19所示。圖2-1-19效果圖2.分析“唐獅音樂節(jié)”Banner效果圖的構(gòu)圖、配色、以及編排效果，完成Banner的設(shè)計(jì)制作，如圖2-1-20所示。圖2-1-20效果圖項(xiàng)目二Banner設(shè)計(jì)與制作

任務(wù)2設(shè)計(jì)制作Banner圖片

任務(wù)目標(biāo)123了解Banner圖片設(shè)計(jì)版式

熟悉Banner圖片設(shè)計(jì)排版原則

掌握Banner圖片特效動(dòng)畫制作1.了解Banner圖片設(shè)計(jì)版式

圖片設(shè)計(jì)的版式包括主題形象的體現(xiàn)、整體的布局、視覺元素的大小和數(shù)量、圖片與文字的關(guān)系等。根據(jù)不同的組織形式，可以將圖片的版式大致劃分為以下幾種：（1）兩欄式這種版式布局采用的是左文右圖或者左圖右文的形式。一般表現(xiàn)主題內(nèi)容的圖片占大部分區(qū)域，配以補(bǔ)充說明性的文字用于進(jìn)一步表達(dá)主題，如圖2-2-1所示。

圖2-2-1兩欄式版式示例1.了解Banner圖片設(shè)計(jì)版式

（2）三欄式這種版式布局采用的是中間文字兩邊是圖片的形式，主次關(guān)系明確，如圖2-2-2所示。

（3）上下式這種版式布局采用的是上面文字下面圖片的形式，首先由上方的文字引導(dǎo)用戶的閱讀視線，再由下方的圖片更好的表現(xiàn)主題內(nèi)容，圖文相結(jié)合，如圖2-2-3所示。

圖2-2-2三欄式版式示例

圖2-2-3上下式版式示例1.了解Banner圖片設(shè)計(jì)版式

（4）組合式1

這種版式布局采用的是一邊是展示產(chǎn)品的模特人物，另一邊是文字加圖片的形式，在表現(xiàn)形式上更加靈活，如圖2-2-4所示。

圖2-2-4組合式1版式示例（5）組合式2這種版式布局采用的是兩邊是模特人物，中間是文字加圖片的形式，在用于展示類的Banner圖片中使用此版式的居多，例如服飾，潮流單品等，如圖2-2-5所示。

圖2-2-5組合式2版式示例1.了解Banner圖片設(shè)計(jì)版式

（6）文字+背景這種版式布局采用的是純文字加背景的圖片形式，在背景的襯托下，突出文字主題的內(nèi)容，重點(diǎn)鮮明，如圖2-2-6所示。

圖2-2-6文字+背景版式示例2.熟悉Banner圖片設(shè)計(jì)排版原則

排版就是把可視化信息如文字、圖片等元素在整體布局上調(diào)整位置、大小、方向，使版面達(dá)到美觀的畫面效果。在Banner中圖片設(shè)計(jì)遵循以下原則：對(duì)齊原則集中原則留白原則降噪原則重復(fù)原則對(duì)比原則案例2-2-1

格子切換圖片2.掌握Banner圖片特效動(dòng)畫制作

Banner中圖片特效動(dòng)畫，是在實(shí)現(xiàn)動(dòng)畫的基礎(chǔ)上，大大提升動(dòng)畫本身的可觀賞性。下面通過兩個(gè)案例來學(xué)習(xí)一下圖片特效動(dòng)畫的制作方法。本例設(shè)計(jì)的是格子切換圖片效果，畫面通過線條分隔成格子，當(dāng)鼠標(biāo)滑離格子時(shí)顯示另一張圖片，整體設(shè)計(jì)風(fēng)格簡潔大方，效果如圖2-2-7所示。

圖2-2-7格子切換圖片動(dòng)畫效果案例2-2-2點(diǎn)按式像冊(cè)3.掌握Banner圖片特效動(dòng)畫制作

本例設(shè)計(jì)的是電子婚紗相冊(cè)，通過鼠標(biāo)單擊左側(cè)的縮略圖，在右邊可以查看放大的相冊(cè)圖片，效果如圖2-2-8所示。

圖2-2-8點(diǎn)按式相冊(cè)動(dòng)畫效果強(qiáng)化案例圖片幻燈片3.掌握Banner圖片特效動(dòng)畫制作

本案例是網(wǎng)站Banner中經(jīng)常出現(xiàn)的圖片幻燈片動(dòng)畫效果，圖片漸漸淡出顯示，當(dāng)鼠標(biāo)經(jīng)過右下角圖片縮略圖時(shí)切換大圖顯示，效果如圖2-2-9所示。

圖2-2-9圖片幻燈片效果本節(jié)小結(jié)

在本節(jié)里主要學(xué)習(xí)了Banner圖片設(shè)計(jì)的相關(guān)知識(shí)，熟悉幾類Banner圖片設(shè)計(jì)的版式應(yīng)用以及圖片設(shè)計(jì)的六大排版原則，最后結(jié)合實(shí)際案例講解了Banner圖片設(shè)計(jì)動(dòng)畫的制作方法。希望讀者通過學(xué)習(xí)可以設(shè)計(jì)制作簡單的Banner圖片動(dòng)畫。模擬實(shí)訓(xùn)一、實(shí)訓(xùn)目的1．了解Banner圖片設(shè)計(jì)排版樣式。2．熟悉Banner圖片設(shè)計(jì)排版原則。3．能夠制作簡單的圖片特效動(dòng)畫。二、實(shí)訓(xùn)內(nèi)容1．制作“隱藏的圖像”動(dòng)畫效果，效果如圖2-2-9所示。（提示：遮罩動(dòng)畫和隱形按鈕的應(yīng)用）

圖2-2-9隱藏的圖像動(dòng)畫效果項(xiàng)目二Banner設(shè)計(jì)與制作

任務(wù)3設(shè)計(jì)制作

Banner文字任務(wù)目標(biāo)123了解文字在Banner設(shè)計(jì)中的地位掌握Banner中文字設(shè)計(jì)技巧

掌握特效文字動(dòng)畫制作

1.了解文字在Banner設(shè)計(jì)中的地位

在Banner中，信息的表達(dá)通常是通過文字、圖像等方式，其中Banner中最重要的設(shè)計(jì)元素就是文字，相對(duì)于圖形來說，文字的信息傳遞方式更直接，所以文字在Banner的設(shè)計(jì)中占有舉足輕重的地位。為了配合網(wǎng)頁的整體效果，網(wǎng)頁中Banner文字的設(shè)計(jì)，一般以特效文字樣式呈現(xiàn)，用以突出主題。圖2-3-1所示網(wǎng)頁Banner中的字體使用了漸變描邊文字，來彰顯活動(dòng)的主題。

圖2-3-1網(wǎng)頁Banner示例1.了解文字在Banner設(shè)計(jì)中的地位

在網(wǎng)絡(luò)廣告中為了突出廣告主題，使用戶在第一時(shí)間就能關(guān)注到所要表達(dá)的內(nèi)容，常使用特效文字來突出顯示。圖2-3-2所示的廣告彩燈文字和描邊文字，將畫面中的宣傳廣告表達(dá)得獨(dú)特醒目。

圖2-3-2特效文字示例2.掌握Banner中文字設(shè)計(jì)的技巧

隨著生活中不同應(yīng)用需求的增加，各類Banner設(shè)計(jì)對(duì)文字的要求也日益增多；Banner中的文字可以根據(jù)不同需求，不同的氛圍，去找尋具有準(zhǔn)確性、關(guān)聯(lián)性、獨(dú)特性的個(gè)性設(shè)計(jì)，以傳遞用戶的需求和產(chǎn)品特征,下面和大家分享一些Banner中文字設(shè)計(jì)的技巧。1．處理文字的數(shù)量如果Banner中的文字過長，而且不能刪減文字的情況下，如圖2-3-3所示宣傳端午節(jié)的網(wǎng)頁Banner，可對(duì)文字進(jìn)行比較處理，突出主題文字。圖2-3-3網(wǎng)頁Banner長文字示例2.掌握Banner中文字設(shè)計(jì)的技巧

如果Banner中的文字過短，畫面太空，可加入一些輔助信息豐富畫面，如圖2-3-4所示的Banner，在圖中加入類似時(shí)間、英文、域名、頻道名或意念方面等輔助文字充實(shí)畫面。圖2-3-4網(wǎng)頁Banner短文字示例2.掌握Banner中文字設(shè)計(jì)的技巧

2．構(gòu)建輔助的視覺（1）文字+背景陪襯兩段式。這類Banner設(shè)計(jì)畫面感強(qiáng)，視覺集中，突出文字顯示主題，如圖2-3-5所示。圖2-3-5文字+背景陪襯兩段式2.掌握Banner中文字設(shè)計(jì)的技巧

（2）文字+主體物兩段式。這類Banner設(shè)計(jì)中文字和圖案相輔相成，起到文字言事，圖案補(bǔ)充理解的效果，最適合做介紹類或者產(chǎn)品類的Banner，如圖2-3-6所示。圖2-3-6文字+主體物的兩段式2.掌握Banner中文字設(shè)計(jì)的技巧

（3）主體物+背景+文字三段式。這類Banner設(shè)計(jì)是目前應(yīng)用最廣泛的主流設(shè)計(jì)。畫面虛實(shí)結(jié)合，主次關(guān)系明顯，如圖2-3-7所示。圖2-3-7主體物+背景+文字三段式2.掌握Banner中文字設(shè)計(jì)的技巧

3．控制文字的留白文字的旁邊要留有一定剩余的空間，這樣能使它們更突出，避免廣告條的每一個(gè)角都有文字，不要以為這樣做分散文字，可以通過調(diào)整個(gè)別的文字，讓瀏覽者更好地理解。文字緊靠邊緣的廣告條讓人看起來很不專業(yè)，在Banner設(shè)計(jì)中要避免這一點(diǎn)，如圖2-3-8、2-3-9所示。圖2-3-8Banner中文字緊靠邊緣圖2-3-9Banner中文字留有適當(dāng)空白2.掌握Banner中文字設(shè)計(jì)的技巧

廣告條的邊緣不是一個(gè)休息場所，也不是一個(gè)可以讓文字跑出去的空房間。它是一個(gè)內(nèi)容與邊緣保持適當(dāng)距離的區(qū)域，如圖2-3-10、2-3-11所示。圖2-3-10Banner中文字邊距太小

圖2-3-11Banner中文字邊距合適2.掌握Banner中文字設(shè)計(jì)的技巧

4．調(diào)整文字的間距如果文字較小，間距也小的話，會(huì)使瀏覽非常困難，輕微的調(diào)整能產(chǎn)生意想不到的變化。越小的文字越需要大的間距來提高它們的可讀性。對(duì)比圖2-3-12、2-3-13所示圖片，圖片上使用的是同樣大小的字體，但間距調(diào)大了，是不是更容易看清，效果一目了然。圖2-3-12Banner中小文字間距過小圖2-3-13Banner中小文字間距合適案例2-3-1淡入淡出文字動(dòng)畫3.掌握特效文字動(dòng)畫制作

在Animate中提供了非常強(qiáng)大的文本編輯功能，在動(dòng)畫效果中除了可以輸入文本內(nèi)容外，還可以制作出各種特效文字動(dòng)畫。下面主要介紹火焰文字、模糊文字、漸現(xiàn)文字等特效文字動(dòng)畫的創(chuàng)建。

本案例是為科技公司設(shè)計(jì)的網(wǎng)站宣傳Banner動(dòng)畫，在富有科技感的漸變藍(lán)色背景下，左面自下向上顯示雙手托舉網(wǎng)絡(luò)互聯(lián)的地球圖片，同時(shí)右面文字淡入淡出顯示廣告宣傳語，兩者相得益彰，如圖2-3-14所示。圖2-3-14動(dòng)畫效果案例2-3-2跳動(dòng)文字動(dòng)畫

3.掌握特效文字動(dòng)畫制作

本例設(shè)計(jì)的是房地產(chǎn)廣告，制作出在背景圖片的襯托下，一排文字形成一道動(dòng)態(tài)風(fēng)景的跳動(dòng)文字動(dòng)畫，通過文字動(dòng)畫，加強(qiáng)畫面表現(xiàn)力，效果如圖2-3-15所示。圖2-3-15跳動(dòng)文字動(dòng)畫效果案例2-3-3漸出文字動(dòng)畫

3.掌握特效文字動(dòng)畫制作

本例設(shè)計(jì)的是珠寶網(wǎng)站首頁動(dòng)畫中的漸出文字動(dòng)畫，文本從左向右、由大到小、由透明到清淅依次出現(xiàn)，使網(wǎng)站頁面更具有表現(xiàn)力，效果如圖2-3-16所示。圖2-3-16漸出文字動(dòng)畫效果強(qiáng)化案例卷簾文字動(dòng)畫3.掌握特效文字動(dòng)畫制作

本例是為咨詢公司設(shè)計(jì)的宣傳動(dòng)畫，在古典風(fēng)格的背景下，配合“睿智全瞻，文才韜略；運(yùn)籌帷幄，決勝千里”的文字，巧妙的把公司名稱融匯其中，營造出大氣磅礴的氛圍效果，如圖2-3-17所示。圖2-3-17動(dòng)畫效果本節(jié)小結(jié)

本節(jié)主要學(xué)習(xí)了Banner中文字設(shè)計(jì)的相關(guān)知識(shí)，了解文字在Banner設(shè)計(jì)中所占據(jù)的重要地位，掌握文字設(shè)計(jì)的幾點(diǎn)技巧，最后結(jié)合實(shí)際范例講解了Banner文字設(shè)計(jì)動(dòng)畫的制作方法。希望讀者通過學(xué)習(xí)可以設(shè)計(jì)制作各類Banner文字動(dòng)畫。模擬實(shí)訓(xùn)一、實(shí)訓(xùn)目的1．了解Banner的字體設(shè)計(jì)方法。

2．掌握幾種特效文字動(dòng)畫的制作。3．能夠?qū)ξ淖謩?dòng)畫效果舉一反三。二、實(shí)訓(xùn)內(nèi)容1．本例設(shè)計(jì)的是橫幅類廣告中的模糊文字動(dòng)畫，文字清晰、沖擊力強(qiáng)，文本由右向左閃電般模糊出現(xiàn)，然后轉(zhuǎn)換為金黃色發(fā)光的文本，與背景畫面相映，制作“模糊文字”的效果，如圖2-3-18所示。

2-3-18模糊文字動(dòng)畫效果2．制作“火焰”文字特效。以網(wǎng)絡(luò)游戲中的人物畫面為背景，游戲名稱采用了火焰文字特效，讓玩家對(duì)游戲產(chǎn)生激情燃燒的感覺，效果如圖2-3-19所示。（提示：使用遮罩層創(chuàng)建文字遮罩動(dòng)畫）

圖2-3-19火焰文字動(dòng)畫效果項(xiàng)目二Banner設(shè)計(jì)與制作

任務(wù)4設(shè)計(jì)制作Banner主題任務(wù)目標(biāo)123了解Banner主題設(shè)計(jì)風(fēng)格掌握Banner主題設(shè)計(jì)技巧

掌握Banner主題設(shè)計(jì)動(dòng)畫的制作

1.

了解Banner主題設(shè)計(jì)風(fēng)格

在進(jìn)行設(shè)計(jì)之前，首先應(yīng)該與用戶溝通，了解用戶想要表達(dá)的主題，然后確定設(shè)計(jì)的風(fēng)格，有針對(duì)性地對(duì)Banner主題進(jìn)行設(shè)計(jì)，形象鮮明的展示所要表達(dá)的內(nèi)容。下面通過一些實(shí)例來了解常見的Banner主題設(shè)計(jì)風(fēng)格。

1．時(shí)尚風(fēng)圖2-4-1所示為兩個(gè)Banner設(shè)計(jì)，其都有共同的特點(diǎn)，大標(biāo)題、模特，報(bào)刊潮流雜志風(fēng)。這類風(fēng)格主要用于衣飾、鞋帽等流行單品的展示。

圖2-4-1時(shí)尚風(fēng)示例1.了解Banner主題設(shè)計(jì)風(fēng)格

2．復(fù)古風(fēng)復(fù)古風(fēng)的特點(diǎn)是傳統(tǒng)元素和復(fù)古圖案，圖2-4-2所示的左邊的Banner中文字使用了水墨感覺的書法字體，右邊的Banner則是包含了傳統(tǒng)的賽龍舟剪紙?jiān)兀浅Ｇ泻隙宋绻?jié)的主題。

圖2-4-2復(fù)古風(fēng)示例1.了解Banner主題設(shè)計(jì)風(fēng)格

3．清新風(fēng)清新風(fēng)的特點(diǎn)就是畫面清爽、唯美，色彩搭配清新自然，圖2-4-3所示的banner，就給人十分清麗和透亮的感覺。

圖2-4-3清新風(fēng)示例4．炫酷風(fēng)這種風(fēng)格通常比較多的使用深色背景，常用有質(zhì)感的元素與光影特效，圖2-4-4所示的Banner色彩華麗，引人入勝。圖2-4-4炫酷風(fēng)示例1.了解Banner主題設(shè)計(jì)風(fēng)格

5．簡約風(fēng)簡約風(fēng)的特點(diǎn)就是極簡主義、大空間，圖2-4-5所示的banner沒有任何過多的裝飾元素，整體感覺就是非常的簡潔大方。

圖2-4-5簡約風(fēng)示例6．歐美風(fēng)在藝術(shù)作品、商品等事物，在整體上呈現(xiàn)出歐美事物的面貌，被稱為歐美風(fēng)。圖2-4-6所示的某珠寶的B2C網(wǎng)站的Banner。圖2-4-6歐美風(fēng)示例2.掌握Banner主題設(shè)計(jì)技巧

在實(shí)際的工作中經(jīng)常會(huì)遇到不同Banner主題設(shè)計(jì)的需求，從設(shè)計(jì)成本考慮用戶不會(huì)給太多的設(shè)計(jì)時(shí)間，那么如何才能在短時(shí)間內(nèi)做出一個(gè)成功的banner呢？下面總結(jié)出一些Banner主題設(shè)計(jì)的技巧一起分享。

1．思考主題定位（1）考慮對(duì)象的定位因?yàn)榉诸悆?nèi)容不同，門戶網(wǎng)站各個(gè)頻道有著不同的風(fēng)格，所以在做設(shè)計(jì)的時(shí)候也要考慮這個(gè)因素，圖2-4-7所示為女性頻道的定位是女性，所以這個(gè)Banner的設(shè)計(jì)風(fēng)格也很貼合這個(gè)定位。

圖2-4-7女性頻道主題Banner2.掌握Banner主題設(shè)計(jì)技巧

（2）考慮專題的定位頻道和專題的定位有時(shí)是有沖突的，當(dāng)存在風(fēng)格沖突的情況下，盡量以貼合專題的定位為主，也盡可能避免偏離頻道風(fēng)格。圖2-4-8所示是歷史頻道主題Banner，以水墨畫作為背景，表現(xiàn)出滄桑厚重的歷史感。

圖2-4-8歷史頻道主題Banner2.掌握Banner主題設(shè)計(jì)技巧

2．創(chuàng)造力對(duì)主題的藝術(shù)化表現(xiàn)（1）新感覺重塑嚴(yán)肅話題圖2-4-9所示為所示為抗洪救災(zāi)的新聞主題Banner，畫面中的洪流、堤壩、抗洪搶險(xiǎn)的武警官兵及“抗洪救災(zāi)，你我同行”的文字內(nèi)容，都很好地傳達(dá)了主題思想。在設(shè)計(jì)Banner時(shí)，不僅要考慮整體畫面的設(shè)計(jì)，還要突出主題。

圖2-4-9新聞主題Banner2.掌握Banner主題設(shè)計(jì)技巧

（2）幽默感呈現(xiàn)輕松話題在設(shè)計(jì)一些輕松且具有娛樂感的主題時(shí)，更應(yīng)該用天馬行空的創(chuàng)意營造輕松詼諧的氛圍。圖2-4-10所示的這個(gè)專題banner，以繪制在手指上的漫畫人物搭配手勢(shì)動(dòng)作表現(xiàn)主題內(nèi)容，畫面詼諧有趣，引人注目。

圖2-4-10娛樂主題Banner2.掌握Banner主題設(shè)計(jì)技巧

（3）小情調(diào)充實(shí)主題創(chuàng)意有時(shí)候一點(diǎn)小小的創(chuàng)意也會(huì)讓banner增色不少。圖2-4-11所示的這個(gè)Banner，水墨暈染中不僅有皮影人物，還有文字；從背景到文字都體現(xiàn)出中華傳統(tǒng)文化的主題內(nèi)容。

圖2-4-11中華傳統(tǒng)文化主題Banner案例2-4-1復(fù)古主題設(shè)計(jì)動(dòng)畫3.掌握Banner主題設(shè)計(jì)動(dòng)畫的制作

本例是東方意蘊(yùn)設(shè)計(jì)工作室網(wǎng)站的Banner導(dǎo)航動(dòng)畫。在彩色圖案和黑白色圖案相結(jié)合的背景下，沿藤蔓飛舞的蝴蝶，下落的文字，營造出復(fù)古的氛圍，呼應(yīng)網(wǎng)站主題，效果如圖2-4-12所示。圖2-2-12復(fù)古主題設(shè)計(jì)動(dòng)畫效果強(qiáng)化案例

卡通主題設(shè)計(jì)動(dòng)畫3.掌握Banner主題設(shè)計(jì)動(dòng)畫的制作

本案例是為購物網(wǎng)站設(shè)計(jì)的宣傳動(dòng)畫，利用遮罩動(dòng)畫先顯示鼠標(biāo)連線顯示器，屏幕中出現(xiàn)購物的櫥窗，然后改變?cè)煨蜑榭爝f車，體現(xiàn)了網(wǎng)上購物，“一站到家，快捷高效”的宣傳主題，利用手繪的卡通圖像造型，營造輕松愉快的購物氛圍，效果如圖2-4-13所示。圖2-2-13卡通主題設(shè)計(jì)動(dòng)畫效果本節(jié)小結(jié)在本節(jié)里主要學(xué)習(xí)了Banner主題設(shè)計(jì)相關(guān)的知識(shí)，介紹了幾類Banner主題設(shè)計(jì)的風(fēng)格、特點(diǎn)，和讀者分享了Banner主題設(shè)計(jì)中運(yùn)用到的幾點(diǎn)小技巧，最后結(jié)合實(shí)際范例講解了Banner主題設(shè)計(jì)動(dòng)畫的制作方法。希望讀者能夠舉一反三學(xué)會(huì)制作簡單的Banner主題動(dòng)畫。模擬實(shí)訓(xùn)一、實(shí)訓(xùn)目的1．了解Banner主題設(shè)計(jì)的風(fēng)格。2．掌握Banner主題設(shè)計(jì)的技巧。

3．能夠制作簡單的Banner主題設(shè)計(jì)動(dòng)畫。

二、實(shí)訓(xùn)內(nèi)容1．此例是為科技公司設(shè)計(jì)的Banner動(dòng)畫，在極具個(gè)性的工業(yè)化風(fēng)格背景的映襯下，加上文字特效。整體色彩搭配極具科技感，引人入目，效果如圖2-4-22所示。（提示：元件的制作，逐幀和補(bǔ)間動(dòng)畫的運(yùn)用）

圖2-4-13現(xiàn)代主題設(shè)計(jì)動(dòng)畫效果項(xiàng)目二Banner設(shè)計(jì)與制作

任務(wù)5設(shè)計(jì)制作軟文Slogan

任務(wù)目標(biāo)123熟悉軟文Slogan構(gòu)圖規(guī)則

掌握軟文Slogan構(gòu)圖樣式

掌握軟文Slogan動(dòng)畫制作

1.

熟悉軟文Slogan構(gòu)圖規(guī)則

構(gòu)圖就是對(duì)畫面進(jìn)行合理的布局，在構(gòu)圖的引導(dǎo)下，使用戶了解展示的內(nèi)容，產(chǎn)生購買的沖動(dòng)，如果能夠達(dá)到這樣的目標(biāo)，就說明是成功的構(gòu)圖。構(gòu)圖的基本規(guī)則是：均衡、對(duì)比和視點(diǎn)。均衡均衡不同于對(duì)稱，是一種力量上的平衡感，使畫面具有穩(wěn)定性，如圖2-5-1所示。

圖2-5-1均衡不是對(duì)稱1.熟悉軟文Slogan構(gòu)圖規(guī)則

對(duì)比在構(gòu)圖上來說可以是大小的對(duì)比，粗細(xì)的對(duì)比，方圓的對(duì)比，曲線與直線的對(duì)比等等，如圖2-5-2所示。

視點(diǎn)就是如何將用戶的目光集中在畫面的中心點(diǎn)上，利用構(gòu)圖去引導(dǎo)用戶關(guān)注的視點(diǎn)，如圖2-5-3所示。

圖2-5-2白色線條的對(duì)比產(chǎn)生了空間感圖2-5-3將視點(diǎn)集中引導(dǎo)到slogan上

2.掌握軟文Slogan構(gòu)圖樣式

在軟文Slogan構(gòu)圖中大概分以下幾種樣式：1．垂直水平式構(gòu)圖如圖2-5-4所示，在畫面中每個(gè)產(chǎn)品平行的排列，各個(gè)產(chǎn)品所占比例相同，秩序感強(qiáng)，每個(gè)產(chǎn)品都能很好的展示。此類構(gòu)圖給用戶呈現(xiàn)的是產(chǎn)品規(guī)矩、正式、安全感強(qiáng)。圖2-5-4垂直水平式構(gòu)圖示例2.掌握軟文Slogan構(gòu)圖樣式

2．正三角形和倒三角構(gòu)圖如圖2-5-5所示的是多個(gè)產(chǎn)品進(jìn)行正三角構(gòu)圖，產(chǎn)品立體感強(qiáng)，各個(gè)產(chǎn)品所占比重有輕有重，構(gòu)圖安定自然，空間感強(qiáng)。此類構(gòu)圖給用戶呈現(xiàn)的是穩(wěn)定可靠、安全感強(qiáng)。圖2-5-5正三角形構(gòu)圖示例如圖2-5-6所示的是多個(gè)產(chǎn)品進(jìn)行倒三角構(gòu)圖，產(chǎn)品運(yùn)動(dòng)感極強(qiáng)，構(gòu)圖動(dòng)感活潑。此類構(gòu)圖給用戶呈現(xiàn)的是不穩(wěn)定感以激發(fā)用戶激情，有一種運(yùn)動(dòng)的感覺。圖2-5-6倒三角形構(gòu)圖示例2.掌握軟文Slogan構(gòu)圖樣式

3．對(duì)角線構(gòu)圖如圖2-5-7所示的是一個(gè)產(chǎn)品或兩個(gè)產(chǎn)品進(jìn)行組合對(duì)角線構(gòu)圖，產(chǎn)品的空間感強(qiáng)，各個(gè)