干货满满！不能不看的图文排版适用技术 | 设想师日志

换即势

来历：知乎



写在起头：
最新组建了一个设想师进修成长的知乎小圈子：“写给设想成长圈”，算是设想师交换的一个小江湖吧。首要分享设想相关内容，如设想类书籍保举，设想神器保举，设想资本分享，还有最新设想资讯分享等等。由于刚起头，进修中，请多多指教。期待你的加入~~这是地址：写给设想成长圈 - 知乎（手机端加入哦，很是感激！）

“
在一个作品中，我们首要需要斟酌三种身分：文案、图片、文案与图片的关系。
”

嗨，你明天过的好吗？我是写给设想的值班人豆豆。

明天这篇文章，要和你分享的是图文排版方面的一些适用技能，希望你喜好。



1.文案

在设想进程中，第一个需要斟酌的应当是文案，由于它包括着我们需要展现给用户的最重要的信息。在停止整体设想时，应当对文案的部分有整体的把握：

首先、肯定文案，用最简短的话说清楚最具体的内容，精简文案，让用户捕捉到有用信息；

第二、肯定文案的优先级，明白主、副题目及内容的关系，区分性看待，可以按照字体的巨细、粗细对照停止关系夸大；

第三、按照文案肯定结构，对内容文案停止块状组合，可以增强结构性，在阅读时用户的习惯是从上到下、从左到右，在对文案停止排版时可以遵守这一法则，利用左对齐与居中对齐是最保险的挑选。

最初、按照图片布景肯定文案的位置。文案的位置要按照图片停止挑选，若何处置文案与图片的关系是图文排版的重中之重。





▲ 长按图片保存可分享至朋友圈

2.图片

图片有两种：

一是图片内容，按照设想需要停止的内容添补与装潢。

二是图片布景。这里首要会商后者。布景图片的挑选是按照设想主题而定，假如你没有高质量的图片素材，会事倍功半，分享几个可免费商用的高质量图片网站，让你一次选到符合主题的布景图片。

我已经写过一篇关于图片素材网站的文章，仅供你参考：还在百度图片？高清美图和GIF动图素材网站，拿走不谢！





▲ 长按图片保存可分享至朋友圈

3.文案与图片的关系

想要把文案与图片完善连系，除了大的结构题目，也需要细节的丰富和完善，我们停止图文关系处置时，可以从以下几个方面停止动手：

（1）强化对照，增强可读性



巧用对照色和补色，可以增强信息的可读性，青与红色、黄色与蓝色、黑与白等冷暖对照是设想中常用到的典范配色。按照主题挑选主色，小范围利用另一种色彩停止搭配装潢，发生视觉张力，快速捉住用户的留意力。



经过调剂色彩的明度与饱和度，可以到达对照的结果。上图的案例中利用绿植为布景，红色自然可以突出文案信息，但红色在本案例中的利用结果会显得高耸，是以挑选无色系停止搭配。经过左右两图，可以看到明暗对照的重要性。

除了色彩方面，笔墨一样也可以发生对照。在字体挑选时，可以利用与布景图片相融合的字体，也可以利用对照结果，让人发生视觉落差感。假如布景空洞，无妨在文案的字体挑选中利用有设想感的字体；假如布景比力浓郁，可以利用繁复的字体，发生对照性。



青空木料网站的主图中，布景利用生气勃勃的森林，文案则挑选轻薄的字体和错落的排列形式，构成巨细对照与空气对照，给人留下深入的印象。

（2）弱化布景

模糊与色彩叠加的操纵非常简单、轻易上手，又可以起到很好的弱化布景的感化，是以也是设想中常用的方式。



利用部分模糊弱化布景，可以使产物加倍突出，在模糊地区增加文案，也使文案从混乱的布景中抽离出来，增加了信息的可读性。文案与产物分处于图片的两头，也构成一种视觉平衡感。



在图片上方，覆盖一个半通明的矩形图层，上方加入文案，这在PS中是很是简单的操纵，却也是很是有结果的操纵。布景的弱化，文案的凸显，让信息加倍的有视觉冲击力。块状组合的文案，利用居中对齐，非常显眼。

（3）图文合一



设想中超吸睛的做法——图文叠加，交织式发生一种空间感，让图片与笔墨有了互动，别的，当笔墨已经不但仅充任文案，更酿成一种装潢元素，起到让画面变美妙的感化，已经热播的《欢乐颂2》的海报中也利用到这一手法。



别的一种简单的操纵方式是间接在布景图片中增加文案，做到真的图文一体。Florian Monfrini主图模仿了美术馆的一面墙，文案以竖排的形式置于艺术品的四周，空气感实足。

（4）标签式设想



在文本之外加一个矩形的鸿沟框大概在文本之下置一个色块，构成产物标签的形式，经过布景与标签发生的关系，让用户把留意力聚焦于标签中。调剂边框的粗细和色块的通明度，可以发生分歧的结果，提升画面的视觉表示。

若何奇妙公道设想图片和笔墨的连系，很奇妙的融入到版面的设想中呢？

01 . 借用图形中附近的外形

图人物的表面是凹突出的留意图片的右侧是笔挺的，我们把笔墨放在些处没有盖住人物的视野。顺着视野向下视觉的焦点就是笔墨地区的位置，以下图：





02. 按照图片设想笔墨



在如上图中，全部图形的形式是由下往上的走势笔墨侧很中规中矩的排版，这样就和画面中的全部走势发生抵触！



如上图中首要的走势走向是由下往上的走向为了配合全部图片的搭配，所以全部笔墨的排版以类似这类图片的由下往上偏向走势排版就能完善的融入的在图片中。

以下图所示排版：



03. 打断图形

我们的视野沿着线条移动，线到那里，我们就看到那里。所以笔墨世可以顺着线条便可以表示出活力和动感。假如传过线条，侧表示疑问和严重感。而且线条结尾就是视觉的焦点，也就是图片最突出的位置。

顺着线条走

有的线条的地方就有动因/工作，如图中快速行驶的跑车很是有速度感，自然我们视觉焦点就会顺着速度感进步，我们就把笔墨排版与跑车的一个水平线上，这样子加倍的表现画面跑车的速度感，终极将人们的视觉焦点引入到笔墨的地区上面！





制造搁浅的感受

以下图是一片茂盛的树叶，整片树叶构成了一个很是鲜明的表面。自然人们的视野就会从上往下的阅读。此时加上一般长笔墨阶段次线，就会构成很强的视觉焦点，挑选照应树叶的圆融字体，奇妙的将笔墨和画面融为一体。





线条的结尾

所谓线的结尾就是全部画面线条把你的视野带到尽头之处，笔墨落入在这里具有明显的结果。当人们看完笔墨的意义以后就会对全部画面有了个全新的熟悉！





04.让图片和笔墨融合在一路

我们在图片上面加上像屏幕一样的笔墨，向读者先容页面的内容。

我们一边阅读笔墨，一边欣赏图片，为一张平平无奇的图片增加了无穷的魅力！





简单了如指掌是最好的！上面的图片画面比力清洁，饱和度不高，所以在全部画面配上饱和度如屏幕般的笔墨，就会是画面有品格感。



▲ 长按图片保存可分享至朋友圈

05. 平衡缔造安好的表达方式

我们需要将笔墨和图片实现互补的感受，不是越大越好，假如笔墨排版全部画面，那全部画面的结果，就不是那末好了。

以线构型

画面中的模特身材就构成了一条清楚的垂直穿插点恰好和模特的身材相互平衡，这样让全部画面布满宁表与简洁，恰好恰 到益处。





06. 配图笔墨为版面的中心

将笔墨停止垂直水平居中对齐，让笔墨成为画面中的配角，无时无刻的让用户注视她，转达出最重要的信息。



视野

画面中汉子双眼盯着下面的棋子，这中心就有一条望着棋子的视野，只要能间隔这根视野，就能介入图视觉艺中的故事，这样就能让笔墨和画面完善的连系。



写在最初

图文排版自己就是一成不变的，可是在这些变化傍边，也是有纪律可寻的。一个图文，怎样排版才会标致，是我们设想师需要斟酌的。多去思考，那些优异的图文排版的技能，耳濡目染傍边，对我们的设想排版是有帮助的。

明天这篇文章，希望可以帮助你让你的排版变得更标致。好了，明天的分享就到这里了，我是写给设想的值班人豆豆，明天见~




原文地址：https://zhuanlan.zhihu.com/p/35537421
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。

我是一个梦蛋

优异

工兵班长纬

图文叠加软件是用什么软件呢？

戏做顿

PS足矣