怎样设计高大上的纹理背景

   1.Tobias Ahlin是一个设计师常常会光顾的网站,因此网站首页不意外的用了一些设计师的常用工具拼凑而成的纹理背景。网页在造型上使用了书本的式样,这也为网站的整体感觉加了不少分。


  2.这样的网页背景是不是很特别呢?像填字游戏一样的网页全局设计还是第一次见到,不仔细看,都很难发现它竟然是网站首页。该网页的新奇之处主要在于纹理背景大于页面中的内容,内容部分只是在纹理的基础上着重变色,效果上却令人眼前一亮,不禁要感叹设计师丰富的想象力。


  3.条纹作为网页设计中的背景其实并不奇怪,但该案例的点在于,背景不仅使用了暗色系的条纹,同时加入了渐变的色彩设计效果,很好的衬托了网页中的主体文字内容,让网站整体多了几分空间感。


  4.练习本?Excel表格?Nonono!Solo是个项目管理系统的介绍网站,表格线的纹理背景设计很应景的表现出了PM系统严谨简洁的特征,简约有趣且富有设计感。如此形象生动的网站,你一定会对主推产品好感倍增吧。


  5.星星点点的无规律纹理设计,让背景产生一种环保再生纸的视觉感受,搭配优雅大方的色彩和精致的图案细节,让网站的水准因此而上升到另一个层面。


  6.只用纯色块和简单内容拼凑而成的网站不免令人感到单调无味,若在纯色背景中加入一些纹理设计,也许效果就截然不同了。如下案例所示,这是一个很普通的音乐电台网站页面,想象一下面对着如此有质感的画面,再用美妙的旋律加以渲染,一定是一种很美好的视听体验吧。


  7.漩涡状的设计会令人产生一种立体的视觉效果,过于逼真仿佛身临其境,带来一阵恐惧感。但若是以纹理的状态出现就能很好的避免这一问题。作为背景,纹理的透明度会在原有基础上增强,所以让我们在浏览时更加放松舒适。


  8.用真实的大图来代替刻意的纹理作为网页背景也是个不错的选择,正如下面这个案例,将月球表面设置为背景,并且覆盖足够沧桑的黄色,令网站的神秘气息直线上升,但这样的手法并不多见,重点在于找到适用的大图才行。


  9.该网站全局使用了一整张旧旧的再生纸效果,让网站整体更具有连贯性。简单的颜色和怀旧的风格仿佛带我们回到了无忧无虑的童年时期。手绘涂鸦的字体设计也与整体搭配的恰到好处,令人记忆深刻。


  10.这也是一个很不错的创意,将世界地图设置成背景纹理,并且象征性的显示出客户分布。这样的设计会令人在浏览时感受到一种别样的包容性。但在使用这些不规则纹理背景的同时,最好采用透明度低的色调来作内容文字的颜色。


  纹理是一种独特的美好,有规律的平铺纹理让网页瞬间活泼起来,而随性的纹理能带给用户一种洒脱单纯的自由之感,优雅的纹理背景着实能令网页中的其他部分更有吸引力。

时间: 2024-11-04 23:01:40

怎样设计高大上的纹理背景的相关文章

Photoshop设计蓝色纸张纹理背景

     注:更多精彩教程请关注三联photoshop教程栏目,三联PS群:182958314欢迎你的加入 分类: PS图片处理

Illustrator设计细腻的网页纹理背景制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计细腻的网页纹理背景的制作教程. 教程分享: 一.单个像素图 首先打开AI软件,新建一个文档,文档大小任意.在视图栏目下勾选"像素预览",勾选这一选项后,当你将自己的图片缩放到足够大时,会出现像素格子,然后再勾选"对齐像素",这样图案就会自动对齐像素,无需你再自己手动控制对齐了.   在绘制像素图之前,或许你对这种微妙的背景纹理没有太大的印象,在 subtlepatterns 这个网站里,你会看到大量的

Photoshop制作岩石纹理背景的立体字

  本教程主要使用Photoshop制作岩石纹理背景的立体字教程,这种字体在海报设计中用的比较多,主要使用各种素材来合成,大家有什么不懂的地方可以下载素材和里面的PSD文件,下面让我们一起来学习吧. 01.最终效果 02.文字原型 额,第一次做教程,不到位的地方各位多多指教. 用毛笔字体打出文字的原型(本例主要用到'日文毛笔字体',由于打不出"之"字于是用'书体坊兰亭体'代替)打出所以文字并调整文字大小和位置后,备份一份后合并'字体原型'组 03.添加溅射效果 在文字原型的基础上,添加

网页设计技巧:设计优秀的网页背景和设计方法

文章描述:背景真的可以为你的网站定调,在你做决定之前,你可以从图片.颜色.图案方面进行多方面的选择,不要局限你的设计风格,其实你可以做得更好的.选择一个背景主题的时候要结合你的内容,记住最重要的规则:确保你的设计是具有可读性的. 一个好的背景风格,可以为你的网站定下基调.我们将探讨关于网页背景设计以及趋势的一些优秀的例子,包括采用大图片,鲜艳的色彩和大胆的图案. 有时候你的网页设计某一部分引入注目,但大多数情况下是背景起到了决定性作用.背景设计往往可以用图片.图案.颜色色块组合而成,但如何才能设

网页设计理论:纹理

  纹理在网页设计中已经成为一个不可或缺的元素.它不仅仅是个趋势,更是个增加网页深度的快捷方法.设计师学会使用纹理,就能强化网页感染力,可谓是网页设计中必然要掌握的功法.而纹理本身就能通过引导用户的视线来展示网页的关键内容. 然而,一直以来纹理似乎都被误解为"GRUNGE"风格设计,想了解GRUNGE可以去GRUNGE系列(一)--网页设计中的GRUNGE看看.在许多网页中我们可以看到,为了突出酷炫的效果时,被大量使用,甚至有滥用的嫌疑.滥用的结果就是它真正带来的好处被埋没.纹理的确可

网页设计教程:网站背景中的他!她!它!

以人物肖像作为网页背景在国内的网页设计中并不多见,但却是国外网站很热衷的一件事情,这看似大胆并且冒险,实则能在无形中大大的提升网页的用户体验. 笔者曾经在<图文搭配,网页不累>的案例中提到,视觉引导对于首次访问网站的用户非常重要.当用户来到一个完全陌生的页面,网站必须予以合理的引导,这样才能让用户有继续浏览点击的方向. 人物背景网页设计的好处不仅如此,以下是笔者为大家收集的各种相关案例,让我们在案例中继续探索. 1.第一个案例是笔者为OYAMA定制的官方网站.从首屏设计上就不难看出网站需要表现

Illustrator设计精致无缝纹理图案绘制教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计精致无缝纹理图案的绘制教程. 教程分享: 将某个场景的图案,按照随机的方式罗列整个画布上,这就形成一种纹理式样的图案.而这类纹理图案有两种表现,第一种是细微的质感纹理,这类纹理大部分运用到网页的背景上,它显得比较低调,主要色调为黑白灰;第二种就是以图案为独立细节进行随机散布的图案纹理,如下图.   此类图案纹理能铺开整个画布,直接强调主题,虽然直接运用网页布局的很少见,但也能在制作某个广告图或者某个特别修饰的场景里使用. 今天我们

Illustrator设计精致无缝纹理图案效果制作教程

给各位Illustrator软件的使用者们来详细的解析分享一下设计精致无缝纹理图案效果的制作教程. 教程分享: 将某个场景的图案,按照随机的方式罗列整个画布上,这就形成一种纹理式样的图案.而这类纹理图案有两种表现,第一种是细微的质感纹理,这类纹理大部分运用到网页的背景上,它显得比较低调,主要色调为黑白灰;第二种就是以图案为独立细节进行随机散布的图案纹理,如下图.   此类图案纹理能铺开整个画布,直接强调主题,虽然直接运用网页布局的很少见,但也能在制作某个广告图或者某个特别修饰的场景里使用. 今天

photoshop设计制作金属纹理的火焰字效果教程

给各位photoshop软件的使用者们来详细的解析分享一下设计制作金属纹理的火焰字效果的教程. 教程分享: 1.新建一个1000 * 650像素,分辨率为72的画布,背景填充黑色.保存下面的图片素材;   用PS打开保存的文字图片,用移动工具拖到新建的画布里面,并调整好位置,如下图.   <图1> 2.双击图层面板,当前文字图层缩略图载入图层样式,然后设置: 斜面和浮雕:样式选择"浮雕效果",其它设置如图2.   <图2> 纹理:图案选择云彩图案,如果找不到,可