聊聊banner丨做好banner,我總結了這5類基礎知識

2022-01-31 PS設計教程平臺

微信關注「PS教程自學平臺」

每天學點PS

banner 由以下五部分組成:版式、字體、顏色、背景、點綴。


大家發現沒有,大體上 banner 版式可分為兩種:圖文左右排版、文字居中。

1. 圖文左右排版


當 banner 中需要包含具體的素材,如某位大咖、某件產品時,一般會選擇左右排版。並且圖文比例約為6:4(接近0.618的黃金比例)。

如果 banner 中只有某位大咖、某件產品,而沒有文字襯託,用戶就不會知道 banner 想表達的什麼。

如下圖,banner 中只有一位拉大提琴的中年外國男子,人們會猜測這男子的個人專輯發布了?他是誰?所以,通過圖片用戶只能對信息有個大致了解。


相反,如果把 banner 中圖片部分遮去,而只保留文字部分。人們能夠獲取的關鍵詞有:5首電影歌曲、回憶過往的。因此即使沒有配圖,文字也能將信息精準地帶給用戶,文字所佔比例應當比圖片多些。這也就解釋了為何大部分左右排版的 banner 都是文字佔比大於圖片。

banner 中有些文字放左邊,有些放右邊,這有什麼區別呢?

下圖中第一個 banner 是關於歐美電影歌曲的,右側可布局拉琴的男子,也可配電影片段,還可放正在播音的留聲機。第二張 banner 同樣如此。

下面兩圖均是圖左字右的 banner,第一張《首席醫官》,特指這本書。第二張奧運冠軍陳一冰求婚——除了他沒別人了。

說了這麼多,總結出圖右字左和圖左字右的區別了嗎?圖片在右,配圖內容比較模糊;圖片在左,配圖內容比較清晰。由於人們習慣的閱讀順序是從左到右,左邊放什麼意味著用戶會先看到什麼。當圖片信息清晰時圖片放左,先用特定配圖吸引用戶目光,再加以具體的文字闡述就更正常不過了。而如果把含義不清的配圖放在左邊,用戶得看到右邊的文字部分才能獲得 banner 想傳遞的內容,這會導致用戶接收信息時間增加。

2. 文字居中


印象中電商比較喜歡此類排版,也許是文字放在正中的位子,底下可以放許多產品?

版式中大小標題的比例:

發現沒?大小標題比例約為2:1。其實這和一級標題,二級標題是同個道理,我們在設計 banner 時總希望用戶能把 banner 上的文字看全,但又不希望大小標題混在一起主次不清,因此在排版合理,用戶能看清字的綜合考慮下,大小標題比例約為2:1。(其實小標題太小運營們也會懟的)

banner 中常用的字體有三種:襯線體(serif)、非襯線體(sans-serif)、書法體(cursive)。

都說字體有各自的性格,襯線體筆畫有粗細之分,它模仿的是中國古代字體和古代碑文上的字體,因此襯線體能給人古典,文藝的感覺,適合用於文藝氣息或與女子的相關設計。

非襯線體筆畫簡潔,筆畫較粗,體現現代,簡約的特性,適合用於蒼勁有力、與男子相關的設計。

書法體源自中國古代,能體現中國文化和揮灑墨水的豪氣,適用於文藝主題和金戈鐵馬般的豪邁主題。

注意:商用字體需要注意版權,這點很重要。

在生活中,色彩心理學讓人們對顏色的認知有很大的影響。

黑色:黑色是一種代表品質、權威、穩重、時尚的色彩,同時也含有冷漠、悲傷、防禦的消極情感。

白色:傳遞一種簡單、純真、高雅、精緻、信任、開放、乾淨、暢快、樸素的情感。

灰色:代表睿智、老實、執著、嚴肅、壓抑的色彩。

紅色:傳遞喜慶、自信、鬥志、權威、性感的情感。

綠色:是自然界中最常見的顏色,代表生命力、青春、希望、寧靜、和平、舒適、安全的情感。

藍色:是三原色中的一種,代表永恆、靈性、清新、自由、放鬆、舒適、寧靜、商務。

紫色:是一種代表優雅、浪漫、高貴、時尚、神秘、夢幻、靈性、創造性的顏色。

黃色:代表陽光、青春、活力、時尚、尊貴、年輕輕快、輝煌、希望的顏色。

因此在設計中選擇主色調也要遵從如上。

例如活潑年輕的內容可選擇純度較高的藍綠色、綠色等作為主色調。

文藝類內容則適合飽和度不高,偏向白色這類能讓人平靜的色彩。

大約有3種。橢圓點綴,圓角矩形點綴,實物點綴。圓形圓角矩形點綴可適當加些漸變和陰影。

為了不讓實物點綴太過搶眼,可以適當做些弱化,比如降低透明度或是做些模糊處理。

大約有3種,純色背景,實物背景,材質背景。根據畫面的需要可以選擇合適的底圖。

看了這麼多手痒痒了嗎?此時此刻,打開 ps 做個 banner 練練手唄!


 51RGB 年中超大促 

【全棧UI設計師5.7折】

(點擊圖片,了解詳情)

相關焦點

  • Banner做的好才是真本事之「史上」最全Banner解析
    其實以上所表達的也不夠準確,所以作為一個設計師還是有必要好好了解一下「什麼是banner?」banner的歷史呢,我這裡從百科找到了早期的介紹:Banner的中文翻譯過來是可以作為網站頁面的 橫幅廣告 ,也可以作為遊行活動時用的旗幟,還可以是報紙雜誌上的大標題。Banner主要體現中心意旨,形象鮮明表達最主要的情感思想或宣傳中心。
  • Banner做的好才是真本事之「史上」最全Banner解析!
    其實以上所表達的也不夠準確,所以作為一個設計師還是有必要好好了解一下「什麼是banner?」banner的歷史呢,我這裡從百科找到了早期的介紹:Banner的中文翻譯過來是可以作為網站頁面的 橫幅廣告 ,也可以作為遊行活動時用的旗幟,還可以是報紙雜誌上的大標題。Banner主要體現中心意旨,形象鮮明表達最主要的情感思想或宣傳中心。
  • 經常聽到banner這個詞,但是banner是什麼意思呢?
    banner可以作為網站頁面的橫幅廣告banner報紙雜誌上的大標題banner遊行活動時用的旗幟banner就是廣告條唄!.今天就給大家分享一篇關於banner文字設計的一些經驗方法的文章,若能認真閱讀,會有所收益的!
  • 為什麼我做的banner那麼醜?
    其實呢,banner裡學問也不少。本文作者KSO UEC(金山辦公用戶體驗中心),在UI中國獨家分享了自己對設計banner圖時的一些梳理,走心好文,希望可以幫助到大家。視覺元素在二次元平面上,以美的視覺效果與力學原理,進行編排組合,理性和邏輯推理來創造形象、研究形象與形象之間的排列。Banner入題,看平面構成中的秩序之美。
  • 網站banner設計的技巧!
    網站設計有美麗的banner,你的網頁能吸引很多遊客的注意力。網站banner在網頁上的重量比較大,品質和美觀的banner會大幅提高你網站的品質。速推SEM網站banner的設計只是網站的設計要素之一,在整體網站的設計中,設計師沒有多少時間進行設計,所以積累了設計師平時設計網站banner的經驗有些設計師的網站banner既沒有靈感也沒有經驗,也沒有良好的品質。在多年的網站設計經驗中,總結了網站banner的製作。
  • 做好Banner設計乾貨技巧
    但令很多設計師頭疼的的是遇到banner設計時無從下手,不知道該如何去設計排版,在上機操作時做banner又是最頻繁的測試題,今天就與大家分享一些設計banner的技巧,希望能幫到大家!在banner中來表現最自然最合適,畫面也不會顯得亂或者空。
  • 網站設計時如何做好banner的設計?
    在網站設計的時候,關於網站banner設計,是非常考驗設計師的水平的,因為很多客戶既要求節約成本,又要效率高,短時間可以設計出出彩的作品,所以,下面給大家說下網站banner設計的幾大技巧和注意事項。3、按照客戶的閱讀習慣來設計一般人們的閱讀習慣都是從左到右、從上到下的,所以網站設計網站banner時候也要遵循這個規律,不要相反,會讓人很不舒服。
  • Banner設計三部曲之形式-(1)
    這一期分享主要是說到我自己在工作中做營銷banner設計的方式和案例詳解,分為3個大方向然後分為幾個小方向,我們一個一個去了解清楚。在此要說明的是,流程呢是我個人平時的習慣方式。僅供參考,希望能幫助到大家,反正我都寫了。那我們就來一起聊聊banner三部曲。os:名字起的也不錯吧~~~部分案例來源於網絡 多有得罪請恕罪O(∩_∩)O哈!
  • 平面設計——banner篇
    banner主要投放於網際網路,在網際網路廣告中發揮著重要的作用。今天要介紹的就是如何通過banner去做更好的宣傳和如何更好的提升設計水平。首先什麼是banner?翻譯成中文是「橫幅、廣告」的意思。最常用於網站的大標題,也就是網站的橫幅廣告了。
  • 「為什麼我做的banner這麼醜?」其實這裡大有學問.
    直接進入主題,上圖是自己平時對banner圖一個抽絲剝繭的過程,這個圖大家可以看到,通過一級一級的分析,你會發現一個小小的banner設計可以慢慢囊括設計的各個分支中,像最後我用「∞」這個符號,其實只要你肯再用心去分析,比如標題可以有的樣式
  • 廣告位(banner)的可視化管理後臺邏輯說明
    那麼針對APP端的banner展示,怎樣做到前後端的有機組合,方便運營人員自行操作(隨時更改)廣告位呢,接下來,我就簡單的將可視化banner後臺的邏輯做以說明。前端banner展示我們經常看到,banner存在一個APP的首頁,位置可以在頂部,中部或者底部。通常以輪播圖的形式展示,3秒/5秒進行輪播。
  • 廣告banner圖效果分析?你有做嗎?
    最近小編看到一篇有關阿里統計banner效果數據分析的文章,在文章中向我們分享了他們通過對2200張banner效果進行分析後,得到的一些影響點擊的因素,廣告這是很多小夥伴的網站、產品在進行推廣的時候會使用到的重要因素,可以說這是最簡單和方便的推廣方式,那麼對於這個圖片的使用上,大家是否有注意到不同圖片在效果上的差別呢
  • Android APP Banner ,用這一個就夠了
    當普通ViewPager使用(有魅族Banner效果)5 . 仿愛奇藝 APP Banner 效果DependencyAdd it in your root build.gradle at the end of repositories:allprojects {     repositories {          ...
  • 手繪在banner圖設計中怎麼應用?
    關鍵字:電商設計 banner導語:過去幾年,電商頁面設計都是相對較傳統的表現形式,風格也比較單一。一、為什麼要在banner上使用手繪?(1)網遊手遊等需要虛擬人物遊戲裡都是虛擬的東西,都是模仿現實世界或者靠想像出來的,所以都需要靠繪畫來完成,不過遊戲的種類很多,風格多樣。
  • Banner樣式分析
    2.右側滑動類樣式    (1)信息展示類側滑        信息展示類側滑分為常規圖文類、圖片嵌套卡片式信息的形式和視頻展示類。     (2)側滑景深類樣式        側滑景深類這裡的實例使用在了首頁,但此類樣式較為特殊,通常還是二級頁面使用的較多,因為首頁側面的使用對頁面的一致性有一定的破壞。
  • 別不信,其實banner才是真•社會!
    看似信息結構簡單且容易執行的banner,其本身的作用遠遠不只是被我們理解的那樣簡單、粗糙和無趣。首先,banner解決了基礎的信息傳遞相比於純粹的文字,設計過的banner就好比給信息增加了「可視性」。人類天生就更願意「讀圖」,圖片也讓信息的理解更簡單。說白了,圖片不費腦,而文字得先經過大腦的轉化才能成為可理解的信息。
  • 平面商業廣告banner教程
    本期改稿就是存在盲目呼應節慶等問題的包包banner!【作品簡介】這是一家時尚女性品牌包包的banner,準備在新年之際來一場團購活動。【如何分析作品?】轉眼已是第五期了,小夥伴們究竟有木有熟悉頁問的平面視覺作品四維度分析呢?
  • 第一次做banner圖的思路
    banner需求,可以說學到了太多知識點,這裡感謝慢熱大佬的細心指導。 可以說,沒有慢熱大佬,就沒有我的今天的這張banner圖! 先看下成稿效果吧:
  • 怎樣讓wordpress網站的不同分類頁面,調用不同的banner圖片?
    比如:醫院類網站,醫院科室比較多,男科分類調用男科相關的banner圖,婦產科調用嬰兒相關的banner圖片,神經科調用神經相關的banner圖片,以此類推。這類需求,在企業網站上體現的比較多。那麼,在wordpress模板開發中,我們怎樣為wordpress網站的不同分類添加不同的banner圖片呢?
  • 原來Banner設計還有這麼多套路!
    拓展閱讀:別不信,其實banner才是真•社會!banner設計其實很簡單,只要你學會這些技巧「為什麼我做的banner這麼醜?」其實這裡大有學問。活動推薦:倒計時1周!第三屆防震減災公益設計大賽,你交稿了嗎?重要通知!UTalk青島線下分享會改時間了!