網站落地頁面和在線廣告設計，無論從廣告牌到名片，我們每天遇到的許多設計都有一些共同之處。

我說的是什麼呢？平面設計的最基本的組成部分之一——圖文排版。雖然在一張漂亮的照片上寫上一句引人入勝的短語，可能看起來像一個簡單的設計方案，但要想得到正確完美的結果比預期的要困難得多。不必擔心，看完本文介紹的圖文排版技巧，你將擁有幾乎可應用於任何設計項目中的技巧。

01.考慮版面構成

文字與圖像的位置和安排可能會造成不好的效果甚至是破壞了設計。如果文字太小，背景太亂會分散注意力，或其他任何會影響可讀性事情，那麼你的設計將不會有效傳達信息或缺少視覺吸引力。

但文本只是版面的一半，圖像如何在你的設計中體現出來也同樣重要。所以你要注意以下兩點：

圖像的組成。無論使用的是你自己攝影圖片還是配圖圖片，都需要確保給它留下一個良好的空白區域來放置文本（除非你想添加一個設計元素，文字和/或掩蓋一個詳細的背景，如形狀或屏幕——後面會有更多詳細的說明）。

例如，下面這本雜誌封面設有一個垂直方向的風景照片，留有大量的天空背景。通常情況下，大面積的天空或水的大自然的照片作為文本背景的話，會為文本提供一個整潔的空間，讓你的文字凸顯出來。

由圖像和文本組合創建的整體構圖。設計不僅僅是其部分的總和。你可以有一個迷人的形象和一個有效的信息結合成一個漂亮的字體，但除非兩個元素流暢地結合在一起，否則結果可能不會吸引太多的注意力或得到你想要的那種結果。

第一種方法是創建一個圖像和文字相輔相成的作品，使文字對齊，使其符合圖像中存在的形狀。注意這個網站布局的標題是如何採用一種創造性的方法來對齊文本的：它放置展示了圖片所宣傳的產品的設計。這在標題下面的圖像網格中，文本和產品照片被均等地平衡地布局。

另一種方法是從更廣泛的角度考慮構圖，而不僅僅是將圖像作為背景，並在上面放置文本。這兩個方法可以變通出很多效果，讓你有更大的創意空間。例如，下面的布局通過將照片裁剪成特定的，可識別的形狀來直接將文本的主題與圖像相連接：

下面這一個案例的特點是一種不同的剪裁方法，字母的形狀像是在圖片上剪下來一樣：

02.建立一個聯絡點

好的構圖的要素之一是一個焦點——某種視覺元素吸引眼球，作為用戶導航設計的起點。在一個包含圖像和文本的布局中，它將是二者之一。因此，你需要決定哪一個更重要，並幫助它通過顏色、大小、位置或其他特徵脫穎而出。

這種設計使得度假目的地的形象成為人們關注的焦點，設計稿或許是旅遊網站的合適選擇。由於它的價值（它是布局中最重要的一部分，而其他一切不那麼重要）和尺寸（它跨越整個頁面寬度），圖像的視覺感最強。但是，你不希望你的設計的其餘部分消失。在這裡，照片中的形狀，以及垂直的豎線，有助於吸引你的眼球回到文本，回到那一個明亮的富有流動感藍色字體，讓你的視線聚焦在那裡。

相比之下，下面的網頁將文本的焦點(以粗體、大寫的字體顯示在一個大的點上)，並以透明的顏色疊加來強調圖像。然而，文本和圖像已經使用連接兩個元素的分層效果進行排列，並且形成了動態的構圖。

或者，也許你的文字和圖像是同等重要的，需要在視覺上結合成一個有凝聚力的整體。這本書的封面達到了這樣的效果，將標題文字逐字地穿插在花朵的圖像周圍，將兩者混合在一起，以便同時觀看它們。

03.達到平衡

讓我們來看看另一個好的版面構成特徵：平衡。就像一個蹺蹺板，一邊是一個人，另一邊也是一個人，如果有一邊太重，那麼設計會變得不平衡。

我們並不是在談論重點，因為視覺上的重量感通常是與設計的其他部分區別開來的。相反，我們正在討論那些做得不好的設計。也許他們放太多內容或並且雜亂無章，也許所有的內容都被擠在布局的一邊，或者也許不注意間距和對齊方式。任何這些問題，甚至更多，都可能使你的設計失去平衡。

對於一個簡單的設計，只有文本和圖像，就像我們已經看過的一些著陸頁和書籍/雜誌封面，平衡變得尤為重要：版面設計越簡單，糟糕的布局越容易出現。

在下面的包裝上，品牌名稱通過下面的圖片進行平衡。兩者尺寸大致相同，並通過共享顏色相連。作為一個很好的接觸，圖像本身提供了更多的文本的空間，已經被用來表述每個產品的獨特名稱和成分在其中。

而這個設計只是通過照片上文本的位置來達到平衡。如果文本也放在圖片的右側，布局上就會出現的雙重焦點（照片中的輪廓圖和白色文本），而在左側留下一個很大的空白空間，這樣設計顯然是錯誤的。就目前而言，左右兩邊的視覺重量感是相等的，所以設計是有平衡感的。

04.明智地選擇你的圖像

在有些設計項目中，圖像比漂亮的背景起到了更大的作用。它可以為你的設計提供背景，語氣和情感。當這些配圖非常匹配或支持你的文本，可以更好的向讀者傳達信息。所以除非你故意想在你的設計中製造一些視覺上的矛盾，否則最好是圖像一定要與文本切合（反之亦然）。

下面是這個概念的一個有趣的例子。把文本放在模糊圖像的人眼上，這強化了偽裝的概念，這也正是本書的標題。所有這些設計元素融在一起，創造一個組合，文字和圖像之間的關係是清晰的，視覺上有趣的——它們流暢地組合在一起。

再拿這個包裝來說，比起用五顏六色的脆嫩蔬菜攝影，還有什麼更好的辦法可以傳達出你的產品是新鮮健康的呢？此外，文案採用「新鮮」，「農夫市場」，「季節性」的概念。圖像和文字共同傳遞相同的信息。

05.為文本創建一個背景

正如前面提到的那樣，為文本創建一個容易看到和閱讀的空間，是設計過程中的一個重要步驟。有兩種主要的方法可以做到這一點：

選擇一個空白的圖像。這點回到了我們的第一個提示。具有大而清晰的區域，模糊或柔焦的照片可以為文本提供合適的閱讀空間。這是因為文字後面的高清晰的圖像可能會使文本讀起來看不太清晰，甚至不利於閱讀。

例如，這些社交媒體圖像對背景圖像的模糊程度依然足以讓讀者可以識別，而且文字排版信息也很清晰。

編輯或添加一個效果的形狀。比如說，你已經找到了你的項目的完美形狀，但它不適合在上面放置文本。也許它沒有任何明確的空間，但是它有很多有趣的細節。你仍然可以使用它，只是你將不得不付出額外的努力來幫助你的文字脫穎而出。其實有很多方法可以做到這一點，其中包括：

? 添加背景形狀：將包含文本的圖像做成實心或透明形狀是常見的解決方案。

? 添加透明顏色覆蓋：覆蓋整個圖像的透明顏色層可以幫助將其最小化，淡化細節，為視覺上更均勻的文本創建版面。

? 使圖像變亮或變暗：如果您不想為布局添加額外的元素，有時您可以自行編輯圖片以幫助您的文字脫穎而出。

在下面的案例里，照片已經變暗，為了幫助白色文字更好的突出出來：

而在這個案例里，雖然一些照片的色彩和亮度已經很深，但請注意每張圖片底部有一個黑色漸變，這為文本的凸顯提供了一些額外的支持：

- END -

向原作者表示敬意

圖片版權歸屬原作者，謝絕商用

看完後別忘記分享哦，分享是一種美德，懂得分享的人，生活會越來越美好......

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！