图文排版怎么做？5个设计技巧让背景图加文字更清晰好看

近年来, 在背景图案上安置文字的这种做法, 正变得更为普遍了起来。把文字融入进图像以内, 可以让情感渗透进去。早先的时候, 图片因为要适应速度很慢的网速, 所以不得不做得小小的。

随着网络传输速度以及显示屏幕的大幅度升级, 我们如今可以在设计作品里更自由地去使用大量的图片内容。今天脚本之家就为大家来一起分享和图文排版以及设计相关的五个小技巧。希望这些东西能够给你带来帮助。

这里要特别说明一下, 本文里面所说的这些原理, 同样也是可以适用于去进行选择和视频还有文本的一个组合的情况之上的。

一、在色彩方面以及亮度方面, 两者存在对比。

使用跟文本呈现出鲜明对比的图片是一件相当重要的事情, 打个比方来讲,可以选择用深色的背景来搭配亮色的文本内容, 又或者让深色背景借助滤镜或者是增加一些叠加元素来进行相关处理, 如此这般的话就可以切实保障拥有足够的对比度这一效果。

获取那些合理的色彩搭配以及明亮的对比度之类的小技巧: 。

第一点就是看不出来字形, 这说明对比度偏低了。对比度不只是在深浅之间产生变化, 互补色也可以提供自然的对比效果。如果图片很复杂而且全是焦点的话, 那就利用叠加或者编辑图像来做, 这应该是最有效的选择。

在本例之中, 我们是借助于将Webkit滤镜进行巧妙的这种放置方式, 并且同时也是配合使用了额外的那种一些资源或者手段。

关于对图像的明亮程度以及对比情况进行处理这个问题, 大家可以查看下面这个具体的例子来进行了解: 在这个例子中, 设定的亮度参数为百分之四十, 而对比度的设定值则为百分之七十。

识别度比较低下, 无论是从文章文本来看还是从视觉图片来看, 都没有形成一个核心的关注点。

当你去使用CCS这个滤镜的时候, 就会使得那些东西变得更加容易去被识别和理解。

优秀实例

Ayr

Geckoboard

Anodpixels

Obakkifoundation

二、我们可以对那些尺寸还有那些位置方面, 分别进行一个对比。

增强图片和文本之间的对比度, 并不是说只有色彩这一个办法, 实际上去挑选合适尺寸的图片, 也同样是特别重要的一件事情。

在本例里, 挑一个相对均匀又开阔的天空区域出来。这个地方呢, 是放文字的绝佳位置。反过来讲, 如果要把文字直接放在图片中间的那个有地平线的地方, 就会造成文字不太容易辨认的结果。

存在失败案例, 其表现是呈现出了对比度低这种状况, 同时所布置的位置发生了错误。

这是一个出色的案例, 因为它的对比度是非常明显的, 而且它的位置也显得相对更加合适。

优秀实例：

这是由大众汽车生产的一种电车。

Dtelepathy

三、利用景深

可以利用图片的景深是不同的这样的方法, 在失焦的地方置放文本, 也能够突出文字, 增加可读性, 从而达到效果。

优秀实例：

Une.ch/creation

Gloriasrestaurants

Atelier

四、对用户而言这属于图片选择环节。

图片本身是可以传递情感的, 因此在挑选图片的过程当中, 需要去联系设计里面的相关场景, 同时文字内容也要和图片的情况保持切合。

小建议:

需要写出一句话内容来说明点按图片之后会发生的动作, 以告知访客所发生的事情, 不要选择聚焦存在问题图片, 应选择高清大图形式呈现, 若确有必要, 可以考虑增加滤镜或是磨砂效果。

优秀实例：

Pixelgrade

Formula1data

五、层次感

我们得具体看看文本是排在图像的后面还是排列在图像的前头, 再看它到底是和那些其他东西混搭在一起, 还是单独占有一个角落。往后掰扯得更细一点, 就是琢磨怎么把那个文字和画面里大家盯着看的核心部分给连上钩子。

有一条这样的经验性规则, 也就是说, 那个文本要是越小的话, 它在空间上面就会显得越是遥远。

在这个例子里面, 虽然背景图细节多, 但人的视线老是被那个超长的文本给钩住, 结果就把图像本身忽略了。另外, 人物和这个文本放在一块, 看起来像是站在同一个平面上, 层次感一点都不强。

当我们把这个文本给放大了之后, 那种丰富的层次感便马上清晰地显现出来了。

优秀实例：

这是Danielladraper。

Vivaco

教程到此结束, 上述部分即为有关图文排版与设计的五个小技巧介绍, 期望可以对你们产生帮助效果。

继续浏览有关 图文排版设计技巧 的文章