第一篇：Banner廣告設(shè)計(jì)

Banner廣告設(shè)計(jì)

教學(xué)設(shè)計(jì)：

讓自己創(chuàng)作的Flash能動(dòng)起來(lái)，是Flash教學(xué)中學(xué)生感覺(jué)十分神奇的部分，首先讓學(xué)生通過(guò)觀察、比較Internet上優(yōu)秀的Banner廣告，思考、討論、總結(jié)出Banner中有哪些主要元素（鮮艷的色塊、運(yùn)動(dòng)的文字、圖片等），接著教師講解最基本的運(yùn)動(dòng)漸變動(dòng)畫(huà)的制作方法，并引導(dǎo)學(xué)生通過(guò)對(duì)運(yùn)動(dòng)漸變的屬性面板的探索，試著制作出透明度、顏色、旋轉(zhuǎn)、速度等變化效果，最后結(jié)合本班級(jí)的特色為班級(jí)主頁(yè)設(shè)計(jì)制作一個(gè)Banner廣告，即體現(xiàn)了軟件的實(shí)用性和趣味性，也提高了學(xué)生的學(xué)習(xí)積極性和創(chuàng)新能力的培養(yǎng)。

教學(xué)目的：

知識(shí)與能力：1．通過(guò)教學(xué)使學(xué)生初步掌握Flash動(dòng)畫(huà)中運(yùn)動(dòng)漸變的制作方法；

2．進(jìn)一步提高學(xué)生制作中色彩搭配、構(gòu)圖等技巧運(yùn)用能力。結(jié)

合符號(hào)、圖層、時(shí)間軸等已掌握的技能為班級(jí)主頁(yè)（個(gè)人主頁(yè)）

設(shè)計(jì)制作Banner。

過(guò)程與方法：1．通過(guò)觀察與思考使學(xué)生學(xué)習(xí)并歸納Internet上優(yōu)秀的Banne

r設(shè)計(jì)的主要元素，引導(dǎo)學(xué)生在對(duì)比中探討不同Banner合理運(yùn)

用的方法；

2．通過(guò)布置主題任務(wù)，給學(xué)生提供設(shè)計(jì)創(chuàng)新的空間，從而使學(xué)

生能夠獨(dú)立制作并完成任務(wù)，培養(yǎng)學(xué)生的實(shí)踐、創(chuàng)新能力。

3．通過(guò)交流與分享，以及教師的及時(shí)鼓勵(lì)使學(xué)生體會(huì)成功的喜

悅和合作的價(jià)值。

情感、態(tài)度與價(jià)值觀：鼓勵(lì)學(xué)生在學(xué)習(xí)的過(guò)程中養(yǎng)成多觀察、多思考、多

模仿、多嘗試、多創(chuàng)新的學(xué)習(xí)習(xí)慣和方法。

教學(xué)重點(diǎn)：

掌握Flash動(dòng)畫(huà)中運(yùn)動(dòng)漸變的制作要領(lǐng)，學(xué)會(huì)設(shè)計(jì)制作Banner的基本方法。教學(xué)難點(diǎn)：

提高學(xué)生制作中色彩搭配、構(gòu)圖等技巧運(yùn)用能力。能創(chuàng)作出有個(gè)人特色的Banner。

教學(xué)過(guò)程：

一、什么是Banner

Banner，一般翻譯為旗幟廣告、橫幅廣告等。是一個(gè)表現(xiàn)商家廣告內(nèi)容的圖片，是互聯(lián)網(wǎng)廣告中最基本的廣告形式。

一、Banner廣告的作用：

1．放置在廣告商的網(wǎng)站頁(yè)面上，展現(xiàn)商家的產(chǎn)品，起到自我介紹的作用。如： 東方航空，MSN

2．放置在其他網(wǎng)站頁(yè)面上，向網(wǎng)頁(yè)瀏覽者推介自己的產(chǎn)品或一些活動(dòng)，引起網(wǎng)頁(yè)瀏覽者的興趣，也是這些網(wǎng)站用來(lái)盈利的途徑。

如：搜狐

3．發(fā)布一些重要信息。

富有獨(dú)特創(chuàng)意的橫幅廣告形式是在互聯(lián)網(wǎng)上建立并推廣客戶品牌形象的有效途徑。

二、Banner廣告的特點(diǎn)：

推廣信息簡(jiǎn)單明了 創(chuàng)造出一種點(diǎn)擊的緊迫感 明確表達(dá)對(duì)用戶的利益 具有趣味性

三、Banner廣告的形式：

橫幅廣告，尺寸一般是480*60像素，或233*30像素，也可以根據(jù)內(nèi)容和網(wǎng)頁(yè)上可用空間的多少，增加或減少尺寸。

一般是使用GIF格式的圖像文件，可以使用靜態(tài)圖形，也可用多幀圖像拼接為動(dòng)畫(huà)圖像。除普通GIF格式外，目前流行使用動(dòng)感更強(qiáng)，交互性更高的Flash形式。這樣更具有吸引力。

四、Flash Banner的組成元素和各元素的呈現(xiàn)形式

學(xué)生活動(dòng)1：觀察教師準(zhǔn)備的幾個(gè)網(wǎng)上下載的Flash Banner，討論組成的元素

及其呈現(xiàn)的形式。

逐幀動(dòng)畫(huà)、符號(hào)的使用、運(yùn)動(dòng)漸變動(dòng)畫(huà)（大小、位置、顏色、透明

度、旋轉(zhuǎn)、速度等的變化）、層和影片實(shí)例的運(yùn)用。

五、講解運(yùn)動(dòng)漸變動(dòng)畫(huà)的制作方法

教師：介紹制作運(yùn)動(dòng)漸變動(dòng)畫(huà)的一般方法。（強(qiáng)調(diào)只有對(duì)符號(hào)才能設(shè)置運(yùn)動(dòng)漸變）學(xué)生活動(dòng)2：教師簡(jiǎn)單提一下運(yùn)動(dòng)漸變的屬性面板的組成，由學(xué)生探索如何產(chǎn)生

透明度、顏色、旋轉(zhuǎn)、速度等變化效果。

六、以2人一小組創(chuàng)作

學(xué)生活動(dòng)3：為班級(jí)主頁(yè)（或個(gè)人主頁(yè)）設(shè)計(jì)并制作 FlashBanner

七、展示、交流、評(píng)價(jià)

學(xué)生活動(dòng)4：作品展示、交流

八、小結(jié) Banner 制作的注意點(diǎn)

1．文字：不要太多，盡量用粗壯的字體。

2．色彩：合理使用色彩的對(duì)比關(guān)系。

3．圖形：要簡(jiǎn)潔，不需太繁、雜。

Banner在設(shè)計(jì)上還應(yīng)該要做到制作美觀、方便點(diǎn)擊、與網(wǎng)頁(yè)協(xié)調(diào)和整體構(gòu)成合理。

表-1 注目程度高的配色：

順序１ ２ ３ ４ ５ ６ ７ ８ ９ 10

底色黑 黃 黑 紫 紫 藍(lán) 綠 白 黃 黃

圖形色 黃 黑 白 黃 白 白 白 黑 綠 藍(lán)

表-2 注目程度低的配色：

順序１ ２ ３ ４ ５ ６ ７ ８ ９ 10

底色黃 白 紅 紅 黑 紫 灰 紅 綠 黑

圖形色 白 黃 綠 藍(lán) 紫 黑 黑 紫 紅 藍(lán)

第二篇：經(jīng)典教程：Photoshop制作網(wǎng)頁(yè)banner廣告設(shè)計(jì)

導(dǎo)言：

在這篇Photoshop教程中，我將教給你如何制作一個(gè)專業(yè)的banner廣告。教程淺顯易懂，你一定可以做得到的。

下面教程開(kāi)始

我們這篇教程的效果如下。（圖01）

圖01

好了，讓我們開(kāi)始吧，在Photoshop中，新建一個(gè)文檔，尺寸是500×300px，白色背景。（圖02）

圖02

選擇圓角矩形工具，圓角半徑設(shè)為5px，在你的畫(huà)布中畫(huà)出一個(gè)圓角矩形，填充綠色#6d9e1e。（圖03）

圖03

雙擊圖層面板中的該圖層縮略圖，彈出圖層屬性面板，設(shè)置漸變疊加。參數(shù)如下圖。（圖04）

圖04

現(xiàn)在的效果應(yīng)該是如下圖的樣子。（圖05）

圖05 好了，這一步就完成了。然后我們開(kāi)始創(chuàng)建banner的“頭部”。按住Ctrl用鼠標(biāo)左鍵單擊圖層縮略圖，載入圖層選區(qū)；點(diǎn)擊矩形選區(qū)工具，消減掉下面一部分選區(qū)（按住Alt進(jìn)行拖拽即可）。剩余的部分填充白色，如下圖。（圖06）

圖06

點(diǎn)擊Ctrl＋D去掉選區(qū)。改變這個(gè)圖層的圖層渲染模式為疊加，透明度設(shè)置為20%。（圖07）

圖07

好了，進(jìn)入下一步吧。我希望在我們的頭部中，有一個(gè)小的圖形。在網(wǎng)上我找到了一個(gè)小的鐘表的圖標(biāo)，打開(kāi)圖片，把它拷貝到我們的文件中，按住Ctrl＋T把圖形變小一些。（圖08）

圖08 用銳化工具稍微讓圖形清晰一些。（圖09）

圖09

接下來(lái)，我們用文字工具寫(xiě)下了頭部的標(biāo)題。（圖10）

圖10

在這里，我用的字體是Myraid Pro，白色。但是實(shí)際上你可以選擇你喜歡的字體。打開(kāi)圖層屬性面板，設(shè)置投影，參數(shù)如下圖。（圖11）

圖11 效果如下。（圖12）

圖12

好了，頭部的部分我們就已經(jīng)完成了。我希望給我們的banner添加更多的設(shè)計(jì)元素。選擇用戶自定義形狀，選擇一個(gè)Photoshop里面自帶的一個(gè)形狀，如下圖。（圖13）

圖13

在我們的banner上面添加兩個(gè)白色的形狀。（圖14）

圖14 合并兩個(gè)形狀到一個(gè)圖層中。好了，我們把banner外面的形狀要?jiǎng)h除。如何做到這點(diǎn)呢？按住Ctrl左鍵點(diǎn)擊形狀的那個(gè)圖層縮略圖，載入選區(qū)。然后按Ctrl＋Shif＋I(xiàn)將選區(qū)反選，按一下Delete就可以刪除我們不需要的部分了。（圖15）

圖15

點(diǎn)擊Ctrl＋D取消選區(qū)。設(shè)置形狀圖層的渲染模式為柔光，透明度為20%。（圖16）

圖16

現(xiàn)在，我們需要一個(gè)干凈的頭部，我們要把頭部這一部分的圖形形狀刪除掉。利用矩形選區(qū)工具可以進(jìn)行這個(gè)操作。如下圖。（圖17）

圖17 添加更多的文字。（圖18）

圖18

好了，剩下最后一部分了。但是之前我想要在下面放一個(gè)按鈕。利用圓角矩形工具，圓角半徑為2px，拖拽一個(gè)顏色為綠色#69990d的圓角矩形，如下圖。（圖19）

圖19

好了，在按鈕上面添加一些文字。（圖20）

圖20

Ok，我們的教程就完成了。效果看上去很不錯(cuò)。（圖21）

圖21

第三篇：banner心得

1，banner廣告在網(wǎng)頁(yè)中的第一感覺(jué)：對(duì)于網(wǎng)站廣告條的目的就是吸引用戶注意，然后吸引用戶點(diǎn)擊。所以一個(gè)優(yōu)秀的廣告條首先要做到的就是必須能 夠吸引用戶瀏覽。而用戶瀏覽網(wǎng)頁(yè)的時(shí)間一般也就十幾秒中，因此廣告條必須在第一時(shí)間內(nèi)吸引到用戶的眼球。在設(shè)計(jì)廣告條時(shí)，我們必須要考慮用戶的瀏覽習(xí)慣，也就是只瞄一眼情況下，是否能引起用戶足夠的重視。所以第一感覺(jué)對(duì)于廣告條設(shè)計(jì)是最重要的一點(diǎn)。

2，廣告條文本內(nèi)容：對(duì)于廣告條的文本文字內(nèi)容來(lái)說(shuō)，必須保持文字簡(jiǎn)短，重點(diǎn)突出。能在第一時(shí)間將最重要的信息高速用戶才是設(shè)計(jì)目的。

3，banner廣告條中的圖片內(nèi)容統(tǒng)一性：如果你是一家銷售電子產(chǎn)品的網(wǎng)站，那么你的廣告條中就因該以電子產(chǎn)品為主，曾經(jīng)看到一些產(chǎn)品廣告條使用的圖片全部都是一些人物，而真正的產(chǎn)品缺只是以文字形式表達(dá)，這樣的廣告條設(shè)計(jì)師很失敗的。

4，在廣告條中放入你的網(wǎng)址與標(biāo)志：如果你的廣告目的是以品牌推廣為主，那么i標(biāo)志與網(wǎng)站地址將是廣告設(shè)計(jì)的重點(diǎn)，同樣即便不是以品牌為主的banner，也有必要加入一些標(biāo)志與網(wǎng)址信息，或是一些宣傳口號(hào)。5，banner設(shè)計(jì)中最好放上“點(diǎn)擊這里”等字樣：你可以在廣告條的某個(gè)角落，或動(dòng)態(tài)廣告條的最后一幀上加上“點(diǎn)擊”這類字樣，這是一種常用的設(shè)計(jì)經(jīng)驗(yàn)。6，廣告條的尺寸：這個(gè)無(wú)需多數(shù)，對(duì)于banner來(lái)說(shuō)大小一半不要超過(guò)50K，即便是一些FLASH廣告也盡量減少下載時(shí)間，因?yàn)槿绻愕某叽巛^ 大，當(dāng)用戶訪問(wèn)這個(gè)頁(yè)面時(shí)，可能網(wǎng)頁(yè)內(nèi)容全部顯示完了，你的廣告條還沒(méi)加載完成，而用戶可能就在此時(shí)離開(kāi)這個(gè)頁(yè)面，那樣看上去你的廣告被瀏覽了，其實(shí)沒(méi)有 任何效果

7，廣告條的長(zhǎng)度：這一點(diǎn)是針對(duì)GIF與FLASH廣告條而言，長(zhǎng)度最好控制在3秒以內(nèi)

8，廣告條的顏色：顏色是人們的第一視覺(jué)體驗(yàn)，曾經(jīng)看過(guò)很多網(wǎng)站廣告通過(guò)刺眼的黃色來(lái)吸引用戶眼球，這個(gè)我給的意見(jiàn)是，顏色需要醒目，但并能讓用戶 產(chǎn)生反感，因?yàn)樽罱K目的是希望用戶能點(diǎn)擊，所以色彩的應(yīng)用很有講究，要讓用戶眼前一亮，但不能產(chǎn)生反感。這里有個(gè)技巧，就是使用統(tǒng)一的大色塊配色，同是顏 色盡量選擇一些一般網(wǎng)站中很少用的色彩，比如深綠色，綠色，深紅色，黑色等。

9，盡量不要用FLASH來(lái)設(shè)計(jì)廣告條

10，用藍(lán)色來(lái)強(qiáng)調(diào)點(diǎn)擊：在廣告條中點(diǎn)擊的按鈕文字可以用帶有下劃線的藍(lán)色文本來(lái)顯示，因?yàn)橛脩魹g覽網(wǎng)頁(yè)時(shí)視覺(jué)是在整個(gè)網(wǎng)頁(yè)上掃視，此類藍(lán)色點(diǎn)擊文字是最能吸引用戶的方法之一

第四篇：制作banner廣告和電子書(shū)

1、制作banner廣告使用在線bannner廣告制作工具、banner maker pro或SWFText，創(chuàng)建banner廣告。圖片規(guī)格為468*60像素或392*72像素或234*60像素或120*240像素。（1）打開(kāi)軟件，設(shè)置大?。?）可以修顏色（3）可以插入圖片（4）插入圖片后可以對(duì)圖片作相應(yīng)的修改（5）可以的制作的圖片上插入文本文字。（6）保存文件

2、制作電子書(shū) 制作工具制作電子書(shū)，并在適當(dāng)?shù)牡胤讲迦肫髽I(yè)的logo，圖片，文字說(shuō)明等廣告標(biāo)語(yǔ)。自由選擇發(fā)布途徑。

1、添加文件單擊左方的黃色文件夾，在右方的黃色文件夾按鈕中選取一個(gè)目錄，這就是我們剛才準(zhǔn)備的文件夾了。選好后下方出現(xiàn)了該目錄中的所有可編譯文件，哪一個(gè)文件需要加密的話，點(diǎn)擊文件名前方的選擇框，在最下方有多種加密方法可供選擇。[所有加密]：加密所有的文件。[文本加密]：加密HTML，TXT文件。[無(wú)]：不加密任何文件。

2、編輯目錄文件選擇好了后，點(diǎn)擊左方“目錄”，右方出現(xiàn)三個(gè)豎狀的框，最左一個(gè)是硬盤(pán)上現(xiàn)存的文件目錄，中間的是將會(huì)在電子書(shū)中出現(xiàn)的目錄，請(qǐng)注意兩個(gè)是不同概念的，我們可以在電子書(shū)的目錄設(shè)定中任意改名，而絲毫不會(huì)影響硬盤(pán)文件的命名。也可以通過(guò)拖拽左邊的文件樹(shù)到右邊的目錄中。

3、制作閃屏我們也可以選取一幅圖片作為閃屏，讓讀者對(duì)電子書(shū)留下深刻的印象，可以讓讀者打開(kāi)電子書(shū)時(shí)能看到制作的一副關(guān)于圖書(shū)的圖片--閃屏，可以使用一副BMP格式的圖片作為該閃屏。

4、關(guān)于對(duì)話框“關(guān)于對(duì)話框”可以使用html語(yǔ)的網(wǎng)頁(yè)進(jìn)行顯示，但要注意的是不要將此網(wǎng)頁(yè)放在剛才需要做成電子書(shū)的網(wǎng)頁(yè)當(dāng)中，不然軟件會(huì)重復(fù)編譯此文件

5、工具欄(1)接下來(lái)設(shè)定工具欄1的數(shù)據(jù)，我們可以清楚地看到這里可以改變電子書(shū)面板上的按鈕數(shù)目?？山o每一個(gè)按鈕改成自己喜歡的名字，比如將“后退”改為“回去！”，還可以設(shè)置按鈕的標(biāo)題的是否可視以及工具欄的可視。點(diǎn)擊圖標(biāo)可以為它們指定一個(gè)新的bmp圖,但只限24*24象素。

6、工具欄（2）工具欄2是設(shè)定另一些高級(jí)特性的，比如電子書(shū)的logo文件，讓它鏈接到任意一個(gè)站點(diǎn)上，設(shè)為默認(rèn)后，以后所有制作的電子書(shū)都會(huì)出現(xiàn)這個(gè)logo了。我們還可以設(shè)定工具欄的背景，同樣的需要一些背景圖片才行選項(xiàng)

7、設(shè)置“選項(xiàng)”標(biāo)題：設(shè)置電子書(shū)的標(biāo)題，也就是書(shū)名。

主頁(yè)：工具欄上的主頁(yè)按鈕鏈接的頁(yè)面。

默認(rèn)：電子書(shū)啟動(dòng)時(shí)顯示的頁(yè)面。圖標(biāo)：電子書(shū)的圖標(biāo)。也就是EXE文件的圖標(biāo) 顯示：設(shè)置電子書(shū)的顯示大小

8、設(shè)置“界面”軟件內(nèi)置了15款不同風(fēng)格的skin讓我們替換到電子書(shū)上，從msn到apple都有，一定可以滿足你的需要安全選項(xiàng)

9、編譯

最后在界面上選擇一下輸入路徑，點(diǎn)擊編譯就電子書(shū)就做出來(lái)了

第五篇：淺談網(wǎng)站BANNER圖片設(shè)計(jì)

淺談網(wǎng)站BANNER圖片設(shè)計(jì)

BANNER圖片是網(wǎng)站的重要因素，大多數(shù)網(wǎng)站一開(kāi)打就能見(jiàn)到絢麗的BANNER圖片。很多網(wǎng)站建設(shè)公司都不會(huì)讓設(shè)計(jì)師花費(fèi)大量時(shí)間設(shè)計(jì)BANNER圖片，那么怎樣才能呢個(gè)在短時(shí)間內(nèi)設(shè)計(jì)出一個(gè)精彩的BANNER圖呢？下面，是圣品小編在日常工作中針對(duì)BANNER設(shè)計(jì)整理編輯出的一些方法，希望能對(duì)大家有所幫助。

1、點(diǎn)擊才是王道

一般我們做的banner都是為了宣傳、推廣某個(gè)產(chǎn)品或新功能等，它本身就是引導(dǎo)用戶點(diǎn)擊參與的入口，我們目的就是要吸引用戶點(diǎn)擊。所以我們可以用不同形式和手法來(lái)表現(xiàn)，但相同處，通情達(dá)意，突出主題，富有樂(lè)趣，那它們則能讓瀏覽者產(chǎn)生興趣。

2、主題明確。

在著手設(shè)計(jì)之前，設(shè)計(jì)師應(yīng)該先與需求方溝通，并從中獲取需求方想要表達(dá)的主題和需要重點(diǎn)突出的點(diǎn)。然后在針對(duì)性地對(duì)廣告對(duì)象進(jìn)行訴求，形象鮮明的展示所要表達(dá)的內(nèi)容。不要放一些沒(méi)用的東西，除非你想趕走你的用戶。

3、與整個(gè)頁(yè)面相協(xié)調(diào)。

當(dāng)我們確定表達(dá)的主題之后，要在banner實(shí)際放置的環(huán)境中展開(kāi)后續(xù)的設(shè)計(jì)工作。色彩搭配要明亮干凈，要與整個(gè)頁(yè)面相協(xié)調(diào)。不能為了使banner更加吸引用戶的眼球而大面積的使用一些濃重的顏色(特殊需求除外)。

4、順應(yīng)用戶的瀏覽習(xí)慣。

我們知道大多數(shù)的用戶在瀏覽網(wǎng)頁(yè)的時(shí)候都是從上到下，從左到右的瀏覽。為了使banner更容易被用戶瀏覽,我們應(yīng)該順應(yīng)用戶這樣的瀏覽習(xí)慣，糟糕的設(shè)計(jì)會(huì)讓用戶無(wú)所適從，焦點(diǎn)到處都是。

作者用紅色的幕布和小號(hào)烘托出熱鬧的氛圍，一面精致的銅鑼第一時(shí)間吸引了瀏覽者的眼球，讓人看了就想拿起旁邊的小錘去敲打的沖動(dòng)

我們換個(gè)方式來(lái)想，設(shè)計(jì)一個(gè)banner，如做一道菜，首先我們應(yīng)該先確定想做什么菜，然后在把這道菜所需要的主輔材料放到鍋這個(gè)環(huán)境里面炒，在這 個(gè)過(guò)程中我們會(huì)根據(jù)客人喜歡的口味加入調(diào)料，裝盤(pán)后我們?yōu)榱烁愫眠@道菜的賣(mài)相，在盤(pán)子里面放入一些裝飾，達(dá)到在第一時(shí)間內(nèi)從視覺(jué)上強(qiáng)奸人們的眼球，吸引他 們來(lái)品嘗。

本文主要從主題、實(shí)際運(yùn)用環(huán)境、用戶瀏覽習(xí)慣和做banner的目的這幾個(gè)方面表達(dá)了我的見(jiàn)解，當(dāng)然，除了上面所說(shuō)的方法，其實(shí)還有很多我們可以借鑒的形式與思路，這里就不一一列舉了，希望對(duì)大家有所幫助。