首頁技術(shù)文章正文

電商Banner圖如何設(shè)計?有什么方法?

更新時間:2021-02-05 來源:黑馬程序員 瀏覽量:

1612503589612_電商封面.png


什么是真正好的排版,我覺得起碼要做到清晰易讀、信息突出并且觀感上舒服好看在這個基礎(chǔ)上有突出的設(shè)計感、形式感,就是正真好的排版怎么做?電商banner圖該如何設(shè)計?


空間變化形式

3個部分決定排版的步驟和方法,咱們分步來說

第1招-空間

空間是文字之間、圖文之間的排列關(guān)系,是排版的第一步和基礎(chǔ)一張圖的空間關(guān)系即構(gòu)圖自一開始就影響到整體的走向和最終的成型,所以在設(shè)計之初,一定得經(jīng)過深思熟慮,深入了解文字的多少、圖形的類型和設(shè)計要求和感覺選擇對應的構(gòu)圖和圖文結(jié)構(gòu)關(guān)系。溝通大致包括但不限于以下幾類:

電商banner圖設(shè)計技巧02

上面說的沒有必要刻意記住,大體思路理解即可有個最簡單的方法:在作圖之初有一個簡單的草圖,標明文字、圖形大體的位置關(guān)系形成初步的構(gòu)圖感覺和排版感覺,不至于做不下去后推倒重來影響時間。

第2招變化

我們可以通過變化對齊方式、大小、粗細、角度、字體、顏色、錯落方式等來說明各種排版變化方式帶來的不同結(jié)果和感覺。

導入測試題:

文案:

潮品新貨煥新大賞

女裝夏季8折嗨促

僅4天5.26-5.29

尺寸要求:700x330px

圖片:
電商banner圖設(shè)計技巧03

電商banner圖設(shè)計技巧04

對齊、大小、粗細對比是排版最基本的三大要素,是之后所有排版方式的基礎(chǔ)

①起碼有一邊對齊,才會使版式整潔易讀,層次清晰

②大小和粗細的對比做到了主次分明。BANNER設(shè)計的目的,其實就是最大化的呈現(xiàn)給用戶活動的信息,要讓最重要的,最有利的信息一瞬間就傳遞給他們,通過對比即可使信息的傳遞層次清晰。

電商banner圖設(shè)計技巧04

電商banner圖設(shè)計技巧05

角度不限于示例這種。對排版進行角度變化,會增加失衡和速度感。是促銷類的BANNER常用的方式往往對應斜構(gòu)圖的背景,增加整體氣氛。也有增加透視類的角度變化。

電商banner設(shè)計技巧07

第一個:清秀的方正書意宋,第二了:霸氣的蒙納超剛黑(只為示意請勿轉(zhuǎn)載用于商用),稍微變換板式,出來了兩種不同的感覺,雖然都是買買買,但是第一個明顯是清新委婉的,第二種擺明了就是要放折扣大招的樣子。字體對排版的重要性不言而喻。

電商banner設(shè)計技巧08

還是上面的示意,顏色的變化一是根據(jù)整個設(shè)計選擇顏色,二是類似上圖對需要突出的信息進行顏色的突出,是最常用易用的方式。

電商banner設(shè)計技巧09

一般萌系、食品類和扁平化等等的BANNER上,都需要這類隨意輕快、錯落有序的排版。設(shè)計過程中,適當對字進行大小變化和旋轉(zhuǎn),并且選擇一些卡通化、手寫體的字體,會有不錯的效果。

還有另一類錯落的板式也比較常見,如下圖所示,宋體字、毛筆字排版非常易用。

第3招-形式

形式簡單可理解為對排版的輔助,他們不搶眼,但是加入后又能使版式不單板,善用可以使整個排版高大上,也能使邏輯結(jié)構(gòu)更加清晰。

電商banner設(shè)計技巧11


圖形輔助一般用基礎(chǔ)的方圓三角等或者有特殊含義的圖形(天貓、阿里旺旺剪影)為依托進行文字排版,可起到突出文本、增強對比、增加結(jié)構(gòu)感設(shè)計感的作用。

電商banner設(shè)計技巧12


以線條分割進行區(qū)塊劃分增加對比,也可用線條和圖形進行串聯(lián),亦或聚焦視線,簡潔有力,近期大量用于時尚簡潔類的設(shè)計中。

電商banner設(shè)計技巧12

用圖形結(jié)合文字和視覺,達到整體統(tǒng)一。

總結(jié):

排版的重要性不言而喻,通過上面的3大步介紹,應該能對電商BANNER的排版有個初步直觀的認識,相信通過學習和大量練習,每個人都能掌握其中的奧妙。方法遠不止此,而創(chuàng)意應更遠。


猜你喜歡:

UI設(shè)計是什么?UI設(shè)計師有哪些職能?

色彩心理學:常見色彩的象征意義

色彩構(gòu)成概述

賽博朋克照片處理技法

傳智教育全鏈路UI/UE設(shè)計課程

分享到:
在線咨詢 我要報名
和我們在線交談!