banner圖怎么設(shè)計

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

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

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

本文目錄:

• 1、怎么制作banner

• 2、盤點banner設(shè)計組成要素/類型/風(fēng)格/設(shè)計步驟大全

• 3、banner設(shè)計：高手教你如何設(shè)計banner?

• 4、網(wǎng)店Banner設(shè)計與制作方法是怎樣的？

一、怎么制作banner

步驟/方法

1 首先打開軟件，我們看到界面如下，左邊部分是選項部分，可以切換到各種設(shè)置。

2 我們選擇“尺寸&聲音”選項，進(jìn)行相關(guān)的設(shè)置。長寬根據(jù)自己的需求進(jìn)行設(shè)置，如果想插入背景音樂的話自己設(shè)置就可以了。

3 選擇“背景&設(shè)置”，我們設(shè)置一下背景為漸變色，如果需要插入圖片或者其他flash元素的自己設(shè)置就行了。

4 選擇“選擇&設(shè)置”，進(jìn)行flash背景效果的選擇，這里我選擇了一個飄動的蒲公英。

5 選擇“文字&圖像”選項，我們編輯banner上顯示的文字等元素。首先我選擇第一個網(wǎng)址，然后更改成百度經(jīng)驗的網(wǎng)址。

字體和文字的顏色可以點擊下面的“編輯字體風(fēng)格”進(jìn)行編輯。

然后，我們改寫第二行文字，把它改成“百度經(jīng)驗”我使用的是百度綜藝體，字體和顏色設(shè)置好以后就切換到“選擇&效果”選項卡，我們選擇喜歡的文字效果。

切換到“位置”選項卡，我們可以調(diào)整文字在banner中的位置

分別切換到“網(wǎng)絡(luò)鏈接”和“定時”選項卡，進(jìn)行相關(guān)的設(shè)置

6 文本中選擇第三行文字，改寫成“為經(jīng)驗獻(xiàn)計獻(xiàn)策”然后設(shè)置好效果。這里我選擇了一個行星閃動的效果。其他項目設(shè)置可以參照上面的講解。

7 選擇“網(wǎng)站&鏈接”選項，進(jìn)行相關(guān)設(shè)置

8 選擇“發(fā)布&構(gòu)建”選項，點擊“發(fā)布”按鍵輸出自己設(shè)計好的flash banner。

9 彈出輸出格式選擇對話框，我們選擇swf格式，點擊“確定”

10 彈出“保存”對話框，我把這個banner命名為1，保存。

11 保存完畢以后，主界面顯示紅色提示語，告訴我們怎么正確使用這個banner。好了整個flash banner的制作就算是完成了。

12 為了給大家展示一下這個banner，我又另存了一份gif格式的，因為這個軟件也是支持發(fā)布為gif格式的，我們來看一下效果，還是很不錯的。

END

二、盤點banner設(shè)計組成要素/類型/風(fēng)格/設(shè)計步驟大全

banner對于一個設(shè)計師來說，肯定不是一個陌生的詞語啦，在目前的各個行業(yè)領(lǐng)域中基本都涉及到banner的需求，不管是web端還是移動端我們處處都能看到banner的影子，所以掌握banner的設(shè)計是我們每一個設(shè)計師必備的技能啦！

banner（及橫幅廣告）是網(wǎng)絡(luò)廣告最早采用的形式，也是目前最常見的形式。橫幅廣告又稱旗幟廣告，它是橫跨于網(wǎng)頁上的矩形公告牌，當(dāng)用戶點擊這些橫幅的時候，通?？梢枣溄拥綇V告主的網(wǎng)頁。是表現(xiàn)商家廣告內(nèi)容的圖片，放置在廣告商的頁面上，是互聯(lián)網(wǎng)廣告中最基本的廣告形式！

下面我們會從這幾個方面講解banner：

一： banner的組成要素

二： banner的類型

三：banner的風(fēng)格選擇

四： banner的設(shè)計步驟

一:banner的組成要素

banner的主要組成要素我這里簡單的總結(jié)了幾點：

以及banner主要的元素是：文案+元素+背景

元素又可以細(xì)分為：元素=商品+模特+logo+點綴（這里的元素是需要根據(jù)banner的實際情況選擇要素，可有可無）

如圖:

（來源于花瓣）

二:banner的類型

banner的類型我這里總結(jié)的主要分為：

01：產(chǎn)品宣傳類banner（新產(chǎn)品、熱銷產(chǎn)品）

02：活動類banner（節(jié)日活動促銷、產(chǎn)品促銷）

這里簡單的將banner分為了兩種類型，因為對于不一樣的banner需要實現(xiàn)的效果和目的是不一樣的，所以我們需要設(shè)計出不一樣的風(fēng)格的banner

對于產(chǎn)品宣傳的banner我們最主要的就是要突出產(chǎn)品的特征，所以我們對于banner的設(shè)計，需要的最主要的元素就一定是產(chǎn)品，以及簡短的文案介紹，至于點綴的元素我們也可以根據(jù)實際產(chǎn)品的特征選擇合適的元素，也可以不用元素的點綴，背景肯定也是必不可少的！

01：產(chǎn)品宣傳類banner：

產(chǎn)品+文案+背景

例如：

（來源于花瓣）

上面的案例都是對于產(chǎn)品宣傳類的banner的設(shè)計樣式，他們有一個共同的特征就是產(chǎn)品放大放大再放大，盡顯產(chǎn)品的特點，簡潔的文案介紹和大量的留白更加凸顯產(chǎn)品的特征，使用戶的目光不由自主的被產(chǎn)品本身所吸引

產(chǎn)品宣傳banner：

產(chǎn)品+文案+元素+背景

例如：

（來源于花瓣）

這類banner的特點就是除了產(chǎn)品本身外，都添加了一些其它的元素作為banner的一個點綴效果，使畫面顯得更加飽和，或使畫面帶有動感的效果！

那么問題來了

什么情況下產(chǎn)品banner設(shè)計添加元素好？什么情況下不添加元素好呢？

第一：對于需要極度顯示產(chǎn)品的特征的時候我們最好選擇不添加元素干擾產(chǎn)品，

第二：對于簡約產(chǎn)品，我們最好也不要添加元素做裝飾，大量的留白更加適合簡約產(chǎn)品的風(fēng)格，

02： 活動類banner

產(chǎn)品+文案+元素+背景

例如：

（來源于花瓣）

對于活動類的banner設(shè)計我們大多數(shù)都會選擇顏色鮮艷多彩的，并且畫面飽和具有沖擊力的，營造出一種熱鬧的氛圍，對于元素的添加也是必不可少的一點，因為對于活動類的banner設(shè)計，畫面越熱鬧活動力度就會顯得越大，才會更加吸引用戶，對于活動的標(biāo)題也要盡量的凸顯！

二:banner的風(fēng)格選擇

對于banner的風(fēng)格也是多種多樣的，但是對于不同性質(zhì)的banner選擇的風(fēng)格肯定也是不一樣的，不同的banner搭配不同的風(fēng)格給人的視覺效果是完全不一樣的，合適的搭配才能使banner更好的表現(xiàn)其特征和目的

例如：

01：簡約產(chǎn)品家居banner的宣傳banner，就比較適合簡約大氣干凈的風(fēng)格

（來源于花瓣）

02： 高端科技產(chǎn)品banner，就選擇具有科技感氣質(zhì)的風(fēng)格

（通過科技感的圖形和顏色等來體現(xiàn)）

（來源于花瓣）

03： 時尚服飾類的banner，就適合選擇時尚畫面的風(fēng)格

（通過獨特的造型和風(fēng)格圖形以及色彩等來體現(xiàn)）

（來源于花瓣）

04： 高端奢侈品牌類banner，就適合高端大氣的風(fēng)格搭配

（通過高檔色彩黑紅配，黑金配等來體現(xiàn)）

（來源于花瓣）

05:少女\兒童可愛風(fēng)banner，就適合可愛風(fēng)元素搭配的選擇

（通過可愛元素：插畫、線條、氣球、愛心、 圓潤的字體、活力的色彩等來體現(xiàn)）

（來源于花瓣）

06： 國風(fēng)/文化/節(jié)日類banner，就比較適合選擇帶有文化氣質(zhì)的元素搭配

（通過中國風(fēng)毛筆字、中國古有的元素： 印章，中國山水畫，墨跡，扇面，剪紙，園林窗格，古紋樣，祥云，京劇，卷軸等等）

（來源于花瓣）

二:banner的設(shè)計步驟

01：了解和確定banner的設(shè)計需求

02：明確banner設(shè)計的目的

03：根據(jù)得到的banner設(shè)計需求確定banner的設(shè)計風(fēng)格

04：選擇合適的banner設(shè)計版式結(jié)構(gòu)

05：選擇匹配的元素裝飾banner的整體效果（根據(jù)實際需求添加）

06：色彩搭配選擇

01： 了解和確定banner的設(shè)計需求

對于這了解設(shè)計需求一點來說，不管是做什么設(shè)計的前提都是必不可少的一步，也是最關(guān)鍵的一步，如果你連設(shè)計的需求都不明確那么做出來的設(shè)計結(jié)果肯定就不會符合實際的需求

那么對于banner的設(shè)計需求我們具體需要明確那一些呢？

第一點：確定banner設(shè)計文案

文案對于設(shè)計師來說也是一個很重要的點，設(shè)計師可以根據(jù)文案信息從中找到設(shè)計靈感，并且也可以知道大致的設(shè)計風(fēng)格的走向

第一點：確定banner設(shè)計尺寸和投放平臺

文案確定后我們還需要知道banner的投放平臺和位置，尺寸大小，以及是否需要適配各個平臺的展示，

02： 明確banner設(shè)計的目的

對于設(shè)計一張banner，肯定是想要達(dá)到某一種目的才會設(shè)計這一張banner，所以在設(shè)計banner之前一定要了解清楚這一張banner設(shè)計的目的是什么，例如：是想要宣傳產(chǎn)品還是想要促銷產(chǎn)品，兩者的性質(zhì)是完全不一樣的，

03： 根據(jù)得到的banner設(shè)計需求確定banner的設(shè)計風(fēng)格

banner的設(shè)計風(fēng)格我們可以從banner文案需求中找到關(guān)鍵詞進(jìn)行定位，比如： 全語音智能操作的車載支架A5

從這一句主題文案中我們能夠提出的關(guān)鍵詞就有： 全語言、智能

對于這樣的關(guān)鍵詞的理解我們肯定第一就會想到科技感智能化時代的畫面，所以這里的風(fēng)格我們也就有所選擇啦！

04： 選擇合適的banner設(shè)計版式結(jié)構(gòu)

banner的設(shè)計版式結(jié)構(gòu)我們可以大致分為：

居中結(jié)構(gòu)、左對齊結(jié)構(gòu)、右對齊結(jié)構(gòu)

不同需求banner的結(jié)構(gòu)就需要根據(jù)實際情況選擇啦！

05： 選擇匹配的元素裝飾banner的整體效果（根據(jù)實際需求添加）

對于banner的裝飾元素我們也是需要根據(jù)實際情況和產(chǎn)品banner的特征采取合適的選擇，比如簡約產(chǎn)品的banner就不需要裝飾元素更好，而活動類banner或少女兒童等可愛類的banner設(shè)計就需要選擇裝飾元素更加適合，并且不同形狀banner的裝飾元素選擇也是不同的（前面做了簡單的介紹，這里就不再重復(fù)啦）

06： 色彩搭配選擇

色彩的選擇也是很關(guān)鍵的，不同性質(zhì)的banner選擇的顏色搭配也是不一樣的，適當(dāng)?shù)念伾钆鋾巩a(chǎn)品更加凸顯或者使畫面更加顯眼突出，并且給人的感覺也是不同的，

例如：

* 黑金配和黑紅配就會給人一種高級感

* 藍(lán)，黑色，紫等冷色搭配，畫面給人硬朗，空間感，速度和力量的感覺更加適合科技感

* 紅、橙、黃、紫搭配，就會營造出一種熱烈的氛圍，更加適合時尚和活動類

* 黑、白、灰的搭配就會給人一種高冷不宜接近的感覺，更加適合大牌的風(fēng)格選擇

* 白、灰的搭配會給人一種寧靜、文藝、氣質(zhì)、素雅的感覺，更加適合簡約產(chǎn)品的選擇

實操案例：

文案需求：

     全語音智能操作的車載支架A5

揮手聽話的語音支架

使用訊飛AIUI人機(jī)交互解決方案，智能駕乘張口即來

設(shè)計尺寸：1920x650px

設(shè)計的目的：根據(jù)需求我們得到的banner設(shè)計的目的是宣傳新產(chǎn)品車載支架A5

第一步：我們將文案信息以及提供的產(chǎn)品放入畫布中

第二步：明確我們的主標(biāo)題 “全語音智能操作的車載支架A5”

所以我們將主標(biāo)題放大處理，凸顯主標(biāo)題

第三步：選擇banner的風(fēng)格，因為這里我們需要體現(xiàn)的是產(chǎn)品的智能化，所以我們的風(fēng)格就可以定義為科技感的

第四步：選擇版式結(jié)構(gòu)，我們這里就選擇簡單的左右結(jié)構(gòu)吧！

第五步：選擇裝飾元素，裝飾元素也要根據(jù)科技感的效果選擇，以及可以從文案中提取，例如這里我們可以提?。嚎萍几芯€條和圖形、語音圖形等

第六步：整體位置調(diào)整和色彩搭配，對于文字大標(biāo)題我們也處理成不一樣的具有層次結(jié)構(gòu)的，使其更加凸顯，小標(biāo)題文案也根據(jù)整體風(fēng)格畫面做微小的處理，使文案和畫面更加和諧統(tǒng)一，包括產(chǎn)品周圍由于受到光的影響，也需要做處理

最終我們就得到上面的banner效果啦！😂一個簡單的科技感banner就設(shè)計完成啦！

好啦！今天的知識有點多，也有點全面！希望你們喜歡吧！🙃

往期好文推薦

—

版式設(shè)計——簡單7種圖片排版方式

10張創(chuàng)意線條圖形海報設(shè)計

2招教你配色技巧，擺脫配色困難癥！

【創(chuàng)新】海報設(shè)計思路

三、banner設(shè)計：高手教你如何設(shè)計banner?

當(dāng)然，這里的banner總文字的變形沒有很多，更多展示的是不同文字的不同排版。一段文字應(yīng)該怎么排版，怎么突出文案，不需要怎么變形也能做得很好！

根據(jù)文章的重點：

一 ：思考專題定位。

定位很重要，慣竊整個頁面的內(nèi)容。從之前看的對文字的性別、種類各種文章，對定位以及有初步的了解。接下來就是在實踐中嘗試和進(jìn)步！

二：明白文字在Banner中占主導(dǎo)地位。

文字一直是重點，比較保守的做法，就是文字+背景?？晌淖诌€得區(qū)分主標(biāo)題和副標(biāo)題，所以文字上的排版怎么去突出，是重中之重！

三：構(gòu)建輔助視覺。

這里實用性很大，有三種排版方式：

1 文字+背景陪襯。這個看似很好做，卻也一直做不好。

2 文字+主體物。第1是最好做的，第二很容易做糊了整個界面。多做多嘗試！

3 主體物+背景+文字。這是經(jīng)常采用的方法，但經(jīng)常還是做不好。

四：創(chuàng)造力對主題的藝術(shù)化表現(xiàn)。

喜歡這里第三張圖，真的很好。雖然右邊的人群頭部摳得不是很好，但這張的意念和創(chuàng)意都非常棒。

banner是小小的圖片，卻是很講功力的。多嘗試才能多進(jìn)步??！

四、網(wǎng)店Banner設(shè)計與制作方法是怎樣的？

好的Banner設(shè)計，雖然都是由圖片加文字組成，但也絕不是“1＋1＝2”那么簡單地疊加。如同一首樂曲，可以是古典交響樂，可以是流行電子樂，亦或民間小調(diào)，形式多樣，手法不一。有時候需要像作詩般字斟句酌，有時候也會有妙手偶得的驚喜。受制于互聯(lián)網(wǎng)視覺設(shè)計的特點，往往需要通過設(shè)計師的經(jīng)驗思考，在較短的時間內(nèi)制作出能夠通情達(dá)意的作品。下面為一運用Photoshop軟件進(jìn)行的網(wǎng)店Banner設(shè)計與制作方法舉例。

（1）運行Photoshop軟件，執(zhí)行“Ctrl”＋“N”命令創(chuàng)建一個新文件，設(shè)置新圖像文件的大小為寬度1920像素，高度為260像素（高度要根據(jù)具體情況來定），圖像分辨率為72像素／英寸，顏色模式為RGB模式，背景色為白色。（2）搜索Banner設(shè)計的背景圖片，注意背景圖像的寬度必須大于或等于1920像素，選擇好背景圖像后，在Photoshop中打開圖像文件。（3）將選擇好的背景圖像，應(yīng)用軟件的移動工具拖進(jìn)第一步創(chuàng)建的Banner圖像文件中，并運用移動工具進(jìn)行位置的調(diào)整，把需要的部分圖像放置在合適的位置。（4）在Photoshop軟件的圖層面板，設(shè)置背景圖像所在的圖層不透明度為40%，以降低圖像的不透明度，使背景圖像與白色的背景圖層融合。（5）把事先拍攝好的、事先計劃好要重點推薦與推銷的商品圖像在軟件中打開，運用Photoshop軟件中的魔術(shù)棒選擇工具，先在圖像的白色區(qū)域進(jìn)行選擇，然后執(zhí)行“Ctrl”＋“Shift”＋“I”反選命令把無線路由器產(chǎn)品圖像選中。（6）運用軟件的移動工具分別把上一步選擇完成的無線路由器側(cè)面圖與無線路由器背面圖拖移到Banner文件中，執(zhí)行“Ctrl”＋“T”命令對無線路由器圖像進(jìn)行大小與位置調(diào)整。（7）接下來運用文本工具添加文本，選擇字體為“方正蘭亭特黑”，字體大小為72點，設(shè)置字體為“斜體”，字體顏色為“藍(lán)色”，RGB數(shù)值為（6、68、182），字體顯示模式為“犀利”，輸入“數(shù)碼惠聚”幾個字。(8)執(zhí)行“Ctrl”＋“T”自由變換命令，對“數(shù)碼惠聚”文字進(jìn)行旋轉(zhuǎn)調(diào)整，轉(zhuǎn)動一定的角度。(9)繼續(xù)運用文本工具輸入文字，選擇字體為“方正蘭亭特黑”，字體大小為24點，設(shè)置字體為“斜體”，字體顏色為“藍(lán)色”，RGB數(shù)值為（53、98、4），字體顯示模式為“犀利”，輸入促銷文字，然后執(zhí)行“Ctrl”＋“T”命令對文字的角度與位置進(jìn)行調(diào)整。(10)運用上一步的方法與技巧，繼續(xù)輸入文本，除“1212”四個字的大小為30點，顏色為RGB（192、6、6）以外，其他文字屬性與上一步相同，然后一樣進(jìn)行位置與角度調(diào)整。(11)繼續(xù)運用文本工具輸入文字，選擇字體為“方正蘭亭特黑”，字體大小為24點，設(shè)置字體為“斜體”，字體顏色為“藍(lán)色”，RGB數(shù)值為（6、68、182），字體顯示模式為“犀利”，輸入如下圖所示的促銷文字，然后執(zhí)行“Ctrl”＋“T”命令對文字的角度與位置進(jìn)行調(diào)整。(12)運用軟件的多邊形選擇工具，在工具屬性欄中設(shè)置羽化值為0。(13)在圖層面板新建一個圖層，并且用RGB數(shù)值為（6、68、182）的藍(lán)色對三角形選區(qū)進(jìn)行填充顏色。并對這個圖層進(jìn)行圖層樣式設(shè)置，圖層樣式為“斜面與浮雕”中的“內(nèi)斜面”，方式為“雕刻清晰”。(14)設(shè)置好圖層樣式后，執(zhí)行“Ctrl”＋“D”取消選擇命令。(15)把上面創(chuàng)建的三角形樣式所在的圖層進(jìn)行4個復(fù)制，分別放置在如圖所示的位置，同時運用“Ctrl”＋“T”命令適當(dāng)調(diào)整三角形樣式圖像的角度、大小、位置與不透明度，完成Banner設(shè)計。

以上就是關(guān)于banner圖怎么設(shè)計相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。

推薦閱讀：

nba總得分排行榜（nba總得分排行榜歷史）

nba球星顏值排行榜（nba球星顏值排行榜白人）

2021年bba十大排名（bba 排名）

廣州好吃的地方排行榜（廣州好吃的地方排行榜最新）

汽車輪轂品牌排行榜（汽車輪轂生產(chǎn)廠家）