网页设计中纹理的运用技巧

   texture在设计中应用已经越发完善了。它将形成一种趋势,简单而有效的为web页面设计添加几分深度感。 充分发挥texture的威力是一份伟大的职责。它不仅能够很好增强web设计的表现效果,对于设计师来说还是一个质量上乘的好工具。它的美妙作用是可以引导浏览者的视线,强调关键元素的重要性。

  然而,长期以往texture似乎总和“脏乱”或者“低劣”设计为伍,它的滥用处处可见,像乐队的website等,对于设计师来说,它遗留下来的滋味可不怎么样!。 也正是由于以前的滥用,texture的优势长期被人们所忽略。texture可以让web设计更具整体感,但是前提是不要让它满屏皆是。

  Texture(纹理)VS. Patterns(图案)

  在我们深入了解texture之前,先弄懂texture和pattern之间的区别。这两个词经常被误认为同义的。pattern通常是小的、重复的图片元素,而texture更趋向于大一点的不重复的图片。你可以想象两个集合,左边是pattern,右边是texture,这两个集合有一部分交集,也就是说在某些时候texture也是pattern。去tileabl这个网站逛一圈,也许你会有更清晰的印象。

  Texture的功能

  我们喜爱texture的理由可以有很多。设计时的选择不止是简单说“嗯,这样看起来还不错”,设计是出于一种目的,而每一个对texture选择应该权衡利弊。现在让我们浏览下使用texture到底有哪些好处呢?

  获取目光焦点

  texture可以让元素显著起来,譬如titles、headings、icons和buttons。它可以吸引眼球去传达一个动作指示或者告诉你这是主要的heading部分。这也许是最明确的一种方式去理解texture了。

  最低限度的去使用texture,以便区分website中内容和其他部分。它引导着浏览者的目光直接锁向那些设计者有意安排的元素上。它可能是一种特别棒的方法让关键商标脱颖而出。

  你可以用很多方法去吸引别人的注意力,然而这两种常用的简单的方法,你不妨尝试一下。一种是带有纹理的logo和干净的背景搭配,另外一种正好反过来,干净的logo和带有纹理的背景一起。


  增强信息的筑造风格

  texture习惯于指导浏览行为。而例如线条、色块和对比同样习惯用于将内容进行逻辑区分。有效的将texture结合其他方式会更具表现力。使用texture的最终目的不是放弃其他的筑造风格方式,而是要去加强它们的表现效果。


  以上网站,个别的元素为了特殊的目的使用了texture。该网站把内容划分成几个逻辑区域,让用户清楚的看到从哪开始,到哪结束。通过texture使得用户能够清晰准确识别每个逻辑内容块,从而增强了页面的信息筑造风格。

  并且,texture完美的配合了网站的风格和主题。所有元素犹如量身订做般合理的表现了主题,因此强调了整个website的全部信息。

  建立一种氛围&个性化

  越来越多的客户希望网站设计不止是友好的表现页面内容,他们更希望能看到一些个性独特,自己的标志更易被用户所识别的web设计。texture便可以通过很多方式实现这一目的。


  上面这个网站便十分帮的表现了她的个人品牌。她使用了texture来更简洁的表现了头像部分,如果没有texture,该网站会显得平淡无味,而且缺乏个性。texture无形中使得web设计中多了很多超棒的因素,让website变得更具魅力。

  提示和建议

  从上面看来texture的确很不错,但是使用中你也会想到如何才能避免技术滥用和思维定式的陷阱呢。

  保证易读性

  千万不要为了使用texture而牺牲了易读性,这也是我们经常犯的一个错误。易读性对于一个网站来说具有最高级别的重要性。


  别死马当活马医

  在印刷里,texture很难会被过渡使用,当然有时也会因为流派不同而不同。然而在web领域,texture却很容易出现滥用的情况。


  实践预示着提高

  让你的设计不断的尝试新的想法,平时从来不会添加texture的地方你也可以尝试一把,说不准会有意想不到的效果。

  如果它不出于任何目的,请删除

  在用户网站上使用texture之前,请精炼好你的技术。必须反复的确认你使用texture出于某种有建设性的想法,如果你不能够使得texture有助你整体设计的提升,请放弃。

  没有任何理由需要过渡使用texture。web的全部目的是为了传播信息,当然没有必要去让你的内容毫无可读性。所以,精炼和细微的纹理效果可以更好的帮助提高项目水平。

  考虑你想达到什么样的效果

  从我们的经验得知,肆无忌惮的使用texture是件多么容易的事。而在头脑里一直想着你希望最终达到什么样的效果可以有效的避免滥用情况的发生。如果你想要一个淡淡纹理效果的背景,那就马上做,之后就去执行下一步。否则的话,你可能再也不会完成它。

  收集资源,这样你不必在用时才去搜索

  你需要花大量的时间去搜寻和下载那些对你来说有用的资源,保存资源是一项伟大的辅助工作。请相信我们,没有什么比错过一个完美笔刷,再想用时已经找不到地址时更加令人沮丧了。我们的笔刷列表既长又多样化,长年累月的时间里,我们从类似deviantART和Brusheezy里收集各种各样的笔刷,然后自定义成为自己的。

  学会蒙版技术

  学习使用图层蒙版会为你在工作节省下大量的时间,同时也会成为你的利器之一。图层蒙版也是一个超棒的方式而不会破坏任何原图设计。网络上有大量关于蒙版的技术文章,这里有个快速搜索链接,如果你需要的话。

  不要为了减少下载时间而牺牲质量

  这里有很多有趣的办法可以在保持使用texture的同时也不牺牲下载时间。但是千万别一味的降低texture的质量,因为与其显示得专业,慢一点儿不别让网站刚刚面世就已经过时。平铺纹理图案是个比较好的办法去节省下载时间。

  当然,我们还是希望能够设计出脑袋想要的效果来,但愿随着全球网络速度的提高,下载时间将会不再是你考虑的主要问题。尽管如此,还是让你的texture使用理由充足吧,一个网页如果使用过多的texture仍然会不可避免的下载缓慢。使用平铺的小图案作为背景吧,Tileables已经开始实践,你不妨跟他们学一学。另外我们还有CSS Sprites技术,或者使用雅虎的图片无损压缩Smush来减少图片的加载时间。


  合理选择texture

  最后,和保证可读性一样重要的是,为你的设计选择合理的texture。如果你是帮助一家家具店做页面设计,那种生锈效果的纹理显然非常不合适。texture是为了营造一种特性,而不是迷惑了来访者,无论不管这些texture看起来有多好看。实用性永远应该优先考虑。

  如何 DIY texture

  获取一个texture最常用的办法是自己去制作。而且我们强烈建议你这么做,因为这种方法不仅省时而且常常会意想不到的出彩。其实自己动手制作方法十分简单。

  拍摄照片

  最简单的办法就是抓起你的数码相机去拍你身边可见各种纹理,特别是那些你从来未曾考虑过会成为纹理的物件。比如,蛋糕的表面或者水池里的泡沫。如果你环顾四周,原来你不屑的那些东西也会是很棒的texture,像倒塌的建筑,水泥墙面,生锈的金属,树皮,风化的木质等。它们都是超级棒的样本。而一件普通的数码相机,或者带摄像头的手机就已完全够用。

  在拍摄的时候,使用自动模式,关掉闪光灯,耐心的照出清晰满意的纹理效果,然后稍微进行下后期处理即可使用。我们人人都可以成为图片编辑。

  扫描仪

  另外一个很好的工具就是扫描仪。(在生活中比较少会用到,这里省略)

  锦上添花

  你还可以通过加工这些原料形成新的texture。在PS中使用图层混合模式,你可以组合各种各样的texture制作新的texture,看看 lostandtaken这个网站,也许不是难事。

  信或不信,PS里有很多滤镜同样可以制作texture。比如噪点滤镜,通过设置噪点值来获取一种纹理效果,也许这正是你所需要的。

时间: 2024-11-03 22:03:48

网页设计中纹理的运用技巧的相关文章

网页设计中文本排版的技巧和细节

网站的核心是内容,用户访问网站最重要的目的就是要看网站的正文,所以,网页的文本排版非常重要. 网页的文本排版并不是仅仅在CSS里设置个字体大小那么简单的,想要有好的排版,对细节要下一番功夫才行. 字体大小与行距 在早期的网页设计中,设计师为了追求中文字体的最佳视觉效果,经常使用12px像素的字号.其实在现在看来,网站内容页面用这么小的文字是不可取的,小字体的可读性很差,没有多少人愿意非常费力的盯着屏幕去辨识那些小字.应该说,将文字的字号设置成14px或者更大的16px会更加合理,浏览者阅读起来也

在网页设计中对称手法使用技巧

文章描述:在网页设计中,对称/不对称的有效运用可以达到非常与众不同的效果. 在设计中,对称创造了平衡,平衡了创造和谐.秩序和审美.自然界中对称无处不在,也许正是这种无处不在的状态让我们发现对称的美.形态学的基本原则之一就是对称,它是一套人类形为理论,形态学认为人类对看到和遇到的事物本能的产生出秩序和完整性. However, symmetry can get boring. Asymmetry is a break in symmetry, which when used effectively

网页设计中实用的制作技巧

我们知道一个网页要想获得更多的回头率,一个非常重要的一条就是要不断更新. 1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法非常多,我们能单击鼠标右键选择Custon Style来调用Style标准,也能在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似相同,但实际上产生的HTML代码则完全不同.比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽

网页设计中实用的制作技巧十三个

1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同.比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用Style. 2.活用Format Tab

网页设计中的图标的使用技巧与资源合集

  提到图标设计,似乎每个设计师都有话说,但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理,从设计技巧到设计资源一应俱全,但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分,它们不仅能协助UI布局组织内容,而且轻量级的图标融入界面也不会喧宾夺主.不仅手机和平板的APP UI中会大量用到各种图标,而且iPod和智能手表的界面中也是如此,这正是因为图标具备快速直观传达信息的能力. 在网页设计刚刚兴起的时代,小图标就已经被早期的网页设计师和开发者投入使

网页设计中常用的技巧:最常见的固定浮窗设计

文章描述:固定浮窗在设计中的使用. 固定浮窗是网页设计中常用的技巧,指一定区块固定在浏览器的响应位置而不随滚动条的移动而改变位置的设计. 最常见的固定浮窗设计是固定在浏览器底部的弹窗广告,比如新浪首页会有新浪视窗的弹窗广告. 最近当当网首页广告力度很大,其中大部分都是固定在浏览器底部和两边. 由于固定浮窗总是显示在网页内容的最上端,有时候甚至覆盖了用户想要的价值内容,这种设计确实不讨人喜欢.有时候,有的固定浮窗会提供"关闭"按钮,但是这明显不能消除用户的反感情绪,因为在一片广告上找关闭

网页设计中优化图片的6大技巧

  例如,在网页设计中更常使用基于像素或栅格的文件格式,诸如JPG.GIF或PNG.相反,在平面设计领域像logo这样的图形可能会用到不同尺寸,因此使用最多的格式则是EPS和AI这样的矢量格式.然而,用于网页的矢量格式,如SVG或HTML5 Canvas则不能广泛应用,也不会被所有浏览器所支持. 另外,用于web端的图形有基于它们自身的相关处理方式.其中一条便是你要时刻注意文件的大小,因为你需要使你的网页加载越快越好.作为一名网页设计师,你应当尽量减少HTTP对图像的请求次数--无论通过减少图片

网页设计中透明效果的使用技巧

运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像"变薄"或者降低饱和度,使颜色变浅透明,这样下个图层的内容就能穿透显示出来.这种方法如果用好了,效果将会特别棒--能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这么做可能会

网站设计分析:网页设计中透明效果的使用技巧

运用好透明效果是提高网页设计水准的重要方法之一.如同使用其他方法一样,设计师们有很多种手段将透明效果运用到网页中,今天这篇文章就来好好和您分享一下关于"透明"的实用小技巧哟:) 在网页设计中使用透明效果是件既美观又冒险的事儿.透明效果的使用是把色块,文本或图像"变薄"或者降低饱和度,使颜色变浅透明,这样下个图层的内容就能穿透显示出来.这种方法如果用好了,效果将会特别棒--能突出显示文本或者在图像的特定区域形成焦点.但设计者在运用透明效果时要特别小心,因为这么做可能会