你一定已经发现这样的现象：Instagram上的励志名言、Facebook上的搞笑语录、网站的登录页面和在线广告随处可见，从广告牌到商业名片，我们每天接触的广告中有很多的相似之处。

这期我们要聊的是什么呢？是平面设计中最基础的构建板块之一——将图像和文字结合起来。虽然在图片里配上一小段引人注目的文字看起来似乎很简单，实际上它比你想象中难度大多了。但不用担心，看了我们在这篇文章中列出的小贴士和例子，你就可以掌握一些好用的技巧。

我们开始吧：

1. 考虑构图

Via Dribbble. Design by Vedad Siliak

相关配文在图片中的位置和排列既可以成就你的设计也可以毁掉你的设计。如果在图中有文字太小，背景太杂乱或者任何降低可读性的因素，你的设计作品在视觉上的吸引力就会大大降低。

但是文字只是部分因素，图片在你的设计中也是非常重要的。因此你也要注意如下内容：

图片的构图。在设计中，不论你是用自己拍照片或者是用别人的作品，你肯定会选择有适合摆放文字的好图。（除非你想添加设计元素来衬托配文或者遮盖有很多细节的背景，这个后面会讨论到。）

例如，该杂志封面有垂直方向的风景照片。通常情况下，自然风景照中占很大空间的天空或者水是配文的最佳背景，它提供了一片整洁的空间能让文字有用武之地。

Via From Up North

由图像、文本合并而成的整体构图。一个设计总是大于各个部分的综合。你可以将精美的图片和绝妙的字体、文案放在一起，除非这两者非常的契合，否则这样的设计并不会有突出的效果或者说根本达不到你期望的效果。

让文字和图片相融合的一个办法是将你的文字排列成适合放在选图上的形状。看看这个网页的标题排版是如何创造性地放置文本的：它的文字衬托了广告图中产品的设计。标题下方的图片也是这样，文字块和产品图相呼应。

Via Dribbble. Design by Dwinawan Hariwijaya

另一种方法是考虑更大范围的构图而不是单单将文字放在背景图片顶部。图片和文字有无限种组合方式，所以发挥你的想象力吧。比如，下面案例的排版通过将图文组合成特定的形状，直接将文字和图片联系起来。

下图是利用不同形式的裁剪，让图像形成了文字。

Via Behance. Design by Amanda Jewell

2. 创造焦点

一个好的构图的基本要素是拥有一个焦点——某种能吸引眼球的并且为欣赏该设计的观众提供一个起始点的视觉元素。在涉及文字和图像的布局中，往往有很多的亮点，但你需要决定哪一个作为你的焦点，然后通过颜色，大小位置或者其他特征来突出焦点。

这个设计明确地让度假圣地的图片成为焦点，这可能也是作为一个旅游网站的比较合适的选择。因为图片的亮度（布局中最暗的部分，而其他的部分都是明亮的）和大小（它的宽度跨越整个页面）使得它最有视觉重量。但是，你一定不希望设计中的其他部分被弱化或者掩盖。这个设计中，出现在照片中的形状与垂直线条一起，将注意力引导到文字上，而流行的亮蓝色成为焦点。

Via Awwwards. Design by Epiphany Search

也许你的文字和图片都同样重要，需要在视觉上结合成一个整体。这本书的封面就达到了这样的效果，将文字裹在花的图像周围，将两者融合起来，使得你能同时看到这两个重要的元素。

Via Book Cover Archive. Design by Tal Goretsky

3. 达到平衡

让我们再看看好的构图的另一个特点：平衡。就像一边是孩子一边是大人的跷跷板一样，当设计中一部分看起来过于繁重时往往会导致不平衡。我们现在并不是在谈论焦点，因为视觉上的重量经常将它们与设计中的其它部分割裂。相反，我们现在谈论的是，设计中合理安排的问题。设计作品可能看起来很杂乱无章，也可能所有的内容被挤到了排版中的一边，也有可能没有对其或者少了间距。这些问题，或者别的问题，都有可能使你的设计失去平衡。对于只有文字和一张图的简单设计，像是我们见过的有的登录页面和书、杂志的封面一样，平衡就变得尤其重要了。越简洁的设计，越容易误入歧途。在下面的包装中，品牌的名字和图片显得平衡：两者都是大体相同的尺寸，并且相同的颜色将他们维系起来。作为一个好的包装，图像本身为文字提供了空间，并且被用来写上产品线的独立名字和各自的成分。

Via nudie soda

而这种设计通过照片上的文本的位置达到平衡。如果文本被对准到右侧图像，布局的双焦点（在照片和白色文字的映衬图）会被组合在一起，在左侧留下一个大的空白处，就会成为一个平衡度欠佳的构图。但是现在，两边的视觉重量大体相等，所以这个设计是平衡的。

Via Dribbble. Design by Stefan Belavy

4. 明智地选择图像

在设计项目中，影像播放不仅仅是为了生产一个漂亮的背景或特色，它可以把语境，语气和情感赋予给您的设计。而当这些品质符合或支持你的文字，你能更清楚地和你的观众交流。所以，除非你故意想在你的设计中有一些视觉矛盾，用你的图像补充你的文字是最好的（反之亦然）。下面是有关于这个概念的一个有趣的例子。男人眼里模糊的图像和文本都加强了伪装的想法，这也恰好是本书的书名。所有这些设计选择共同协作成为整体，其中文本和图像之间的关系是既清晰又有视觉趣味的，它们无缝地流动起来。

Via Book Cover Archive. Design by Jarrod Taylor

借此包装为例：有什么方式能比用丰富多彩的清脆蔬菜的图片来说明你的产品新鲜并且健康更好？另外，用文案支持这些概念：“鲜”，“农贸市场”，“季节”图片和文字一起工作来传达同样的信息。

Via Packaging of the World. Design by Cowan

5. 为文字创作背景

正如前面简要提到的一样，在很容易看到和阅读的位置创造文本空间是在这个过程中重要的一步。主要有两种方法可以做到这一点：

选择具有留白的图像。这点回到我们文章的第一点。提供文本一种微创的留白照片，有大而清晰的区域，有模糊或柔焦，或者具有其他能为文本提供最低限度清晰详细空间特点的图片是最佳候选。这是因为文本后非常详细或紧凑的图像可以使复制变得困难，但不影响阅读。

Via From Up North. Design by Erik Marinovich

例如，这些社交媒体图像有适度模糊的背景的图像，所述对象仍然可以辨认，但在上面的排版不会丢失。

Via Yoplait

编辑或添加效果。比方说，你已经为项目找到了完美形象，但它只是不适合在上方放置文本。也许它没有任何明确的空间，或者它有很多有趣的细节。您仍然可以使用它，但你将要投入一点点额外的努力来帮助你的文字脱颖而出。有许多方式能做到这一点，其中包括：

*添加一个背景形状:用部分的固体或透明的形状覆盖映像，其中文本是一个通用的解决方案。

设计来自Fotor

*添加透明颜色叠加：色透明块覆盖整个图像可以帮助减少并淡化细节，为文本创造一个表面使视觉上更加统一。

Via Dribbble. Design by Christopher Lee

Via Dribbble. Design by Ludmila Shevchenko

加亮或变暗图像：如果你不想将额外的元素添加到您的布局，有时你可以编辑照片本身来帮助你的文字脱颖而出。

在这里，用已变暗的照片突出白字非常流行：

Fotor移动端界面

而在这里，当一些照片在色彩和值已变暗后，你注意到在每个图像，黑色给文本一些额外的底部支撑深色渐变，给了文本一些额外支持。

Via Dribbble. Design by Kyril Ku

6. 用色彩和对比度提高视觉冲击力

只要你选择了个图像，你就要确保文本关闭弹出的页面或屏幕，尤其是如果你不使用背景形状或其他技术来协助，色彩和对比度是做到这一点的最佳的两个途径。

颜色。在为您的设计选择配色方案时可以采取许多方法，让我们看两个专门涉及到配对的文字和图像。

*协调你的颜色：一看这是非常和谐和有凝聚力，你可以尝试直接从您的图像中选取颜色拉动应用到您的文本。

Via Dribbble. Design by Sam Thibault

*选择对立：对于一个更戏剧性的外观，尝试用更多的对比色组合。色轮是开始的好地方，像蓝色和橙色或紫色和黄色的互补性（或相反）颜色对，如下面的设计。

设计来自Fotor

Via Awwwards. Design by Stink Digital / Razorfish / Spotify

对比。可以通过颜色（如前面的例子）实现对比度，还可以通过类似的大小，形状，位置和更多的特点实现它。下面的明信片设计使用了所有这些特质：在照片中的清凉的蓝色和绿色与橙红色形成鲜明的对比;这些词的大小相互对比，因为这样做字体选择的字母形状; ‘ROAD’的倾斜，弯曲方向与印刷的其余部分对比（但遵循照片中丘陵的倾斜）。所有这些选择创建了一个有趣的视觉构成，帮助文本脱颖而出。

Via Dribbble. Design by Andrew Pennington