IPhotoshop打造超酷春天背景网页布局.docVIP

实战用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文件中作为背景层，上面添加透明按钮就可以