如何用Photoshop制作网页模板

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

迈阿密大学的艺术科学学院网页通过细节的精心处理给人一种赏心悦目的视觉效果。最好的设计往往就是最简单的设计：一个中心思想，一幅，少量的文字，开放的空间。这种风格的设计清晰、漂亮，让人印象深刻。但真实的生活并不经常是如此的简单，更多的是杂事缠身。在设计一个项目时，往往需要将很多不同的信息同时放上去，一个都不能少，就象现在很多的网站一样，信息密集，显得非常拥挤复杂。 在本文中，我们将介绍迈阿密大学的艺术科学学院网站的版面，它之所以吸引我们的注意，是因为该网站虽然有很多信息，但却给我们留下美好的印象。该网站通过两个途径实现这种效果：一，它尽可能地减少各种元素，只保留最重要的部分（其实仍然是“简单的设计”思想在起作用），二，就是在处理各种细节时都经过精心处理。这种设计手法在技术上其实一点不难，让我们进去看看：主页虽然多达二十多个链接，但整体却显得温和，协调一致。结构： 网站的页面尺寸并没有走极端，不会太长，大多数页面上的内容不需要拖动就可以轻易浏览，是一种方便人们阅读的屏幕尺寸。每个页面由三个区域构成，每一个区域负责不同的信息，最上方及最下方的区域内容是固定的，改变的只是中间区域的内容。不同的颜色定义了不同的区域：白色区域是中心舞台，这个区域通过上方颜色较深的页眉与下方较浅的页脚而得到确定。固定内容的区域包含了各种最基本的元素：标志，链接，搜索等诸如此类的内容。中间白色区域的内容则是变化的，主要展示不同的事件信息、新闻简讯等内容。从下方示意图可以看出，这个页面结构相当紧凑，可以有效组织各种内容，比起那种需要拖动滚动条的页面更容易阅读。紧凑，是其中的关键。页眉：此外由两个色带构成：绿色及棕色。这两种颜色构成了一个简单坚实的页眉并统领着这个网站。标志及链接文字则反转成白色字体。为了柔和视觉效果，左方还使用了象是阳光照射所呈现的一个非常微弱的渐变面。 页眉右方远处有四个固定的链接，文字的颜色显得相当低调，但由于处于页眉的区域内，没有人会忽视它的存在。主链接：第一级链接处于页眉的标色色带区域内。链接的字体、颜色及阴影与上方的标志呼应，使两者之间产生视觉上的联系。 绿色及棕色当然是两种不同的颜色，但如果你将这两种颜色变成灰度显示，你可以发现他们的相同之处，其灰度色值是基本一样的，这个隐藏的共同点使两者在视觉上既有区别，又有联系。下图中，字母的间距比较宽松，与普通的字母间距相比，呈现一种轻松气息，也传达了一种从容及尊严。在屏幕显示时，字母间距较大也更容易阅读。次级链接： 当浏览者深入这个网站时，字体字母及颜色在细节上的变化都在暗示读者这是另外的一些信息。但字体及尺寸仍然与主链接相同。中心舞台：在页眉与页脚之间的白色区域是我们的中心区域，也是这个网站的视觉焦点所在。在每一个页面中的文章，都显得相当简短，而且象印刷的书本那样的文字排版，行距非常大，采用衬线字体，整个页面显得清爽而不窒息。其书本气息让人能够舒适阅读。页脚： 有效设计的页脚是可以发挥很大的作用的。不要将页脚想象成一条多出来的“尾巴”，而应该将它看作是一个支撑点，支撑着上述所有内容的一个区域。页脚区域中放置的也是一些固定不变的内容，如链接、联系信息及标志等。在设计中，层次感是非常重要的。上图左，如果将页眉与页脚设计成相同的份量，给人的感觉就象奥利奥夹心曲奇饼，它分散了读者的注意力，弱化了版面的力量感。相反，三个区域呈现层次感使到每个区域都能够正确承担起自己的任务。在脑海中一定要记住的是，读者的眼睛永远会集中在中心区域内，所以这里要放置最重要的信息。周围所放置是支持性的内容。字体：这个网页中，正文的字体全部采用Georgia字体，可以说是一种在屏幕上显示的最佳衬线字体，当样，Georgia作为印刷字体同样表现良好。中国设计者在使用英文字体时更多会采用默认的Times字体。 让我们看看Georgia字体与Times字体的区别，从这种区别中，也可以知道为什么在屏幕上显示时，Georgia字体会赢了这一回合。点击上图看大图字母的间距与字母形状一样重要， Georgia字体用于正文时，整体显得平滑、重复及具有节奏感。试比较以下两者的观看感觉。

网页模板就是已经做好的网页框架，使用网页编辑软件输入自己需要的内容，再发布到自己的网站。每个网页模板压缩包内包含：PSD文件(可用Photoshop、ImageReady或Fireworks修改)，按钮PSD文件、Flash源文件和字体文件，推荐使用Dreamweaver软件向网页模板添加内容。\x0d\\x0d\创建和设置\x0d\\x0d\1)模板的概念：作为创建其它文档的样板的文档。创建模板时，可以说明哪些网页元素不可编辑，哪些元素可以编辑。其扩展名为dwt。\x0d\\x0d\2)模板的作用：有利于保持网页风格的一致;提高工作效率。\x0d\\x0d\1创建模板\x0d\\x0d\1)创建一个全新的模板：在模板面板中，使用快捷菜单按钮或单击面板上的新建按钮\x0d\\x0d\模板面板的打开：Window菜单--Templates\x0d\\x0d\2)创建基于文档的模板：File菜单-Save As Template\x0d\\x0d\2设置模板页面属性\x0d\\x0d\1)用模板创建的文档继承模板的页面属性，页标题除外。\x0d\\x0d\2)设置：Modify菜单-Page Properties\x0d\\x0d\3定义模板的可编辑区\x0d\\x0d\1)定义模板的可编辑区\x0d\\x0d\在模板文档中选定对象、Modify菜单、Templates、New Editable Region\x0d\\x0d\2)取消可编辑区标记\x0d\\x0d\Modify菜单-Templates-Remove Editable Region\x0d\\x0d\应用和更新\x0d\\x0d\1应用模板创建文档\x0d\\x0d\1)应用模板创建文档\x0d\\x0d\使用模板创建新文档：File菜单-New From Template\x0d\\x0d\或：File菜单-New-从模板面板中拖一个模板到文档\x0d\\x0d\对现有文档应用模板：Modify菜单-Templates-Apply Template to Page-模板面板中选定模板-单击Select\x0d\\x0d\或：从模板面板中拖一个模板到文档中\x0d\\x0d\或：从模板面板中选定一个模板，单击Apply\x0d\\x0d\2)可编辑区和锁定区\x0d\\x0d\在应用了模板的文档中，只有可编辑区的内容才可以修改。\x0d\\x0d\3)把页面从模板中分离出来\x0d\\x0d\如果要对应用了模板的页面的锁定区进行修改，必须先把页面从模板中分离出来。\x0d\\x0d\具体 *** 作：Modify菜单-Templates-Detach From Template\x0d\\x0d\2修改模板\x0d\\x0d\在模板面板中选定模板、单击编辑按钮或双击模板名称或使用快捷菜单的Edit、编辑完成后保存\x0d\\x0d\3更新站点中使用模板的所有文件\x0d\\x0d\Modify菜单-Templates-Update Pages

网站设计简易流程介绍

1策划与草图

2设计与制做

3切割与导出

4编辑与模板

5动画与广告

6链接与上传

按软件及长度划分制做步骤:

1策划与草图

11所有网站和其它设计作品的过程都是从策划开始的。这是最能体现你的才华和创造力的地方。人最大的区别于其它动物的地方就是会思考，会创造，而且唯有这点是难能可贵的!我们必须要在动手打开PS或FW制做界面前就要完成一个网站最最关键的策划部分，它将直接影响

这个网站的成败与否。一个优秀的网站，不仅做得漂亮，而且要方便浏览，可读性强，简洁明快!

网站的风格，用色，版式，布局，栏目甚至每个细小的图标都要经过精雕细琢，深思熟虑。而风格的制定要取决于你所做网站的浏览人群和读者职业背景、文化程度和修养爱好等，只有投其所好才能最大化地产生共鸣;另一方面取决于公司的类型和企业法人的喜好，如果不是要强加入你自己的意志的话，那上述几点已经制定了网站大致的努力方向了!

12本站是商业化的网站面向企业为主，所以我采用简约风格，亮丽明快的颜色和风格，只要学学平面构成和色彩构成就知道如何按其风格去布置各个元素和内容，以及用何种颜色来营造你要表达的效果了，包括冷暖明暗都是很关键的。大面积的中性色不刺眼，而重要的引导视线可以让亮色来担当，冬天喜欢暖色夏天喜欢冷色是人之常情，蓝色那种给人以信任和科技的底韵是我选择它的原因，而像橙、黄等促进食欲的颜色更容易受到食品网站的青睐!

13本着简洁科学的分类原则来划分栏目:首页客户中心窄告介绍合作媒体常见问题媒体报道关于我们

栏目如果划分不好的话，影响框架的调整，后果就是:重头再来了，郁闷吧

本网站主要面向潍坊企业，所以要做得本地化，让人看了感觉亲切，而且要做得漂亮，废话！

14好了，完成上面这些后请拿起笔在纸上按你的创意和设想画一草图，尽是具体些，最好精细到每处阴影和描边!这步很关键的说!

15本节最后就是准备制做网站时所需要的素材了，包括图标，LOGO，广告语，内容介绍等这都是最基本的!

2设计与制做

21如果草图都已经绘制完美后就可以打开PS或FW开工制做和设计我们的界面了，在这里我使用PS，虽然没有FW的高效和专业但更加灵活和自由，这是我最喜欢的，也因为用惯了嘛!^^养兵千日用兵一时，平时的练习和学习在这里派上用场了!呵呵!

22可以在新建的778600页面中先打框架然后再采用逐步细化的方法，还可以采用你自己独特的手法，比如透明玻璃水晶按钮等效果来营造特别的风格，要力求简约和精致!不要放过每个细节的刻画，即使是11的5%透明度的阴影都会给你的页面增彩，别以为别人看不见!

23最好养成分层的习惯，这样可以方便分类和编辑，不至于把上百个图层放在一下层级里搞得一团乱麻，分不清楚。

作为一名优秀的设计师应该有条理，所以请养成分类并为每个图层命名的习惯，这决不是浪费你的时间!

3切割与导出

无论是PS还是FW，哪怕是AI做的设计界面，在切割的原则都是一样的，请遵从以下几个方面:

31首先要按大致的框架切割，如国字型或T字型，注意其完整性

32对于要输入的文字区域、大面积色块或单独的以及flash动画要单独切割成非格式的切片以备插入

33对于添加内容需要很长的区域要注意其伸缩性切割，若有图案要保证可以重复排列

34在切割时要特别认真和小心，不要空留一行或列的一个象素的间隙，要放大让切片都对齐，不留空隙

35其它如按钮和空白处等自动生成的切片，以及创建需要改变外观的切片等

切割完毕后，选择文件另存为WEB页命令，导出为HTML文件待DW编辑。

4编辑与模板

41在DW中打开导出的HTML文件开始编辑，包括大表格居中，设置背景，修改空白可输入区单元格背景为原来切割的等

42将编辑完毕的文件添加CSS样式，包括最基本的TD和ALINK等标签，然后存为模板DWT文件，并^altv新建可编辑区域

43通过模板新建各个页面并添加入相应的内容

5动画与广告

51按原来切片所容留的大小制做FL动画广告条，使用相应的文字内容和广告语，在FL中新建文件

52复制粘贴广告词到场景中，排版并转换为元件578104、53添加相应的背景和动画，调试节奏后发布为SWF文件

54插入到DW中的模板页并调整大小后存盘，其它的页面会自动更新

6链接与上传

61重新设置模板页的导航链接，本步骤也可在第四节完成

62在本地打开首页检查链接与文字内容直到无错，确保链接可正常访问

63上传到申请的空间，在域名解析成功后在浏览器中浏览网上的效果并做相应后期维护!

---