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

关于网页图案

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

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

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

一、十字网格图案

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

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

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

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

[1] [2] [3] [4]  下一页

时间: 2024-12-03 04:47:41

Photoshop绘制用作页面背景的网页图案的相关文章

PhotoShop绘制漂亮的粉红心形图案教程

首先在Adobe Photoshop CS5中创建一个新文件(Ctrl + N),大小1280px*1024px(RGB颜色模式),分辨率72 pixels/inch.选择图层面板中的背景层,从图层面板底部点击添加图层样式图标,选择渐变叠加. 点击颜色条打开渐变编辑器,按下图设置颜色.点击OK关闭对话框 现在我们得到了下图的效果 在工具栏中选择自定义形状工具(U),在选项栏里点击形状打开选择菜单.找到心形图案,然后双击形状缩略图来选择它 单击并拖动心形.然后应用转换点工具对心做适当的修改 分类:

PhotoShop绘制童话丛林背景插画教程

每人心中都有一处幽境,本周的教程,我们引领你进入一片静谧森林,皎洁圆月,苍翠树丛,清澈小溪,当你最终到达林中深处,叩响红房子的门扉,你期望着谁的等待? 1.这次的教程,我为大家介绍另外一种起稿的方法,即直接用色块构图,这个方法的优点就是便于对最终效果的把握,与画好黑白稿再叠颜色相比,这样的方法可以锻炼对色彩的把握能力.先新建画布. 2.我想画一个夜晚森林的场景,有明亮的月光,还有葱郁的森林,并且是从树丛里面往外看的视角-- 大概想好了就开始动笔吧~先用渐变工具拉一个渐变. 3.再调整一下画笔,默

利用Photoshop和AI抠出复杂的图案中的印章

  本教程主要使用Photoshop和AI从背景复杂的图案中抠图印章,下面让我们一起来学习. 先看看原图 01.首先打开PS 02.然后剪切出我们要勾线的部分 03.其次进入通道面板选出我们要勾线的部分和其他部分反差比较大的一个通道! 当然我在这里选择了红色通道 04.接下来就是在通道里就行调整 A,调出曲线面板 B.调整曲线直至要勾线的部分和周围的反差达到一个自己满意的值为止 05.接下来就是用魔棒建立选区,当然也可以配合键盘上的Enter键点击通道来建立选取,看个人爱好了 06.进入路径面板

Photoshop绘制炫彩有格调的马赛克背景图

  Photoshop绘制炫彩有格调的马赛克背景图         本教程主要使用Photoshop绘制炫彩有格调的马赛克背景图,现在这种简约美观的效果非常受欢迎,很多同学都在到处找同类风格的壁纸,今天直接上教程,步骤细致,操作简单,拿来练手再好不过.背景色彩可以自定义,自己怎么喜欢怎么来,学完直接换壁纸,特别实用呦. 示例: 这个是我完成的最后效果: 新建一个足够大的画布. 设置一下前景色. 以及背景色. 小技巧:前景色和背景色很多情况下直接作用在滤镜中,也就是说.我前景色和背景色设置成什么颜

精通CSS+DIV网页样式与布局--页面背景

       上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来设置背景颜色.背景图片.首先,我们来看一张图:                   接着,小编会随着上述思维导图的脉络,对各个知识点进行详细讲解,首先,我们来看页面背景色,例子代码和运行效果如下所示:         页面背景色 <span style="font-size:18

js网页中弹出小窗口,页面背景逐渐变为半透明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

FrontPage页面背景属性设置

frontpage|页面 在今天的课程中你将学习如何设定页面.文字.表格及表格单元的背景色.背景图象甚至背景声音等等,设定网页的边距.留白.单元格内文字和图象的显示位置.字体.字号,如何增加.拆分和合并单元格(其实它的设置方法和Word十分相似)等等,学习完本篇之后你已经可以设计出专业水准的网页. 我们首先学习如何设定页面.文字.表格及变革单元的背景色或 背景图象.打开FrontPage98 Editor的界面, 建立一个空白新文件.在页面中插入一个2X2的表格,在表格中随意键入一些文字(以便使

PS设计网页教程:绘制ipad主题宣传单页网页

Photoshop设计教程:ipad主题网页制作教程.先说下这篇教程是比较简单的网页设计教程.利用图片与一些简单效果制作一个ipad宣传单页网页.虽然方法简单,但整体感很强,页面也遵循了ipad简约大方的风格.背景色使用黑灰色.整个网页分几个版面,其中合理使用蒙版,渐变来制作一些效果. 最终效果图 ipad电脑图片 #3a3a3a,#111111.以增加背景的层次感. 新建图层,用矩形工具拉出一个矩形框,使用渐变来填充矩形框. [1] [2] [3] [4]  下一页

Photoshop绘制逼真乒乓球拍

本教程主要用Photoshop绘制逼真的乒乓球拍效果,教程的要点是需要表现好乒乓球拍的质感. 本教程主要用Photoshop绘制逼真的乒乓球拍效果,教程的要点是需要表现好乒乓球拍的质感. 先看效果: 1.新建600*900文件,新建一层,用钢笔工具勾画出如图路径,转为选区.设置前景色和背景色如图,填充背景色,执行渲染-纤维,设置如图. 2.新建图层2,载入图层1的选区,填充如图红色,取消选区后,再新建图层3,将前景色背景色复位,填充白色,执行滤镜-素描-半调图案,大小:2,对比度:50,图案类型