恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
新手教程:如何为网站搭配图片
0.0°
2015-07-15 自译外文 经验/观点 原作者: Jake Rocheleau 举报 3515 18 6 0

作者为网站设计新手介绍网站图片的使用、加工小建议。不妨试试吧~

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

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

构图

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

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

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

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

网页头部和大背景

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

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

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

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

寻找合适的资源

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

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

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

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

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

照片及后期处理

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

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

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

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

结语

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

更新:2015-07-15

收藏

18人已收藏

清和细草

皆若空游无所依

  • 6

    作品

  • 8

    粉丝

  • 33

    关注

  • 好用的Sketch免费资源站(下)
  • 好用的Sketch免费资源站(上)
  • 【临摹】 载入动效
  • 获取灵感与经验——设计博客推荐
相关标签
经验分享设计

    猜你喜欢

      2015-07-15 自译外文 经验/观点 原作者: Jake Rocheleau 举报 3515 18 6 0

      新手教程:如何为网站搭配图片

      0.0°

      你确定要举报新手教程:如何为网站搭配图片

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年07月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      18
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录