网页设计中的图片运用
有些趋势是显而易见的,有些就相比而言不那么容易被发现。当我观察和分析了大量的优秀作品和网页案例,发现图片的巧妙运用总是有一些共同点的。当你看完这篇文章的分析和案例,你也就是时候好好反思一下你的网页设计中是不是应当换上更好地图片了。 1.运用超大背景图 我首先要谈论的趋势也就是最流行的趋势,下面就是一系列运用背景大图的网站。虽然这个方法已经差不多被用烂了,但是我们必须得承认它真的很有效。就像所有的好的设计趋势都应该发扬。 如果你的网站是为了展示,那么高清的背景大图就是一个很强的传递信息的方法。但是为了避免过于杂乱,你还是需要考虑清楚文字和标题的位置。看看下面的一些案例。 ![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4069117.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4069118.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4069119.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406911a.jpg) 2.把背景图作为首页内容 我最喜欢的超大型背景照片是当设计师巧妙地使用照片,把它同时作为背景的首页元素。在这些设计中,把产品放在首页最前的位置,下滑就可以看到产品的细节或者配件。通常这是使用产品或前景元素作为焦点来实现的。这种混合使得照片营造了一种时尚感,而内容又非常有价值。这一具有挑战性的方法与你的摄影师好好规划协调,得到的最终布局一定非常吸引人。 ![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406ad1b.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406ad1c.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406ad1d.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406ad1e.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406ad1f.jpg) 3.使用单色照片 如果你想要你的照片可以适应不同的风格,不妨使用PS来美化。而如果照片颜色很丰富甚至到了杂乱的地步,在某些情况下就不应该是你背景图的最好的选择。为了解决这个问题,设计师已经开始使用单色调的图片来表达所想要传递的想法和情感。当然这里的单色不单单指的是黑和白——尽管这是大部分的色彩解决方案,但是我想以此延伸出更多的颜色。比如,在网页设计中蓝色是经常被运用到的颜色,给人安全和稳定的感觉;而红色显得充满活力,生机勃勃。你应当根据你的产品或者网页界面风格来选择你的背景图的色调。 ![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406d020.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406d021.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406d122.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406d123.jpg) 4.使用静音图片 静音图片的使用会让人们打开你网页的第一时间就感觉很舒服,也是最近非常流行的一种风格。大部分的静音图片都运用了渐变和颜色淡化的效果,也有复古的风格。而文字也是在图片的顶部,和图片风格非常协调。这种风格经常在一些摄影师的个人网站上面运用,自从去年开始就变得非常流行了。我也非常精细的发现到,与这些静音图片相配合的都是一些装饰性字体,这样就起到了很好的页面平衡作用。 ![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406e624.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406e625.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406e626.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406e627.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b406e628.jpg) 5.注重图片的意义和内涵 我不喜欢装饰性过强的图片,因为它们色彩往往强烈,往往和你页面所要表达的内容没有一点关系。但是如果你巧妙的使用那些注重氛围和内涵的图片,曾经强烈的颜色会变得柔软,反而会对你的内容起着画龙点睛的作用。就像下图的个人网站使用太空图做背景一样,虽然乍眼看去图片和个人一点关系都没有,但仔细想想其实都很有意义,反而显得更有思想和韵味。当然这也是我想说的,对待一种风格都要用推陈出新的眼光来看待,毕竟没有一种风格适用于所有的设计。下面就是一些很棒的例子,图片不知不觉在启迪我们的思考。 ![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4070b29.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4070b2a.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4070b2b.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4070b2c.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4070c2d.jpg) 6.垂直分布风格 最后,我想给你们看看一组使用垂直分布风格照片的网站。垂直分布是对齐对象成平行或90度角,以创建组织感的过程。这种方法是比较边缘和独特的风格,设计师很少使用。再次,风格往往与设计的时髦风格有关,但它不止于此。这些照片反映超出照片本身的内容的含义。他们暗示这些照片背后的特质,他们建议规程,流程和组织意识。这些都是很好的特质,尤其是当它用于展示代表设计师和机构的时候。 ![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4071a2e.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4071a2f.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4071a30.jpg)
![](http://art.china.cn/products/images/attachement/jpg/site8/20150506/d43d7e15520216b4071a31.jpg)
|