近些年来,图片上添加文字的方式越来月流行,其中不仅有设计感,也能将信息很好地融入,并传递给用户。但不是所有的图片添加文字都是好看的,那今天就和大家分享几个文字狱图片搭配的小技巧,希望能帮助你! 一、色彩与亮度的对比使用图片加文字的方式,需要其对比对明显。如:深色背景、亮色字体;或者深色背景添加滤镜或叠加元素处理,总之,保证文字的突显,使画面不混乱。 获取合理色彩与明亮对比的小技巧:
本案例中,通过Webktit滤镜,及使用额外的 ,来进行图像的明亮度对比。请看下例:亮度(40%)对比度(70%); 辨识度差,文字与图片均无焦点。 使用CCS滤镜后,就便于辨识了。 优秀实例赏析 Ayr Geckoboard Anodpixels Obakkifoundation 二、尺寸与位置的对比当然,色彩也不是唯一能增强文字与对比度的方法,选择图片的尺寸也同样重要。 下面的案例中,选择一个相对均匀、空间较大的天空区,即留白区域,放置文字,就会避开文字与图片的混乱,提高文字辨识度;若将文字置于地平线的地方,效果反之。 失败案例:差的对比度和错误的位置。 优秀案例:对比度明显且位置更加合适。 优秀实例: Eup.volkswagen Dtelepathy 三、利用景深利用图片的景深不同,在失焦的地方置放文本也能突出文字,增加可读性,达到效果。 优秀实例: Une.ch/creation Gloriasrestaurants Atelier 四、图片选择图片会传递情感,所以选择图片的时候,要联系设计中的场景,文本也要切合图片。 小建议:
Pixelgrade Formula1data 五、层次感具体是文本相对于图像中其他元素的位置,是在图像之后,还是图像之前?是融入其中?还是独占一方?进一步分析,如何将文本关联到图像的聚焦元素? 经验法则:文本越小,空间上显得越远。 本例中,尽管背景图细节丰富,但我们的视觉会停留在超长的文本上,忽略了图像。同时人物与文本看起来像在同一水平线上,层次感弱。 将文本放大后,层次感立刻就出来了。 优秀实例: Danielladraper Vivaco | 本文材料来源于webdesign.tutsplus,译者:程远、Alvin,由小编整理发布,若需引用或转载,请注明作者及来源 |
|