50張精美圖文設(shè)計案例解析

“設(shè)計提供了一個繼續(xù)講述故事的機會，而不僅僅是總結(jié)一切。”
 

 

設(shè)計師通過應(yīng)用文字、顏色、圖像和其他圖形功能來為觀眾講故事。就像作家在講故事時一樣，設(shè)計師也有一些特別的方法和技巧，來確保語氣語調(diào)的正確性及信息的真實性。

 

通常情況下，這只是調(diào)整文本大小，或者使背景圖像變暗，以便文本更易于閱讀。但有時做很小但意義重大的改變，就像把一行一行的文字分解成一個有節(jié)奏的形狀一樣，可以極大地改善圖形在視覺上與觀眾的溝通方式。

 

在這里，我們提供了50個獨特的技巧來幫助你講視覺故事......

 

26 使用色調(diào)和“X-處理”的組合，來創(chuàng)建雙色調(diào)濾鏡效果

通過減少“X-處理”，圖像變成冷色調(diào)更明顯，因此藍色的水被強調(diào)，再配上紫色色調(diào)，圖像的較亮部分突出顯示，云彩變成粉紅色。
 

 

27 通過圖像中的特征，指導(dǎo)性地放置文本，從而創(chuàng)建巧妙的合成圖

使用食物的圖像構(gòu)建文本框架。你使用的圖像顯然會成為你放置文本的決定因素，所以試著找到一個盡量細節(jié)圖少的，呼吸空間更大的地方來放置文本。

 

28 單色風(fēng)格的圖形永遠不會過時。使用黑白濾鏡結(jié)合白色文字，達到了史詩般的對比效果

黑白照片給人一種很酷的風(fēng)格效果。由于色調(diào)平衡，它們也是一種利用形狀的好方法。圖像中的海岸線被用作“chill”（寒意）這個詞作為其組成部分，同時也是冷空氣的一種視覺表現(xiàn)形式。

 

29 通過在圖像上覆上一層白色并調(diào)整透明度，來創(chuàng)建柔和效果

顏色疊加，是增強圖像色調(diào)并創(chuàng)建柔和色調(diào)效果的好方法。在整個圖像上使用透明形狀，也會使圖像中細節(jié)圖變得不明顯。

 

30 利用背景圖像的自然圖形構(gòu)圖，以獲得巧妙的文本位置

這幅圖像的漸變層是一個很好的文本空間。文本被分成了三行，與三層薄霧完全對應(yīng)。

 

31 使用粗體風(fēng)格字體與精細的無襯線字體搭配，以獲得最佳對比度

兩種工具字體之間結(jié)合使用，產(chǎn)生強烈對比，非常和諧，因為有一個明顯的區(qū)別，所以呈現(xiàn)出兩個獨立的信息片段。
 

 

32 使用比例作為視覺元素，來強調(diào)文字

當文本或元素在頁面上以不同的大小放置時，將形成層次結(jié)構(gòu)。這就形成了信息被讀取的順序。你可以看到已經(jīng)放大的單詞更容易被看到，因此在層次結(jié)構(gòu)中更加突出。
 

 

33 旋轉(zhuǎn)文字，使其遵循背景圖片中形狀/角度，創(chuàng)造視覺上的和諧感

字體排版設(shè)計是一種很好的探索設(shè)計的技巧。此背景圖像提供了放置文本的一些很好的空間。把一個字斜著排版，如上圖：底行字排版角度與大海的波浪的線條相一致。第一行前兩個單詞之間的空格被用來讓第二行中的“d”突顯出來。
 

 

34 使用帶有細節(jié)圖的背景圖像，來獲得美麗的紋理圖案樣式

云是一種美麗的視覺效果，非常適合用做背景圖。使用濾鏡以獲得更清晰的形狀或強化顏色?；蛘?，你可以通過添加一些模糊效果來弱化云層。
 

 

35 使用濾鏡給無光澤圖像增加亮度，來增強圖像的鮮亮度

單一顏色的圖像有時看起來有點暗淡沉悶。通過調(diào)整亮度來讓它們變亮，但要確保你不會過度曝光或是照片爆裂。為了避免這種情況的發(fā)生，你可能要降低對比度，以適應(yīng)增加的亮度。
 

 

36 在文本中，使用字體樣式創(chuàng)造細微差別，來強調(diào)特定詞

美麗的襯線字體，可用于這種情況。它有一種微妙的優(yōu)雅，是一個傳統(tǒng)的故事書風(fēng)格的字體。常規(guī)的粗體字樣式也有很大的重量差異，這使得粗體得到了很好的關(guān)注度。
 

 

37 使用透明度這個設(shè)計元素，來幫助紋理表現(xiàn)出來

白色文字或形狀可能會看起來有點強烈生硬。對白色元素應(yīng)用微妙的透明度，是一種柔化圖形簡單的方法。此外，當與一個細節(jié)圖背景搭配時，紋理將通過文字來表達。
 

 

38 以強烈的節(jié)奏感放置文本內(nèi)容，同樣具有強烈的設(shè)計風(fēng)格

在這張圖的三行開頭，“Design”一詞的重復(fù)使用了幾何字體。
 

 

39 通過降低濾鏡中的對比度，來平衡圖像中的色調(diào)分離

想要增加圖像的對比度是很自然的，但低對比度濾鏡具有非常美麗的效果。這創(chuàng)造了一種類似于老式攝影的處理方法。圖像中的細節(jié)圖越多，濾鏡就越明顯。
 

 

40 使用圖像空間清晰的區(qū)域，來創(chuàng)造性地放置文本

在這幅圖像的山丘上的陰影處，為放置文本提供了絕佳的空間位置。除此之外，湖濱作為基準線，在其上放置文本，創(chuàng)造了與引語基調(diào)相關(guān)的和諧構(gòu)圖。
 

 

41 通過在頁面上應(yīng)用柔和色調(diào)，使圖形去飽和度，創(chuàng)造一種異想天開的效果

這種風(fēng)格模仿了經(jīng)過修復(fù)的老式學(xué)校的照片。一個黃油色的形狀被用作疊加層，以創(chuàng)造一個朦朧和復(fù)古的效果。
 

 

42 裁剪圖像以補充構(gòu)圖

你無需為了創(chuàng)建有效的布局而將設(shè)計復(fù)雜化。裁剪良好的圖像是一個偉大的方法，通過減少背景干擾圖利于文本空間，集中在一個主要的特征，并創(chuàng)造組成和諧感的畫面來實現(xiàn)。
 

 

43 在相同字上使用不同的字體，看看它們的調(diào)性有何不同

所有的字體都有不同的特征，無論是外觀還是與觀眾交談的方式。為了說明這一點，當一個字以優(yōu)雅的襯線字體應(yīng)用時，它會有一種優(yōu)雅的格調(diào)。當相同的字以大寫的幾何無襯線字體應(yīng)用時，這個單詞看起來會顯得狂暴而有力。
 

 

44 通過堆疊不同的重量感的字體，提升創(chuàng)造性技能，以獲得風(fēng)格化的效果

水平堆疊式文字，是推動排版技巧的一種簡潔而有趣的方式。無襯線字體在疊加文字時，特別有用。它們的幾何形狀意味著它們在四面都能很好地對齊。
 

 

45 把圖形中的所有元素，都使用一種顏色

一致性是創(chuàng)建視覺和諧的好方法。背景圖像上的藍色色調(diào)與藍色文本的組合，形成了舒緩和互補的美感。在應(yīng)用色彩之前，將圖像變?yōu)楹诎祝垣@得最佳效果。
 

 

46 使用柔和的色調(diào)和透明的圖像，創(chuàng)造安靜、酷炫的設(shè)計

為了達到這個效果，請使用淺色調(diào)背景圖。然后給圖像一個固定的框架，確?？蚣軆?nèi)填充整個畫面。為了幫助文本脫穎而出，提高透明度。選擇一個精美細節(jié)的圖像，以便在應(yīng)用透明度后仍然可以制作出形狀和紋理。
 

 

47 使用能視覺傳達你信息的相關(guān)圖像

始終將文本放在能夠清晰讀取的版面位置。對比度越強，信息就越顯強大有力。使用字體樣式為內(nèi)容提供一些字符。在這里，F(xiàn)被用來在視覺上象征“適應(yīng)”行為。
 

 

48 通過在文字周圍使用框架，來框住文字內(nèi)容

使用一個形狀或框架，來包含文本是一個聰明的方式，能更強調(diào)突出信息。如果你用的是框架，那么確保邊框的粗細不會超過字體的粗細。
 

 

49 把背景圖像中的顏色，應(yīng)用于文字顏色上

一些更簡單的設(shè)計理念是最有效的。文本顏色是從背景圖像中提取出海洋的顏色，使文字閃閃發(fā)光。這種將金色簡單地應(yīng)用到此圖形上的文本，具有很大的影響力。
 

 

50 永遠不要低估一張漂亮圖片和干凈文字的能量

不要使設(shè)計復(fù)雜化。如果你正在努力尋找一種好的方式來表達信息，請保持簡單。找一個沒有太多細節(jié)圖的漂亮的圖片，用在你的背景圖上，然后文字顏色使用與背景色有對比度 的顏色，以便文本的易讀。
 

 

啟發(fā)到你了？開始設(shè)計！

當你接近項目尾聲時，很難找到可以改進的地方。讓這個列表可以幫助你創(chuàng)建更有高度的設(shè)計決策，為圖形添加一些專業(yè)的設(shè)計效果。