巧妙使用線框 讓banner設(shè)計更具設(shè)計感

資訊頻道 - 設(shè)計技 來源:中國設(shè)計在線 作者:cdo 2018-03-14

線框在banner設(shè)計中的應(yīng)用非常廣泛,不僅能夠輔助一些元素的設(shè)計,還可以為設(shè)計增色不少,增加設(shè)計感。

線作為平面構(gòu)成中三元素之一,具有非常廣泛的應(yīng)用范圍。

「線」在版式中的作用主要表現(xiàn)為:表示強(qiáng)調(diào)、明確分隔、視覺引導(dǎo)、組織信息、豐富裝飾畫面等。

在banner設(shè)計中,應(yīng)用線框也起到強(qiáng)調(diào)、視覺引導(dǎo),組織信息,豐富畫面層次等作用。接下來,我們針對一些案例分析線框在banner設(shè)計中應(yīng)用的整體特點,以及在應(yīng)用時需要注意的設(shè)計細(xì)節(jié)。線框在banner中的應(yīng)用也同樣適用于在海報等其他設(shè)計范疇,舉一反三。

01/

應(yīng)用情況分類


1. 大線框,輔助背景和整體版式

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

特點:在banner中運用線框整體形式感強(qiáng),可以起到較好的引導(dǎo)視覺的作用,用戶在看到banner的第一眼便會把注意力集中在線框內(nèi)的區(qū)域。

2. 小線框,應(yīng)用于局部文案

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

特點:在banner文案處應(yīng)用線框設(shè)計是最常見的。文案作為傳達(dá)banner信息的主要載體,在此處應(yīng)用banner可以很好的輔助設(shè)計,吸引關(guān)注,突出文案重點部分。在后面,我將專門分析線框如何應(yīng)用在文案部分。

3. 小線框,應(yīng)用于局部圖像

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

特點:在圖像周圍添加線框可以通過空間關(guān)系讓圖像更有立體感,增加設(shè)計的層次,起到突出產(chǎn)品的作用。

02/

應(yīng)用細(xì)節(jié)

上面簡單總結(jié)了線框的應(yīng)用范圍,接下來,我們結(jié)合這些應(yīng)用場景分析一下需要注意的細(xì)節(jié)與設(shè)計思路。

1. 封閉&不封閉

封閉的線框透氣性差一些,但在視覺上更規(guī)范、穩(wěn)重。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

不封閉的線框最為常見,透氣,具有較強(qiáng)的設(shè)計感,能夠發(fā)揮的的設(shè)計空間也很廣。

在具體設(shè)計時,有兩種方式可以打破線框。

直接選擇切斷部位斷開

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

在線框軌跡上疊加其它元素(文案、圖片等)斷開

此種方式較常見,可以利用文案、圖像與線框的空間關(guān)系塑造空間感,使線框與整體更好的融合在一起。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

2. 粗線條&細(xì)線條

粗線條能夠更加引人注目,個性十足

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

細(xì)線條顯得細(xì)膩、柔美、輕盈

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

3. 虛&實

在線框的應(yīng)用中有虛實的區(qū)分!柑摗沟木框在呈現(xiàn)形式上很靈活,較容易結(jié)合自己的創(chuàng)意,若隱若現(xiàn),沒有實線那么強(qiáng)烈的空間存在感。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

4. 線框形狀

線框的形狀比較靈活,我們可以根據(jù)設(shè)計靈活調(diào)整,最常見的是矩形,可以平衡畫面,規(guī)整,方便排版。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

三角形的線框輔助可以加強(qiáng)視覺沖擊力,營造個性、別致的感覺。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

圓形線框起到聚焦視覺中心點的作用,通常應(yīng)用在文案的強(qiáng)化設(shè)計中。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

其它形狀具有更多的發(fā)揮空間和個性,但不要過于復(fù)雜。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

5. 表現(xiàn)形式

線框雖然看似簡單,但也可以有很豐富的表現(xiàn)形式,通過對線框的「強(qiáng)化設(shè)計」,可以豐富線框的設(shè)計感。

巧用漸變

豐富畫面、個性絢麗。在深色背景中加入線框時,一般選用白色,但如果文字和線框都為白色,往往會感覺單調(diào),此時將線框改為漸變色是個不錯的選擇。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

紋理、質(zhì)感

加入特殊的紋理、質(zhì)感,可以與其他元素保持風(fēng)格統(tǒng)一,使畫面更協(xié)調(diào)。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

創(chuàng)意結(jié)合

結(jié)合主題的創(chuàng)意線框讓人眼前一亮。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

不規(guī)則變化

不規(guī)則的變形可以增加俏皮的感覺,不死板。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

利用背景元素設(shè)計

使線框與整體搭配更統(tǒng)一、協(xié)調(diào)。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

03/

排版方式探索

這部分主要總結(jié)一下線框在應(yīng)用過程與文案、圖片結(jié)合時常見的設(shè)計方式。

1. 與文案

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

圖示中的案例是以矩形作為基礎(chǔ),如果小伙伴們應(yīng)用了三角形或其它形狀,在與文案結(jié)合時也基本類似,靈活設(shè)計即可。

找了一些三角形案例:

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

2. 與圖片

圖片與線框結(jié)合可以豐富畫面,增強(qiáng)設(shè)計感。

如何巧用線條,讓你的Banner 更有<a href=http://www.edabuilding.com/ target=_blank class=infotextkey>設(shè)計</a>感?

好了,到這里總結(jié)了在學(xué)習(xí)banner設(shè)計過程中出現(xiàn)的線框的一些用法與設(shè)計特點,也希望在以后的設(shè)計工作中能夠靈活運用這種元素。不知道大家看完有什么啟發(fā)和建議呢?歡迎留言。

通過這次總結(jié)使我認(rèn)識到無論是生活還是設(shè)計,處處都存在細(xì)節(jié),而且都有一定的規(guī)律可循,所以我也強(qiáng)烈推薦大家在設(shè)計時留心各種設(shè)計形式和自己覺得很棒的設(shè)計元素,做好總結(jié)。雖然看起來現(xiàn)在沒有什么用處,但要相信厚積而薄發(fā)。


聲明:站內(nèi)網(wǎng)友所發(fā)表的所有內(nèi)容及言論僅代表其本人,并不反映任何網(wǎng)站意見及觀點。

全部評論

暫無相關(guān)推薦