图片配字排版怎么做？设计师必看的视觉规律

往昔我做排版之时, 惯于采用那些已然备好的设计素材, 直至后来, 我试着径直选取一张未曾历经任何改动的照片用以排版之际, 我方才晓得, 那“于图片之上配予文字”实则是个极为繁复的问题, 故而我有一段时日对这一问题予以了一番深入的探究。我去翻阅各类设计网站里大咖们的出色作品, 寻觅时尚杂志以及精品画册, 然而我的目的并非是想从中寻得某种感觉, 而是期望借助一种科学、严谨的方式去寻觅优秀作品之间的视觉规律, 我撰写此答案便是要将这个过程分享给众人。然而实际上本人仅仅只是设计相关专业的莘莘学子，所学技艺尚未精湛, 并且文字表述能力亦欠佳……所以要是阐释这般一个繁杂问题的解答流程, 必然会存在诸多有遗缺的地方, 大家权且当作是开展一番交流吧。

为本答案做一个导航图，证明这真的是一个很复杂的问题……

1、字体选择与字体组合方式

首先, 我选了一些, 是我个人认为还不错的设计作品, 依据这些作品的设计目的, 以及最终呈现出来的效果, 将它们分成了“A”、“B”两组。

A组是“图片突出”，文字存在的目的只是粉饰这张照片而已。

B组是“文字突出”，文字在图片的衬托下被重点突出出来。

接着把它们文字方面那个部分给“裁剪”出来, 随后依据原本的文字样式, 还有文字组合的方式, 最终进行分组排列出来。

效果图如下：

可以看出这两组的字体之间差异很大的，在字体选择上：

A组字体主要为现代等线体, 其笔画不存在装饰, 它出现的题材极为广泛, 大多在一些商业图册之上, or用于衬托人物场景时尚气质的图片之上。

B组字体, 主要是古典衬线体, 其笔画装饰强烈, 多出现在传统照片上, 也多出现在自然照片上, 还多出现在一些抒情性很强的照片上。

在字体组合方式上：

A组的字体组合, 全都遭受到紧密的排列, 这种排列处于一个无形的矩形当中, 于视觉方面, 形成了一个面。

B组各个字之间松散地摆放组合在一起，在视觉形成一个个点。

其实可以这样去理解这两组字体在视觉心理的效果，见下图：

造成这两组字体在视觉心理方面存在区别, 这与一张摄影作品关联, 它有两个重要元素。

2、主体物与视觉焦点

摄影作品里, 基本要素有两个, 主体物是其中一个视觉焦点, 所以一张照片里, 通常会有一个突出的人或物当作主体, 在风景类摄影作品里, 即便照片里没有明白显著的主体物, 也会有一个视觉焦点存在。

一张摄影作品的主体物和视觉焦点是很容易看出来的，如下图：

呈现“图片突出”的出色设计作品之中, 文字部分同这两项基本要素的位置关联, 也予以制作成效果图, 分作C、D两组来进行展示。

C组是文字部分与主体物的位置关系

D组是文字部分与视觉焦点的位置关系

主体物是C组的深色块, 视觉焦点是D组的白点, 文字是白色块。

实际上, 并不需要我再过多地去讲述, 大家应当能够从上面所呈现的效果图之中, 大概地去看出文字跟两大元素二者之间存在的关联吧? 我依据我个人所观察得出的结论来进行一番整理:

倘若将主体物视作一个面, 那么在一个有着需用文字粉饰图片需求的作品当中, 字体彼此之间会被聚拢于一个面内, 这是由于面元素重复现身于一个画面里, 进而整体画面不会呈现出违和之感, 并且还能够使文字与图片之间维持和谐统一之色样形成！

要是你于足够多的C组类型“效果图”予以观察之后, 便发觉在所有此类优秀设计作品当中, 文字部分跟主体物之间的位置大小关系存在三大原则。

1：文字部分的面积绝对不能大于或接近主体物的面积。

2：文字“面”与主体“面”的边线保持联系（直线或平行）。

3: 存在这样一种情况, 文字的“面”, 或者同画面边缘所具有的距离, 几乎等同于主体的“面”跟画面边缘之间所得出的距离。

当下, 来瞧瞧D组, 文字部分跟视觉焦点的关联大体上和上面所讲的铁定规律相类似, 然而, 唯一的独具特别之处在于, 当视觉焦点处在画面中线时, 文字部分采用居中式。

然而, 同样是在对数目可观的“效果图”予以观察之后, 发觉视觉焦点所处的位置并非仅仅和构图存在关联, 在此之中, 存在着诸多务必予以留意的特殊情形:

照片主体物处于零散且无意思的状态下, 视觉焦点依照默认设定于画面当中的中心方位。

1. 当照片被某一场景切割了整张画面时, 视觉焦点会出现在切割线上, 默认位于中心点。2. 当照片被某一物切割了整张画面时, 视觉焦点会出现在切割线上, 默认位于色彩密集的地方。

3：眼睛单独作为视觉焦点

首先, 第一点所描绘的有关照片之中的主体事物, 呈现出分散开来的状态, 并且是毫无任何意义可言的。其次, 列举一些具体的例子, 它们所涉及的题材, 通常来讲是对于天空进行拍摄, 或者是拍摄那无边无际的森林里的树木, 又或者是下雨时候的场景等等之类的。再者, 像这类照片, 其视觉焦点在默认的情况下是处于画面的中心点位置的, 而且文字部分也仅仅能够固定于画面的中心之处, 这是因为在这个时候, 文字部分需要去弥补原本照片所欠缺的视觉焦点方面的缺陷。（D组第一列第三张）

而第二点所讲到的, 某些照片, 其整张画面被一个场景或者物品给切割了, 这种情况一般是由地平线或者海岸线之类引发的。另外还有一种与之相似的情形, 就是当照片里的主体物过大, 大到切割了背景从而出现切割线的时候, 此时主体物便不能当作一个面来对待了。像D组里二列第二以及第三……便是这种状况, 视觉的焦点通常处在切割线的其中一处, 一般是色彩密集出现的那个地方。

非常重要的是第三点。在画面的内容当中, 那眼睛的存在可会形成一个视觉焦点了, 不管是人的眼睛, 还是其他生物属于的眼睛, 只要是看到了眼睛, 那么去进行文字部分排版, 就需要依据“眼睛”也就是所说的视觉焦点, 而并非是人本身也就是指面所处区域。

早已经讲了好多好多的东西了……, 那么此时此刻就依据当下的理论去切实实际地贯彻执行操作一番吧, 制作出一组能够称之为“文字粉饰图片”的具有代表性的实例。

就先选取第二节开头所展示的那两张摄影作品来开展相关事宜……就文字部分而言, 直接从A组获取便可。

以上的例子文字部分是怎么选择位置的，详细见下图：

上图表明, 我并非凭借感觉去确定文字部分的位置, 仅仅是依据三大原则进行确定而来的。在左图当中, 小狗虽为照片里的主体物, 不过鉴于眼睛的存在, 所以文字的排版必须依照视觉焦点（眼睛）予以排版, 这是之前 D 组结论所提及的。然而在计算字体部分与画面边缘的距离之际, 依旧参照主体物与边缘的距离, 而非视觉焦点与边缘的。

在右图里, 视觉焦点被确定于照片透视的灭点处, 鉴于其处于画面的中线位置, 如此一来文字部分便采用了居中式。除此情况之外, 鉴于照片上的主体物并不清晰明确, 所以文字离边缘的距离不存在参考依据, 只要与视觉焦点的联系保持不变, 文字部分的位置是随意的。

我在后面又添加上了两个例子, 然而, 由于要弥补前两个均是以视觉焦点作为参照的例子, 所以, 选取了第三个示例, 其为以主体物（杯子）作为参照的排版情况, 当中的过程与之前的两种情形大致相同, 故而略过不再详述。最后一个例子, 鉴于照片当中主体物呈现出分散且毫无意义的状态（星空）, 所以, 文字部分只能固定在画面的中心位置, 借此来弥补主体所在的位置。

现实当中, 我其实还打算列举更多的实例用以阐明各类情形, 然而撰写到这个地方, 发觉篇幅已然颇为冗长了。当前仅仅讲述了一部分“文字粉饰图片”的原则以及规律, 此刻将在下一个章节阐述“图片突出文字”的特性。

3、字体与图形的配合

目的在于“图片突出文字”的那种排版, 其具有的特点是, 并不需要去剖析照片当中的元素。在绝大多数的设计教程里, 在好多优秀的设计作品当中, 图片被视作仅仅是当作一个大色块而存在, 它的存在仅仅是为了你最终打算表达的文字（情感）, 去铺设基调。而我之前所提到的, B组的字体组合方式常常采用分散的点状来摆放, 所以放置在照片这样一个大的“面”之上, 形成元素的对比效果, 能够更有成效地突出文字部分。

然而如此有着一项超级大的不足: 太过分散开来的字体彼此之间不单单轻易欠缺关联, 并且还会致使阅读遭遇困难。另外, 一幅极具花哨效果的照片同样会致使你书写下的文字板块难以凸显出来。

优秀排版里多数所采用的解决方案乃为利用字体跟图形的相互配合, 并且其中类型存在三种。

第一种：形状图形

形状图形主要指方形、圆形以及一些不规则的形状图形。

（下面的效果图都是我统计优秀作品最常用到的方法）

上图展示的是三种运用方形的方式，我从左到右依个解释一下：

当文字部分融入图片变得难以看清之际, 在此, 最好的办法是这般, 即为在背景放置这么一个方形, 随后再去调节字体颜色及其与方块的对比, 以此让文字部分突出显示。

强调集中, 此方法旨在于不使图片被弱化之际, 令文字部分汇聚于一个方形之中, 进而增添易读性, 这属于包装设计时常会出现的排版方式。

针对这个方形而言, 它实际上仅仅是一种代表物, 这种代表所指向的是所有不规则图形的运用。当文字组合彼此之间显得过于松散杂乱, 或者字体相互之间大小的差别极为显著的时候, 放置一个不完全规整的图形以使其发挥作用, 要尽可能地与每一个字相连接, 进而构建起联系关系。

以下是方形“集中”的例子, 方块的存在本身突出了文字, 又保证了阅读得到顺畅。同时这个方块可以在这张照片的任何一个位置, 然而却没有影响, 所以很适合包装设计所需要的情况。

这部分我依据评论区给出的建议, 对形状图形这儿进行补充：形状图形的运用方式一般有两大类, 其一为中间添加上一个颜色较深的形状物体, 字体所处位置置于形状物体的中间地带；其二是于图片的上方与下方分别添加一个颜色较为浅淡的形状物体, 字体所处位置放置在形状物体和图片相互交界的那个地方。这两种办法简称为“一黑二白”, 具体情况可见下图。

而关于形状的颜色和透明度设置，请看本文的色彩部分。

上图是关于圆形的常见运用：

普通：这是一个作为对比的普通排版

就突出方面而言, 相较于方形, 这个有着更为出色的突出成效, 此圆形能够被替换成某些素材, 像是墨滴之类的圆形素材, 甚至能够借助图片自身存在的一个巨大圆形物体, 以此来突出文字部分。

这款也能够凸显“面”文字, 这也就是此方法常常现身于各类商业图册、海报以及各类宣传单的缘由, 它适用。

上图是举例古文字也是可以作为一个圆形的运用。

第二种：直线

线有两路分途, 其一为纯粹单一之直线, 其二乃由细微字体所构成之一节文字（一般为英文）。

上面是纯粹的直线运用举例

联系：很常见的运用方法，不需要解释了吧……

集中, 其作用与方形“集中”相同, 仅是此乃通过两条线构成一个隐形边框, 以形成更具形式感的效果。然而, 它与另一种情形不同, 那种只能在色彩单一或者存在大量留白的照片中出现。

类似小物件, 连接符, 增加形似模样, 用于衔接两段文字内容, 时尚设计作品中常用, 打个问号在下方, 连接符种类多, 此处仅是例如……

这是另一种“直线”，由一排细小的字组成。

关联情况: 跟前面那一种是一样的情形, 然而仅仅是适用于标题当中文字数量比较少的时段。其余的那两个就不需要加以阐释说明了, 大伙理应全都明白的。

第三种：字符

通常所指的是数字, 还有英文字母, 与文字相结合能够有更为突出的效果。就如同上图所示, 并且阿拉伯数字的效果是最为理想的。

上面这些便是字体跟图形相配合的那一部分内容了, 然而呢, 还有一个实例是需要特别地去作出说明的:

具有圆形形状的, 加上字符的东西, 展示于上图, 它是出现频率最高的一种配合类型, 接着用连接符接上你要表达的文字, 这是最经典的配合类型了, 至少其突出文字部分的效果非常不错！

4、色彩的组合模型

下述色彩部分, 鉴于未曾有过大量实际操作, 故而我无法确定结论是否正确。所以色彩部分仅作参考, 只期望大家能从中收获些许启发即可。

我们或多或少都曾学习过色彩方面的基本知识, 我们都清楚上图里红色意味着热情, 绿色意味着自然以及紫色意味着高雅等等情况, 然而我们却不能够凭借此作为基准来判定字体的色彩, 因为实际情形要比这繁杂得多, 不管是一张照片也好还是海报也罢, 都会运用无数的色彩, 当把这些色彩汇聚成一个组合时, 并将其称作“色组”。就如同下图。

於此际, 该何以分辨上图这般色组之视觉心理呢? 于教科书里所采用之方式乃是划分作四种类别, 分别为“互补色”, “对比色”, “同类色”以及“邻近色”。而后再度阐释这些类别的视觉心理, 诸如“互补色”存有突出、华丽之成效或者更能吸引目光等等……然而此方法仅能诠释那些仅运用少量色彩之照片或海报, 故而此方法于面对一张色彩繁杂之照片或海报时, 此方法又显得过于笼统且片面。

在网上, 大部分的配色教程里, 用所谓“色卡”来阐释色组的视觉心理, “色卡”是从一张照片当中提炼出三至六个主要色彩组合而成的配色方案, 还认定“色卡”与原照片的视觉心理效果, 也就是情绪是一样的, 所以大部分设计作品会以这个为参照制定配色方案。

不过, 我阅览了好多研究配色的书籍, 还有不少文章, 其中大部分都觉得, 一个“色卡”远远没办法解释一张照片带给人的视觉心理效果。它们觉得, 一张照片给人的视觉感受, 并非是这张照片里所有颜色共同作用产生的结果。并且还表明, 一张照片的色彩数量, 各个色彩之间的面积, 以及冷暖的对比种种情况, 都是会对一张照片的视觉心理效果造成影响的。

就这样, 我对这些文章的观点予以总结, 随后, 我开展并且了重新设计, 设计出了一个色彩方面的组合模型, 而这个模型的用途是用于描述, 描述多个色彩组合所呈现出的视觉心理效果, 具体呈现情况可见下方图示:

展现于上方的情形乃是一个构建起色彩组合的模型实例, 此模型被我精心设计成为呈现着倒三角样式的形状。在此, 我针对其予以略微简洁的阐释说明: 处于倒三角形最顶端位置的那一块区域所对应的色彩为主要颜色, 且这一主色乃是在这张照片里具备最为显著突出表现的色彩, 一般而言其在照片里所占有的面积是最大范畴。紧接着向下依次排列的是次要颜色, 该副色相较于主色而言, 其突出的视觉效果程度要显得稍微弱上一些。再进一步朝着下方延续的部分则是包含着一些起到辅助作用的颜色以及一些在画面中呈现出面积极其微小的起到点缀装饰作用的颜色等等诸如此类。

这个模型可以解释很多色彩组合的视觉心理效果，见下图：

X：亲和-强烈

主色与副色所存在的对比关系, 是会对照片的视觉心理产生影响的, 当主色与副色之间的对比越是微弱的时候, 画面所呈现出的表现就会越发柔和, 与之相反的是, 主色与副色的对比越大, （一般而言是由于两者在冷暖、面积以及色相方面存在不同）, 画面的表现便会越加强烈。

Y：平均-突出

这里所指的, 是主副色与其他颜色的, 面积比例关系。当主副色的面积, 和其他颜色的面积, 相差无几的时候, 画面洋溢着唯美的感觉。相反，当主副色的面积, 远远超过了其他颜色的面积总和时, 画面的情绪, 完全由主副色主导。

Z：单调-丰富

于此处所进行比较的, 乃是一张照片之中色彩的数量, 若数量小, 便会呈现出单调之感, 反之, 数量越大, 则越显丰富。

那三种类型之上, 皆以XYZ予以标记由于当我要去总结字体同色彩的选择以及色彩组合模型相互之间的关系之际我便需要运用到下图这个大模型了:

上图所展示的大模型当中, 色彩模型构建出三种类型, 它们被制作成了一个三维的坐标轴系, 这一情况表明, 对于任何一张照片而言, 其色彩组合, 皆是这个XYZ轴系之中的一个点, 也就是说, 任意一个色彩组合模型, 会同时符合三种类型里的其中一种, 最终会去形成八种色彩组合模型, 也就是八种情绪, 下面进行一些列举:

大家能够看到, 在大模型当中, 存在着有冷暖区分的四个色块, 这四个色块代表了四个区域, 从上面往下面看, 分别是“粗古”、“细古”、“细现”以及“粗现”。而这些色块所表达的含义是: 当一个色彩组合朝着坐标系的正轴方向越倾向的时候, 那么所使用的就是越粗的古典字体。与之相反的是, 当这个色彩组合朝着负轴方向越倾向的时候, 那么所使用的就是越粗的现代字体。

简单地讲, 就是在一张照片的色彩, 越是强烈、越是突出、越是丰富之际, 便采用古典的衬线字体, 并且需越粗为宜, 而在一张照片的色彩, 越是亲和、越是平均、越是单调之时, 就要用现代的无衬线字体, 而且越粗越好。这属于大模型的作用一种: 不同色彩组合对于字体选择所产生的影响。

大模型还有一个作用, 那就是, 可以通过增减或者是改变某一种色彩, 进而改变这张照片的色彩组合倾向, 以此来表达某一种情感、主体又或者是适应某一种字体等等。而改变的办法, 是利用字体或者形状图形的颜色。这就表明在图片上加字这个行为, 已然是在影响一张照片的色彩心理了。

综上，我们拿刚才的图片来举一些例子，见下图：

第一个例子, 照片的色组属性呈现为“强烈”, 呈现为“突出”, 还呈现为“单调”, 故而选用了细笔画的古典字体, 这是一个“文字粉饰图片”的例子。

有第二个例子, 它属于一个“图片突出文字”的例子。这张照片的色彩属性存在“强烈”以及“突出”的情况, 然而色彩却是“单调”的。我的做法是, 先去加上两个有着粗笔画的毛笔字, 也就是“粗古”, 用以突出一种主色。接着放一段酡红色的英文, 促使色组得以变得丰富, 同时和“粗古”相配合, 使得色彩的情绪能够表达得更为明显。

最后的那个例子, 是针对形状的颜色以及透明度设置所做的一次示范呢。因为这张照片的色组属性实在是太过平均了, 所以我用一个形状去压住一个副色调, 接着又用“粗古”字体去压住主色调, 从而把这个色组的“平均”属性转变为“突出”。这个例子想要表达的是: 形状图形在色调选择方面, 关键之处在于你打算怎样去改变色组的属性, 而半透明的设置, 能够改变色组的“丰富”属性。

过程见下图：

5、单个字体的形态

到这儿篇幅已然是挺长的了, 那就干脆直接呈现结论吧（真累呀）。把所有的教程以及优秀设计作品都进行了总结, 我觉得对于相区别单个字体而言, 最为重要的三个特征是: 请看下面这张图。

体饰所指的是处于字体笔画末端地方的装饰, 字体的那些体饰之间并非存在有或者无的状况, 而是存在多和少的情况, 这属于一个相对比较模糊的概念。一般会依据笔画体饰的多少来划分“古”文字以及“今”文字。“古”文字适宜当作标题, 出现在展现自然、传统或者展现历史厚重感的题材当中, “今”文字大多存有于时尚、科技或者普通生活题材里面, “古”文字最为重要的特点是抒情, “今”文字则着重于简洁。

笔画存在差异, 此差异体现于粗细方面, 粗笔画被用以实施强调动作, 细笔画则是用于对细节开展修饰行为, 比如说突出某一商品具备的精细做工这一情况。此处存在一种有特别说明必要的情形, 那便是粗细相互结合, 笔画所呈现的粗细差异实际上是归属于体饰范畴的变化。

需注意, 转折存在着差异, 这差异于曲直有所体现, 转折越是尖锐的那种字体，是适宜用来表达力量感的, 相反, 呈现曲面转折的字体, 适配体现女性的柔美感。请见下面给出的两个典型例子。

继续浏览有关 图片排版视觉规律 的文章