（中職）FlashCS6動(dòng)畫(huà)制作（第2版）2.2教學(xué)課件（工信版）項(xiàng)目二Banner設(shè)計(jì)與制作

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

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

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

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

圖片設(shè)計(jì)的版式包括主題形象的體現(xiàn)、整體的布局、視覺(jué)元素的大小和數(shù)量、圖片與文字的關(guān)系等。根據(jù)不同的組織形式，可以將圖片的版式大致劃分為以下幾種：（1）兩欄式這種版式布局采用的是左文右圖或者左圖右文的形式。一般表現(xiàn)主題內(nèi)容的圖片占大部分區(qū)域，配以補(bǔ)充說(shuō)明性的文字用于進(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á)到美觀的畫(huà)面效果。在Banner中圖片設(shè)計(jì)遵循以下原則：對(duì)齊原則集中原則留白原則降噪原則重復(fù)原則對(duì)比原則案例2-2-1

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

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

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

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

圖2-2-8點(diǎn)按式相冊(cè)動(dòng)畫(huà)效果本節(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)畫(huà)的制作方法。希望讀者通過(guò)學(xué)習(xí)可以設(shè)計(jì)制作簡(jiǎn)單的Banner圖片動(dòng)畫(huà)。模擬實(shí)訓(xùn)一、實(shí)訓(xùn)目的1．了解Banner圖片設(shè)計(jì)排版樣式。2．熟悉Banner圖片設(shè)計(jì)排版原則。3