“?
在一個(gè)作品中，我們主要需要考慮三種因素：文案索烹、圖片百姓、文案與圖片的關(guān)系垒拢。
”
嗨，你今天過的好嗎尸疆？我是寫給設(shè)計(jì)的值班人豆豆寿弱。
今天這篇文章，要和你分享的是圖文排版方面的一些實(shí)用技巧噪矛，希望你喜歡摩疑。
1.文案
在設(shè)計(jì)過程中，第一個(gè)需要考慮的應(yīng)該是文案楷怒，因?yàn)樗覀冃枰宫F(xiàn)給用戶的最重要的信息。在進(jìn)行整體設(shè)計(jì)時(shí)刃泡，應(yīng)該對文案的部分有整體的把握：
首先、確定文案桨踪，用最簡短的話說清楚最詳細(xì)的內(nèi)容，精簡文案墓怀，讓用戶捕捉到有用信息疏虫；
第二、確定文案的優(yōu)先級翅敌，明確主治专、副標(biāo)題及內(nèi)容的關(guān)系张峰，區(qū)別性對待，可以根據(jù)字體的大小饶深、粗細(xì)對比進(jìn)行關(guān)系強(qiáng)調(diào)；
第三逛拱、根據(jù)文案確定結(jié)構(gòu)敌厘，對內(nèi)容文案進(jìn)行塊狀組合，可以增強(qiáng)結(jié)構(gòu)性朽合，在閱讀時(shí)用戶的習(xí)慣是從上到下俱两、從左到右，在對文案進(jìn)行排版時(shí)可以遵循這一規(guī)則曹步，使用左對齊與居中對齊是最保險(xiǎn)的選擇锋华。
最后毯焕、根據(jù)圖片背景確定文案的位置芜辕。文案的位置要根據(jù)圖片進(jìn)行選擇状蜗，如何處理文案與圖片的關(guān)系是圖文排版的重中之重蜜氨。
▲?長按圖片保存可分享至朋友圈
2.圖片
圖片有兩種：
一是圖片內(nèi)容渔呵，根據(jù)設(shè)計(jì)需要進(jìn)行的內(nèi)容填充與裝飾爷辱。
二是圖片背景咏花。這里主要討論后者棚菊。背景圖片的選擇是根據(jù)設(shè)計(jì)主題而定码邻，如果你沒有高質(zhì)量的圖片素材开睡，會事倍功半胁艰，分享幾個(gè)可免費(fèi)商用的高質(zhì)量圖片網(wǎng)站攘须，讓你一次選到切合主題的背景圖片。
我曾經(jīng)寫過一篇關(guān)于圖片素材網(wǎng)站的文章宵蛀，僅供你參考：還在百度圖片征候？高清美圖和GIF動圖素材網(wǎng)站，拿走不謝！
▲?長按圖片保存可分享至朋友圈
3.文案與圖片的關(guān)系
想要把文案與圖片完美結(jié)合退唠，除了大的結(jié)構(gòu)問題扔茅，也需要細(xì)節(jié)的豐富和完善秸讹，我們進(jìn)行圖文關(guān)系處理時(shí)凿将，可以從以下幾個(gè)方面進(jìn)行入手：
（1）強(qiáng)化對比涕蜂，增強(qiáng)可讀性
巧用對比色和補(bǔ)色源梭，可以增強(qiáng)信息的可讀性慎冤，青與紅色、黃色與藍(lán)色绍刮、黑與白等冷暖對比是設(shè)計(jì)中常用到的經(jīng)典配色非剃。根據(jù)主題選擇主色，小范圍使用另一種顏色進(jìn)行搭配裝飾，產(chǎn)生視覺張力，快速抓住用戶的注意力。
通過調(diào)整顏色的明度與飽和度，可以達(dá)到對比的效果。上圖的案例中使用綠植為背景，紅色自然可以突出文案信息飞蚓，但紅色在本案例中的使用效果會顯得突兀著榴，因此選擇無色系進(jìn)行搭配。通過左右兩圖严卖，可以看到明暗對比的重要性本讥。
除了色彩方面衡创，文字同樣也可以產(chǎn)生對比抑月。在字體選擇時(shí)，可以使用與背景圖片相融合的字體尊剔，也可以使用對比效果爪幻，讓人產(chǎn)生視覺落差感。如果背景空洞须误，不妨在文案的字體選擇中使用有設(shè)計(jì)感的字體；如果背景比較濃郁仇轻，可以使用簡約的字體京痢，產(chǎn)生對比性。
青空木材網(wǎng)站的主圖中篷店，背景使用郁郁蔥蔥的森林祭椰，文案則選擇輕薄的字體和錯(cuò)落的排列形式臭家，形成大小對比與氛圍對比，給人留下深刻的印象方淤。
（2）弱化背景
模糊與色彩疊加的操作十分簡單钉赁、容易上手，又能夠起到很好的弱化背景的作用携茂，因此也是設(shè)計(jì)中常用的方法你踩。
使用局部模糊弱化背景，可以使產(chǎn)品更加突出讳苦，在模糊區(qū)域添加文案带膜，也使文案從雜亂的背景中抽離出來，增加了信息的可讀性鸳谜。文案與產(chǎn)品分處于圖片的兩端膝藕，也形成一種視覺平衡感。
在圖片上方咐扭，覆蓋一個(gè)半透明的矩形圖層芭挽，上方加入文案，這在PS中是非常簡單的操作蝗肪，卻也是非常有效果的操作屈芜。背景的弱化，文案的凸顯庇麦，讓信息更加的有視覺沖擊力冈爹。塊狀組合的文案，使用居中對齊逛绵，十分顯眼怀各。
（3）圖文合一
設(shè)計(jì)中超吸睛的做法——圖文疊加，交錯(cuò)式產(chǎn)生一種空間感术浪，讓圖片與文字有了互動瓢对，另外，當(dāng)文字已經(jīng)不僅僅充當(dāng)文案胰苏，更變成一種裝飾元素硕蛹，起到讓畫面變美觀的作用，曾經(jīng)熱播的《歡樂頌2》的海報(bào)中也使用到這一手法硕并。
另外一種簡單的操作方法是直接在背景圖片中添加文案法焰，做到真的圖文一體。Florian Monfrini主圖模仿了美術(shù)館的一面墻倔毙，文案以豎排的形式置于藝術(shù)品的周圍埃仪，氛圍感十足。
（4）標(biāo)簽式設(shè)計(jì)
在文本之外加一個(gè)矩形的邊界框或者在文本之下置一個(gè)色塊陕赃，形成產(chǎn)品標(biāo)簽的形式卵蛉，通過背景與標(biāo)簽產(chǎn)生的關(guān)系颁股，讓用戶把注意力聚焦于標(biāo)簽中。調(diào)整邊框的粗細(xì)和色塊的透明度傻丝，可以產(chǎn)生不同的效果甘有，提升畫面的視覺表現(xiàn)。
如何巧妙合理設(shè)計(jì)圖片和文字的結(jié)合葡缰，很巧妙的融入到版面的設(shè)計(jì)中呢亏掀？
01 . 借用圖形中相近的形狀
圖人物的輪廓是凹凸起的注意圖片的右邊是筆直的，我們把文字放在些處沒有擋住人物的視線运准。順著視線向下視覺的焦點(diǎn)就是文字區(qū)域的位置幌氮，如下圖：
02. 根據(jù)圖片設(shè)計(jì)文字
在如上圖中，整個(gè)圖形的形式是由下往上的走勢文字側(cè)很中規(guī)中矩的排版胁澳，這樣就和畫面中的整個(gè)走勢產(chǎn)生沖突该互！
如上圖中主要的走勢走向是由下往上的走向?yàn)榱伺浜险麄€(gè)圖片的搭配，所以整個(gè)文字的排版以類似這種圖片的由下往上方向走勢排版就能完美的融入的在圖片中韭畸。
如下圖所示排版：
03. 打斷圖形
我們的視線沿著線條移動宇智，線到哪里，我們就看到哪里胰丁。所以文字世可以順著線條就可以表現(xiàn)出活力和動感随橘。如果傳過線條，側(cè)表現(xiàn)疑問和緊張感锦庸。并且線條末端就是視覺的焦點(diǎn)机蔗，也就是圖片最突出的位置。
順著線條走
有的線條的地方就有動因/事情甘萧，如圖中快速行駛的跑車非常有速度感萝嘁，自然我們視覺焦點(diǎn)就會順著速度感前進(jìn)，我們就把文字排版與跑車的一個(gè)水平線上扬卷，這樣子更加的體現(xiàn)畫面跑車的速度感牙言，最終將人們的視覺焦點(diǎn)引入到文字的區(qū)域上面！
制造停頓的感覺
如下圖是一片茂密的樹葉怪得，整片樹葉形成了一個(gè)非常鮮明的輪廓咱枉。自然人們的視線就會從上往下的瀏覽。此時(shí)加上一般長文字階段次線徒恋，就會形成很強(qiáng)的視覺焦點(diǎn)蚕断，挑選呼應(yīng)樹葉的圓融字體，巧妙的將文字和畫面融為一體因谎。
線條的末端
所謂線的末端就是整個(gè)畫面線條把你的視線帶到終點(diǎn)之處基括，文字落入在這里具有顯著的效果。當(dāng)人們看完文字的意思之后就會對整個(gè)畫面有了個(gè)全新的認(rèn)識财岔！
04.讓圖片和文字融合在一起
我們在圖片上面加上像屏幕一樣的文字风皿，向讀者介紹頁面的內(nèi)容。
我們一邊閱讀文字匠璧，一邊欣賞圖片桐款，為一張平淡無奇的圖片添加了無窮的魅力！
簡單一目了然是最好的夷恍！上面的圖片畫面比較干凈魔眨，飽和度不高，所以在整個(gè)畫面配上飽和度如屏幕般的文字酿雪，就會是畫面有品質(zhì)感遏暴。
▲?長按圖片保存可分享至朋友圈
05. 平衡創(chuàng)造寧靜的表達(dá)方式
我們需要將文字和圖片實(shí)現(xiàn)互補(bǔ)的感覺，不是越大越好指黎，如果文字排版整個(gè)畫面朋凉，那整個(gè)畫面的效果，就不是那么好了醋安。
以線構(gòu)型
畫面中的模特身體就形成了一條清晰的垂直交叉點(diǎn)剛好和模特的身體相互平衡杂彭，這樣讓整個(gè)畫面充滿寧表與簡潔，剛好恰 到好處吓揪。
06. 配圖文字為版面的中心
將文字進(jìn)行垂直水平居中對齊亲怠，讓文字成為畫面中的主角，無時(shí)無刻的讓用戶注視她柠辞，傳達(dá)出最重要的信息团秽。
視線
畫面中男人雙眼盯著下面的棋子，這中間就有一條望著棋子的視線叭首，只要能隔斷這根視線习勤，就能介入圖視覺藝中的故事，這樣就能讓文字和畫面完美的結(jié)合放棒。
寫在最后
圖文排版本身就是千變?nèi)f化的姻报，但是在這些變化當(dāng)中，也是有規(guī)律可尋的间螟。一個(gè)圖文吴旋，怎樣排版才會漂亮，是我們設(shè)計(jì)師需要考慮的厢破。多去思考荣瑟，那些優(yōu)秀的圖文排版的技巧，潛移默化當(dāng)中摩泪，對我們的設(shè)計(jì)排版是有幫助的笆焰。
今天這篇文章，希望可以幫助你讓你的排版變得更漂亮见坑。好了嚷掠，今天的分享就到這里了捏检，我是寫給設(shè)計(jì)的值班人豆豆，明天見~
