如何为网站搭配图片

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

网页设计师就像摄影师和画家一样,他们为了安排网站的字体、功能花费了大量的心血。我往往因为网站的版式的细节设计而喜欢上它。尽管我是简洁化用户体验的忠实拥护者,网站的小细节却是我被吸引的原因。

我将会提供一些如何为网站配图的小窍门。不是每个页面都需要图片,但它们能使平谈的文字内容变得整洁生动起来。不幸的是,图片资源太多了,一个不小心就会使用不恰当从而拉低整个页面的档次。如果关注图片质量,你就可以在最终的布局安排上游刃有余。

构图

或许网页配图中最难掌握的就是构图。图片摆放的位置就和它的内容一样重要。每个独立的部分需要彼此平衡一致,从而构成有感觉的整体。

图片经常用来强调或是阐明某个内容。当访问者第一次踏进你的网站,他或许就注意到了那张你办公室或是工作室的照片的背景图。它会给用户这个网站更加私人化的感觉。相反地,你也会用缩略图去强调页面中的某些内容。

在我看来,构图的选择总是有限的,无论为了 “看起来更好”做出怎么样的改变都要基于项目需要。我的建议是参考其他你欣赏的相近的网站。找出一个优秀的网站,尽管它可能与当前的项目没有密切的关系。

通过学习其他设计师的作品,你可以妥善完成自己的项目。整合你的想法并重新构建和安排网站内容,你可以诞生好的网站。学习那些给你启发的网站,从中挑选出对你网站有用的部分,而不要被其他部分分散注意力。

网页头部和大背景

之前我也过一篇关于网页大图的设计思想的文章。这一趋势已经流行了许多年,只是最近才频频出现在大众面前。现在越来越多的设计师注意到了图片的重要意义,这也成为了一个研究方向。但我认为一些最出彩的设计是网页的页头和横幅。

简单来说,背景大图一般是指一张较大尺寸的处于页头附近的摄影或插图。它常常会给予访问者关于网站的最直观的印象,体现网站内容的潜在含义。良好的图片编辑技巧可以使得背景大图在各种浏览器和各种尺寸的屏幕上都可以完美呈现。

你如何才能将大图和你做的完美结合起来呢?首先我认为要弄清楚从你的设计风格体现出的网站类型。创新型公司或个人常常会使用特别设计的图片来体现个性化风格。电商网站往往将产品展示在其中以吸引顾客去浏览他们的商品。

大图和标题首先应当能够做到对现有内容的延伸和拓展。如果网页的布局有些令人迷惑,你需要利用图片作出适当的补充。在最终决定之前多花时间考虑一下多种选择总是不错的。

寻找合适的资源

如果有条件的话,我强烈推荐自己拍摄图片。它会更加贴切主题,过程也会更加从容。但可惜的是,你需要你一个性能很好的相机,一些 摄影技巧,以及与客户的商务或位置产生直接联系。

学习如何摄影完全依靠练习——就像数字设计。一旦你掌握了一切就会变得无比有趣!但是我知道不是每个人都是这样的,所以我们还有其他选择。

如果你不会摄影也不能找到一个摄影师,最后的方法就是图片资源库。但是很多图库的图片只有一些笑得很灿烂的模特站在舞台上的图片,避免这些质量低下的图库吧。记住要选择那些更加专业的图库去挑选和网站内容相关的图片。

我首推的免费图库就是Pexels。它是一个为用户提供免费图片的网站。所有的图片都有创作共享许可,这意味着你可以在所有项目里免费使用它们。

它的搜索功能非常强大,所以你可以搜索到你需要的高质量图片。我推荐的图库网站还有 Gratisography 和Unsplash.它们都有也许难操作,所以我更喜欢Pexels。但是它们也很优秀所以推荐你收藏。

照片及后期处理

任何想学习摄影的人就应该立即行动起来。入门使用傻瓜相机并没有什么不妥,你可以借此学到很多有关构图和架构的知识。但是一旦你更有自信了,完全可以入手一台便宜的单反相机。

学习摄影就是学习一门技术。获得基础知识所花的时间并不需要你想的那么久,但是确实需要花费一些精力。

练习摄影之外,你的PS技术也会有所长进。Photoshop是最强大的图片编辑软件你可以将图片加工成任何你能想到的样子。首先要学习的是如何将物体从背景中抠出来。当你需要在你的页面中加入一个人物或物体,这项技能很有用。

就在最近我推出了一篇Photoshop pentool tutorial ,主要讲述抠图的基础知识。钢笔工具是众多方法中最值得学习的一个。即使你不想入手一个昂贵的相机或是拍摄照片,你都应当学会处理图片,从而把他们适当地放在你的网站上。

结语

在设计过程中切忌过于悲观,跳出既有的思维创作会更有用。试试15张不同的图片,看看哪一张最搭你的网站。或是学会新的图片编辑处理技巧。当你不断地练习,总会学到更多创造出更好的东西。

来源:ui.cn

写文章不容易,打个赏支持下作者吧

评论( 0

写下你的想法

推荐阅读