您的位置:首页 > 设计教程 > 平面设计 > 内页

7个技巧,帮你搞定网页背景纹理的设计!

核心提示: 在网页中使用纹理并不是什么新鲜事情,随着扁平化设计的高度成熟,阴影、渐变和纹理也从某种意义上开始回归,并且在实际设计中越来越多地用到。

4、使用图片来构建纹理

7个技巧,帮你搞定网页背景纹理的设计!

背景纹理并不一定非得是那种精心制作的小图案,有些细节丰富的图片同样可以作为背景纹理,它能够增加视觉层次,提升吸引力。

 

这种设计的诀窍在于,图片需要淡入到背景当中。

 

在上面的案例当中,Oxeva这个网站通过两种方式来做到融入背景的设计,设计师一方面让图片的明度降低了,让用户能够看到景观的轮廓,然后设计师在前景叠加上了一个渐变色彩层,这使得整个背景显得极为富有视觉表现力。图片所提供的细节并不多,但是在视觉上依然可以分辨。

 

5、使用色彩变化来创造纹理

7个技巧,帮你搞定网页背景纹理的设计!

使用不同明暗饱和度的同系色彩可以构建出形状或者文字,同样能够达到效果。色彩的变化同样能够创造出有深度的视觉效果。

 

Types of Type这个网站就使用带有色彩变化的巨大字母在背景中作为纹理,即使没有用到渐变和阴影这样的技巧,同样也有深度,也足够平衡。这样的设计让整个页面显得活泼而不乏味,对比使得整个设计主次分明。

 

6、使用渐变来制造纹理效果

7个技巧,帮你搞定网页背景纹理的设计!

现如今的渐变几乎成了时尚的代名词,渐变色彩可以在背景中替代纹理存在,也能结合图片和其他的元素来使用。

 

几乎所有的色彩组合都能够创造出渐变效果,想要借助渐变创造出视觉深度和纹理的体验并不难,如果你还没有成型的配色方案,你可以直接从WebGradients中找你喜欢的配色方案。

 

Mobipad这个网站在背景中使用了多个不同的渐变色来创造效果,合理的对比度控制让前景的动画非常的明显,深色的部分有着良好的可读性,一目了然。

 

7、让背景动起来

7个技巧,帮你搞定网页背景纹理的设计!

绝大多数的背景纹理的技巧都是静态背景的设计技巧,但是背景和纹理同样可以是动态的。

 

为了避免喧宾夺主,动态的背景纹理应该是很微妙的,否则会影响前景主要信息的传达。配色应该是柔和的,就像上面这个名为Latvian Alphabet的网站一样。

 

动态的网站背景纹理可以是动态的图片或者被调整过的视频。动态的背景是吸引用户注意力的好办法,只不过要适度就好了。

 

 

结语

 

优秀的背景纹理能够增加整个网站在视觉上的深度和丰富度,尽管许多设计师仍在使用扁平风的背景,比如单色的背景,但是合理的加入纹理能够让你的设计更加出彩。

 

在纹理的使用上,最主要的诀窍是要让它足够微妙,不影响前景的内容,这样才有足够的可读性。当然,多微妙合适,需要探索和尝试,只要让整个设计足够平衡就行。

文章源自 设计联盟 www.DesignLinks.cn 中国最具影响力的创意设计综合网站

编辑:红动天下

资讯标签: 网页 扁平化 设计
搜索推荐
设计联盟官方微信
设计联盟官方微信
微信公众号:designlinks
扫一扫 订阅最新资讯
回到顶部