八種很漂亮的排版方法和技巧分享
總結(jié)了8個(gè)有助于排出悅目版式的技巧,僅供參考。
一、使用長(zhǎng)線(xiàn)
行使長(zhǎng)線(xiàn)排版這個(gè)技巧應(yīng)該許多人都用過(guò),但是它并沒(méi)有想象的那么簡(jiǎn)單,假如運(yùn)用得不恰當(dāng),不但不會(huì)悅目,還會(huì)顯得很死板。長(zhǎng)線(xiàn)在排版中的使用一樣平常是為了知足以下幾個(gè)需求。
1.區(qū)隔信息
即行使長(zhǎng)線(xiàn)條把版面里不同類(lèi)型的信息區(qū)分開(kāi),你可以根據(jù)現(xiàn)實(shí)情況來(lái)選擇使用虛線(xiàn)照舊實(shí)線(xiàn),覺(jué)得詬誶線(xiàn)單調(diào)的話(huà)也可以給它點(diǎn)顏色瞧瞧,使用長(zhǎng)線(xiàn)區(qū)隔信息可以使其看起來(lái)更清晰,更方便受眾閱讀,同時(shí)還可以起到規(guī)整的作用,使版面不至于太凌亂。
![八種很漂亮的排版方法和技巧分享 三聯(lián)](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128678.jpg)
▲假如一個(gè)版面內(nèi)的信息層級(jí)關(guān)系許多,我們可以同時(shí)使用細(xì)線(xiàn)和粗線(xiàn)來(lái)進(jìn)行劃分。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128274.jpg)
▲上圖使用的是紅色虛線(xiàn),使用虛線(xiàn)會(huì)顯得沒(méi)那么生硬。
2.裝飾
我們?cè)谂虐鏁r(shí)經(jīng)常會(huì)碰到如許的情況,信息并不是許多,也不適合加圖片,所以整個(gè)版面容易顯得單調(diào)和平淡,這時(shí)我們可以行使長(zhǎng)線(xiàn)來(lái)雄厚版面,在增長(zhǎng)美感的同時(shí)還能增長(zhǎng)設(shè)計(jì)感。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128864.jpg)
▲斜線(xiàn)經(jīng)常被當(dāng)做剪刀用,俗稱(chēng)“一剪沒(méi)”。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128766.jpg)
▲上圖筆墨頂部增長(zhǎng)的直線(xiàn)使該排版看起來(lái)更專(zhuān)業(yè)。
3.建立固定版式
在畫(huà)冊(cè)或報(bào)紙的排版中,一樣平常會(huì)有一些固定不變的信息放在頂部或底部,作為模板出現(xiàn),行使長(zhǎng)線(xiàn)來(lái)輔助建立這種固定版式也是屢試不爽的技巧。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128770.jpg)
▲在畫(huà)冊(cè)排版時(shí)設(shè)計(jì)一個(gè)固定版式,可以讓版面看上去更細(xì)膩。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128898.jpg)
▲用長(zhǎng)線(xiàn)建立版式的同時(shí)也能起到分隔信息的作用。
4.強(qiáng)調(diào)
在筆墨下面加直線(xiàn)還能起到強(qiáng)調(diào)信息的作用,就像我們曩昔看書(shū)的時(shí)候劃重點(diǎn)一樣,指導(dǎo)到受眾把目光聚焦在此。
![df4558c68b36a801219c77e1c751.jpg](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128989.jpg)
▲線(xiàn)條是直照舊彎應(yīng)該跟設(shè)計(jì)師的性取向沒(méi)毛關(guān)系。
二、使用短線(xiàn)
短線(xiàn)的功能和長(zhǎng)線(xiàn)大同小異,雖然沒(méi)有長(zhǎng)線(xiàn)用得那么普遍,但偶然候更好用,分外是在網(wǎng)頁(yè)設(shè)計(jì)、UI設(shè)計(jì)、咭片設(shè)計(jì)中,我們能經(jīng)??吹蕉叹€(xiàn)的身影。短線(xiàn)的用法有如下幾種:
1.區(qū)隔信息
行使短線(xiàn)區(qū)隔信息比長(zhǎng)線(xiàn)要更天真一點(diǎn),不會(huì)造成太規(guī)矩的結(jié)果,而且雖然是短線(xiàn),但是受眾經(jīng)常會(huì)腦補(bǔ)把它延伸。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128895.jpg)
▲當(dāng)然,偶然候是由于信息比較短,所以用短線(xiàn)更合適。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128368.jpg)
▲上圖的短線(xiàn)除了分隔信息外還起到了點(diǎn)綴的作用。
2.裝飾
短線(xiàn)也是可以用來(lái)裝飾的,把短線(xiàn)放在筆墨信息的前面、或者相對(duì)應(yīng)的留白區(qū)域,再選擇合適的顏色,可以有用雄厚版面。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128811.jpg)
▲在筆墨的下一行位置加短線(xiàn)
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128536.jpg)
▲在筆墨對(duì)應(yīng)的空白區(qū)域加短線(xiàn)
3.歸類(lèi)
就是用一條短線(xiàn)把一部分信息歸為一類(lèi),一樣平常采用豎線(xiàn)。把筆墨左對(duì)齊或右對(duì)齊,然后在對(duì)齊的一壁加一條長(zhǎng)于或等于這段筆墨的直線(xiàn),跟大括號(hào)的用法差不多,但是要更悅目一些,在信息類(lèi)別比較多的版面中很實(shí)用,如下圖:
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128652.jpg)
▲在目錄中使用短線(xiàn)是最合適不過(guò)的了。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128898.jpg)
▲上面的這些短線(xiàn)都有點(diǎn)長(zhǎng)?那我們就叫它長(zhǎng)長(zhǎng)的短線(xiàn)吧。
三、使用色塊
使用色塊進(jìn)行排版也很是實(shí)用的一項(xiàng)技巧,而且容易營(yíng)造時(shí)尚的感覺(jué),經(jīng)常被用在畫(huà)冊(cè)和網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中,色塊在版式中的重要用途有以下幾個(gè):
1.劃分區(qū)域
在畫(huà)冊(cè)或網(wǎng)頁(yè)設(shè)計(jì)中,可以用色塊來(lái)劃分區(qū)域,一個(gè)色塊承載一塊信息,使該色塊內(nèi)的內(nèi)容與其他信息區(qū)別開(kāi)來(lái),假如色塊較多時(shí)最好讓它們形成肯定的節(jié)奏感,比如呈同一或漸變結(jié)果。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128265.jpg)
▲色塊在劃分區(qū)域的同時(shí)還能把一些看起來(lái)比較零散的信息組合起來(lái)。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128485.jpg)
▲上圖的三個(gè)色塊各使用了不同的顏色,且故意上下錯(cuò)開(kāi)創(chuàng)造節(jié)奏感。
2.凸起重點(diǎn)
凸起重點(diǎn)信息的體例有許多,把它放在色塊中也是一種不錯(cuò)的方法,筆墨和色塊要使用對(duì)比色。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128634.jpg)
▲上圖的色塊是為了凸起扣頭信息。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128889.jpg)
▲上圖的色塊是為了凸現(xiàn)題目。
3.星散背景
當(dāng)我們?cè)趫D片上排筆墨的時(shí)候,因?yàn)閳D片的明暗關(guān)系不是太平均,所以會(huì)影響筆墨的閱讀性,這時(shí)在筆墨底部增長(zhǎng)色塊是一個(gè)不錯(cuò)的方法,假如把背景圖調(diào)成詬誶,再使用顏色美麗的色塊結(jié)果會(huì)更好。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128905.jpg)
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128391.jpg)
▲假如想保留背景圖片的完備性,也可以適當(dāng)降低色塊的透明度,或者使用正片疊底結(jié)果。
4.雄厚設(shè)計(jì)情勢(shì)(裝飾)
色塊自己就是具有強(qiáng)烈設(shè)計(jì)感的元素,所以我們可以用色塊來(lái)進(jìn)行構(gòu)圖,比如用幾個(gè)色塊組合成一個(gè)圖形,或者通過(guò)色彩搭配制造對(duì)比,都可以做出很漂亮且有特色的設(shè)計(jì)。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128967.jpg)
▲上圖的色塊其實(shí)是左上角品牌標(biāo)志的延展,構(gòu)圖很分外。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128360.jpg)
▲上面這款包裝頂部的橙色在大面積的白色對(duì)比下顯得十分顯眼,成為了該包裝的最大亮點(diǎn)。
四、使用線(xiàn)框
線(xiàn)框和色塊的用法有許多雷同的地方,但區(qū)別也不小,首先線(xiàn)框沒(méi)有色塊那么有視覺(jué)沖擊力,其次,由于線(xiàn)框的框內(nèi)是沒(méi)有顏色的,所以更適合把圖片也一同框起來(lái)了,而色塊重要用來(lái)承載筆墨信息。線(xiàn)框重要的用法有以下3種:
1.信息分組
用線(xiàn)框來(lái)把版面內(nèi)的信息進(jìn)行分組,跟色塊的用法是同樣的意思,這里就不多說(shuō)了,直接看例子吧。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128382.jpg)
▲上圖右側(cè)用線(xiàn)框把信息分為三組,粗一點(diǎn)的彩色線(xiàn)框還很時(shí)尚。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128107.jpg)
▲線(xiàn)框的風(fēng)格應(yīng)該與設(shè)計(jì)的團(tuán)體風(fēng)格同等。
2.信息組織
零散的信息可能會(huì)造成版面紊亂,用線(xiàn)框把臨近的信息框在一路是一個(gè)有用的解決辦法。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128984.jpg)
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128241.jpg)
▲在這密集恐驚癥的版面中,還好設(shè)計(jì)師用線(xiàn)框守住了信息區(qū)域附近的一片“凈土”。
3.裝飾
根據(jù)版面尺寸、設(shè)計(jì)元素,合理的使用線(xiàn)框可以使作品更有設(shè)計(jì)感和美感,如:用圖片貫穿線(xiàn)框,塑造一種突破約束的感覺(jué),或者把線(xiàn)框直接作為版面邊緣的裝飾線(xiàn)條花邊等。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128536.jpg)
▲在卡片的設(shè)計(jì)中用細(xì)線(xiàn)框裝飾在邊緣,有點(diǎn)小小的文藝氣息。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128482.jpg)
▲行使規(guī)則的線(xiàn)框與圖片錯(cuò)開(kāi)制造沖突。
五、把筆墨排成一個(gè)分外的外形
正常情況下我們都會(huì)把段落筆墨排成小方塊,但是對(duì)于那些要求不是太規(guī)矩的設(shè)計(jì),我們也可以嘗試把段落筆墨排成一些故意思的外形,例如把表達(dá)愛(ài)情的筆墨排成心形,把闡述環(huán)保的內(nèi)容排成樹(shù)的外形等。這些分外的外形會(huì)比方方正正的筆墨更具視覺(jué)沖擊,看上去也會(huì)更天真更風(fēng)趣,不過(guò)太花哨的外形會(huì)降低筆墨的閱讀性,要慎用。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128236.jpg)
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128116.jpg)
▲上圖的筆墨被排成平行四邊形,雖然算不上太分外,但是也造成了一種不穩(wěn)固的感覺(jué),在周邊筆墨的搭配下顯得個(gè)性十足。
六、文本繞排
即把筆墨繞著圖片的外輪廓進(jìn)行排版,這種手法在畫(huà)冊(cè)、雜志或報(bào)紙的排版中比較多見(jiàn),由于筆墨要充足多才能達(dá)到結(jié)果,使用文本繞排時(shí),圖片要用異形結(jié)果才會(huì)比較好,而且圖片要盡量大一點(diǎn),此方法最適合創(chuàng)造視覺(jué)沖擊。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128944.jpg)
▲上圖的版面中不僅運(yùn)用了筆墨繞排,同時(shí)還用了大小對(duì)比、稀少對(duì)比、留白等技巧,有點(diǎn)叼。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128217.jpg)
▲上圖報(bào)紙中的圖片選得特別很是好,既有空間感又有動(dòng)感,筆墨與圖片也結(jié)合得很緊密,營(yíng)造出了一種車(chē)從報(bào)紙里沖出來(lái)了的感覺(jué)。
關(guān)于文本繞排,我順便說(shuō)一下操作方法,假如是用AI排版,你必要先把圖片在PS里去底,存為PSD格式的文件,然后把該文件直接拖入AI,嵌入文件后選擇可編輯選項(xiàng),再點(diǎn)擊右鍵選擇釋放剪切蒙板,接著把圖片放入文本中,同時(shí)選中文本與圖片,點(diǎn)擊在菜單欄對(duì)象-文本繞排-建立就可以了。
而在CDR中的操作方法則要復(fù)雜一點(diǎn)點(diǎn),你必要用貝塞爾工具再把圖片的外輪廓勾出來(lái),然后再單機(jī)右鍵選擇段落文本換行-輪廓圖-跨式文本即可。
七、對(duì)齊
由于對(duì)齊排版能夠制造一種穩(wěn)固、整齊、同一的感覺(jué),最緊張的是便于閱讀,所以,幾乎是在任何版式中都要用到該技巧。看似很簡(jiǎn)單的技巧,其實(shí)里面也大有學(xué)問(wèn),有許多良好的設(shè)計(jì)作品中都暗藏了許多對(duì)齊的玄機(jī),但是過(guò)份的強(qiáng)調(diào)對(duì)齊也會(huì)讓版面顯得很死板,于是有些設(shè)計(jì)師就喜好有心制造凌亂,效果總是弄巧成拙。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128921.gif)
▲跟我一路唱:左對(duì)齊、右對(duì)齊、上對(duì)其、下對(duì)齊、左右對(duì)齊、居中對(duì)齊。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128880.gif)
▲上圖的設(shè)計(jì)師一定有對(duì)齊強(qiáng)迫癥,不過(guò)結(jié)果確實(shí)不錯(cuò)。
八、文疊圖
跟使用色塊不同的是,文疊圖不必要其他元素的輔助,而是直接把筆墨疊在圖片上,所以必須要保持筆墨的可識(shí)別性。而且不要把所有筆墨都放在圖片內(nèi),而是只放一部分,與圖片形成交叉的關(guān)系。這種排版的上風(fēng)在于對(duì)比結(jié)果強(qiáng)烈,且讓筆墨與圖片形成了緊密的互動(dòng),不會(huì)有各自孤立的感覺(jué)。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128284.jpg)
▲采用不規(guī)則的異性圖片來(lái)處理結(jié)果也不錯(cuò),圖片的顏色最好不要太多太艷。
![](http://www.irelandcustomcontracting.com/UploadFiles/2017-03/2/20170317155128714.jpg)
▲劃一的筆墨與矩形的圖片交叉疊加,既平穩(wěn)和諧又有種沖破約束的感覺(jué)。
每一個(gè)技巧的使用都是有目的的,要么為了美觀(guān),要么為了方便閱讀,而不是為了炫技,所以在分析每個(gè)技巧時(shí),我都說(shuō)明了之所以這么做的益處,這是必要大家真正去理解的。
這么多經(jīng)典的作品,就算大家不看筆墨,純看圖片都可以從中學(xué)到不少是不是?不過(guò),忠實(shí)說(shuō)你們到底認(rèn)真看了筆墨沒(méi)有啊?別襲擊老人家好不好。
本文地址:http://www.irelandcustomcontracting.com/tutorial/di15.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線(xiàn)面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專(zhuān)題頁(yè)面設(shè)計(jì)篇
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏