当前位置:首页>ps入门教程>ps基础教程>设计知识>教程内容

网页设计知识,纹理运用指南

来源:ifeiwu 作者:飞屋睿UIdesign 学习:8694人次

纹理在网页设计中已经成为一个不可或缺的元素。它不仅仅是个趋势,更是个增加网页深度的快捷方法。设计师学会使用纹理,就能强化网页感染力,可谓是网页设计中必然要掌握的功法。而纹理本身就能通过引导用户的视线来展示网页的关键内容。

然而,一直以来纹理似乎都被误解为“GRUNGE”风格设计,在许多网页中我们可以看到,为了突出酷炫的效果时,被大量使用,甚至有滥用的嫌疑。滥用的结果就是它真正带来的好处被埋没。纹理的确可以增强网页的感染力,但是绝不是网页设计中的主角。

纹理 VS 图案

在深入了解纹理之前,让我们先把这一对容易混淆的概念区分一下。这两个词通常会被当作一组同义词。图案通常会由一些细小的重复性的元素组成,具有一定的视觉节奏感。而纹理相对图案由更大的元素组成,也不一定有重复性。如果用集合来表示这两个概念,那么,纹理和图案就会是两个圆,只有小部分交集,其余部分都是相对独立的。

纹理的功能

人们喜欢在网页中使用纹理,基于设计的理由绝不能仅仅因为“看起来很美”就这样去做,而应该基于满足某种功能,而纹理的使用目的大部分都会在于增强网页的层次和视觉深度。还是让我们来看看纹理具体有哪些功能吧。

吸引用户点击操作

图标、按钮、标题等元素都能运用上纹理。它能吸引用户对相应元素进行点击操作。这也许就是纹理运用盛行的原因。

最低限度地使用纹理就是将纹理运用在元素上,以便让这些元素区别于网页中的其他元素。引导用户的视线进入我们预期的下一步。这种方式也可以重点突出网页中的品牌形象,例如在LOGO上使用纹理。

这里对LOGO使用纹理有两种方式:第一是为你的LOGO使用纹理而搭配清晰背景,第二是保持清晰LOGO而运用纹理背景。如下面两个截图所示。

网页设计知识,纹理运用指南

网页设计知识,纹理运用指南

增强信息的视觉展示规则

纹理既然可以用以引导视线,就如同线条、方框和对比一样,它也可以被用以排版,将内容按照某种视觉规则进行展示。与此同时,纹理的效果要运用得当,与其他的视觉规则方式协调使用,最终输出效果将会非常理想。

网页设计知识,纹理运用指南

对于不同的内容选用不同的纹理,这也符合了对比法则。用户能根据不同的需求而进入下一步操作,而不至于在主页中层出不穷的信息中迷失了方向。

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!