实战用Photoshop制作网站.pdfVIP

实战用Photoshop制作网站--第1页

实战用Photoshop制作网站

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

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

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

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

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

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

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

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

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

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

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

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

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

为最初的草图。

二、制作：

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

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

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

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

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

层。

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

实战用Photoshop制作网站--第1页

实战用Photoshop制作网站--第2页

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

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

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

些时刻。

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

图片一个一个修改。

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

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

擎的访问是无益的。

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

实战用Photoshop制作网站--第2页

实战用Photoshop制作网站--第3页

容易透明处置。

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

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

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

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

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

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

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

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

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

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

c、切