六張電商Banner設計告訴你如何讓畫面分割不呆板?

2021-02-07 狂人設計之路

在設計banner的時候,我們會為了讓畫面顯得更生動、有豐富、有趣味會使用一些小技巧,比如畫面分割(這種技巧大多會用在多種元素對比的情況下),但分割畫面有一個缺點:就是很容易呆板!


有些人可能會說我們平時看的分割海報不呆板啊?那是人家設計師又用了其他的元素進行了融合,豐富了畫面效果。那麼,今天我們就用幾個banner小例子來告訴大家如何運用其他元素補救畫面分割呆板!





因為有兩個主體,設計師將畫面分成兩個對等兩個等量部分,中間分界線部分運用了顏色過渡,弱化了分割效果;後又用字體將兩個部分連貫起來,背景虛化,突出前方礦妝品主體!





海報運用對角線將畫面分割成等量的兩個部分。因其對角線是畫面中最長的斜線,所以其態勢對視覺的影響非常強烈,讓人忍不住將視線焦距到這條線上。

因此我們將主體放到這條線上,起到了突出主體的作用;設計師還將對角線設計成波浪狀更具有趣味性!




單單將畫面分割會使畫面呆板,於是我們將主體放在分割線上,讓素材與背景融合;這樣會使我們將視線更多的匯聚在主體上,減少在背景上注意力,這麼做畫面的豐富性不就來了~




運用大小顏色對比將畫面分割成兩個不相等的部分,造成視覺上的反差,突出了畫面主體。在產品顏色紫與橘之中,選擇橘色為主調,由於橘色純色較高,極易吸引人們眼球。對角線還採用波浪線元素,給畫面更添活力!





運用對角線將畫面分割成等量(或者不對等)的幾個部分,運用的不同的配色突出不同(主次)的主體和信息,使其產生一種穩定的的視覺感受。豐富畫面信息,使視覺衝擊力更強。

相關焦點

  • 網站banner設計的技巧!
    網站設計有美麗的banner,你的網頁能吸引很多遊客的注意力。網站banner在網頁上的重量比較大,品質和美觀的banner會大幅提高你網站的品質。速推SEM網站banner的設計只是網站的設計要素之一,在整體網站的設計中,設計師沒有多少時間進行設計,所以積累了設計師平時設計網站banner的經驗有些設計師的網站banner既沒有靈感也沒有經驗,也沒有良好的品質。在多年的網站設計經驗中,總結了網站banner的製作。
  • Banner設計三部曲之形式-(1)
    23333要講的內容一、banner三部曲1-先形式版面形式標題形式一、先形式之版面形式為什麼要先形式先確定版面的形式、布局、標題樣式,然後再去考慮版面的色彩搭配。一個優秀的設計即使它在黑白的情況下也是很好的,如果先從考慮配色然後再去考慮版面,設計的過程中會變的不順暢。
  • 為什麼我做的banner那麼醜?
    直接進入主題,上圖是自己平時對banner圖一個抽絲剝繭的過程,這個圖大家可以看到,通過一級一級的分析,你會發現一個小小的banner設計可以慢慢囊括設計的各個分支中,像最後我用「∞」這個符號,其實只要你肯再用心去分析,比如標題可以有的樣式
  • 雙十二banner色塊分割欣賞
    一、內容分割,突出主體用藍色和白色將畫面分割成兩部分,產品的促銷介紹放在上面,不同層次的彩色也便於吸引眼球,下方白色部分則是廠家的相關信息,穩重大方,對於產品介紹來像是一個很值得借鑑的處理方式。@圖片來源網絡二、場景結合,平衡畫面,引導視覺用較深的顏色,在畫面底部打造水面的感覺,有兩個作用:一是用顏色將畫面底部的感覺下沉,使淺色畫面不至於太飄,這是一種在設計中很經典的處理方式。
  • 平面設計——banner篇
    banner主要投放於網際網路,在網際網路廣告中發揮著重要的作用。今天要介紹的就是如何通過banner去做更好的宣傳和如何更好的提升設計水平。首先什麼是banner?翻譯成中文是「橫幅、廣告」的意思。最常用於網站的大標題,也就是網站的橫幅廣告了。
  • 網站設計時如何做好banner的設計?
    在網站設計的時候,關於網站banner設計,是非常考驗設計師的水平的,因為很多客戶既要求節約成本,又要效率高,短時間可以設計出出彩的作品,所以,下面給大家說下網站banner設計的幾大技巧和注意事項。1、突出產品主題,避免繁瑣關於廣告的主題,很多人會犯一個錯誤,認為傳達的信息越多,用戶越有興趣,其實不然,現在人們的時間很有限,信息泛濫的時代,如何能突出產品主題,讓用戶一眼就能識別廣告含義,才是最重要的,避免繁鎖內容,減少客戶的閱讀負擔。
  • 【Banner設計排版】SALE招牌設計可以怎麼玩?~
    記得去年年底跟幾個朋友一起去香港逛街,當時逛了一個商場的好幾十家店,幾乎每一家店裡都掛著一個寫著SLAE的牌子旨在吸引用戶進店購物,我發現每一家SALE招牌的設計樣式都不一樣6、手繪或插畫風格(其實算是上述方法的延伸,因為任何文字、圖形都可以視為組成畫面的一種元素,要是能做成gif動圖就更有意思了)。
  • 五大突破點,搞定聖誕節 Banner 及專題頁面設計!
    那麼,設計師如何才能多一些開闊思維,讓聖誕節設計更有意思更具吸引力呢?同一個文案或活動主題的設計是有很多種實現方法的。設計師需要權衡氛圍的熱鬧程度以及我們想突出表現什麼信息。比如你是想要畫面熱鬧一點還是冷靜一點?你是想要畫面時尚一點還是保守一點?你是想要畫面體現氛圍多一點還是體現產品本身的功能或樣式多一點?
  • 如何設計一個吸引人的廣告banner
    ,當然,你也可以不加入質感使它完全扁平。我們經常可以看到一些很漂亮的插畫效果,如果把插畫融入到你的廣告banner設計中,是不是也可以很搶眼?嘗試大膽,色彩對比鮮明如果你不確定哪些顏色衝擊比較強烈,可以打破你的色輪,然後嘗試互補色。你也可以去嘗試過去不太可能的顏色組合,比如紅色和紫色,這兩種顏色雖然不是互補色,但也可以幫你實現對比度。
  • 面對不同運營團隊,如何規範運營Banner設計?
    那麼如何保證大家輸出的運營banner在保證視覺衝擊力的同時,也能體現統一的設計語言呢?最近筆者參與了運營banner規範的制定,服務的目標主要是我司海外不同的運營團隊,主要是為了規範整體的運營banner以及提高設計品質的可控度。
  • 手繪在banner圖設計中怎麼應用?
    關鍵字:電商設計 banner導語:過去幾年,電商頁面設計都是相對較傳統的表現形式,風格也比較單一。現在手繪頁面已成為電商頁面設計中不可缺少的一種表現技巧了,更多的手繪已經不單單只是作為藝術來欣賞,更多的是運用到實際中,直接地快速地產生商業價值。一、為什麼要在banner上使用手繪?
  • PS製作大氣的店鋪banner廣告 Photoshop自學課程電商美工設計教程
    做電商美工絕對是個辛苦的工作,除了產品上新以外,我們每隔段時間都要根據季節的變化,或者節日促銷活動做一些店鋪banner廣告。不過呢,痛並快樂著。今天交大家一個最簡單的設計教程,我們來看看效果先吧。01設計步驟設計步驟1:打開PS新建文檔,文檔的尺寸自己根據自己的banner尺寸來定義。
  • photoshop製作網店產品廣告banner電商美工設計教程 PS自學課程
    夏季的到來,我們做電商的朋友估計也要忙開來了,尤其是做設計的朋友,為新品添加新的廣告也是迫在眉睫哦。今天由我來教你一個用photoshop設計店鋪廣告的方法吧。設計的步驟簡單,可設計的影響力卻非同小可哦。此方法用在各個行業皆可。
  • 平面商業廣告banner教程
    本期改稿就是存在盲目呼應節慶等問題的包包banner!【作品簡介】這是一家時尚女性品牌包包的banner,準備在新年之際來一場團購活動。【如何分析作品?】轉眼已是第五期了,小夥伴們究竟有木有熟悉頁問的平面視覺作品四維度分析呢?
  • 色彩系列|解讀「黑色」在電商設計中的運用
    鑑於在之前的一篇文章「5招帶你玩轉電商最常用的色彩搭配!」裡我講到了關於熱鬧促銷型的電商設計最常用的顏色「紅色」在電商設計裡的運用,那麼今天我就講一下熱鬧促銷型的電商設計最忌諱的顏色「黑色」在電商設計裡的運用吧。
  • Banner樣式分析
    2.圖文關聯類    圖文關聯類一般適用於每個Banner都有一致性的文案和標籤信息展示的時候使用,例如:電商類的Enjoy。    3.文本一致類    文本一致類多用於採用不同的圖片作為背景,且圖片上都有蒙層作為遮罩,每個不同的banner上的文字大小,排版都相同。
  • 第一次做banner圖的思路
    :菜心設計鋪 這算是我第一次做banner需求,可以說學到了太多知識點,這裡感謝慢熱大佬的細心指導。 可以說,沒有慢熱大佬,就沒有我的今天的這張banner圖! 先看下成稿效果吧:
  • 點評3張照片,學會「設計」畫面
    點評二這張照片主要有以下3個問題:1.景深不夠雖然畫面中的主體是杯子的倒影,但當實物佔據畫面如此大的空間時,景深不夠造成的畫面模糊會讓觀者第一時間感覺到是對焦不準,並且畫面很糊、很肉。況且這張照片實體與影子間還可以形成線條的呼應,通過縮小光圈拍攝景深更大的畫面對於表現線條美也更有幫助。2.杯子不乾淨對於靜物攝影而言,不講主體打理乾淨再拍攝是大忌。即便再漂亮的光線,再獨特的構圖,也無法彌補物品汙漬對畫面美感的影響。
  • 「設計教程」插畫手繪入門教程
    那你恐怕就OUT了。為什麼要學習插畫?隨著移動網際網路的飛速發展,現在UI設計師的工作已經不僅僅是設計圖標或排版界面那麼簡單了,需要打造細膩、高效且更具情感化的優質用戶體驗。因此在如今的UI設計中,插畫變得越來越受歡迎,它更清晰,更時尚,也可以更加精準的傳遞信息,表現力更強,被廣泛應用於banner、H5、專題頁和海報設計,已然成為當今UI設計師們的重要設計手法。今天的文章,我們就簡單介紹一下插畫的分類,以及如何繪製一個插畫banner。
  • Banner廣告文字運用技巧!
    設計Banner時候1千萬不要不加思索地就把正文和標題文字硬生生的放上去1那會讓你的Banner顯得毫無設計技巧。很多新手容易犯這樣的錯,就算字體顏色樣式處理得很好,也會看上去很呆板。這些都是一些常見的處理方式,當然這也是 banner文字設計的基礎。有些Banner廣告為了表達動感,會根據背景圖片和主題需要對文字進行傾斜、斜切或透視等處理,有時候會令畫面達到出乎意料的效果。常規的文字排列平穩、有序,但是為了表達活力,這種排列方式則顯得不那麼合適。因此,我們可以用傾斜或者斜切打破這種穩定的構圖,讓畫面更有動感。