设计基本功!帮你掌握图文排版的5个小技巧 - 优设网 - UISDC

设计基本功!帮你掌握图文排版的5个小技巧

2014/08/30 69159评论区

layout-design-1

近年来,在背景图上添加文本的方式变得越来越流行,融入文本在图片中渗入情感。在早期,图像不得不做得很小以适应明显低速的带宽,随着网速和显示屏的快速提升,我们可以在设计中自由地使用更多图片。

在这里我们将与你分享5个文本与图片搭配的小技巧,希望能帮到你。

注:本文所讲原理同样适用在选择视频与文本的组合。

一、色彩与亮度的对比

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

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

  • 第一看不出字形,说明对比度偏低了;
  • 对比不只是深浅之间,互补色也可提供自然对比;
  • 如果图片复杂全焦,利用叠加或编辑图像应该是最有效的选择。

想利用色彩对比,得先了解一点色彩的基础知识:《设计师配色宝典!教你从零开始学配色》
see-more-color-design

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

设计基本功!5个帮你掌握图文排版的小技巧

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

设计基本功!5个帮你掌握图文排版的小技巧

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

优秀实例

Ayr

设计基本功!5个帮你掌握图文排版的小技巧

Geckoboard

设计基本功!5个帮你掌握图文排版的小技巧-2

Anodpixels

设计基本功!5个帮你掌握图文排版的小技巧 -3

Obakkifoundation

设计基本功!5个帮你掌握图文排版的小技巧

二、尺寸与位置的对比

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

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

设计基本功!5个帮你掌握图文排版的小技巧

失败案例:差的对比度和错误的位置。

设计基本功!5个帮你掌握图文排版的小技巧

优秀案例:对比度明显且位置更加合适。

优秀实例:

Eup.volkswagen

设计基本功!5个帮你掌握图文排版的小技巧

Dtelepathy

设计基本功!5个帮你掌握图文排版的小技巧

三、利用景深

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

设计基本功!5个帮你掌握图文排版的小技巧

设计基本功!5个帮你掌握图文排版的小技巧

优秀实例:

Une.ch/creation

设计基本功!5个帮你掌握图文排版的小技巧

Gloriasrestaurants

设计基本功!5个帮你掌握图文排版的小技巧

Atelier

设计基本功!5个帮你掌握图文排版的小技巧

四、图片选择

图片会传递情感,所以选择图片的时候,要联系设计中的场景,文本也要切合图片。

小建议:

  • 一句话表达内容,让访客知道点击图片会发生什么。
  • 不要选择有聚焦有问题的图片
  • 图片要高清大图,如果有必要,可以选择滤镜或者磨砂。

超多高清大图的资源站:《免费高清第二波!12个无版权限制的大图特供网站》

优秀实例:

Pixelgrade

设计基本功!5个帮你掌握图文排版的小技巧

Formula1data

设计基本功!5个帮你掌握图文排版的小技巧

五、层次感

具体是文本相对于图像中其他元素的位置,是在图像之后,还是图像之前?是融入其中?还是独占一方?进一步分析,如何将文本关联到图像的聚焦元素?

经验法则:文本越小,空间上显得越远。

本例中,尽管背景图细节丰富,但我们的视觉会停留在超长的文本上,忽略了图像。同时人物与文本看起来像在同一水平线上,层次感弱。

设计基本功!5个帮你掌握图文排版的小技巧

将文本放大后,层次感立刻就出来了。

设计基本功!5个帮你掌握图文排版的小技巧

优秀实例:

Danielladraper

设计基本功!5个帮你掌握图文排版的小技巧

Vivaco

设计基本功!5个帮你掌握图文排版的小技巧

平面排版通俗易懂好教程!

想突出中文美感?资深广告人+设计老手来帮你!
平面排版时,教你突出中文美感的几种方法
平面排版时,教你突出中文美感的几种方法第二集(基础篇)

给相片添加水印?专业摄影师有招!
超全面教程!给照片添加文字有哪10个高大上的方法?

原文地址:webdesign.tutsplus
译者:程远、Alvin

AD18-single-page

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量76万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/layout-design-tips

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 版式设计 扁平化设计 交互设计师 界面设计 排版布局 优设专访 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里