售前咨询 售后咨询
当前位置: 上海网站设计 > 建站知识 > 建站教程

图文排版的几个小技巧(上)

网站编辑:小润 | 发表时间:2019-02-02 20:24:00

很多设计狮们通常在图文排版时,一定也遇到过一些困惑吧。特别是首页BANNER大图的排版,此处也是网站的门面,浏览者最为关注,也饱含了客户浓浓的期待。本次润壤网络润壤将分两次同大家介绍一下网站建设中,图文排版的一些小技巧,有大量的图片范例哟。不喜勿喷~~

一、色彩与亮度的对比

使用与文本有鲜明对比的图片很有重要,比如深色背景搭配亮色文本,或者深色背景使用滤镜或叠加元素处理,这样就能确保有足够对比度。

获取合理色彩与明亮对比的小技巧:

第一看不出字形,说明对比度偏低了;

对比不只是深浅之间,互补色也可提供自然对比;

如果图片复杂全焦,利用叠加或编辑图像应该是最有效的选择。

本例中,通过WebKtit滤镜巧妙的放置以及使用额外的<div>. 来处理图像的明亮对比,请看下例:亮度(40%)对比度(70%);

辨识度差,文本与图像均无焦点。

使用CCS滤镜后,易于辨识。

优秀实例:Ayr

二、尺寸与位置的对比

色彩不是唯一增强图片与文本对比度的方法,选择图片的尺寸也很重要。

本例中,选取一个相对均匀,开阔的天空区域,这是放置文本的极佳位置。相反,将文本直接放置在图片中间,有地平线的位置,将致使文本的辨识度差。

差的对比度和错误的位置。

对比度明显且位置更加合适。

优秀实例:Eup.volkswagen

关键字:
官方微信
上海市长宁区宣化路300号华宁国际广场中区12层
座机:+021-5994 6805
24热线:+135 8590 1130