當(dāng)前位置:圖趣網(wǎng)(Tuquu) > 網(wǎng)頁設(shè)計教程 > 視覺設(shè)計 > 素材low?看我玩轉(zhuǎn)百變中文排版

素材low?看我玩轉(zhuǎn)百變中文排版

素材low?若照片本身夠搶眼或者主題很明確,光是一張圖鋪滿畫面,打幾個字就足夠了

但,哪有那么好的事?客戶一般都是懟一張很丑的照片,就像上圖一樣,這么low,想要高級感,要設(shè)計感,咋辦?那這時設(shè)計上就必須下多工夫

其實,一張丑圖片其實也可以靠版式玩出花來,例如,將照片裁成正方形,或者將邊角調(diào)成圓弧,整體氣氛就已經(jīng)會不一樣了,此外,也可以巧妙運用留白,讓自己有更多的空間發(fā)揮

下面我就用上面那張圖,用6種方法來化腐朽為神奇:

將版面2等分

依照片的構(gòu)圖或內(nèi)容,將版面分割成上下或者左右兩等分,其中一半配圖片,一半配文字的簡單設(shè)計。根據(jù)照片的構(gòu)圖以及拍攝的主題來決定橫切還是豎切

△ 左右分割的版面,左邊是圖右邊是字,右邊字體采用直排居中,以取得視覺平衡,照片處理成直長型,看起來會比較有新鮮感

△ 上下分割的版面,圖在上,將圖裁切到合適的樣式;字在下,用大標(biāo)題居右,小文字居左,頂對齊,左下角有個小標(biāo)作為點綴,取得視覺平衡感

△ 上下分割的版面,圖在下,同樣將圖裁切到合適的樣式;字在上,因為圖在下方比較視覺感重,所以用大標(biāo)題居中,其他同理與上一個,原因都是為取得視覺平衡感

滿版設(shè)計,添加文字區(qū)域

使用最大尺寸的照片,讓照片充滿整個版面,再在滿版照片上覆蓋一個正方形區(qū)域,將文字編排在方形區(qū)域中。方形的尺寸和位置要把握好,避免破壞圖片的構(gòu)圖和氣氛

△ 將樹作為主體放在黃金分割的位置,對稱的地方安排文字區(qū)域,有視覺連貫性的作用

△ 將文字區(qū)域安排在最上方,無論照片構(gòu)圖如何,都可以營造出井然有序的版式

切成正方形圖片,留出空間

將圖片切成正方形,并放大到滿版寬度的設(shè)計,將照片編排在上中下的哪個位置,呈現(xiàn)的效果氣氛都會有所不同。正方形照片給人工整感,所以可以運用文字來增加變化

△ 正方形有時會太過工整,可以用直排文字來破開畫面,讓版式更加豐富

△ 配合裁切適當(dāng)?shù)漠嬅妫由弦?guī)矩的版式,給人安靜,舒適的感受

△ 將正方形安排在正中央,文字分別配在圖片上、下區(qū)域,明確出標(biāo)題和正文的差別

設(shè)置圓角

在版面四周留白,并配上圓角照片。去掉尖銳的直角,讓整體印象變得柔和

△ 結(jié)合上一個方法的圖片切割,將裁切成正方形的圓角安排在下方,給人更柔和的感受

△ 依整個版面的長寬比例,將圓角圖片裁成接近的比例,縮小,可營造出一定的空間感

配半透明色塊

在覆蓋版面照片上來排版時,可以參照上述第二個方法。配半透明色塊的好處是不會破壞照片整體的氣氛,既能讓照片和文字和諧,又能同時確??勺x性。

△ 配置半透明白色塊,保留照片原有的風(fēng)格氣氛

△ 同樣根據(jù)畫面的氛圍,更改色塊形狀

將照片和文字傾斜編排

將照片和文字都水平編排是基本的做法,有時還是會有感覺到死板,如果這時將其傾斜,便會產(chǎn)生動感,變成輕松活潑的設(shè)計。有一點需要注意,過多傾斜會變得難以閱讀,或照片主體難以辨別,因此角度不宜過大

△ 將照片和文字傾斜編排,讓畫面產(chǎn)生動態(tài)感

△ 這個方式和第一個方法對半切是同理的,左右兩邊各自分配,同時也可感受到賦予傾斜角度時所展示的動感

來源:設(shè)計便利店(id:designmart)


其他設(shè)計排版的優(yōu)秀教程

海報文字排版設(shè)計欣賞

http://m.likemindfilms.com/Tutorial/di285.html

視覺排版中元素運用

http://m.likemindfilms.com/Tutorial/ui3571.html

排版圣經(jīng)!閱讀邏輯與視線的引導(dǎo)

http://m.likemindfilms.com/Tutorial/di3490.html

[教程作者:設(shè)計便利店]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ui4092.html
【野蠻生長】三種技巧搞定你的背景
放大招!如何快速的完成一個店鋪首頁?
圖趣網(wǎng)微信
建議反饋
×