Photoshop打造超酷春天背景网页布局

实战用Photoshop制作网站

初做网站的人最头痛的事之一就是网站的布局，网站的布局前面我们已经讲过，表面上看起来就那么简单，真正自己动手时才发现实际上却并非如此。借助Photoshop，在分析和学习别人站点的前提下，可以较好地解决上述问题。

用Photoshop制作网站通常包括以下几个方面的工作：

1、用Photoshop制作自己的网站模板，或修改已有的PSD模板；

2、模板的使用（切图等）。

一、用Photoshop建立网站的基本方法

1、规划：不管是用什么方案建立网站，我们都应该考虑两个问题：

a、版面要分出头部（页眉）、中部、底部（页脚）三个部分。

b、中间部分要考虑两种情况，一是两栏（如乔客左窄右宽，动易左宽右窄），二是一栏，两种情况显示不能变形。有些人想每个板块的页眉不一样，这也是可以的，你可以在程序代码中做文章，那是编程的问题，这里不作讨论。

如果看到别人的页面想拿下来，那就做个截图，建立一个Photoshop文件，把截图放在最底层，作为最初的草图。

2、制作：

a、即使不用别人的版面，最好也还是找一个同类系统的网站截一个图，放在最底层。拉三根垂直辅助线：左边线，中间虚线位置，右边线。

b、建立头、中、底三个图层组。一个版面，少则几十层，多则上百层，不分开图层组管理就很乱，影响工作效率，更影响多人合作。

c、制作的时候最好尽量把文字内容也放上去，可以更接近实际效果，等切图的时候隐藏这些图层。

d、标题样式。一个版面除了头、底要特别制作外，中间的部分应该考虑制作三种标题样式：左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。笔者喜欢把许多的边框样式用js作了一个样式包，随时调用，而标题样式我是使用flash来做的一个样式，使用不同的参数调用，

就可以有不同的样式和颜色，改版的时候就改一个js文件和flash文件，做版面的时候会节省一些时间。

e、常用的按钮样式。常用的按钮其实不用在版面制作的时候做的，可以找回原来的按钮图片一个一个修改。

f、特殊字体的使用。不管是链接还是内容，笔者都主张尽量使用样式表来控制字体样式，确实要用到不常用字体的可把文字制作成图片，这一类的图片要适当使用，因为使用了图片，对搜索引擎的访问是无益的。

g、像素图。尽量使用像素处理，例如一些边框、小图标，会使图片的字节数大大减少，显示快，容易透明处理。

3、切图（即切片）：切图要在FW、Imageready或直接在Photoshop中完成，通常是先要把完稿的作品保存，最好还要做一个备份，然后跳转到Imageready工作。

a、有些人切图时要合并图层，这是没有必要的，图层合并了，以后修改和编辑都麻烦，而且有时候切图还要按一些图层的大小定位来做，例如要切出一个468x60的广告横标，你可以把这个横标的图层载入选定区域（load selection），然后从菜单select把选定区域转换成切片（create slices from selection）。

b、不要把整个版面同时切图。一般来说，头部的色彩很丰富，而中间和底部的色彩比较少。例如一个版面头部的切片，调色板可能要256种颜色，而中间和底部只要18色就能搞定，如果同时切片，就变成同一个调色板，中间的部分也使用了256色，就会使文件大小增加，但如果折中，让头部256色减少为128色或32色，又会影响效果。所以要分别处理，方法是在PS中分别选择头部、中间（中间有时候还可以分出几个板块）、底部，裁切，另存为几个不同文件，然后切图。

c、切图要考虑清楚，你准备使用图层来定位还是使用表格来定位，不同的html图片分割是不同的。例如新阳江网站的两边灰色框，如果使用图层定位来做，背景图只要切一个高1像素宽791像素的背景图，而如果使用表格定位，就要切出左边背景和右边背景。

d、用gif还是用jpg：在同一个文件中切图，Photoshop是允许不同的切片使用不同的文件格式的，但gif格式和jpg格式结合的地方，有时候肉眼都能可能看出颜色的差别，所以同一部分的切图最好使用同样的格式。颜色较少、较单纯的图片，文字图片，从矢量图转过来的小图标、边框背景等图片，一般用gif格式比较好，文件小，颜色不失真。摄影图片、三维软件做出来的彩色立体文字，一般用jpg 格式。如果切片是准备做flash用的，文字部分和矢量图标等就不用了，在flash中使用字体和矢量图比做成位图占用的字节小，动画效果更流畅。

e、有链接的图片：有链接的图片处理方法很多，你可以每个链接切一个图片，也可以切一个大图，在网页编辑器里面编辑的时候添加链接热区。现在更好的做法是使用文本链接，把图片变成背景就行了。

图片链接还可以用flash来做，可以有很酷的动态效果，切一个大图，倒入flash文件中作为背景层，上面添加透明按钮就可以了。要注意的是flash里面的图片，可能会与页面其他图片的色调有些差异，位置也有一个像素的位移，一定要小心处理。

使用了图片或flash作链接，对搜索引擎支持都不大好，作为补救措施，你可以在页面其他内容使用一些文本链接引导搜索引擎找到这些页面。

二、用Photoshop制作网页模板

用PS制作网页模板，应该说灵活性非常大。绝大部分PS的技巧都可以用到这里，只要不违背网页制作的一些基本原则，你可以尽情地创作。本节我们只给出一些实例，希望通过这些例子，大家能掌握好用PS制作网页模板的一些基本技法。

实例1：Photoshop打造春天背景的网页布局

任务：制作如下图所示的网页布局。

步骤：

1、新建立一个淡蓝色背景的文档，并且使用矩形选区制作一个区域，填充为蓝色。

2、背景色设置为白色，然后执行分层云彩滤镜。

3、设置画笔：

4、设置前景色为#158223，背景色为#ADE48C，绘制一些草的图形。

5、使图形比较真实，你可以多绘制一些。

6、将多余的一些删除掉。

7、复制草的图层，然后将图层模式改为正片叠底，效果如下。

8、设置草这层的色相为-24，进行一下高斯模糊，设置半径为1.2。

9、绘制一个圆形选区，填充为黄色，然后进行羽化，半径为9：

10、用自由变形工具绘制黄色的蝴蝶，然后绘制一选区，设置前景色为亮黄色，背景色为暗黄色进

行线性渐变填充：

11、多复制蝴蝶层几次，适当调整亮度和对比度，效果如下：

12、创建一个长的矩形选区，按Ctrl+J复制一层，然后调整使之变暗一些：

13、然后制作一个暗一些的矩形区域，你就可以任意设置输入一些内容了：

实例2：Photoshop简单酒吧网页制作实战

任务：制作一酒吧的简单网页，最终的效果图如下：

步骤：

1、选择文件>新建（CTRL+N），在对话框里设置参数。如图1。

2、新建一图层，现在先从背景开始，首先设好渐变的颜色（这里我们用红色和黑色作为背景色，颜色可以根据自己的喜好调定。）在图中按住shift+鼠标左键向下做直线拉伸。

3、设好背景颜色后，用加深和减淡工具进行编辑，带点布纹的感觉。

4、在用选框工具（快捷键m）在右上角框选出相应的范围后，按住ctrl+j单独拷贝一个图层。在对它进行样式的编辑，参数如下图。

5、选择图层2，用上面一样的方法，框选出相应的范围后，按住ctrl+j单独拷贝一个图层。在对它进行样式的编辑。

6、接着要开始对刚才框选编辑后的图层进行加深减淡的处理。

7、新建图层5，现在对图象进行修饰，用框选工具选取适当范围，如下左图所示填充（R、G、B）=（255，2，252）。再双击图层5进行样式编辑。参数如下图中的右图。

8、将此图层的透明度调到百分之40。

9、新建一图层，选取范围后填充（R，G，B）=（255，2，252）。进行如下图所示的样式编辑，再将此图层的透明度调到0。

10、输入文字，如本例为“黑瞳迪吧”，输入其他必要的文字。

11、对字体进行加工处理，主题黑瞳进行修饰，双击图层到样式里编辑。参数如下图，将此图层的透明度调到0。

12、找个一些相关的图片放入（但要符合你给予的主题，可不要随便找一些图片哦。），在将图片放到样式里编辑。如图：

13、如果觉得还不够的话就再加一点小修饰，如最终效果图中的右下角。但要注意不要过多，并可以适当地调整透明度。

三、Photoshop打造网页相册

如下图所示的这种网页相册在个人网站中极为常见，当点击缩略图时对应的图片就在大图处显示出来。

用通常的静态网页制作方法做这样的相册很烦琐，要手动去处理众多的图片、把它们统一裁减、然后一张张地放到制作好的表格里去的话，工作很大。其实用Photoshop CS其实很容易实现这样的网页

相册。注意：这里所说的Photoshop CS要用完整安装版的，目前流传的绿色版、精简版好像都把这个功能“精简”了。

操作步骤如下：

1、图片收集

首先准备好自己中意的图片，在“我的文档”新建文件夹命名“原始”，把这些图片放到文件夹内，再在“我的文档”里建立一个文件夹命名为“像册”作以后生成相册用。

2、 WEB照片画廊的设置

步骤1：整理好要制作成网页像册的图片，打开PHOTOSHOP CS点“文件——自动——WEB照片画廊”。

步骤2：完成步骤1后会弹出对话框：

步骤3：详细的设置—样式部分。这里的“样式”就是PS自带的网页像册的样式，一共有8种样式，更多样式还可以去PHOTOSHOP网站上去下载。这八种已有的网页相册样式分别有：

步骤4：本例选择了“居中桢1—基本”这个样式来给大家讲解（其他形式大家可以参考本例自行练习），接下来就是源图片的选择了。点“源图象—使用”这里让你选择你要做网页像册的图片，点“浏览”，选择“我的文档”里的“原始”文件夹内的图片；在“浏览”的下面有“目的”，就是说自动生成

的网页像册要放到什么地方，我们选择“我的文档”里的“像册”文件夹。

步骤5：点“选项”会有“常规、横幅”等6种样式，在这里，我们选择“横幅”，如果有兴趣的话，你也可以多做几次尝试，选者自己最喜欢的样式。网站都是有名称的，接下来在“网站名称”写上自己喜欢的名称、摄影师以及相关信息，时间这一栏PS是根据你电脑的本地时间来决定的，所以你要修改成你拍摄这些照片的时间。

步骤6：完成以上的设置后，如果你的图片比较多的话，建议关闭一些程序减少系统资源的占用，然后点对话框右上角的“好”，这个时候PS就开始“发疯”似的将你要做成网页像册的照片进行裁减处理，图片多的话会需要一段时间。

步骤7：当PS处理完这些图片后，会有片刻的停顿，之后会自动弹出已经做好的网页像册，来看看效果。如下图所示。

利用PS这个实用的小功能，即使不会HTML语言、不懂得网页制作软件，照样能做出不错的网页像册，点左边的小图，在右边就会出现大图，在照片比较多的情况下，是比较方便的。如果你懂得网页制作的话，可以用DW或FP自己更换PS自带样式的颜色和布局等等。

下面来看一下PS都生成了些什么文件，打开名字为“像册”的文件夹，Image是装中图的文件夹；THUMBNAILS是放置略缩图的文件夹；UERS……这个文件是配置文件；INDEX是这个网页像册的主页，想看图片的话，双击它就可以；PAGES 是所有图片的内嵌文件。如果你有网站空间的话，将下面的6个文件及文件夹上传到空间里，就可以和好朋友们一起分享快乐，毕竟这是自己做出来的网页像册，相比大网站提供的像册服务更有意义。

四、模板的使用

如果你熟悉PS但不会网页制作工具，是不是不能做出精美的网页呢？答案是可以的，我们用PHOTOSHOP的“保存图片的WEB功能”就可以轻松实现。不会画表格？可以在PS上做表格，总之自己想象中的网站是什么样的、什么颜色的、什么风格的等等，我们像前面介绍的一样把这些想法当一张效果图制作出来，裁剪好，只需要一个步骤，PS就会帮我们自动生成一个网页，并且无需懂得HTML 代码。

另外，网上有大量精美的PSD格式的网页模板，你可以直接修改后再切图生成网页。

下图是一个小型个人网站模板的例子，当然不论什么样的模板，步骤都是一样的，要做到举一反三。

首先，我们要根据自己的需要对模板上的文字进行修改、删除和增补。也可以对已有图片作相应处理。

观察效果图我们可以看出，该效果图总体上分三行一列：最上面标题为一行；中间的内容部分为一行；最下面的相关信息为一行；整体为一列；细分的话最上面一行又可以分为三列；中间内容部分可以分为两列；最下面相关信息部分又可以分为两行。整体的布局应该如下图：

布局分布出来以后，一些制作网页的老手会开始启动网页制作工具勾画表格了。那我们初学者要做什么呢？下一步就要用PS的图片功片功能，根据图3的布局分布样式，对网页效果图进行切片处理。

1、打开模板，选择切片工具，这个时候鼠标就会变成裁纸刀的样子。

2、为了切片的精确进行，在切片开始前按CTRL+R打开标尺，图象周围就会出现标尺为裁减提供参照。按照布局分布，对效果图进行裁剪。如图。

需要注意的是，在裁剪效果图之前要确定好哪些地方需要进行预留，比方本效果图上的“草原部分”是预留给文字内容的，而旁边的“石板”是预留给文字标题的，这两个部分是要进行嵌入式框架处理的。

3、适当调整一下各个切片之间的匹配问题，确认无误后，点菜单“文件—储存为WEB所用格式”。

在之后的弹出对话框中，让选择图片质量。因为图片质量过高的话，影响网页的浏览速度；图片质量过低的话就会色彩失真影响美观。这里要点四联显示，PS会自动给出四种不同颜色，选择又不太大又没有明显失真的样式。下图上显示我们可以发现第2种是最符合网页图片要求的，所以在确认没问题

后点“储存”选择好储存位置，会提示“储存的某些文件为包含拉丁字符，可能会与某些浏览器不兼容”不用管它，点确定。之后PS就自动生成了一个网页，网页的名字和效果图的名字一致。

4、浏览器中的效果。如图8

上面的办法不仅可以用来切模板，也可以用来切网站的屏幕拷贝，还可以用来切大的图片。有些同学会问，在浏览器中的效果和效果图一致，为什么还要费劲将其裁剪呢？这是因为一张整的效果图大小可能在200K或更高，浏览器下载就会变慢，要知道访问速度太慢的网站是会被浏览者放弃的，所以要把整图裁剪成小块，加快下载速度；其次，网站是要进行更新的，根据布局裁剪在以后的更新过程中会很方便的。

切片不仅可以用Photoshop，也可以用Fireworks，初学者建议用后者。切片完成后一般应使用网页工具进一步“深加工”，具体的我们将在“实训篇”中介绍。

仅供个人参考

不得用于商业用途

仅供个人参考

仅供个人用于学习、研究；不得用于商业用途。

For personal use only in study and research; not for commercial use.

Nur für den pers?nlichen für Studien, Forschung, zu kommerziellen Zwecken verwendet werden.

Pour l 'étude et la recherche uniquement à des fins personnelles; pas à des fins commerciales.

толькодля людей, которые используются для обучения, исследований и не должны использоваться в коммерческих целях.

以下无正文

Photoshop制作一款漂亮的网页模板

在这篇网页设计教程里，你将学习制作可以用于整站的一个既优雅又专业的网页，我们将用到Photoshop软件里的一些基本的工具，比如：笔刷和图层等。而且在教程下方包括了此网页的HTML/CSS/JAVASCRIPT模板和素材，你可以下载用作学习或使用都可以。 下面先预览一下本教程的最终效果： 教程开始： 第一步：新建文件打开PS软件，点击文件-新建命令或Ctrl+N键新建文件，设置宽度1020px，高度1180px，背景默认为白色，点击确定即可; 第二步：创建导航背景我们将从header开始我们的设计，所以我们先用矩形选框工具，在画布上新建一个矩形选框，如图所示，填充颜色#393939;

然后设置图层的混合模式为叠加，不透明度设为23%; 第四步：创建网页logo和name对于教程中的logo，我使用了Georgia字体并设计为粗体并倾斜，设置‘SIX’的颜色为#FFFFFF，‘STUDIOS’的颜色为#F7E5C4，logo旁边的图片用的是素材中的boxupload32图片。样式如图所示： 第五步：加入导航链接活动链接的颜色我用的是#DBD1BE，普通链接用的颜色为：#ABAAAA。 为了使活动链接显示的更突出，在其后便添加一个矩形框。选择圆角矩形工具，设置半径为5px，前景色为#464646,然后在活动链接处添加矩形背景，样式如图： 给矩形背景图层添加内阴影和描边效果，具体设置参数如图：

第六步：给特色区域添加背景在我们网页布局的顶部，需要有一块特色区域，这块区域通过播放幻灯片将网站的特色内容展示给来访者。这块区域也可以同时包括对网站的介绍等，第一步我们需要做的就是利用矩形选框工具选中这块区域，然后在此矩形选区中填充颜色#D3CAB8。 然后你需要下载

网页设计中四个页面布局要点

https://www.wendangku.net/doc/e414326789.html, 网页设计中四个页面布局要点网站排版布局是整个网站页面的核心，网页的基本结构千变万化，布局也不必拘泥于固定的格式，设计师根据实际情况变化即可。不过，关于网页设计的四种布局要点还是需要知道的。 一、无边界 无边界的布局模式，只是画出了一个大致的框架图，也许你只是想说这只是框架，因为设计规划前期很多素材还并不完善。一段文字和一张图片，甚至一个图标，在你进行布局的时候，由于素材并不是立刻手到擒来，因此布局总是喜欢用一个个矩形来代表一段文字或一张图片，这本没有错，但这个做法也会让人陷入“框架陷阱”。 二、基于模块或网络 有些排版方式是建立在模块化或类似网格的结构上的，在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用，它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。 三、垂直分割

https://www.wendangku.net/doc/e414326789.html, 垂直分割式的布局在上一篇文章中我们也有提到过，使用垂直分割布局，原因有两个。有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢？这种方式，可以让你突出两者，并让用户迅速在其中做出选择。第二是要表现出重要的两面性。 四、几何图形 网页设计布局几乎都是由几何构成的，三角形、圆形、矩形等等，都经常被使用。加之显示屏本身就是矩形，因此在布局时最常用到的也是矩形。 在实际的网页设计过程中一定是花样百出的，绝不可能用一两种布局模式就轻松完成，多思考多改变，总不会出错。但不管如何变化设计方式，最终还是要围绕着“美观”与“用户”进行的。

PS网页设计与制作

PS网页设计与制作

PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop 设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。 二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理

解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通

过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点 主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案 八、教学过程

网页设计-页面布局篇(Css+Div)

网页设计-页面布局篇(Css+Div) >>目录<< 第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决各种浏览器之间的兼容性(暂不讨论)

第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。

其基本布局见下图： 主要由五个部分构成： 1.Main Navigation导航条，具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框，一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏，包含版权信息等。Width: 760px Height: 66px 第二步：创建html模板及文件目录等 1.创建html模板。代码如下：

ps制作网页效果图—多种模版

Photoshop详解制作漂亮的绿色首页模板，第一，对于一些做网站的爱好者，下面真的是个好例子;第二，设计出来的效果也很不错;第三，内容齐全，很值的学习。 在这篇教程中，你将学会如何在photoshop中制作一个漂亮的绿色的干净的网页效果图。你将学会一些很时髦的设计技巧，像是如何制作3D丝带，或者是如何设置看上去很专业的渐变色。这是教程的第一部分。 最终效果图 看一看我们最终的效果图吧，看上去还不错:> 在photoshop中新建文档

1在photoshop中新建一个文档，尺寸为980px × 830px. 2 如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图>标尺（Ctrl + R）可以显示标尺。 3 在画布的四个边，分别拖拽四条标尺线。在这四条线中间，我们将绘制我们的页面。 创建页面背景

4 选择圆角矩形工具(U), 设置圆角半径为10px，设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。设置这个图层名字为“bg“. 5 好了，现在，我们将扩大我们的画布。首先，缩小我们的画布视图(ctrl+-)，然后点击图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。

6 再一次选择图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。

7 在图层面板中点击背景图层，设置前景色为#6C821C，用油漆桶(G)填充背景。

8 在背景图层上面创建一个新图层，命名为”gradient“. 9 在工具栏中选择渐变工具(G)，从画布头部开始向下拖拽出一个从白色到黑色的渐变。 10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.

解析网页界面设计和布局

近几年来，随着科技、计算机技术的迅猛发展和人们生活水平的不断提高。互联网以惊人的发展速度并且越来越深入到人们的生活和工作、学习中。信息的传播形式、内容、数量也在空前的改变着。互联网它凭借着一个崭新的媒介和独特传播形式打破了传统性的、地域性的、经济文化性的阻隔，并且在信息的传播范围和传播速度达到一个质的飞跃。随着互联网的发展，周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计—也开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，大则可以称之为现代原创艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来。然而设计师们在设计界面的同时却忽略了一个微不足道的，但是却又是至关重要的“微观”元素—网页设计的“细节”处理。它可以让设计师们的界面美观度达到极 致的升华，也可以让界面变得暗淡和乏味。 然而，一个网页设计的“微观细节”都表现在哪里呢?它们要在何时何地出现才能为我们的界面设计带来一个极致的升 华呢?网页设计的“微观细节”主要表现有以下几点： 壹—页面的整体颜色，也可以称之为颜色。 貳—页面的整体布局，也可以称之为排版。 叁—页面的字体元素。也可以称之为字体。 肆—页面的效果元素。也可以称之为效果。 以上四点归纳出网页设计的“细节”主要在以上这些地方着重处理。 页面的整体色彩可以直接反映这个页面对用户的视觉感官，鲜艳的颜色可以给用户一种清新、活泼的视觉感受，然而此 时细节就在于设计师对于色彩与色彩间的把握。 图：

单一的色彩元素也可以给用户带来另一种不同的视觉感受，如：黑白单一色调可以给用户一种稳重、时尚的视觉体验，然而此时细节就在于设计师如何“画龙点睛”打破单一的色彩体系，不让用户感受到压抑的心理。 图：

Photoshop做一个网页

实训项目二 Photoshop制作网站首页第1讲制作首页的主体部分 课程总览 在本课程中，朋友们将学习到以下内容： ?? 如何通过Photoshop CS3 进行网站首页的版面设计?? 各种网页版面元素的设计技巧和方法 ?? 如何进行网页的切图以及切片的属性设置 ?? 如何创建与Flash 整合的FLV 视频

?? 在Dreamweaver CS3 中使用“Spry 选项卡”构件 ?? Photoshop、Flash、Dreamweaver 的协同工作 第1 讲制作首页的主体部分 本文以“石桥花园”的网站首页为例，来演示页面创作的整个过程。其实“石桥花园”是不存在的，笔者虚构出来也并非只为完成本例，我一直向往生活在幽静、闲雅之所，虽然“石桥花园”离我的初衷有很多差异，但也多少能表达我的一些想法吧。 书归正传，早先的网页页面设计一般是以Dreamweaver 为中心，由Photoshop 或Flash 等软件来提供各种素材，如图片、动画、文字等。自从Photoshop 出现了“切图”等专为网页设计所定制的功能后，设计的中心已慢慢转向了Photoshop。因为Photoshop 本身以图像为基础的特性，决定了他能对版面施以更精确的控制，使网页的页面能够更加灵活和生动的布局，这几乎完全解放了网页设计师的创作灵感，不再受方方正正的网页表格所约束。现在我们要制作的是“石桥花园”首页的主体部分，主体部分包括标题、主展示图片和导航条。网页教学网 1. 打开Photoshop CS3, 执行菜单“文件> 新建”。在新建对话框中设置名称为“石桥花园”，宽度为“777”、高度为“800”，这个数字并不“官方”，只是我在平时工作当中测试出来的而已。对于网页来说，一般只用于屏幕显示，所以分辨率为“72”、颜色模式为“RGB 颜色”，其它参数保持默认。 2. 按下Ctrl+A 全选页面，执行菜单“编辑> 填充”将页面填为纯黑色。在工具箱中选择矢量的“矩形工具”，绘制一个如图1-1-1 所示长方形A。然后使用白色的“直接选择工具”将该矢量形状扭曲成如图1-1-1 中B 所示外观，该形状的十六进制颜色值为“#246b34”，一种厚重的深绿色。

浅谈photoshop在网页布局设计中的意义与方法

浅谈Photoshop在网页布局设计中的意义与方法

摘要 当今网络已经成为人们生活的重要组成部分,由此一个新兴的专业---网页设计诞生了。部分技工学校为适应这个职业对人才的需求纷纷开设了网络工程专业。但是在培养网页设计人员的过程中一些教师由于缺乏网页设计实践经验，对Photoshop这个图象软件在网页设计中对网页元素的整合作用认识不足，没有使这个软件发挥其应有的作用。本文针对这个现象，对Photoshop在网页设计和规划中的作用和意义以及运用Photoshop进行网页规划时应注意的问题作了论述，特别是对Photoshop的切片功能和操作方法做了详细的说明，这对于初学网页设计的人员来说更具有指导意义。 关键词：网页设计Photoshop 布局 现在是IT时代，几乎没有哪一行能和网络脱离关系，因此网站的规划与建设已经成为一项专门职业。在网站规划建设中，网页布局设计是其至关重要的一环，它关系到网站能否吸引更多人的眼球，直接反映网站的点击率，而点击率正是网站的生命所在。所以网页布局设计是否美观、规范、合理越来越受到网页设计师的重视。 网页布局设计的软件很多，如Dream weaver 、FrontPage 等都可胜任，但是初学者往往是一上手就使用Dreamweaver等进行规划布局，结果使网站建设延期，下载速度降低，更糟的是合同违约，失掉客户，造成不可估量的损失。纠其原因，关键是忽视

了Photoshop 在网页规划布局中的作用。初学者知道Photoshop 是图像处理软件，但只是把它用来解决一般图像裁切、调整、优化，而忽视它在网页布局设计中的重要作用。 一、Photoshop 在网页布局设计中的作用

用photoshop输出html网页(psd网页模板)

如何用photoshop输出html网页(psd网页模板) 2010-11-03 14:52 在修改好相应的文字与图象之后，我们就将PSD文件输出(X)HTML文件。首先得先对PSD文件做切片，有两种方法： ①使用工具栏上的“切片工具”， 然后在图象上划出一块一块的区域。 ②使用基于参考线的切片，按ctrl+R调出标尺栏，

把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图 将参考线；排好，然后点一下工具栏上的切片工具图表，然后点上面 选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。

接下来就可以输出了: ①依次选择菜单栏上的“文件”→“存储为Web所用格式”→“存储”。 ②接下来就会弹出一个“将优化结果存储为”的窗口，如图 在“保存类型”处有个下拉列框可以选择，因为我们要存储为网页的格式，所以选择“HTML 和图象(* html)”，再选择“保存”就可以输出一个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。

③如果我们需要输出“div+css的网页”我们还可以这么做：在“设置”处的下拉列框，选择“其他” 就会弹出一个“输出设置”的窗口 在第2个下拉列框处选择“切片”

选择“生成CSS” 单击“好”→“保存”就可以输出一个目前流行的“div+css”的HTML网页。 其实标准的网制作完成的工作实际是：psd to html，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法： 1.打开fireworks将图片切割导出为html。 2.直接在dreamweaver之类的工具去拖拉布局，导入相关的图片,flash资源。 3.先在ps中完成切图后，在文本编辑器中看着效果图一步步的制作。 以上是大多被采用的方法，但都不好： 第一种方法最为不好，这样的代码根本不具维护性和可读性。 第二种方法也不好，代码难免会有冗余，做出来的东西基本需要排查一遍。 第三种方法也不好，因为你需要看效果图一点点的拼，也就是说写html标签的时候，你在不断的假设这块要怎么去显示。 正确的做法是： 1.拿到psd后，先不要做别的，直接在文本编辑器中将网页的框架写出来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。 2.写完之后在各个浏览器运行之后确保大体定位都没有问题。

PS网页设计与制作

PS网页设计与制作（主页） 一、教材分析 设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop设计网页。本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。二、学情分析 认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。 知识技能水平： 在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理解为何这么做，以及怎么做。 三、教学目标 （一）、知识与技能 1.了解主页大小，掌握设置主页大小的方法。 2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。 3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。 （二）、过程与方法 1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。 2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。 （三）、情感态度与价值观 提倡学生多观察、多动手实践，不怕失败，只怕不动。在信息技术课堂上勇于探索实践，通过作品展示自己。 四、教学重点 主页大小设定、标题和图片的大小及位置、导航栏制作 五、教学难点

主页中各对象的大小及位置 六、教学方法 任务驱动、分层教学、同伴互助 七、教学准备 极域多媒体网络教室、Photoshop cs5、学案八、教学过程 1.展示范例，吸引学生的注意力，调动学习的积极性 2.师：刚才大家看到的是我们八年级一些同学的网页设计作品，在这些作品当中，有关于美食的，有关于旅游的，还有关于漫画的，还有关于科技的，等等。那么，你知道这些作品是怎么完成的？ 3.教师小结：这些网页，我们一般称之为主页，都是在PHOTOSHOP中完成。观看放映 聆听老师 观察素材文件 并进入创设情境 思考并发表自己的看法

网页设计的四种布布局要点

网页设计的四种布布局要点 排版布局是整个网站页面的核心，下面就一起去了解一下网页设计的四种布布局要点吧，希望对大家有帮助！ 有些排版方式是建立在模块化或类似网格的结构上的，在这些设计中，每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式，不过响应式网页设计让它变得更加有用，它暗示了一种自适应布局模式，可以像搭积木一样，由各种模块组件创建而成。 无边界的布局模式，只是画出了一个大致的框架图，也许你只是想说这只是框架，因为设计规划前期很多素材还并不完善。一段文字和一张图片，甚至一个图标，在你进行布局的时候，由于素材并不是立刻手到擒来，因此布局总是喜欢用一个个矩形来代表一段文字或一张图片，这本没有错，但这个做法也会让人陷入“框架陷阱” 可以肯定的是，这样设计网页并没有多少呼吸的空间，整个网页都被信息所填满，如果稍微改变一下布局的元素大小和位置，其实就会展示出不一样的版面效果，这样的排版也是更灵活的。 垂直分割式的布局在上一篇文章中我们也有提到过，使用垂直分割布局，原因有两个。有时候在一套设计中，的确存在两个同等重要的主体元素。网页设计的通常方法，是按

照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢?这种方式，可以让你突出两者，并让用户迅速在其中做出选择。第二是要表现出重要的两面性。 网页设计布局几乎都是由几何构成的，三角形、圆形、矩形等等，都经常被使用。加之显示屏本身就是矩形，因此在布局时最常用到的也是矩形。 在实际的设计过程中一定是花样百出的，绝不可能用一两种布局模式就轻松完成，多思考多改变，总不会出错。但不管如何变化设计方式，最终还是要围绕着“美观”与“用户”进行的。

photoshop设计网页网站的方法

PS制作网站流程图解（Photoshop在网页设计中的应用实例，photoshop设计网页网站的方法） 2009年10月13日星期二 02:15 刚刚发现了一篇对初学网页制作的人很用用处的教程，转来共同学习吧。但有些地方我不太认同，不过还是有一些地方可以学习的。 1.规划:不管是乔客，还是用动易、风讯，我们都应该考虑两个问题: a、版面要分出头、中、底三个部分。 b、中间部分要考虑两种情况，一是两栏(乔客左窄右宽，动易左宽右窄)，二是一栏，两种情况显示不能变形。有些朋友想每个板块的头部不一样，这也是可以的，你可以在程序代码中做文章，那是编程的问题，按下不表。 如果我看到别人的版面想拿下来，那就做个截图，建立一个Photoshop文件，把截图放在最底层，作为最初的草图。 2、制作。 a、即使不用别人的版面，最好也还是找一个同类系统的网站截一个图，放在最底层。拉三根垂直辅助线:左边线，中间虚线位置，右边线。 b、建立头、中、底三个图层组。有些人用photoshop不喜欢建立图层组，这不是好习惯，一个版面，少则几十层，多则上百层，不分开图层组管理就很乱，影响工作效率，更影响多人合作。

c、制作的时候最好尽量把文字内容也放上去，可以更接近实际效果，等切图的时候隐藏这些图层。 d、标题样式。一个版面除了头、底要特别制作外，中间部分应该考虑制作三种标题样式:左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。我自己把许多喜欢的边框样式用js作了一个样式包，随时调用，而标题样式我是使用Flash来做的一个样式，使用不同的参数调用，就可以有不同的样式和颜色，改版的时候就改一个js文件和Flash文件，做版面的时候会节省一些时间。

用Photoshop制作网页背景图

用Photoshop制作网页背景图 网页背景图的制作 一、建立新文件1.建立一个250 X 150(72像素/英寸)的新文件，不要太大，因为背景图一般是平铺在底面上的。然后把背景填充上浅浅的颜色如淡黄色： （图txt5_step1） 二、输入文字1. 选择你喜欢的字体和颜色输入文字，我这里输入“我的酷站”，然后调整字的大小和位置。这里有几个注意事项： 第一，字的大小和字型最好不要太死板，最好用另外的字体和不同的尺寸突出你想突出的一个或几个字，必要时可以拉长或压扁。 第二，字和背景的颜色搭配要得当，这没有什么规律可言，一般只要看着顺眼就行了。如图: （图txt5_step2） 2.然后选择“图层(Layer)->新建(New...)->图层(Lay er)”两次，建立两个新层，如图所示：

（图txt5_step3） 3.分别在两个层上随便选择一定形状(什么形状？你自己随意啦。)的范围，填充合适的颜色后，将这两个层的透明度降到35%： 三、技术处理1. 下面的步骤很随意，你随便试几个滤镜，只要得到自己满意的效果就行了。我这里的操作是这样的: 绿色方块第一次滤镜：“滤镜(Filter)->模糊(Blur)->动感模糊(Motion Blur)”(角度:0度，距离:20像素) 绿色方块第二次滤镜：“滤镜(Filter)->模糊(Blur)->径向模糊(Radiou Blur)”(数量:52，方法:转动) 紫色方块第一次滤镜：“滤镜->纹理->颗粒”(强度:77，对比度:50，颗粒类型:软化) 紫色方块第二次滤镜：“滤镜->模糊->径向模糊”(数量:60，方法:缩放) 这里的操作能真正体现出你个人的审美观点。 （图txt5_step5） 3.在层面板上点击背景层前面的小眼睛，隐藏背景层，然后点击层面板右上方的小三角，选择“合并可见层”，如图：

仅需五步,让我们用ps做网页!

如何使用photoshop制作网页？ Ps是世界上最伟大的一款图像处理软件，它的伟大之处同时还在于它可以进行基于普通图像处理之外的多种工作，比如，直接生成html。 我们来看看，ps是如何生成html的 在我们将图像“储蓄为web和设备所用格式”的时候，我们的储蓄方式会自然地指向三种 在平时，我们用到的是“仅限图像”，当需要制作网页的时候，我们只需将储蓄方式点选为“HTML和图像”这样，我们就可以直接生成一个“images”文件夹和一个HTML文档 ，一个最基本的网页，也就做成了。 可是，在实际运用中，我们会发现，这个html文档是最初级的，没有超级链的功能，亦无法进行编辑，怎么办呢？ 这时候，我们就需要运用到ps最不常用的一个工具切片，下面，是一个简单的ps网页制作演示 1、我们在ps上做成了这样一个网页模版： 2、接下来，我们就点选切片工具，选下我们将来想做成超级链的区域，比如当我想

把区域做成我想要的超级链区域时，我只需要用切片工具的小刀，将 首页区域选中，这样，我就成功了。最后我们需要选中的三个区域，如图所示： 3、接着，我们只需要将它按照我们一开始所说，在将图像“储蓄为web和设备所用格式”的时候，将储蓄方式点选为“HTML和图像”，就可以了。 4、既然ps已经帮我们处理掉了所有的任务， dreamweaver这个东西还有什么用呢？事实上，它也只有一个用处了，让我们打开dreamweaver，打开一开始我们用ps编辑好的网页

点选我们需要他变成超级链的区域 接着，在链接选项中选择我们希望他链接去的地方 比如，把他连接到首页网页中，这样，一个超级链就做成了。 5、最后，我们需要做得就只剩下了在DW上，将每一个用ps做好的html设置他所需的超级 链，我们就成功了（按照数煤老师的要求，我们大概需要做四个网页）

东财《网页制作：Photoshop平面设计》在线作业三-0019

东财《网页制作：Photoshop平面设计》在线作业三-0019 “自动抹除”选项是哪个工具栏中的功能? A:画笔工具 B:喷笔工具 C:铅笔工具 D:直线工具 答案：C 下列关于参考线和网格的描述哪些是正确的? A:参考线和网格的颜色是不可以修改的 B:如果图像窗口中没有显示标尺，就不可以创建参考线 C:如果图像窗口中没有显示标尺，就不可以显示网格 D:参考线和网格都可以用虚线和实线表示 答案：D 在Photoshop中渐变工具（GradientTool）有几种渐变形式？ A:3种 B:4种 C:5种 D:6种 答案：C 工具属性栏的主要功能是方便（） A:建立选区 B:精确定位光标 C:消除锯齿 D:图像处理

答案：D 在Photoshop中，除了历史画笔工具（HistoryBrushtool）外，还有哪个工具可以将图像还原到历史记录调板中图像的任何一个状态？ A:Brushtool（画笔工具） B:CloneStamptool（仿制图章工具） C:EraserTool（橡皮擦工具） D:BlurTool（模糊工具） 答案：C “描边”命令使用的是何处的颜色： A:工具箱中的前景色 B:工具箱中的背景色 C:色板中随机选取颜色 D:颜色调板中随机选取颜色 答案：A ( )工具是一种图像色彩锐化的工具，即增大像素间的反差。 A:模糊 B:锐化 C:涂抹 D:海绵工具 答案：B 在Photoshop中下面有关模糊工具和锐化工具的使用描述不正确的是 A:它们都是用于对图像细节的修饰 B:按住Shift键就可以在这两个工具之间切换 C:模糊工具可降低相邻像素的对比度

Photoshop网页制作教程

Photoshop网页制作教程：Photoshop设计博客 2009-4-23 19:36:29 已被阅读：2618 发表评论 本教程主要是告诉大家如何在Photoshop里面设计一个有活力并具有现代感的博客界面。 我们会从零开始告诉大家如何从一个空白的画布来一步步的制作出整个界面。 这是我为Springy Developments的一个WordPress主题项目中的一个特别的设计，将来我想我们一起来看看如何将这个设计转化为编码的过程以及最后如何将他们制作成最终的产品。 牢记最初的概念设计稿，下面的教程将会一步一步来明确这个过程。想要一个好的设计，大量的试验和一些元素的重新安排是不可或缺的，因为这将让我们很好的理解为什么使用这些工具，为什么这样布局来设计这样一个产品。

打开PS然后创建一个空白文档。我比较喜欢在一个大一点宽屏文档上面开始制作。切记使用RGB色彩模式以及设置为72DPI就好，因为我们紧紧是在屏幕上使用（注，一般印刷是300dpi，而屏幕只要72就够了，CMYK为印刷色） 首先我们来处理页面的背景，这个地方没什么特别有趣的填充物。给背景选择一个素色，然后从上面使用放射性渐变工具一直拖到中间。当然你也可以选用自己喜欢的颜色，在这里我就选择了我选择的是蓝绿色的渐变。

打开一个牛皮纸素材，我们将用它来为背景增加一些有趣的材质效果。 将材质去色(CTRL+SHIFT+U),然后选择高斯模糊用大一点的像素来抹掉牛皮纸上面的一些细节。

将修改过的牛皮纸材质放在渐变的背景色上面，然后选择混合模式的叠加选项，再修改透明度为90%。 在一个网页设计中设计合理的用户显示器范围是网页布局一个重要的步骤。除非另有要求，我一般都是将分辨率调整到1024×768，因此我在文档的中部将参考线设置为960px宽，两边空白处各有20px宽，这是为了以防一些元素超出之前设置的屏幕分辨率。

06_网页_Photoshop制作网站流程图详细过程

Photoshop制作网站流程图详细过程-PhotoShop网页设计 1.规划：不管是乔客，还是用动易、风讯，我们都应该考虑两个问题： a、版面要分出头、中、底三个部分。 b、中间部分要考虑两种情况，一是两栏（乔客左窄右宽，动易左宽右窄），二是一栏，两种情况显示不能变形。有些朋友想每个板块的头部不一样，这也是可以的，你可以在程序代码中做文章，那是编程的问题，按下不表。 如果我看到别人的版面想拿下来，那就做个截图，建立一个photoshop文件，把截图放在最底层，作为最初的草图。 2、制作。 a、即使不用别人的版面，最好也还是找一个同类系统的网站截一个图，放在最底层。拉三根垂直辅助线：左边线，中间虚线位置，右边线。 b、建立头、中、底三个图层组。有些人用photoshop不喜欢建立图层组，这不是好习惯，一个版面，少则几十层，多则上百层，不分开图层组管理就很乱，影响工作效率，更影响多人合作。

c、制作的时候最好尽量把文字内容也放上去，可以更接近实际效果，等切图的时候隐藏这些图层。 d、标题样式。一个版面除了头、底要特别制作外，中间部分应该考虑制作三种标题样式：左栏、右栏、通栏，也可以统一风格。还要考虑表头背景、一些常用到的边框等。我自己把许多喜欢的边框样式用js作了一个样式包，随时调用，而标题样式我是使用flash来做的一个样式，使用不同的参数调用，就可以有不同的样式和颜色，改版的时候就改一个js文件和flash文件，做版面的时候会节省一些时间。

e、常用的按钮样式。常用的按钮其实不用在版面制作的时候做的，可以找回原来的按钮图片一个一个修改。 f、特殊字体的使用。不管是链接还是内容，我都主张尽量使用样式表来控制字体样式，但有些地方要用到不常用的字体，为了使所有的浏览者都能看到自己的设计原意，就要把文字制作成图片，这一类的图片要适当使用，因为使用了图片，对搜索引擎的访问是无益的。

网页设计的排版与布局

网页设计的排版与布局 有些人始终认为，网页最主要是内容，不需要再搞些门面上的东西，还拿出MUD来比喻。可是，红花还需要绿叶陪衬。想想，若MUD不只是单纯的文本，还有画面出来，那么，它所吸引的何止现在的这些MUD迷呢？那么，我所要说的到底是什么呢？初学者如果能够了解一些设计上的东西，那么，自己的页面不会显得乱，自己看了也开心，别人看了也开心，何乐而不为呢？ 我们的主页，说到底，只是一个800*600的画面，那么，我们要怎么对它进行安排才合理呢？首先，也是最重要的一点，就是先停下创作，先想好一个主题?quot;设计，是一种有目的的创造"。若在动手之前并不了解自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的东西最多局部看得觉得挺不错的，但全局就显得太复杂了。页面上的构成，如果要让别人一眼望去觉得很BEAUTIFUL，这里面实际上是有很大的学问的。 我们先来说说构成，"构成：是将造型按视觉效应、视觉力学和精神力学等原则组成的，具备美好形态的造型"。构成形式里，有空间构成（平面构成和立体构成）和时间构成（静和动）。我们的创作，就是要协调这里面的种种关系，顺应视觉感受，才能够打动观看者的视觉，得到我们想要的效果。在这些形形式式里，都有着如下的部件：点：我们一般认为，点是指圆形的，但这是不正确的。只要在空间里有非常少量的面积，无法形成一个视觉上感觉的图形，都是一个点。无论什么形状都可以。线：点集合在一起就形成线。面：一个平面。体：一个物体。一般是指物体占据的空间，有三维形状。

那么，当点、线、面与体集结在一个页面上时，它们的关系要怎么协调呢？它们之间都有什么作用呢？ 点有集中视线、紧缩空间、引起注意的功能。两个点相距不远而且形状不等时，一般由小向大看。近距离的点引起面的感觉。灵活运用点，可使你的页面有一些本质上的变化。当点占据不同的空间时，它所引起的感觉是不同的。 （1）居中引起视觉集中注意。 （2）上引起下跌落感。 （3）在上左或上右引起不安定感。 （4）下方中点，产生踏实感。 （5）左下右下，增加了动感。 为什么会这样呢？因为人的视觉，都是经过对生活的感觉都得来的。在下方的东西，一般联想到大地。在上方的东西，一般联想到浮云。线、面、体亦然。 线，又分为直线和曲线。直线：给人以速度，明确而锐利的感觉，具男性感。曲线，则优美轻快，富于旋律。曲线的用法各异，需结合自己的需要。而直线又分为斜线、水平线及垂直线。水平线代表平稳、安定、广阔，具踏实感。垂直线则有强烈的上升及下落趋势，可增加动感。斜线，一般我没有怎么使用，因为它造成视觉的一种不安定。 人们每看到一个东西，都试图用横直来分析，斜、歪是人们所不愿意见到的，但适当运用这个要靠个人的感觉。面，指的是二度空间里的形。面又分为几何形和任意形，我个人比

Photoshop制作网页模板

Photoshop制作网页模板 用图层组管理网页元素 首先是在Photoshop中制作好网页的框架。网页中的元素有很多，像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中，这样方便以后的再编辑。 不过图层一多，就显得很凌乱，可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮，从弹出菜单中选择“新建组”，在随后出现的对话框中为新建组取一个名称（如：“网页顶部”），确定即可。这时图层面板中多出一个文件夹图标，即图层组。把相关联的图层都拖放到同一组中，比如网页顶部的所有元素，标题、菜单、Logo等都放到“网页顶部”组中（见图1）。同样方法可以建立多个组，在组的下面还可以建立子组。 本文来源网页吧https://www.wendangku.net/doc/e414326789.html, 点击图层组前面的小三角，就可以像文件夹一样展开或折叠它，这样图层面板就显示干净利落得多，要修改某个元素也能很容易找到。对同一组中的所以图层可以方便地进行统一操作，如整体复制、删除、隐藏、合并等。 小提示： ★如果你想借鉴某个网页的设计，不妨把它截成图片放在最下面的图层中，再拉出多个参考线划出网页的大致版式，再在此基础之上边参考边制作自己的网页。 从Photoshop到Dreamweaver的转换 在Photoshop中设计好之后，下面就要用切片工具把它转换成网页。有些人在切片之前喜欢合并图层，其实没有必要，合不合并图层对最终生成的网页没有多大影响，反而会妨碍以后的编辑修改。 第1步：我们最终需要的，只是Photoshop中制作的图形和框架。选择切片工具（快捷键为K），把需要的每个图形独立切分出来。每切分出一个图形，在它的左上角会显示出切片编号（见图2）。 本文来源网页吧https://www.wendangku.net/doc/e414326789.html,

网页布局的基本概念

网页布局的基本概念 网页布局的基本概念 正如你现在所看到的一样，网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合时，这种网页或者说站点才是受人喜欢的。取任何一面你都无法留住太过“挑剔”的访问者。 一.网页布局的基本概念 最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。 1.页面尺寸： 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。 在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。 2.整体造型： 什么是造型，造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。 对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。 3.页头：

PS设计整洁漂亮的网页页面布局和背景

https://www.wendangku.net/doc/e414326789.html, PS设计整洁漂亮的网页页面布局和背景 今天，我将介绍如何创建一个干净的网络布局、一个漂亮的背景。开门见山，咱直接切入正题吧，菇凉帅哥们有兴趣

https://www.wendangku.net/doc/e414326789.html, 的话，可以打开Ps跟着做哟。 开始设置的文件 打开一个新的文档：外形尺寸1200×1640像素，分辨率为72像素/英寸。 我们要创建基本的背景层。简单的在草稿上勾画出大概的布局与结构，可以看出页面最终的雏形，不过在设计过程中，我们可能会添加新的元素。

https://www.wendangku.net/doc/e414326789.html, 草稿上可以看出，我们将创建5个分栏，在这里我们将添加的内容。 添加的第一层，这将是我们的背景，颜色＃ededed。 在页面顶部绘制一个矩形命名为top1（使用矩形栅格化的图层（颜色＃ededed），并添加杂色（滤镜>杂色>添加杂色0.5 –0.8;高斯分布和单色）。再次绘制矩形，颜色＃cddcec），栅格化的形状和添加杂色（滤镜>杂色>添加杂色0.5 –0.8;高斯分布和单色）。添加一个渐变叠加（柔光，54％，从黑到白的90％，角度和缩放75％）。 接下来添加矩形（U），在中间新建一个矩形（颜色为＃608bb6，高度400像素左右），设置混合模式为颜色加深，并填充为75％，然后添加一个白色的描边1像素（图层样式）。 最后的底部页脚添加一个矩形形状，使用相同的工具和色彩，但现在设置混合线性光，不透明度为70％。 下面的最终结果。

https://www.wendangku.net/doc/e414326789.html, 步骤2 –背景 给我们的背景添加纹理。添加一个新层（CTR + SHIFT + N），使用选框工具在画布顶部添加一个1像素的白线。（仔细看下图顶部有条白线）

PS网页设计流程及操作指导

Photoshop网页设计案例教学网页框图

Photoshop网页设计案例教学详细操作步骤： 一、创建文件及布局参考线 1、创建文件，大小990x1200像素，RGB模式，白色背景，如图所示： 2、设置布局参考线： （1）横向5对参考线，分别为140/150、470/480、740/750、1010/1020像素； （2）纵向2对参考线，分别为325/335、660/670像素； 3、将文件存储为“01创建文件及布局参考线.psd”。 效果如文件“01创建文件及布局参考线.psd”所示。 二、创建布局块之一（LeadStory） 1、设置矩形选区框样式为“固定大小”，大小为660x320像素； 2、在“视图”菜单下将“对齐到(T)”设置为“参考线”或者“全部”； 3、在“背景”图层上新建图层，命名为“LeadStory”； 4、选中图层“LeadStory”，用矩形选区框工具建立一个选区，将选区移动到位； 5、将选区填充为灰色； 6、将文件存储为“02创建布局块之一LeadStory.psd”。 效果如文件“02创建布局块之一LeadStory.psd”所示。 三、创建布局块之二（Story1-4） 1、保持矩形选区框样式为“固定大小”，大小为325x260像素； 2、在图层“LeadStory”上建立一个图层，命名为“Story1”； 3、选中图层“Story1”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色；

5、用同样方法建立相同大小的图层Story2、Story3、Story4； 6、将文件存储为“03创建布局块之二Story1-4.psd”。 效果如文件“03创建布局块之二Story1-4.psd”所示。 四、创建布局块之三（FeatureStory） 1、保持矩形选区框样式为“固定大小”，大小为320x260像素； 2、在图层“Story4”上建立一个图层，命名为“FeatureStory”； 3、选中图层“FeatureStory”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“04创建布局块之三FeatureStory.psd”。 效果如文件“04创建布局块之三FeatureStory.psd”所示。 五、创建布局块之四（Ads） 1、保持矩形选区框样式为“固定大小”，大小为320x590像素； 2、在图层“FeatureStory”上建立一个图层，命名为“Ads”； 3、选中图层“Ads”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“05创建布局块之四Ads.psd”。 效果如文件“05创建布局块之四Ads.psd”所示。 六、创建布局块之五（Footer） 1、保持矩形选区框样式为“固定大小”，大小为990x100像素； 2、在图层“Ads”上建立一个图层，命名为“Footer”； 3、选中图层“Footers”，用矩形选区框工具建立一个选区，将选区移动到位； 4、将选区填充为灰色； 5、将文件存储为“06创建布局块之五Footer.psd”。 效果如文件“06创建布局块之五Footer.psd”所示。 七、建立广告区域布局参考线 1、清除参考线； 2、设置广告区域布局参考线： （1）横向4对参考线，分别为440、582、725、868像素； （2）纵向2对参考线，分别为690、840像素； 3、将文件存储为“07建立广告区域布局参考线.psd”。 效果如文件“07建立广告区域布局参考线.psd”所示。 八、创建广告区域布局块（Ad1-Ad8） 1、保持矩形选区框样式为“固定大小”，大小为125x125像素；