正文

banner設(shè)計(jì)圖（筆記本banner設(shè)計(jì)圖）

發(fā)布時(shí)間：2023-04-07 08:33:12 稿源：創(chuàng)意嶺閱讀： 123

大家好！今天讓小編來大家介紹下關(guān)于banner設(shè)計(jì)圖的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，相關(guān)業(yè)務(wù)請(qǐng)撥打電話：175-8598-2043，或添加微信：1454722008

文章目錄列表:

1、如何設(shè)計(jì)出優(yōu)秀的banner作品？
2、如何設(shè)計(jì)好Banner廣告圖
3、banner設(shè)計(jì)是什么格式的圖片?
4、優(yōu)雅banner圖設(shè)計(jì)有什么技巧?

一、如何設(shè)計(jì)出優(yōu)秀的banner作品？

一、版面設(shè)計(jì)

大體上 banner 版式可分為兩種：圖文左右排版、文字居中。由于人們習(xí)慣的閱讀順序是從左到右，左邊放什么意味著用戶會(huì)先看到什么。當(dāng)圖片信息清晰時(shí)圖片放左，先用特定配圖吸引用戶目光，再加以具體的文字闡述就更正常不過了。而如果把含義不清的配圖放在左邊，用戶得看到右邊的文字部分才能獲得 banner 想傳遞的內(nèi)容，這會(huì)導(dǎo)致用戶接收信息時(shí)間增加。文字居中就會(huì)顯得突出重點(diǎn)。

banner設(shè)計(jì)圖（筆記本banner設(shè)計(jì)圖）

二、文字設(shè)計(jì)

常用的字體有三種：襯線體、非襯線體、書法體。襯線體能給人古典，文藝的感覺，適合用于文藝氣息或與女子的相關(guān)設(shè)計(jì)。非襯線體筆畫簡(jiǎn)潔，筆畫較粗，體現(xiàn)現(xiàn)代，簡(jiǎn)約的特性，適合用于蒼勁有力，與男子相關(guān)的設(shè)計(jì)。書法體源自中國(guó)古代，能體現(xiàn)中國(guó)文化和揮灑墨水的豪氣，適用于文藝主題和金戈鐵馬般的豪邁主題。

三.顏色設(shè)定

在整個(gè)風(fēng)格中色彩設(shè)定出主色調(diào)、輔色調(diào)。主色調(diào)不難理解在整個(gè)畫面中色彩占用最多的顏色可以確定為主色調(diào)，作為輔色調(diào)也是在整個(gè)畫面所點(diǎn)綴對(duì)比的一個(gè)顏色，就好比一個(gè)電影劇中一定是有主角和配角。主角的戲份就多一些。配角只是作為整個(gè)劇中的點(diǎn)綴輔助而已。在設(shè)計(jì)色彩設(shè)定中也要根據(jù)行業(yè)屬性配比相。

比如，黃色：食品比較有食欲的顏色、兒童活潑。黑色：高端、科技、汽車、紅色：新年、婚慶、傳統(tǒng)喜慶色彩。白色：簡(jiǎn)約飾品化妝品等。在做整個(gè)主視覺畫面的時(shí)候第一時(shí)間與顏色關(guān)聯(lián)。

希望各位設(shè)計(jì)師能掌握以上技巧，成功的創(chuàng)造出優(yōu)秀的作品。大家在平時(shí)要多練習(xí)，多看一些設(shè)計(jì)大師的作品，取其精華，加上自己的創(chuàng)意，大家加油。

二、如何設(shè)計(jì)好Banner廣告圖

Banner廣告無處不在。從網(wǎng)站首頁頁頭的內(nèi)容推薦到側(cè)邊欄，從文章內(nèi)到圖庫列表中，你會(huì)在幾乎所有內(nèi)容存在的地方找到他們的影子。通常情況下，它們看起來漂亮，略顯浮夸，還會(huì)蠶食你的網(wǎng)絡(luò)瀏覽體驗(yàn)，盡管我們?cè)谙氡M一切辦法降低它們給用戶的負(fù)面影響，但是壞名聲總是不可避免地同它們綁定到了一起。

實(shí)際上，Banner廣告對(duì)于用戶的影響是巨大的，合理的運(yùn)用，肯定是事半功倍的。那么到底要如何打造不讓人生厭、轉(zhuǎn)化率可觀的優(yōu)秀的的Banner廣告呢？

空泛的理論或許不夠接地氣，不妨從下面50個(gè)案例中，來學(xué)習(xí)Banner 廣告的設(shè)計(jì)技巧。

1、風(fēng)格化的圖文排版

這是Dear Miss Modern 所制作的一組Banner廣告，每張圖片在文本和圖片素材上都保持了氣質(zhì)和風(fēng)格上的一致性。字體的形式感和圖片素材中圖像和圖形的搭配讓整個(gè)廣告Banner 給人的感覺更加強(qiáng)烈。如果圖片并非是這種強(qiáng)風(fēng)格化的，而是更加微妙的話，應(yīng)當(dāng)采用更加經(jīng)典、耐看的字體來進(jìn)行搭配，道理是一樣的。

2、營(yíng)造層次

Visa 的節(jié)日廣告Banner就充分運(yùn)用了層次結(jié)構(gòu)的優(yōu)勢(shì)。照片的挑選就是有景深有層次的美食，讓人第一時(shí)刻會(huì)被它吸引，而文字排版則覆蓋在虛化的遠(yuǎn)景上，確保了可讀性，也增加了一個(gè)層次，傳遞出信息，確保不會(huì)混亂。按鈕的位置正好置于美食之上，文字之下，恰到好處地吸引人來點(diǎn)擊。

3、使用相關(guān)圖標(biāo)

這個(gè)來自Google的廣告Banner 通過手繪的圖標(biāo)給人帶來一種個(gè)人化的體驗(yàn)。

圖中每一個(gè)手繪的圖標(biāo)都非常易于識(shí)別，雖不復(fù)雜，但是給人營(yíng)造出一種仿若在世界中穿行的感覺。這種難以描述但是令人觸動(dòng)的感覺讓這個(gè)廣告不再只是一個(gè)廣告。

4、增加出人意料的元素

一個(gè)招聘廣告應(yīng)該怎么做？谷歌的這個(gè)招聘廣告也算的上是出人意表了，沒有高大上的說明和漂亮的妹子，而是用形同小區(qū)布告欄的手寫小廣告一樣的涂鴉手寫廣告。這種廣告不復(fù)雜，但是卻出人意料，這種熟悉的感覺也足夠令人觸動(dòng)。

5、加入插畫

這個(gè)案例同樣是谷歌的廣告圖，插畫的加入讓整個(gè)廣告圖充滿了童真和趣味，加上扁平化的元素，整體看起來也比較統(tǒng)一。這種插畫實(shí)現(xiàn)起來不難，看起來可能有點(diǎn)粗糙，但是確實(shí)很友好。插畫和攝影圖片不同，它能賦予設(shè)計(jì)以后者無法企及的氣質(zhì)，當(dāng)然，你得用好才行。

6、布局適配

FatCow 的這個(gè)廣告圖是由 Envato Studio 所設(shè)計(jì)的，為了適配不同的廣告位，整個(gè)廣告制作了多個(gè)不同尺寸的版本。將最常用的廣告圖設(shè)計(jì)出來之后，將其中的元素進(jìn)行二次編輯，制作成能夠適配其他廣告位的尺寸，其中某些元素需要調(diào)整，移除或者新增，這樣就可以實(shí)現(xiàn)了。

7、使用絢麗的色彩

這個(gè)Google Music 的廣告采用了活力十足的粉色，搭配的是同樣高飽和度的藍(lán)色，兩者形成鮮明的對(duì)比，也給人留下深刻的影響。和普通單色調(diào)為主的Banner相比，這種色彩絢麗的多色搭配更加抓人眼球，不過使用的時(shí)候需要多加注意，確?？勺x性和協(xié)調(diào)性。

8、保持簡(jiǎn)約

如果說有可口可樂有什么做的非常突出，那么保持簡(jiǎn)約的設(shè)計(jì)絕對(duì)是諸多優(yōu)點(diǎn)之中最值得學(xué)習(xí)的一個(gè)。這個(gè)可口可樂的廣告Banner 設(shè)計(jì)很好的延續(xù)了這一傳統(tǒng)：產(chǎn)品圖 LOGO 宣傳語標(biāo)志性配色。雖然內(nèi)容不多，但是效果很贊。

一個(gè)塞滿全部信息的Banner廣告圖對(duì)你而言不會(huì)有啥好處，因?yàn)橛脩魤焊粫?huì)去看。將最重要的信息呈現(xiàn)出來，這就夠了。

9、關(guān)注潮流

關(guān)注流行文化和正在風(fēng)靡的趨勢(shì)，對(duì)你設(shè)計(jì)banner廣告而言，非常有用。Campbell 就是這樣，它很好的利用了星球大戰(zhàn)電影這個(gè)IP，推出相關(guān)主體的產(chǎn)品，吸引星球大戰(zhàn)的粉絲前來購買產(chǎn)品。合理的借助正在流行的趨勢(shì)和話題來宣傳對(duì)應(yīng)的產(chǎn)品，絕對(duì)事半功倍。

10、使用紋理

Campbell 的這個(gè)廣告是運(yùn)用紋理提升質(zhì)感的典范。筆刷式參差的邊緣讓整個(gè)廣告的視覺效果更加微妙，廣告圖中其他的元素談不上有多突出，但是紋理的加入如同點(diǎn)睛之筆，使得整體的效果都提升上去了。

11、借助利基

利基是指針對(duì)企業(yè)的優(yōu)勢(shì)細(xì)分出來的市場(chǎng)。廣告通常需要針對(duì)目標(biāo)人群來投放，這樣才能達(dá)到最好的效果。

Target 的嬰幼兒系列產(chǎn)品的廣告主要是針對(duì)母親們投放的，那么還有什么比一個(gè)粉色的、可愛的場(chǎng)景更容易吸引到她們呢？

12、用圖展示，而非語言

Zarbee 的維生素廣告banner 在圖片的使用技巧上就相當(dāng)突出，水果來置換維生素，強(qiáng)化概念，而非用語言來描述，巧妙而直觀。

13、清晰的聚焦點(diǎn)

當(dāng)廣告有明確清晰的聚焦點(diǎn)之后，品牌和用戶之間的溝通就更加直接了。這個(gè)Banner 廣告圖也是為Target 設(shè)計(jì)的，品牌LOGO從位置到顏色都足夠顯眼，加上美女的姿勢(shì)在結(jié)構(gòu)上的引導(dǎo)，Target 的品牌LOGO無疑是整個(gè)廣告圖的焦點(diǎn)。

14、使用意象做引導(dǎo)

麥當(dāng)勞的這個(gè)廣告就是很典型的使用意象替代文字來傳遞信息，咖啡這一單詞被相應(yīng)的圖片所替代，傳遞信息的同時(shí)，還讓整個(gè)廣告圖不再單調(diào)，變成圖文混排。單純的文字和圖片都能夠傳遞出信息，但是混合使用則顯得更加有趣，走心。

15、讓產(chǎn)品發(fā)聲

在這個(gè)廣告圖當(dāng)中，麥當(dāng)勞的McFlurry 無疑是核心，不論是意義上的，還是視覺上的?；疑谋尘白屔术r艷的MacFlurry 主體顯得足夠醒目。讓產(chǎn)品本身在廣告中突出展現(xiàn)，可以讓整個(gè)Banner 表現(xiàn)力和針對(duì)性都更強(qiáng)。

16、創(chuàng)造角度

奧迪的這個(gè)廣告圖通過分割空間來呈現(xiàn)不同的信息，但是最引人矚目的是小幅扭轉(zhuǎn)的角度給人帶來的獨(dú)特視覺體驗(yàn)。這種調(diào)整讓特定的信息更加矚目，配合圖片中車體本身的角度，使得整個(gè)廣告圖更加富有活力。

17、使用遮蓋

使用特定色彩的半透明層來遮蓋背景圖，可以讓前景的文字內(nèi)容信息脫穎而出。這種設(shè)計(jì)手法現(xiàn)在并不鮮見，它讓背景信息從遮蓋中透出，同時(shí)讓文本內(nèi)容可讀性更強(qiáng)，整體層次感增強(qiáng)。

18、設(shè)置場(chǎng)景

Tiffany & Co 珠寶的廣告圖的設(shè)計(jì)，稱得上是有趣好玩，旋轉(zhuǎn)的雞尾酒杯和漂亮的珠寶組合暗示出它們經(jīng)常同時(shí)出現(xiàn)在同一場(chǎng)景，營(yíng)造出高雅、精致的感覺。通過相關(guān)的物品組合從而暗示用戶，讓他們自行腦補(bǔ)出場(chǎng)景。

19、創(chuàng)意字體

好的排版能夠吸引用戶的注意力，而Nike 的這個(gè)廣告尤其突出，它在字體上的設(shè)計(jì)富有創(chuàng)意，這些被肢解的字體同樣具備強(qiáng)大的識(shí)別度，但是這樣的設(shè)計(jì)讓它們看起來更加輕盈，也更富有科技感。這種視覺上的強(qiáng)化，讓廣告和產(chǎn)品更加吸引人了。

20 、使用風(fēng)格化的插畫

插畫可以簡(jiǎn)約，同樣也可以細(xì)節(jié)滿滿。風(fēng)格化的插畫可以通過細(xì)節(jié)和風(fēng)格來增加信息的厚度，講述故事，傳遞感受。這種插畫力量感十足，充滿能量，和Nike的品牌氣質(zhì)相當(dāng)符合。

21、使用多種元素

雖然有風(fēng)險(xiǎn)，但是合理的將多種不同的元素搭配在一個(gè)廣告圖中，可以產(chǎn)生不錯(cuò)的形式感，就像這個(gè)ebay 的廣告圖這樣。漂亮的產(chǎn)品圖，標(biāo)準(zhǔn)字體，手寫字體和插畫元素，協(xié)調(diào)地組合成一個(gè)廣告圖。當(dāng)然，每個(gè)元素的存在都是有理由的，各司其職，并非隨機(jī)搭配，請(qǐng)務(wù)必記住這一點(diǎn)。

22、成為流行風(fēng)向標(biāo)

將潮流和趨勢(shì)融入到Banner的設(shè)計(jì)當(dāng)中來，讓它成為廣告和用戶之間的紐帶。這個(gè)來自ebay 的廣告就是這么做的。將“Hotline Bling” 替換成“Haute Line Bling”之后更好地解讀了時(shí)下流行的這種文化，從而吸引更多關(guān)注這一時(shí)尚的用戶。

23、自由舒展

并不是每一個(gè)廣告Banner 都必須借助柵格，讓每個(gè)元素都精準(zhǔn)地對(duì)齊排列，自由舒展的設(shè)計(jì)同樣有效。Yoplait 的廣告就是這樣設(shè)計(jì)的，這樣顯得更加有趣、富有童真。當(dāng)然，這樣的設(shè)計(jì)是否合適要看它的產(chǎn)品的氣質(zhì)和特色。

24、創(chuàng)建聯(lián)系

在設(shè)計(jì)的過程中，讓你的廣告圖中的圖片和文字之間保持足夠的關(guān)聯(lián)是非常重要的。Talbots 的廣告圖中圖片和文字的氣質(zhì)就非常接近。

25、制造對(duì)比

對(duì)比是吸引用戶注意力的有效手段，而ESPN的這個(gè)廣告Banner 的設(shè)計(jì)就是深諳這一技巧。深紅色的背景下，白色的文字就顯得相當(dāng)突出了。字體挑選的也是銳利而輕盈的類型，這樣一來，信息的傳遞有效度就更高了。

26、對(duì)稱設(shè)計(jì)

對(duì)稱式的設(shè)計(jì)可以很好地平衡廣告中的元素，設(shè)計(jì)師們可能經(jīng)歷了深入的思考才有此設(shè)計(jì)，但是輸出卻是非常迅速的。這則來自蘋果的廣告也不復(fù)雜，黑白的音樂家照片基本上圍繞著Apple Music呈軸對(duì)稱，同時(shí)保持了一定的錯(cuò)落美。這種簡(jiǎn)約的設(shè)計(jì)簡(jiǎn)單但是主次分明，走心。

27、目標(biāo)用戶的生活指南

就像Chegg這個(gè)廣告一樣，如果你想吸引特定的用戶群體，不妨站在他們的立場(chǎng)，在廣告中注入針對(duì)他們的生活方式指南。站在特定用戶的立場(chǎng)上來表述、展現(xiàn)產(chǎn)品，能夠更容易獲得共鳴，從而得到更多的點(diǎn)擊。

28、使用動(dòng)效

在靜態(tài)的頁面中，最容易吸引人注意力的無疑是動(dòng)態(tài)的元素。如果使用動(dòng)效來呈現(xiàn)你要表現(xiàn)的廣告內(nèi)容，可以讓你的內(nèi)容更快被用戶獲取到。當(dāng)然，前提是設(shè)計(jì)要足夠簡(jiǎn)潔明了，這樣可以避免內(nèi)容瑣碎，更容易被用戶Get到。

29、鋒銳而鮮明

吉列剃須刀的廣告在視覺上稱得上是鋒銳而鮮明的典范，銳利的角度，深色背景上鮮明的剃須刀圖片，棱角分明的字體和強(qiáng)對(duì)比的配色方案，這一切都讓這個(gè)廣告圖在視覺上足夠清晰醒目，令人欲罷不能。

30、制造視覺深度

Honda 的這個(gè)廣告圖設(shè)計(jì)并不復(fù)雜，它的特色在于背景上黃色的線條筆觸。原本仿佛懸浮于空中的汽車在線條的襯托下仿佛落在地面之上。并不需要太過復(fù)雜的設(shè)計(jì)，就可以為廣告圖制造視覺深度，讓人留下印象。

31、使用獨(dú)特的字體

在廣告Banner圖當(dāng)中使用個(gè)性化十足的字體也同樣可以有效地吸引用戶的注意力。百事的這個(gè)廣告所用的字體富有個(gè)性的同時(shí)，還清晰可讀，給人玩鬧有趣的感覺，又不影響信息的傳達(dá)。

32、使用多樣漂亮的排版

對(duì)于漂亮的文字排版，絕大多數(shù)的用戶還是很吃這一套的。這個(gè)California Pizza Kitchen 的廣告就是是McGrath Creative 為他們精心設(shè)計(jì)的，不止排版設(shè)計(jì)頗為精致，而且富有創(chuàng)意地同Pizza 本身結(jié)合起來。

33、使用簡(jiǎn)單的圖片

簡(jiǎn)約直觀的圖片在網(wǎng)站上非常實(shí)用，它們通常會(huì)更為高效地展現(xiàn)內(nèi)容，讓廣告Banner的信息傳遞的跟加直觀。目前設(shè)計(jì)師們通常會(huì)使用扁平風(fēng)的簡(jiǎn)約插畫來襯托主體、增加信息量，就想Coda 的這個(gè)廣告圖。

34、使用紋理增加視覺深度

阿迪達(dá)斯的廣告圖在視覺上非常有意思，背景的紋理并不繁復(fù)，但是規(guī)律而富有科技感的線條不僅增加了視覺深度，而且營(yíng)造出和品牌氣質(zhì)貼合的速度感。

35、使用品牌色

如果廣告banner中沒有使用PayPal 標(biāo)志性的藍(lán)色，僅是圖中的圖片并不會(huì)讓你留下深刻的印象，但是恰恰是品牌色的使用，讓圖片和品牌綁定到了一起，互相促進(jìn)，令你記住。

36、不要只想著促銷宣傳

廣告Banner圖是用來促銷的，這沒問題，但是有的時(shí)候并不需要做的那么明顯。這個(gè)來自Free People 的廣告鼓勵(lì)用戶不要只是買買買，而是多看多逛多對(duì)比，雖然這樣同樣可以促進(jìn)銷售，但是看起來更像是站在用戶角度來提建議。

37、使用大膽的色彩

I，Anna 的廣告圖配色稱得上是大膽而飽滿，紅色充滿活力而醒目，而黃色的加入，則讓整個(gè)配色更加協(xié)調(diào)，更容易吸引用戶的注意力。

38、來個(gè)簡(jiǎn)單的插圖

有的時(shí)候，精致的插畫并不一定符合你的品牌或者想要表達(dá)的東西，星巴克的這個(gè)廣告就是這種情況下誕生的，細(xì)膩精致的圖并不符合他們的需求，反而是扁平而略顯拙稚的插圖來的更加簡(jiǎn)單到位。它呈現(xiàn)出新款飲品的成份構(gòu)成，這個(gè)廣告圖讓你仿佛有身在星巴克看著菜單的感覺。

39、引入動(dòng)效

這個(gè)來自星巴克的廣告圖，在小小的一塊區(qū)域當(dāng)中展現(xiàn)了相當(dāng)引人注意動(dòng)態(tài)的元素。波紋從中央出發(fā)，向外發(fā)散，當(dāng)用戶看到這個(gè)廣告圖的時(shí)候，會(huì)不由自主地被它吸引到。

40、完全動(dòng)起來

如果你對(duì)于動(dòng)效的運(yùn)用足夠熟練，不妨讓整個(gè)廣告Banner 中的元素都運(yùn)動(dòng)起來，這樣更容易脫穎而出。設(shè)計(jì)師將應(yīng)用在平板當(dāng)中的使用流程借助動(dòng)效完全展現(xiàn)出來，短短幾秒讓你獲取到靜態(tài)Banner圖所無法企及的信息量，體驗(yàn)優(yōu)秀。

41、使用幾何紋理

Corona 的這個(gè)廣告圖很好地將之前所流行的Low-Poly元素運(yùn)用到橙子這個(gè)意象當(dāng)中，這種幾何紋理賦予橙子以一種冰爽剔透的感覺，讓你不由得對(duì)Corona的啤酒產(chǎn)生興趣。

42、用有趣的圖形分割空間

Brightgreen 的這個(gè)個(gè)廣告圖使用菱形割裂為兩個(gè)不同的空間，這樣使得廣告圖形成了自然的兩個(gè)層次，留白的部分承載文字信息，而綠色部分則承載著圖片，讓整個(gè)圖片主次分明，又充滿質(zhì)感。

43、加入陰影

長(zhǎng)陰影是之前流行過很長(zhǎng)一段時(shí)間的設(shè)計(jì)趨勢(shì)，而Webduckdesign 所創(chuàng)造的這個(gè)廣告則是相當(dāng)不錯(cuò)的一個(gè)使用案例。如果沒有陰影，那么整個(gè)圖片會(huì)顯得相當(dāng)單調(diào)，長(zhǎng)陰影的加入讓它看起來不在那么扁平，擁有了層次。

44、將圖案作為紋理

和微妙細(xì)膩的圖案不同，將特定的圖案作為紋理疊加在背景上，可以營(yíng)造出特定的氛圍。Anne Sophie Hostert 所設(shè)計(jì)的這個(gè)廣告圖利用雪糕和菠蘿的圖案紋理給人營(yíng)造出夏天的感覺。

45、使用色塊分割

如果你不想將手頭的圖片僅僅只是用到廣告圖中作為背景，那么不妨將它分割成不同的部分，同單色色塊結(jié)合到一起使用，整個(gè)廣告圖的形式感顯得更強(qiáng)了。

46、使用線條裝飾

廣告圖絕大多數(shù)時(shí)候都是圖片和文字組成的，但是適當(dāng)?shù)募尤胍恍┭b飾會(huì)讓廣告圖看起來更加飽滿。相比于各種高光，線條的裝飾性也不弱，而且更加自由，效果也頗為不錯(cuò)。

47、講述故事

廣告的終極目標(biāo)是賣出產(chǎn)品，而最有效的方式還是講述真實(shí)用戶的使用體驗(yàn)。這個(gè)廣告是為亞馬遜的飲品電子書APP Audible所設(shè)計(jì)的，圖片中的場(chǎng)景旨在宣傳他們的產(chǎn)品在許多場(chǎng)景下都能無干擾的使用。

48、幽默一點(diǎn)

幽默的展示通常會(huì)比強(qiáng)勢(shì)的推銷更有效果，他們更愿意看到引人發(fā)笑的內(nèi)容。

49、使用簡(jiǎn)單的字體搭配

不用進(jìn)行繁復(fù)的排版設(shè)計(jì)，將幾種風(fēng)格一致、簡(jiǎn)單易于識(shí)別的字體搭配到一起，就像必勝客的這個(gè)廣告一下，同樣可以達(dá)到增加信息量、令人愉悅的效果。

50、使用簡(jiǎn)單的圖形來強(qiáng)調(diào)

三、banner設(shè)計(jì)是什么格式的圖片?

目前市場(chǎng)上制作GIF動(dòng)畫的軟件相當(dāng)多，友立公司的Ulead Gif

Animator以其簡(jiǎn)單易用，功能強(qiáng)大而受到良好的評(píng)價(jià)，是一款值得推薦的Gif動(dòng)畫制作軟件。下面我們用它來制作一個(gè)468X60像素大小的廣告Banner。

1.在PhotoShop中制作四張468X60像素的圖片，并將其導(dǎo)出為Gif格式。

2.運(yùn)行Ulead Gif Animator，此時(shí)會(huì)出現(xiàn)一個(gè)“開始向?qū)А泵姘?，注意到“開始向?qū)А泵姘迳系腁nimation

Wizard項(xiàng)，通過它可以決定置入哪些畫面，每個(gè)畫面播放多少時(shí)間等控制信息。

3.單擊Animation

Wizard項(xiàng)前的茶杯圖標(biāo)，在彈出的選擇文件面板中單擊“增加圖像”按鈕，在隨后彈出的打開菜單中，選擇要置入的圖片，我們選擇前面在PhotoShop中制作的四幅圖片，選好之后單擊下一步按鈕。

4.在圖像類型菜單中選擇以文字為導(dǎo)向的圖像Text-oriented，單擊下一步按鈕。注意：若是以文字為導(dǎo)向的圖像，文字圖像的顏色比較少，可以不進(jìn)行遞色處理，這樣可減小文件的大小，但如果是較復(fù)雜的相片圖像，則需進(jìn)行遞色處理以求得較好的影像品質(zhì)。

5.在幀延續(xù)時(shí)間面板上設(shè)置每幀延續(xù)的時(shí)間和幀速率。注意：GIF89a的動(dòng)畫圖像結(jié)合了多張的個(gè)別圖像，它們都是獨(dú)立的Frame(幀或影格)文件，每一影格均須設(shè)置畫面的播放時(shí)間及重播次數(shù)。

6.在完成菜單中點(diǎn)擊Finish按鈕，完成動(dòng)畫的基本制作。單擊編輯區(qū)中的Preview按鈕，預(yù)覽動(dòng)畫的效果。

7.打開File菜單，選擇Optimization Wizard(或按下F11鍵)，啟動(dòng)最佳化向?qū)А?/p>

8.在彈出菜單中選擇Yes，使用預(yù)設(shè)的項(xiàng)目以控制調(diào)色板的顏色數(shù)目，然后單擊下一步按鈕。

9.在彈出的菜單中勾選No，然后在圖片顏色數(shù)項(xiàng)中設(shè)置其值為32色。注意：視圖像情況以決定顏色數(shù)目方框中的數(shù)值，若以文字為導(dǎo)向的圖像，最好勾選“No”項(xiàng)目。

10.在彈出菜單中均選擇Yes，移除多余的像素，移除注解區(qū)塊，移除層標(biāo)志，這樣可以減小文件尺寸。

11.在最后彈出的菜單中列出了剛才的設(shè)定，單擊Finish按鈕完成優(yōu)化。

12.隨后彈出Gif Optimization菜單，顯示了優(yōu)化前后的文件尺寸大小對(duì)比，單擊Save as按鈕，如圖6，將其保存。

注意：一般情況下，Banner的大小不要超過30KB，否則會(huì)增加網(wǎng)絡(luò)負(fù)擔(dān)，在本例中，這個(gè)Banner優(yōu)化之后只有18.4 KB。

四、優(yōu)雅banner圖設(shè)計(jì)有什么技巧?

一、雙色冰淇淋漸變

首圖當(dāng)作全屏出血大圖處理時(shí)，你可以將圖片調(diào)色成為雙色漸變，有點(diǎn)像我們吃的雙色冰淇淋球，選一組你認(rèn)為能激發(fā)心理氛圍的配色，最好是對(duì)比色，帶來強(qiáng)烈的視覺落差。由于要作為背景而存在，整體的色彩明度要區(qū)別于文字的顏色。這里推薦的這一方式只需要利用PS中的“漸變映射”工具，就能輕松獲得。

二、線條引流

這也不失為一種設(shè)計(jì)方式。讓線條來引導(dǎo)實(shí)現(xiàn)去穿越你想要焦點(diǎn)停留的地方。

三、動(dòng)態(tài)情景

對(duì)于首圖的選擇，你可以焦距到動(dòng)態(tài)場(chǎng)景。這類動(dòng)態(tài)場(chǎng)景由于本身模特的動(dòng)態(tài)造型，會(huì)調(diào)動(dòng)觀眾的運(yùn)動(dòng)神經(jīng)，激發(fā)頁面的活力。大家可以想象，如果將首圖的主角換成一個(gè)靜物，效果將是不同的。這里將模特的方向加以改變后重新降低透明度的做法，帶來一定的虛實(shí)結(jié)合的感受。

四、謹(jǐn)慎配色

我們希望大家在運(yùn)用首圖時(shí)，盡量不要去觸屏普通的風(fēng)景圖。自然風(fēng)光雖然好，但大片風(fēng)景會(huì)表現(xiàn)出一團(tuán)飽和的顏色堆疊，其實(shí)運(yùn)用在網(wǎng)頁設(shè)計(jì)中略顯得沒有重點(diǎn)。因?yàn)槟阋獮樽罱K配圖運(yùn)用以后所出現(xiàn)的顏色負(fù)責(zé)，色彩盡量控制在三種顏色之內(nèi)，這條道理相信設(shè)計(jì)師們都會(huì)贊同，因此，這里的配圖的色彩最好也能有所節(jié)制。

五、虛擬現(xiàn)實(shí)

當(dāng)然，我們這里談的不是虛擬現(xiàn)實(shí)，而是在首圖設(shè)計(jì)時(shí)，試著將靜物表現(xiàn)得更為“現(xiàn)實(shí)”，好像它們就在你的屏幕上，隨手可以取到。但這個(gè)表達(dá)法，最緊要的是要為虛擬尋找出口，也就是說，不能完全寫實(shí)，要讓用戶看出虛擬的破綻，從而讓形象更為立體。這類表達(dá)技巧在首圖中有手機(jī)，利用APP產(chǎn)品展示等最為常見。

六、文字本身的美

每張首圖也許我們都希望能配上文字，其實(shí)文字本身也能成為一種風(fēng)景，有時(shí)候適當(dāng)運(yùn)用一些具有圖像風(fēng)格的文字，更能傳遞文字本身的能量。

如果能將文字看作圖像，書法文字是最合適不過了。書法本身的隨意瀟灑，和普通的印刷字體相比有著不可比擬的個(gè)性感。這里，運(yùn)用了書法作為主角，本身書法作為傳統(tǒng)國(guó)粹，在東方傳統(tǒng)的行業(yè)里運(yùn)用非常應(yīng)景。當(dāng)然，這里的書法本身還可以寫得更好。

七、靜止的力量

對(duì)稱能帶來一種莊重靜止的力量，因此，在首圖設(shè)計(jì)中，你不妨采用對(duì)稱的布局方式來設(shè)計(jì)首圖。但由于對(duì)稱本身略顯得靜止呆板，因此在設(shè)計(jì)上更需要多一些匠心，增加一些比較能突破規(guī)則小細(xì)節(jié)。

對(duì)稱的布局最好采用倒三角的構(gòu)圖，這樣視線會(huì)更靈活，從上往下會(huì)顯得更流暢，否則就會(huì)有一種滯澀不前的感受。

八、左圖右文

首圖的設(shè)計(jì)除了全屏展示，還有一種方式是可以放左邊圖片右邊文字的方式，這樣的網(wǎng)頁設(shè)計(jì)技巧帶來的好處就是可以分割圖文，特別在圖片信息也同樣重要的時(shí)候，如果把圖文混合，雙方都不夠凸顯，不如左右各凸出主角，跟隨先左后右的視線也能傳遞本身的視覺效果。

以上就是小編對(duì)于banner設(shè)計(jì)圖問題和相關(guān)問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。