Banner制作的套路分析
以下內(nèi)容是我在制作banner時(shí)的簡略分析，以及平日素材的積累和應(yīng)對突發(fā)任務(wù)時(shí)的思考。
作為設(shè)計(jì)師，在工作中我們可能會(huì)遇到下午給方案，下班之前出banner的需求。也許我們對于制作banner的方法輕車熟路，但突發(fā)的情況總會(huì)讓我們措手不及。
措手不及的結(jié)果就會(huì)導(dǎo)致我們設(shè)計(jì)產(chǎn)出物的質(zhì)量有所下降。畢竟，合理的時(shí)間保障對于設(shè)計(jì)來說還是非常重要的。
下面提到的快速制作banner的方法，需要我們平時(shí)的積累，以及對設(shè)計(jì)軟件合理的運(yùn)用。
banner的結(jié)構(gòu)大致分為三層：背景層、裝飾層、文案層。背景層會(huì)確立整體banner的風(fēng)格或配色；裝飾層起到點(diǎn)綴作用，并可以控制整體版式的平衡；文案層是核心內(nèi)容的展示，以展示主要文字為主。三層級互相組合搭配，從而支撐起整個(gè)banner。
banner的常見版式：①左右排版、②居中排版。
受到文案字?jǐn)?shù)限制、所選搭配元素、產(chǎn)品的屬性等原因，版式的選擇需要根據(jù)實(shí)際情況進(jìn)行判斷。
常見的banner構(gòu)圖樣式組合有：平鋪樣式、環(huán)繞樣式、傾斜樣式、斜切樣式、放射樣式、isometric樣式、三角樣式等。
背景層、裝飾層、文案層，三者之間有著密切的關(guān)系。
比如：背景層設(shè)計(jì)的過于復(fù)雜，那么內(nèi)容文字的處理就要傾向于簡潔，反之亦然；而裝飾層也并不是必須要存在于每一個(gè)banner當(dāng)中。當(dāng)背景層中內(nèi)容已經(jīng)很豐富的時(shí)候，裝飾的內(nèi)容可以刪去。
當(dāng)背景為純色時(shí)，需要適當(dāng)?shù)奶砑狱c(diǎn)綴物。而且可以對文字進(jìn)行處理增加吸引力，避免整體的單調(diào)。
背景的種類大致分為適量圖形、字體、顏色和圖片四種。
圖片包括寫實(shí)圖片和卡通圖片等；顏色分為純色或漸變；字體放大也可以當(dāng)做背景；矢量圖包含的組合有很多。簡單的圓形、方形。甚至是點(diǎn)、線的組合都可以運(yùn)用在背景中。每當(dāng)節(jié)日臨近，也可以匹配一些節(jié)日風(fēng)格的適量圖形進(jìn)行設(shè)計(jì)。
裝飾的點(diǎn)綴應(yīng)該是錦上添花的。不能盲目的因?yàn)橐曈X效果而添加過多的裝飾，這樣反而會(huì)誤導(dǎo)用戶，造成混亂的感覺。不利于文案內(nèi)容的傳達(dá)。
適當(dāng)?shù)狞c(diǎn)綴和修飾，可以讓頁面避免單調(diào)；也可以使banner的元素之間達(dá)到平衡，視覺效果更加和諧。同時(shí)，文字的運(yùn)用也是裝飾點(diǎn)綴的關(guān)鍵。
根據(jù)產(chǎn)品屬性的不同，舉例說明：金融類的banner可以使用較小或較細(xì)的字體進(jìn)行搭配。同時(shí)，使用點(diǎn)狀分布排列營造高端感；電商類的banner可以使用漸變的圓形或線條進(jìn)行修飾。目的是搭建出歡快的、促銷的感覺，吸引用戶點(diǎn)擊。
①banner的設(shè)計(jì)當(dāng)中，文案字?jǐn)?shù)的多少也至關(guān)重要。過多字?jǐn)?shù)或復(fù)雜的內(nèi)容非但不能讓用戶清楚文案要表達(dá)的事情，反而會(huì)讓用戶感到麻煩。我明白交給設(shè)計(jì)師內(nèi)容的小伙伴想把活動(dòng)解釋清楚的初衷。但在注重用戶體驗(yàn)的當(dāng)下，人們的耐心顯然是無法接受過多文字的圖片。
因此，當(dāng)我們接收到的文案字?jǐn)?shù)過多的話，要第一時(shí)間果斷提出自己的想法。文案中的賣點(diǎn)和痛點(diǎn)是最重要的兩個(gè)部分，其他內(nèi)容都可以省略。
同時(shí)，過多的字?jǐn)?shù)也是我們設(shè)計(jì)當(dāng)中的困難。較小尺寸的圖片，可能單單放幾行文字就已經(jīng)無法再安排其他的布局設(shè)計(jì)了。
②字體方面主要分為襯線字體和非襯線字體。襯線字體的筆畫有修飾，且粗細(xì)不同，參考宋體；而非襯線字體就比較橫平豎直，筆畫粗細(xì)相同。襯線字體大多用在古典風(fēng)格或民族風(fēng)格的banner設(shè)計(jì)當(dāng)中。非襯線字體適用的范圍就比較廣，可以說絕大多數(shù)的banner中都可以運(yùn)用。
③文案分為主標(biāo)題和副標(biāo)題。主標(biāo)題自然是最精簡也是最搶眼的部分，而副標(biāo)題可以是主標(biāo)題的解釋說明，也可以是接主標(biāo)題的新文案。區(qū)別搭配有助于用戶第一時(shí)間分辨出文案的主次，讓頁面更加協(xié)調(diào)。
好的配色需要一定的配色基礎(chǔ)以及日常練習(xí)的積累。但是當(dāng)遇到特殊狀況時(shí)，顯然并不會(huì)在顏色上留給我們有太多的時(shí)間。所以，我們就需要一些輔助的方式來完成顏色的搭配工作。
這里我推薦兩個(gè)網(wǎng)站：①https://colorhunt.co/ ②https://material.io/design/color
第一個(gè)網(wǎng)站會(huì)推薦許多不錯(cuò)的顏色搭配，其中有不少是我個(gè)人比較喜歡的；第二個(gè)網(wǎng)站是material design官網(wǎng)中的color部分。其中的Color palettes在我們輸入顏色之后自動(dòng)生成搭配。
有了這兩個(gè)網(wǎng)站的配色加持，會(huì)大大縮短我們設(shè)計(jì)banner的時(shí)間。
當(dāng)banner設(shè)計(jì)完成后，我們的工作可能并沒有就此結(jié)束。在設(shè)計(jì)APP產(chǎn)品之初，如果我們在不同頁面的很多地方都設(shè)計(jì)了不同尺寸的，便于運(yùn)營做推廣的banner區(qū)域的話，那么后期我們在修改這些尺寸的時(shí)候就會(huì)非常頭疼?？赡芤粡垐D我們需要改成七八張banner。并且有的圖片的尺寸并沒有規(guī)律可言。
因此，我們在設(shè)計(jì)APP之初，就要想到這樣的情況。在設(shè)計(jì)banner時(shí)，設(shè)定好統(tǒng)一比例，方便后期更改；同時(shí)，要運(yùn)用photoshop中的智能對象等功能，快速修改尺寸。
要在極短的時(shí)間內(nèi)設(shè)計(jì)出效果不錯(cuò)的banner，除非能力強(qiáng)悍或是胸有成竹，我能想到的方法就在于平日的“積累”。
文中提到的背景、裝飾，都是碎片化可拼接的內(nèi)容。我們在工作或平日里可以設(shè)計(jì)出足夠的素材，那么在時(shí)間緊迫的時(shí)候進(jìn)行拼接就好。
文字字體方面我們可以分析出平時(shí)所給文案中的一些“套路”；分析里面總是會(huì)提到的幾個(gè)字或者是相似度很高的標(biāo)題，來進(jìn)行字體的設(shè)計(jì)。
無論是簡單也好、復(fù)雜也好，把平日里制作的元素素材進(jìn)行整理歸納，建立自己的素材庫。這樣，在面對措手不及的任務(wù)時(shí)才不至于慌亂?；ò昊蛘逧agle就是兩個(gè)不錯(cuò)的素材整理工具。
提到臨摹，我們就不得不提到另一個(gè)詞“抄襲”。其實(shí)，抄襲的認(rèn)定是見仁見智的。每個(gè)人都有自己的認(rèn)定界限。而我能想到的避免抄襲的方法，就是“刻意改變”。以下面的小人為例。
提到臨摹，我們就不得不提到另一個(gè)詞“抄襲”。其實(shí)，抄襲的認(rèn)定是見仁見智的。每個(gè)人都有自己的認(rèn)定界限。而我能想到的避免抄襲的方法，就是“刻意改變”。以下面的小人為例。
和日常的元素搜集整理一樣，模板也需要我們提前進(jìn)行準(zhǔn)備。我們需要找準(zhǔn)產(chǎn)品定位，和往期banner的規(guī)律為其量身設(shè)計(jì)模板?？梢詤⒖荚蛨D的形式制作黑白排版樣式。
上文中提到的尺寸問題，我們可以用置入鏈接智能對象的方法，來快速批量修改banner的尺寸。
①篩選出尺寸相似或形狀相似的banner；
②找出關(guān)鍵banner尺寸，以此作為基準(zhǔn)作圖；
③banner中的文案文字的上下高度范圍，要在眾多尺寸中的最小高度banner的尺寸范圍內(nèi)。
④在基準(zhǔn)尺寸圖中進(jìn)行設(shè)計(jì)。打開PS其他尺寸的文件，選擇文件--置入鏈接的智能對象--調(diào)節(jié)大小。這樣我要需要調(diào)整時(shí)，只需要修改基準(zhǔn)banner圖一張就夠了。
作為設(shè)計(jì)師而言，我相信都不愿意碰到要求臨時(shí)出圖的情況出現(xiàn)。但我們也需要為這種情況而做準(zhǔn)備，以確保在時(shí)間緊迫的時(shí)候來保證自己設(shè)計(jì)產(chǎn)出物的質(zhì)量。因此，日常的收集和積累就尤為重要。
網(wǎng)站banner圖怎么設(shè)計(jì)？
我們通常打開網(wǎng)站會(huì)看到很多長方形形狀的廣告圖片，稱之為網(wǎng)站banner，網(wǎng)站的Banner可以放在網(wǎng)站不同的位置，在訪客瀏覽網(wǎng)站的時(shí)候，吸引訪客的關(guān)注，從而獲得宣傳和銷售的效果，我們常?？吹降木W(wǎng)站百葉窗也是網(wǎng)站banner的一種。一般banner的設(shè)計(jì)和制作可以找萬商云集https://www.iwanshang.cn/等一些企業(yè)網(wǎng)站建設(shè)相關(guān)的服務(wù)公司，但一定要注意其中的溝通，明確要求和主題，才能達(dá)到好的效果。
Banner廣告對于增加在線流量至關(guān)重要，但如何才能設(shè)計(jì)出大家想要點(diǎn)擊的網(wǎng)頁Banner？網(wǎng)頁Banner設(shè)計(jì)的重點(diǎn)是通過應(yīng)用基本的設(shè)計(jì)準(zhǔn)則，系統(tǒng)地創(chuàng)建有效的Banner廣告。接下來我們就來說說banner的設(shè)計(jì)要點(diǎn)。
網(wǎng)站的Banner圖雖然看起來只是整個(gè)網(wǎng)站當(dāng)中很小的一個(gè)方面，但對于網(wǎng)站給用戶塑造的印象和體驗(yàn)效果來說，卻是至關(guān)重要的。畢竟用戶來到網(wǎng)站當(dāng)中，首先映入眼簾的便是網(wǎng)站Banner圖，如果Banner圖不好的話，那么用戶對網(wǎng)站的第一印象就會(huì)下降，用戶很可能就會(huì)因此而跳出離開。所以，只有設(shè)計(jì)好網(wǎng)站的Banner圖，才能使網(wǎng)站的用戶吸引力更強(qiáng)，這樣網(wǎng)站也才能獲得更多用戶支持。
一.首先了解你的banner設(shè)計(jì)需求
確定banner文案的內(nèi)容，包括定位和主題，以及將會(huì)涉及到的設(shè)計(jì)素材、包括準(zhǔn)備投放在什么平臺以及它的尺寸大小，這些前期的工都是需要先定下來的。因?yàn)檫@些基本的因素如果沒有被確定下來，會(huì)阻礙設(shè)計(jì)師的設(shè)計(jì)靈感，在設(shè)計(jì)的過程中也會(huì)給設(shè)計(jì)師帶來很多不確定的因素，而且會(huì)讓banner設(shè)計(jì)出來可能不符合要求。
二、一定要選用高清圖片
圖片的清晰度一定要有保證，一定不要出現(xiàn)圖片模糊的情況，清晰度低的圖片讓人容易產(chǎn)生疏離感和塑料感，影響網(wǎng)站的整體質(zhì)感。高清圖片能夠讓用戶準(zhǔn)確地獲得信息，讓人看著更加舒服，更加高級。
三、保持層次結(jié)構(gòu)
Banner廣告設(shè)計(jì)依賴于每個(gè)廣告之間的正確平衡，所以要注意你的層次結(jié)構(gòu)。有效的Banner廣告是為了提高品牌知名度和增加網(wǎng)站流量而設(shè)計(jì)的。它們有三個(gè)基本組成部分:（1）公司Logo（2）價(jià)值主張（3）CTA按鈕
四、網(wǎng)頁設(shè)計(jì)注意排版網(wǎng)頁設(shè)計(jì)中，使用全屏照片作為網(wǎng)站背景固然簡潔漂亮，干凈利落之余設(shè)計(jì)師需更要考慮到整個(gè)網(wǎng)頁的布局，如何在大幅照片上進(jìn)行排版，設(shè)置欄目，與照片背景顏色不產(chǎn)生沖突，又不影響用戶的閱讀體驗(yàn)。
總之，banner在網(wǎng)頁設(shè)計(jì)中占據(jù)著重要作用，精美的圖片配之以絕妙的文案能給網(wǎng)站獲得漂亮的加分。而作為背景的照片只有足夠精彩漂亮才會(huì)給用戶留下深刻印象，所以設(shè)計(jì)師在選擇照片時(shí)要注意圖片的質(zhì)量問題。此外還要重視圖片展示的內(nèi)容與網(wǎng)站主題的相關(guān)性，于此網(wǎng)站的主題內(nèi)容才會(huì)在第一時(shí)間傳達(dá)給訪問用戶。
制作pc端跑步機(jī)banner方法和步驟
制作pc端跑步機(jī)banner方法和步驟如下：1.首先應(yīng)該了解下，banner圖的尺寸大小是多少，banner圖的主題風(fēng)格應(yīng)該是什么樣子的，因?yàn)檫@涉及到banner圖制作的主視覺效果。
2.確定好主題風(fēng)格之后，接下來就要進(jìn)行素材的收集，其中包括背景圖案、元素收集、文案制定等工作。
3.確定banner圖的整體布局，其中包括主要元素布局的結(jié)構(gòu)、文字的大小、每個(gè)小元素的占比、位置的確認(rèn)等。
4.編輯元素。大部分時(shí)候，收集上來的元素是無法直接使用的，這個(gè)時(shí)候需要對元素進(jìn)行編輯，包括圖片元素的摳圖。
banner字體怎么做？
banner字體可以通過“點(diǎn)”、“橫”、“豎”、“撇”、“捺”五法進(jìn)行制作。
具體步驟如下：
1、點(diǎn)：根據(jù)文字本身的具體內(nèi)容及其含義，使得文字的筆畫結(jié)構(gòu)與文字內(nèi)容含義一致，符合用戶的心理預(yù)期。
2、橫：思考banner的觀眾是誰或者說這個(gè)產(chǎn)品是誰用的。比如說針對兒童類產(chǎn)品，在字體的表現(xiàn)上可以幼稚活潑一些，在設(shè)計(jì)上增加一些童趣的意味。
3、豎：根據(jù)不同的主題氛圍進(jìn)行設(shè)計(jì)，如端午節(jié)，中秋節(jié)等傳統(tǒng)節(jié)日進(jìn)行的推廣設(shè)計(jì)，可以增加人文的設(shè)計(jì)元素，如使用書法字體，用字體去烘托這個(gè)氛圍，同樣比較常見的還有一些使用禮品帶、花枝藤蔓等裝飾性元素結(jié)合文字出現(xiàn)以增加設(shè)計(jì)的美感。
4、撇：用輔助圖形與字體結(jié)合，這樣的組合方式非常常見。設(shè)計(jì)原理就是根據(jù)字意詞意，使用與之相關(guān)的圖形元素與字體筆畫形體相結(jié)合，圖形元素的使用可以是具象的也可以抽象的。
5、捺：作為五筆畫的最后一筆，對于banner中的字體設(shè)計(jì)還是應(yīng)該追本溯源，形式上的美感自然是設(shè)計(jì)表現(xiàn)的一方面，但再好看的商業(yè)設(shè)計(jì)也不能脫離一個(gè)設(shè)計(jì)關(guān)鍵要素：易識性。
更多關(guān)于banner字體怎么做，進(jìn)入：https://m.abcgonglue.com/ask/d526a01615830425.html?zd查看更多內(nèi)容
怎么制作banner
步驟/方法
1 首先打開軟件，我們看到界面如下，左邊部分是選項(xiàng)部分，可以切換到各種設(shè)置。
2 我們選擇“尺寸&聲音”選項(xiàng)，進(jìn)行相關(guān)的設(shè)置。長寬根據(jù)自己的需求進(jìn)行設(shè)置，如果想插入背景音樂的話自己設(shè)置就可以了。
3 選擇“背景&設(shè)置”，我們設(shè)置一下背景為漸變色，如果需要插入圖片或者其他flash元素的自己設(shè)置就行了。
4 選擇“選擇&設(shè)置”，進(jìn)行flash背景效果的選擇，這里我選擇了一個(gè)飄動(dòng)的蒲公英。
5 選擇“文字&圖像”選項(xiàng)，我們編輯banner上顯示的文字等元素。首先我選擇第一個(gè)網(wǎng)址，然后更改成百度經(jīng)驗(yàn)的網(wǎng)址。
字體和文字的顏色可以點(diǎn)擊下面的“編輯字體風(fēng)格”進(jìn)行編輯。
然后，我們改寫第二行文字，把它改成“百度經(jīng)驗(yàn)”我使用的是百度綜藝體，字體和顏色設(shè)置好以后就切換到“選擇&效果”選項(xiàng)卡，我們選擇喜歡的文字效果。
切換到“位置”選項(xiàng)卡，我們可以調(diào)整文字在banner中的位置
分別切換到“網(wǎng)絡(luò)鏈接”和“定時(shí)”選項(xiàng)卡，進(jìn)行相關(guān)的設(shè)置
6 文本中選擇第三行文字，改寫成“為經(jīng)驗(yàn)獻(xiàn)計(jì)獻(xiàn)策”然后設(shè)置好效果。這里我選擇了一個(gè)行星閃動(dòng)的效果。其他項(xiàng)目設(shè)置可以參照上面的講解。
7 選擇“網(wǎng)站&鏈接”選項(xiàng)，進(jìn)行相關(guān)設(shè)置
8 選擇“發(fā)布&構(gòu)建”選項(xiàng)，點(diǎn)擊“發(fā)布”按鍵輸出自己設(shè)計(jì)好的flash banner。
9 彈出輸出格式選擇對話框，我們選擇swf格式，點(diǎn)擊“確定”
10 彈出“保存”對話框，我把這個(gè)banner命名為1，保存。
11 保存完畢以后，主界面顯示紅色提示語，告訴我們怎么正確使用這個(gè)banner。好了整個(gè)flash banner的制作就算是完成了。
12 為了給大家展示一下這個(gè)banner，我又另存了一份gif格式的，因?yàn)檫@個(gè)軟件也是支持發(fā)布為gif格式的，我們來看一下效果，還是很不錯(cuò)的。
END
制作網(wǎng)站廣告banner設(shè)計(jì)的步驟是什么？
廣告banner設(shè)計(jì)是最常見的設(shè)計(jì)需求之一，也是一個(gè)快速考量設(shè)計(jì)師基本功的項(xiàng)目。如何在短時(shí)間內(nèi)做一個(gè)高質(zhì)量色彩豐富內(nèi)容有針對性的banner呢?下面與大家一起分享怎樣設(shè)計(jì)廣告banner。
首先明確設(shè)計(jì)的網(wǎng)站廣告banner主題
要突出產(chǎn)品主題，讓用戶一眼就能識別廣告含義，減少過多的輔助干擾元素。切忌，banner被切割的太細(xì)碎，內(nèi)容繁多，沒有瀏覽重心。很多廣告主往往會(huì)認(rèn)為傳達(dá)的信息越多，用戶越有興趣，其實(shí)并不然，什么都想說的廣告，就是什么都沒說好。
其次要做到網(wǎng)站廣告里的重點(diǎn)文字突出
用文字進(jìn)一步的告訴用戶，是打折或還是新貨上市?如果我們最大的買點(diǎn)就是“4.1”折起，那么毫無疑問，“4.1”折的字樣一定要大，要醒目，其余的則需要相應(yīng)的弱化。
三、從上到喜愛的閱讀習(xí)慣
閱讀視線要符合用戶從左到右、從上到下的瀏覽習(xí)慣。
四、網(wǎng)站廣告設(shè)計(jì)的關(guān)鍵在于吸引用戶的注意力
用戶瀏覽網(wǎng)頁的集中注意力時(shí)間一般也就幾秒，所以不需要太多過場動(dòng)畫，需第1時(shí)間進(jìn)行產(chǎn)品的展示，命中主題。并配以鼓動(dòng)人心的措辭口號引導(dǎo)用戶。
五、色彩不要過于要醒目、夸張
有些廣告主要求使用比較夸張的色彩來吸引訪問者眼球，希望由此提升網(wǎng)站廣告Banner的關(guān)注度。實(shí)際上，”亮” 色雖然能吸引眼球，但往往會(huì)讓訪問者感覺刺眼、不友好甚至產(chǎn)生反感。所以，過度耀眼的色彩是不可取的。
六、產(chǎn)品數(shù)量不宜過多
很多廣告主總是想展示更多產(chǎn)品，少則4-5個(gè)，多則8-10個(gè)，結(jié)果使得整個(gè)廣告Banner變成產(chǎn)品的堆砌。Banner的顯示尺寸非常有限，擺放太多產(chǎn)品，反而被淹沒，視覺效果大打折扣。所以，產(chǎn)品圖片不是越多越好，易于識別是關(guān)鍵。
七、信息數(shù)量要平衡
很多人總認(rèn)為信息多就，覺得所有信息都很重要，都要求突出，結(jié)果其反。如果網(wǎng)站banner上滿是吸引點(diǎn)，那用戶只會(huì)被注意，所以在Banner的有限空間內(nèi)做好各種信息的平衡和協(xié)調(diào)非常重要。
八、留空
網(wǎng)站廣告畫面中需要留空,留空可以使圖形和文字有呼吸的空間。
通過以上總結(jié)出，我們在設(shè)計(jì)制作網(wǎng)站廣告Banner設(shè)計(jì)時(shí)，需要注意以下幾點(diǎn)
1.突出產(chǎn)品及其特征，采用有吸引力的宣傳用語，適當(dāng)弱化公司名稱和標(biāo)識;
2.圖片并非越多越好，突出重點(diǎn)是關(guān)鍵，必要的產(chǎn)品說明不能少
3.合理安排畫面內(nèi)容，做到主次對比鮮明
4.顏色不宜過度夸張，努力營造愉悅、舒服的感觀感受
