Photoshop绘制用作页面背景的网页图案

http://www.webjx.com/  发布时间:2011-03-20 20:36:42  来源:startwmlife.com 

关于网页图案

首先需要说明的是,用作页面背景的网页图案一定要简单,效果不能太强烈,只需要提供一点点质感就可以了,要不就抢了页面内容的风头。而实际上页面内容才应该是整个网站的视觉焦点。这种经验我们可以在给手机换壁纸的时候收获到,我们经常是本能的去挑选那些非常漂亮的风景照或者非常抢眼的图片作为手机的背景图片,可等真正将壁纸换上去之后发现效果并不理想,原因是手机的屏幕不是光秃秃一片,什么也没有,而是摆满了各种图标、文字。本来信息量就多,再添加上一张夺目的背景壁纸,只能是扰乱本来应该吸引注意力的内容,甚至让人产生纷繁杂乱的感觉。在这点上我们要向iphone的壁纸设计师学习,iphone手机上的壁纸看上去都比较低调,但是壁纸效果却非常突出。因为他们知道屏幕上各种图标才是视觉重点。

我们使用网页图案也要遵循这样的原则。使用网页图案的本意是为了打破背景单一色彩的单调性, 给页面增加不同的特质,让网页内容和背景更有层次和区分性,并且给页面增加触感,可以让网页感觉更加优美、精致和专业。这样会更加强调页面内容,给人留下深刻的印象。但是我们却不能偏离了设计中的视觉焦点。

下图是这次我们将要创建的网页图案效果:

一、十字网格图案

1、创建一个7像素乘7像素大小的文档,之所以选择7像素大小是因为我们要在文档中间画一条垂直线,使用奇数可以保证两边的空白同等大小。然后使用放大镜工具将文档放大到2000%。

zoom in.jpg

2、新建一个图层,选择单列选区工具(M),居中选取1个像素宽的垂直选区,颜色填充为#F3F3F3。再新建一个图层,居中选取1个像素宽的水平选区,颜色仍然填充为#F3F3F3。

grid.jpg

3、接下来将其保存为图案。选择编辑(Edit)>自定义图案(Difine Pattern)命令。之后就可以在图层样式(Layer Style)中的图案叠加(Pattern Overlay)中选择做好的图案样式使用了。

pattern overlay.jpg

这样就完成了网格图案的基本样式。你还可以通过调整新建文档的大小,比如5个像素让网格密集一些,或者11个像素让网格稀疏一些。无论怎样,你都要记住,非常细微的图案效果平铺到整个网页页面的也会看上去比之前强烈得多,所以一定要挑选柔和的色彩。

共4页: 上一页 1 [2] [3] [4] 下一页
更多