2022利用Photoshop创建多种样式的网格背景图案教程利用Photoshop创建多种样式的网格背景图案教程在去年夏天写的那篇文章《在Photoshop中创建不规则无缝拼接图案》给大家供应了如何在Photoshop中创建以绿草地为内容的无缝拼接网页图案的方法。今日再来介绍一下如何在Photoshop中创建网格背景的无缝拼接图案。关于网页图案首先须要说明的是,用作页面背景的网页图案肯定要简洁,效果不能太剧烈,只须要供应一点点质感就可以了,要不就抢了页面内容第1页共11页的风头。而事实上页面内容才应当是整个网站的视觉焦点。这种阅历我们可以在给手机换壁纸的时候收获到,我们常常是本能的去选择那些特别美丽的风景照或者特别抢眼的图片作为手机的背景图片,可等真正将壁纸换上去之后发觉效果并不志向,缘由是手机的屏幕不是光秃秃一片,什么也没有,而是摆满了各种图标、文字。原来信息量就多,再添加上一张夺目的背景壁纸,只能是扰乱原来应当吸引留意力的内容,甚至让人产生纷繁杂乱的感觉。在这点上我们要向iphone的壁纸设计师学习,iphone手机上的壁纸看上去都比较低调,但是壁纸效果却特别突出。因为他们知道屏幕上各种图标才是视觉重点。第2页共11页我们运用网页图案也要遵循这样的原则。运用网页图案的本意是为了打破背景单一色调的单调性,给页面增加不同的特质,让网页内容和背景更有层次和区分性,并且给页面增加触感,可以让网页感觉更加美丽、精致和专业。这样会更加强调页面内容,给人留下深刻的印象。但是我们却不能偏离了设计中的视觉焦点。关于这点还可以参考《弄清晰设计中视觉表达的重点》这篇文章。下图是这次我们将要创建的网页图案效果:一、十字网格图案1、创建一个7像素乘7像素大小的文档,之所以选择7像素大第3页共11页小是因为我们要在文档中间画一条垂直线,运用奇数可以保证两边的空白同等大小。然后运用放大镜工具将文档放大到2000%。2、新建一个图层,选择单列选区工具(M),居中选取1个像素宽的垂直选区,颜色填充为#F3F3F3。再新建一个图层,居中选取1个像素宽的'水平选区,颜色仍旧填充为#F3F3F3。3、接下来将其保存为图案。选择编辑(Edit)》自定义图案(DifinePattern)吩咐。之后就可以在图层样式(LayerStyle)中的第4页共11页图案叠加(PatternOverlay)中选择做好的图案样式运用了。这样就完成了网格图案的基本样式。你还可以通过调整新建文档的大小,比如5个像素让网格密集一些,或者11个像素让网格稀疏一些。无论怎样,你都要记住,特别微小的图案效果平铺到整个网页页面的也会看上去比之前剧烈得多,所以肯定要选择柔软的色调。二、对角交叉线图案事实上,将之前的十字网格图案旋转45°就是对角交叉线图案,但是这次我们要运用8像素乘以8像素大小的文档,为什么不是之前第5页共11页的7个像素呢?想一想就知道只有偶数像素大小的图案才可能让两条对角线的交点处于文档的中心点。所以这次我们要运用偶数像素大小的文档。1、新建一个文档(Ctrl+N),8像素乘以8像素大小,运用放大镜工具将其放大至2000%。2、新建一个图层,选择线条工具(U),将十字光标放置于文档的左上角,按住Shift键,向右下角方向画一条1像素宽的对角线,颜色选择#F3F3F3,再新建一个图层,从右下角向左上角画一条对角线,第6页共11页颜色任然为#F3F3F3。3、和上面一样,选择编辑(Edit)》自定义图案(DifinePattern)吩咐将其保存为图案。在图层样式(LayerStyle)中的图案叠加(PatternOverlay)中选择已经保存的图案样式应用到大幅文档中。和上面的十字网格图案一样,你也可以调整线条之间的间距和线条颜色来获得让你满足的效果。第7页共11页三、单向对角线图案这就更简洁了,只须要将上面对角交叉线图案的其中一条线去掉保存为自定义图案就可以了。你还可以通过变更线条间的间距、线条的粗细以及线条的方一直创建不同样式的单向对角线图案。如下图:四、添加颜色和材质到此为止,我们要给大家介绍的三种不同样式的网格背景图案就第8页共11页完成了。接下来假如你还想让这些图案有些改变,还可以给它们添加一些颜色和材质。添加颜色很简洁,只须要给图案背景填充颜色就可以了。须要留意的是,颜色...