素材low?看我玩轉(zhuǎn)百變中文排版
素材low?若照片本身夠搶眼或者主題很明確,光是一張圖鋪滿畫(huà)面,打幾個(gè)字就足夠了
但,哪有那么好的事?客戶一般都是懟一張很丑的照片,就像上圖一樣,這么low,想要高級(jí)感,要設(shè)計(jì)感,咋辦?那這時(shí)設(shè)計(jì)上就必須下多工夫
其實(shí),一張丑圖片其實(shí)也可以靠版式玩出花來(lái),例如,將照片裁成正方形,或者將邊角調(diào)成圓弧,整體氣氛就已經(jīng)會(huì)不一樣了,此外,也可以巧妙運(yùn)用留白,讓自己有更多的空間發(fā)揮
下面我就用上面那張圖,用6種方法來(lái)化腐朽為神奇:
將版面2等分
依照片的構(gòu)圖或內(nèi)容,將版面分割成上下或者左右兩等分,其中一半配圖片,一半配文字的簡(jiǎn)單設(shè)計(jì)。根據(jù)照片的構(gòu)圖以及拍攝的主題來(lái)決定橫切還是豎切
△ 左右分割的版面,左邊是圖右邊是字,右邊字體采用直排居中,以取得視覺(jué)平衡,照片處理成直長(zhǎng)型,看起來(lái)會(huì)比較有新鮮感
△ 上下分割的版面,圖在上,將圖裁切到合適的樣式;字在下,用大標(biāo)題居右,小文字居左,頂對(duì)齊,左下角有個(gè)小標(biāo)作為點(diǎn)綴,取得視覺(jué)平衡感
△ 上下分割的版面,圖在下,同樣將圖裁切到合適的樣式;字在上,因?yàn)閳D在下方比較視覺(jué)感重,所以用大標(biāo)題居中,其他同理與上一個(gè),原因都是為取得視覺(jué)平衡感
滿版設(shè)計(jì),添加文字區(qū)域
使用最大尺寸的照片,讓照片充滿整個(gè)版面,再在滿版照片上覆蓋一個(gè)正方形區(qū)域,將文字編排在方形區(qū)域中。方形的尺寸和位置要把握好,避免破壞圖片的構(gòu)圖和氣氛
△ 將樹(shù)作為主體放在黃金分割的位置,對(duì)稱的地方安排文字區(qū)域,有視覺(jué)連貫性的作用
△ 將文字區(qū)域安排在最上方,無(wú)論照片構(gòu)圖如何,都可以營(yíng)造出井然有序的版式
切成正方形圖片,留出空間
將圖片切成正方形,并放大到滿版寬度的設(shè)計(jì),將照片編排在上中下的哪個(gè)位置,呈現(xiàn)的效果氣氛都會(huì)有所不同。正方形照片給人工整感,所以可以運(yùn)用文字來(lái)增加變化
△ 正方形有時(shí)會(huì)太過(guò)工整,可以用直排文字來(lái)破開(kāi)畫(huà)面,讓版式更加豐富
△ 配合裁切適當(dāng)?shù)漠?huà)面,加上規(guī)矩的版式,給人安靜,舒適的感受
△ 將正方形安排在正中央,文字分別配在圖片上、下區(qū)域,明確出標(biāo)題和正文的差別
設(shè)置圓角
在版面四周留白,并配上圓角照片。去掉尖銳的直角,讓整體印象變得柔和
△ 結(jié)合上一個(gè)方法的圖片切割,將裁切成正方形的圓角安排在下方,給人更柔和的感受
△ 依整個(gè)版面的長(zhǎng)寬比例,將圓角圖片裁成接近的比例,縮小,可營(yíng)造出一定的空間感
配半透明色塊
在覆蓋版面照片上來(lái)排版時(shí),可以參照上述第二個(gè)方法。配半透明色塊的好處是不會(huì)破壞照片整體的氣氛,既能讓照片和文字和諧,又能同時(shí)確??勺x性。
△ 配置半透明白色塊,保留照片原有的風(fēng)格氣氛
△ 同樣根據(jù)畫(huà)面的氛圍,更改色塊形狀
將照片和文字傾斜編排
將照片和文字都水平編排是基本的做法,有時(shí)還是會(huì)有感覺(jué)到死板,如果這時(shí)將其傾斜,便會(huì)產(chǎn)生動(dòng)感,變成輕松活潑的設(shè)計(jì)。有一點(diǎn)需要注意,過(guò)多傾斜會(huì)變得難以閱讀,或照片主體難以辨別,因此角度不宜過(guò)大
△ 將照片和文字傾斜編排,讓畫(huà)面產(chǎn)生動(dòng)態(tài)感
△ 這個(gè)方式和第一個(gè)方法對(duì)半切是同理的,左右兩邊各自分配,同時(shí)也可感受到賦予傾斜角度時(shí)所展示的動(dòng)感
來(lái)源:設(shè)計(jì)便利店(id:designmart)
其他設(shè)計(jì)排版的優(yōu)秀教程
海報(bào)文字排版設(shè)計(jì)欣賞
http://pkvc.cn/Tutorial/di285.html
視覺(jué)排版中元素運(yùn)用
http://pkvc.cn/Tutorial/ui3571.html
排版圣經(jīng)!閱讀邏輯與視線的引導(dǎo)
本文地址:http://pkvc.cn/tutorial/ui4092.html
您可能還喜歡
- 經(jīng)典網(wǎng)頁(yè)配色方案之無(wú)色系
- 對(duì)齊!框框框!ps中對(duì)齊和參考線詳解
- banner實(shí)戰(zhàn)技巧-版式平衡構(gòu)圖
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏大視
- 如何成功運(yùn)用扁平化設(shè)計(jì)與色彩趨勢(shì)
- 做有思想的網(wǎng)頁(yè)設(shè)計(jì)-banner實(shí)例講解
- [圖趣]色彩搭配的核心原則和聯(lián)想
- 扁平化設(shè)計(jì)與可訪問(wèn)性
- 網(wǎng)頁(yè)設(shè)計(jì)專(zhuān)題技巧淺析
- WEB設(shè)計(jì)中的排版
- 專(zhuān)訪:石墨文檔產(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ì)系列文章(二):全屏