实战用Photoshop制作网站.pdf

实战用Photoshop制作网站

初做网站的人最头痛的事之一确实是网站的布局，网站的布局前面咱们已经讲过，表面上看起来就

那么简单，真正自己动手时才发觉事实上却并非如此。借助Photoshop，在分析和学习他人站点的前提

下，能够较好地解决上述问题。

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

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

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

一、用Photoshop成立网站的大体方式

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

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

b、中间部份要考虑两种情形，一是两栏（如乔客左窄右宽，动易左宽右窄），二是一栏，两种情形

显示不能变形。有些人想每一个板块的页眉不一样，这也是能够的，你能够在程序代码中做文章，那是

编程的问题，那个地址不作讨论。

若是看到他人的页面想拿下来，那就做个截图，成立一个Photoshop文件，把截图放在最底层，作

为最初的草图。

二、制作：

a、即便不用他人的版面，最好也仍是找一个同类系统的网站截一个图，放在最底层。拉三根垂直

辅助线：左侧线，中间虚线位置，右边线。

b、成立头、中、底三个图层组。一个版面，少那么几十层，多那么上百层，不分开图层组治理就

很乱，阻碍工作效率，更阻碍多人合作。

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

层。

d、题目样式。一个版面除头、底要专门制作外，中间的部份应该考虑制作三种题目样式：左栏、

右栏、通栏，也能够统一风格。还要考虑表头背景、一些经常使用到的边框等。笔者喜爱把许多的边框

样式用js作了一个样式包，随时挪用，而题目样式我是利用flash来做的一个样式，利用不同的参数挪

用，就能够够有不同的样式和颜色，改版的时候就改一个js文件和flash文件，做版面的时候会节省一

些时刻。

e、经常使用的按钮样式。经常使用的按钮其实不用在版面制作的时候做的，能够找回原先的按钮

图片一个一个修改。

f、特殊字体的利用。不管是链接仍是内容，笔者都主张尽可能利用样式表来操纵字体样式，确实

要用到不经常使用字体的可把文字制作成图片，这一类的图片要适当利用，因为利用了图片，对有哪些信誉好的足球投注网站引

擎的访问是无益的。

g、像素图。尽可能利用像素处置，例如一些边框、小图标，会使图片的字节数大大减少，显示快，

容易透明处置。

3、切图（即切片）：切图要在FW、Imageready或直接在Photoshop中完成，一般是先要把完稿的

作品保留，最好还要做一个备份，然后跳转到Imageready工作。

a、有些人切图时要归并图层，这是没有必要的，图层归并了，以后修改和编辑都麻烦，而且有时

候切图还要按一些图层的大小定位来做，例如要切出一个468x60的广告横标，你能够把那个横标的图

层载入选定区域（loadselection），然后从菜单select把选定区域转换成切片（createslicesfromselection）。

b、不要把整个版面同时切图。一样来讲，头部的色彩很丰硕，而中间和底部的色彩比较少。例如

一个版面头部的切片，调色板可能要256种颜色，而中间和底部只要18色就能够弄定，若是同时切片，

就变成同一个调色板，中间的部份也利用了256色，就会使文件大小增加，但如果是折中，让头部256

色减少为128色或32色，又会阻碍成效。因此要别离处置，方式是在PS中别离选择头部、中间（中

间有时候还能够分出几个板块）、底部，裁切，另存为几个不同文件，然后切图。

c、切图要考虑清楚，你预备使用图层来定位仍是利用表格来定位，不同的html图片分割是不同的。

例如新阳江网站的两边灰色框，若是利用图层定位来做，背景图只要切一个高1像素宽791像素的背景

图，而若是利用表格定位，就要切出左侧背景和右边背景。

d、用gif仍是用jpg：在同一个文件中切图，Photoshop是许诺不同的切片利用不同的文件格式的，

但gif格式和jpg格式结合的地址，有时候肉眼都能可能看出颜色的不同，因此同一部份的切图最好利

用一样的格式。颜色较少、较单纯的图片，文字图片，从矢量图转过来的小图标、边框背景等图片，一