分享

网页配图之道:首图的设计技巧

 新华书店好书榜 2016-07-29


如何设计首图,又是网页设计之中一个非常重要的问题。为此,我们就此特献出八条设计技巧,全是来自实际经验,以期和大家共同探讨之。

国内有大部分设计师称之为Banner,但我的概念中Banner图还是一条长长的横幅广告。国外的设计师把首图成为Hero图,Hero字面意义也就是英雄,但直接叫英雄图片恐怕带来误解,不如叫首图。首图,地位第一,又位于首页,意思直达,大家能理解就好。

大概很多设计师其实已经觉察到了,网页设计做得好不好,除了网页本身的布局、配色以外,很大程度上依赖的是配图的运用技巧。但是就算将千辛万苦淘来的好图往网页上一摊就完事,恐怕也难取得巧妙地效果。因此,如何设计首图,又是网页设计之中一个非常重要的问题。为此,我们就此特献出八条设计技巧,全是来自实际经验,以期和大家共同探讨之。

一、双色冰淇淋渐变

首图当作全屏出血大图处理时,你可以将图片调色成为双色渐变,有点像我们吃的双色冰淇淋球,选一组你认为能激发心理氛围的配色,最好是对比色,带来强烈的视觉落差。由于要作为背景而存在,整体的色彩明度要区别于文字的颜色。这里推荐的这一方式只需要利用PS中的“渐变映射”工具,就能轻松获得。

上图所示的设计中,我们不仅采用了这种双色映射,还利用线条创造了视觉焦点,引导了用户的视线。

二、线条引流

没错,延续上一个例子所用的方法,这也不失为一种首图设计方式。在首图中让线条来引导实现去穿越你想要焦点停留的地方。

上图所示的设计,重点是模特和文字,因此,我们采用了9这个数字的线条方向,利用这个线条的环绕运动,最后从上至下游走过文字。这里的心理预期是要把9笔画完成,因此你没有可能跳过文字。

三、动态情景

对于首图的选择,你可以焦距到动态场景。这类动态场景由于本身模特的动态造型,会调动观众的运动神经,激发页面的活力。

大家可以想象,如果将上图的主角换成一个静物,效果将是不同的。这里将模特的方向加以改变后重新降低透明度的做法,带来一定的虚实结合的感受。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多