<b>创建网页背景材质时常用到的4种方法</b>

作者: 来源:未知 2012-03-23 10:08:11 阅读 我要评论 直达商品

  网页设计中建树布景材质凡是是按照设计标的目的睁开设计的第一步,也是确定设计基调的主要环节。虽然年夜年夜都情形下,网页布景材质长短常细微和低调的,可是因为整个布景典型围较年夜,所以会给人强烈的心理感应感染。所以这篇文章中,我会就网页布景材质建树过程中常用到的体例做一总结,但愿对于巨匠在设计中的开首轨范能够授与辅佐的参考。

  一、使用现成的图案来建树网页布景材质。

  1、下载现成的图案聩式,或者自己脱手建树图案,关于若何自己建树图案,之前我写的一篇文章《在Photoshop中建树多种样式的网格布景图案》以及《在Photoshop中建树犯警则无缝拼接图案》可以作为参考。下载完或者建树好图案之后,在图财揭捉?式中选择图案叠加即可。虽然看起来是很简单的一个轨范,可是如不美观有了高质量的图案聩式,效不美观很是显著。下面是我收集的一些经典的图案文件,其中搜罗五类图案聩式。

  下载:http://startwmlife.com/wp-content/uploads/2012/03/background-patterns.zip

  2、如不美观下载的图案色调不合适设计要求的话,可以经由过程图层同化模式来进行调整。好比我们想要建树浅色的布景材质,可是手头的图案聩式是暗色的,如不美观图案叠加的同化模式为正常的话,建树出来的效不美观如下图:

  

pattern-normal.jpg

 

  可是我想用这款图案做出浅色的布景来,该怎么做呢?这时辰就可以经由过程调整图案叠加的同化模式来实现。在布景色不美全是白色的情形下,一般像膳缦沔的图案,经由过程调整同化模式到亮光就能获得如下图的效不美观。

  

pattern-lighter.jpg

 

  3、还过错劲的话,好比想要亮度再稍微再亮一点,还可以经由过程新建调整图层来实现。在这个例子中,使用色阶调整图层就可以实现我们的设计方针。你还可以经由过程添加口角图层来给整个布景材质去色,经由过程色相饱和度图层调整布景材质的色相以及明暗值。

  

pattern-lighter-level.jpg

 

  4、经由过程在图案图层上方新建一个颜色填充图层,调整该图层的图层同化模式,我们可以给图案图层添加必然的颜色。好比加一点黄色进去,或者加一点蓝色。当然这里我们依然可以经由过程添加色相以及饱和度调整图层来给原本是灰度的材质上色,具体体例就是在色相饱和度调整图层的对话框中勾选着色框,然后调整色相的滑动块来实现。

  

hue-saturation.jpg

 

  

patter-color.jpg

 

  

patter-color-blue.jpg

 

  《在Photoshop中建树一个布纹材质的网页》可以作为这种体例的参考教程。

  二、应用滤镜来建树网页材质布景。

  在使用滤镜来给网页布景添加材质的体例中,最常见到的莫过于使用滤镜中的添加杂色呼吁来实现需要的效不美观了。应用轨范为,先将图层转转为智能对象,目的是便利随时调整滤镜值。然后应用滤镜>杂色>添加杂色呼吁即可,很是简单。一般来说,添加杂色时,滤镜数值的设置很是低,一般使用1%就够了,而且效不美观很是好,数值太年夜材质看上去不够自然。具体设置如下图所示:

  

add-noise.jpg

 

  杂色布景效不美观如下图:

  

noise-pattern.jpg

 

  三、使用笔刷来添加质感。

  使用笔刷来建树网页布景材质也很简单,一般的轨范是,将前景色调整为白色,选择画笔工具,调整好巨细,在新建的图层上随机添加一些笔刷效不美观,经由过程多建几个图层,调整分歧图层的图透明度可以让添加的材质看上去更自然和真实。之后将图层的同化模式调整为叠加或者柔光让笔刷效不美观和布景更好的融合。下面的图片是添加了划痕和做旧效不美观的笔刷后,未更改图层同化模式之前和更改后的效不美观:

  

brush.jpg

 

  

brush-layer-softlight.jpg

 

  除了膳缦沔的做旧气概常用到这种体例外,笔刷体例的应用还经常呈此刻水彩气概的网页设计过程中,下面的这两个设计教程充拭魅展示了笔刷在建树布景材质中的体例。

  《在Photoshop中建树一个水彩气概的网页设计》

  《建树一个作旧的,半透明的小我网页》

  四、使用材质图片来建树网页布景

  好比我们要让网页布景看上却是纸质的感受。当然可以经由过程添加分歧条理的滤镜效不美观模拟来实现近似于纸张的材质,可是相较于直接把一张纸质材质的图片拖到文档中,经由过程调整图层的同化模式以及膳缦沔提到的各类调整图层来实现的话,后面的一种体例做出来的效不美观往往要更真实和自然。近似的还有木质的布景材质的实现。《在Photoshop中建树一个游戏界面窗口》这篇文章很好的阐释了这种布景材质设计体例以及膳缦沔几种体例的综合运用。


  推荐阅读

  软文,形软而意不软

软文,其本意说的通俗一点就是文字广告。与以往的硬广告分歧,依托于中国的文化精髓的文字彼此组合形成各种让酬报之赞叹的语句。现在,越来越多的企业单元在收集上的广告进行了更多的投放,也无不为软文打开了巨年夜>>>详细阅读


本文标题:<b>创建网页背景材质时常用到的4种方法</b>

地址:http://www.lgo100.com/a/22/20120323/43479.html

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
我的评论: 人参与评论
验证码: 匿名回答
网友评论(点击查看更多条评论)
友情提示: 登录后发表评论,可以直接从评论中的用户名进入您的个人空间,让更多网友认识您。
自媒体专栏

评论

热度