ps网站切图网页切图教程详解

用Fireworks制作具有动态效果的切图

在上一章中，我们说到用fireworks2进行切图，可以将一个大图片分割成不同色深的多个小图片，并且生成相应的网页文件或代码，从而减小网页的重量。今天我要接着告诉您的是，功能强大的fireworks2不仅可以制作静态切图，更能够导出javascript动态特效！

打开 件后你可以看到那上面画的是一个电视机，现在我们要做的是将这个电视机放入一个网页，并且当浏览者的鼠标按下电视机上的开关后，会在屏幕中播放内容。

第一步，要在图象上制作用来调用javascript的热区，制作热区的方和上一章中切割图象的方法一样，都是使用工具栏最右下方的切割工具 （SliceTool）。由于我们设想中的这个javascript是通过按下电视机开关后在屏幕上出现变化，所以需要定义两个热区，分别是电视机开关和电视机屏幕。

然后选择“windows > Object”（Ctrl+I）选项，打开Object面板。先选中电视屏幕的热区，Object面板即将显示这个热区的属性，其中的连接地址默认为“No URL(noHREF)”也就是当前网页的连接（#）；项内容为鼠标放到图片上时显示的提示；这下面那个红色的靶心是target ， 用来确定连接标签的目标的，在这儿就不多说了；最关键的是：不要激活 target下的“Auto-Name Slices”功能，而需手动给这个切割热区起一个名字，这样做是为了在指定behavior时能够方便的辨认目标。还要注意的是在给slice命名时，不能使用中文，否则生成的javascript 代码会在浏览器中长时间报错。在这个例子中我给屏幕热区起的名字是“screen”， 再以同样的方法给电视开关取名为“button”。

接着做一个电视上要显示的图象，选择“File > New”（Ctrl+N） 命令新建一个和屏幕热区大小相同的图片（注意：尺寸过大或过小都会被 javascript缩放到屏幕热区的大小）。新建文件后，您可以使用工具栏上各类工具随心所欲地画出自己喜欢的东东（工具栏中各个绘图工具的使用 方法将在以后的教程中做详细介绍）。对自己的作品满意了吗？您画完后 请选择“File > Export”（Ctrl+Shift+R）将图象导出为网络图形。

Fireworks的图象导出功能非常强大，但现在您只要一路NEXT就可以了，并将生成的gif文件保存到指定的目录

下。

然后回到我们刚才编辑的电视机画面，选定开关热区，再选择“ Windows > Behaviors”（Ctrl+Alt+H）选项，打

开behaviors面板。按下添加按钮，选择“Swap Image”，在随后弹出的Swap Image对话框中的“ Swap Image in

Slice”选项中选择“screen”热区（也可以在右边的热区画面中直接选择screen热区，这样做就可以让button热区

调用一个使screen 热区产生变化的javascript）；在

“Source of Swap”中选择“Image File”并在浏览面板中

指定刚才制作的那个gif图象。最后激活“Restor Image

onMouseOut”（激活这个功能后，浏览者将鼠标离开调用javascript 的热区后，发生变化的图象将恢复正常。

当上面这步完成后，behaviors面板中将出现一个“OnMouseOver”的件处理器，这就说明刚才做的热区已经成功调用了javascript。但我们期的效果是当鼠标按下开关后才在电视屏幕中显示内容，所以请按下“ OnMouseOver”旁的下拉菜单按钮，在弹出的菜单中选择“OnClick”。好，到这儿基本上该完工了。想看看作品的效果如何吗？选择“File > Preview in Browser > Preview in ...”（F12）命令，就可以在新窗口 中预览刚才的作品了。

达到预期效果了吗？满意的话就可以导出成品了，这儿有个小技巧， 由于fireworks的预览功能已经生成了临时的图形和HTML文件，所以如您使用IE5行预览的话，可以直接在自己满意的预览窗口中将所以文另存，就可以免去导出步骤而得到完整的作品了。如果您没有IE，那只能乖乖地使用导出功能，具体地导出方法和我们在上一章中所说的静 态切图的导出方法相同，在这儿就步重复了。

Fireworks使用技巧

迄今为止，Fireworks在一阵又一阵的喝彩声中经历了4个成长阶段，目前已经推出了4.0版本。最初，Fireworks同时又是互联网的新生儿，它非常诚恳地吸收了众家的长处。不管是平面设计软件的图层和色彩，还是动画制作的帆要领不管是它的Flash图符和库面析，还是Dreamweaver的快速启动栏；不管是矢量绘图软件中的工具，还是位图图像编辑软件的面析，只要它们有优点，它都学来。Fireworks在学习中创新，从而一步一步走向成熟，也越来越受大家的青睐。

第一篇 用Fireworks切割图形

但传统的切图工作十分繁琐，许多设计者都是使用Photoshop类软件将图一片片分好，然后在分别保存为不同色深的gif图象，虽然可以使用action之类的自动执行命令集，但实际工作量依旧十分惊人，而且非常容易切错尺寸。

现在用了Fireworks就可以非常轻松地切割图片了，首先用Fireworks 打开要切割地图形文件（File >

Open），当图片打开后选择工具栏最右下方的切割工具（SliceTool），在图中按住鼠标左键任意画出想要的切割效果（注意不要将选区重叠），图中那些红线表示就是最后生成的表格分栏情况。

等全部的切割区域完成后选择“FILE > EXPORT”进入导出，在Format 中选择gif，再根据图象的具体情况设置色深、调色板和透明色，然后按下 “Next”。

最后再导出成HTML文件的对话框中指定保存的目录，在“slicing:” 选项中选择“Use Slice

Objects:”按照刚才划分出的切割情况来切图， 并分别保存。在“Style选项”中选择“Generic”导出成标准的HTML源码。 OK，如果要和Dreamwever一同使用的话，可以选择“Dreamweaver Libra- ”将导出为DREAMWEAVER2的一个模板，而“Dreamweaver” 选项将 导出成DREAMWEAVER作出来的网页源码。

就这样，仅几秒种的时间，就完成了一个非常专业的图形切割。怎么样，您是不是感受到了Fireworks的强大功能。

第二章 用Fireworks制作具有动态效果的切图

在上一章中，我们说到用fireworks2进行切图，可以将一个大图片分割成不同色深的多个小图片，并且生成相应的网页文件或代码，从而减小网页的重量。今天我要接着告诉您的是，功能强大的fireworks2不仅可以制作静态切图，更能够导出javascript动态特效！

打开 件后你可以看到那上面画的是一个电视机，现在我们要做的是将这个电视机放入一个网页，并且当浏览者的鼠标按下电视机上的开关后，会在屏幕中播放内容。

第一步，要在图象上制作用来调用javascript的热区，制作热区的方和上一章中切割图象的方法一样，都是使用工具栏最右下方的切割工具 （SliceTool）。由于我们设想中的这个javascript是通过按下电视机开关后在屏幕上出现变化，所以需要定义两个热区，分别是电视机开关和电视机屏幕。

然后选择“windows > Object”（Ctrl+I）选项，打开Object面板。先选中电视屏幕的热区，Object面板即将显示这个热区的属性，其中的连接地址默认为“No URL(noHREF)”也就是当前网页的连接（#）；项内容为鼠标放到图片上时显示的提示；这下面那个红色的靶心是target ， 用来确定连接标签的目标的，在这儿就不多说了；最关键的是：不要激活 target下的“Auto-Name Slices”功能，而需手动给这个切割热区起一个名字，这样做是为了在指定behavior时能够方便的辨认目标。还要注意的是在给slice命名时，不能使用中文，否则生成的javascript 代码会在浏览器中长时间报错。在这个例子中我给屏幕热区起的名字是“screen”， 再以同样的方法给电视开关取名为“button”。

第三章 下面告诉你如何做动画，COOL！

用Fireworks2制作动画一共有三中方法，由简到难的排列起来分别是： 合并图象形成动、使用符号（Symbol ）生成画效果和手工绘制。

合并图象形成动画，顾名思义就是将一系列图片按序排列生成不同的帧而形成动画（很象Director中的Space to time功能），不过这种排列完全是程序自动执行的，免去了大量的手工操作。 具体的方法是这样的（当然使用这种方法的前提是必须有一连串连续 的图片）：选择“File > Open Multiple ”命令。进入系列图片所在的目录，然后按次序将一连串的图片加入（“Add”命令）对话框左下部的窗口，并且激活“Open as Animatio”选项，再按下“Done”按钮就OK了。

在动画生成后，按下“Windows > Frame”（Ctrl+ Alt+K）命令，您就看到原来的一系列图片都按次序地从Frame1往下排到底。按下屏幕右下角的播放键就可以浏览动画效果了。这种纯粹的懒办法最合适我这样画不来线条的人了，一次有只用了10 秒钟就搞定了一个小鸟飞飞的图片，效果棒极了！

不过，要是手头没有现 成的连续图片，那只能劳驾，自己亲自动手了。而许多图画中有规则的动态效果若是用手工制作，既费时间也未必能够达到理想的效果。所以Fireworks2提供了一个Tween功能，使用户可以指定程序生成动态过度效果（ 感觉就更Flash里的一样）。

在绘制动画前，我们事先必须明确动画的工作原理。我想简单的说， 动画是有不变的物件（object）和会变的物件两部分组成。通常不变的物是只如背景之类始终在动画中显示的物件，而会变的物件是指通过变化 形成动画的物件。所以在制作动画之前得先制作不变的物件，为此Fire- works2提供了一个共享层的概念（Share Layer

）。

我们都知道，动画是由一个个不同的帧（Frame）组成的，而共享层就是在所有帧中都显示的一个层，这样我们只要将动画中不变的物件全放在这个层中，以后只需要修改一个帧的共享层中内容就可以使所有的帧都达到相应变化，大大减少了工作量。设置共享层的命令是Layer 面版的弹 出菜单中的“Share

Layer”命令，设置为共享的层在Layer面版中都有一 个特定的共享符号（Wegb Layer是系统自动设置的共享层，用于放置热点、 切割区）。

在完成不变的物件（object）后就可以使用Tween 功能制作动画效果 了。Tween功能的原理是将物件（object

）转化为符号（symbol），然后 确定符号的初始和结束样例（instance），再将这些样例转换为具有过度

效果的连续帧（frame）。Tween功能支持物件的位移、旋转、缩放、扭曲、 以及透明度和层效果（effect）的过度。下面我来举个实例：通过十个帧 让我的名字“Arky”从图象的左上角移动到右下角同时逐渐变深。

第三章 下面告诉你如何做动画，COOL！

用Fireworks2制作动画一共有三中方法，由简到难的排列起来分别是： 合并图象形成动、使用符号（Symbol ）生成画效果和手工绘制。

合并图象形成动画，顾名思义就是将一系列图片按序排列生成不同的帧而形成动画（很象Director中的Space to time功能），不过这种排列完全是程序自动执行的，免去了大量的手工操作。 具体的方法是这样的（当然使用这种方法的前提是必须有一连串连续 的图片）：选择“File > Open Multiple ”命令。进入系列图片所在的目录，然后按次序将一连串的图片加入（“Add”命令）对话框左下部的窗口，并且激活“Open as Animatio”选项，再按下“Done”按钮就OK了。

在动画生成后，按下“Windows > Frame”（Ctrl+ Alt+K）命令，您就看到原来的一系列图片都按次序地从Frame1往下排到底。按下屏幕右下角的播放键就可以浏览动画效果了。这种纯粹的懒办法最合适我这样画不来线条的人了，一次有只用了10 秒钟就搞定了一个小鸟飞飞的图片，效果棒极了！

不过，要是手头没有现 成的连续图片，那只能劳驾，自己亲自动手了。而许多图画中有规则的动态效果若是用手工制作，既费时间也未必能够达到理想的效果。所以Fireworks2提供了一个Tween功能，使用户可以指定程序生成动态过度效果（ 感觉就更Flash里的一样）。

在绘制动画前，我们事先必须明确动画的工作原理。我想简单的说， 动画是有不变的物件（object）和会变的物件两部分组成。通常不变的物是只如背景之类始终在动画中显示的物件，而会变的物件是指通过变化 形成动画的物件。所以在制作动画之前得先制作不变的物件，为此Fire- works2提供了一个共享层的概念（Share Layer

）。

我们都知道，动画是由一个个不同的帧（Frame）组成的，而共享层就是在所有帧中都显示的一个层，这样我们只要将动画中不变的物件全放在这个层中，以后只需要修改一个帧的共享层中内容就可以使所有的帧都达到相应变化，大大减少了工作量。设置共享层的命令是Layer 面版的弹 出菜单中的“Share

Layer”命令，设置为共享的层在Layer面版中都有一 个特定的共享符号（Wegb Layer是系统自动设置的共享层，用于放置热点、 切割区）。

在完成不变的物件（object）后就可以使用Tween 功能制作动画效果 了。Tween功能的原理是将物件（object

）转化为符号（symbol），然后 确定符号的初始和结束样例（instance），再将这些样例转换为具有过度

效果的连续帧（frame）。Tween功能支持物件的位移、旋转、缩放、扭曲、 以及透明度和层效果（effect）的过度。下面我来举个实例：通过十个帧 让我的名字“Arky”从图象的左上角移动到右下角同时逐渐变深。

第五章 文字工具以及文字特效

这章教程，我想单单给你介绍Fireworks的文字工具以及文字特效， 之所以要将对文字功能版块的介绍独立成一章，是因为Fireworks中的文字以及相关功能，是目前我所见的图象编辑软件中最强大，最完善！

＃完整的文字格式化功能，支持双字节文字

这是所有成功的图象设计软件所必备的特点，当然Fireworks也不例外。您可以在工具栏中按下文字按钮（图标为“A”的那个按钮），再在工作窗口中单击以呼出文字编辑面版（Text Editor）。Fireworks的文字面版十分直观，完全支持双字节文字（当然，前提是系统拥有相应的字库 ），使用的方法与普通图象编辑软件中的同类功能十分相似，如果您有一些图象设计经验的话，完全可以轻松上手。 但与众不同之处在于：Fireworks2的Text Editor功能支持定义单个文字的属性。当您在Text Editor中输入一串文本后，可以自由地改变此 文本中任意字的属性。也就是说，用户可以在Text Editor面版中同时输 入一串字体、颜色、大小等等属性完全不同的语句。

不仅如此，在用Fireworks编辑图片的过程中，文字始终保持一种特殊 路径形式。所以用户可以随时随地地修改文字内容，而不会象Photoshop5 那样，一旦进行“Rend Layer”操作，用户就再也无法对文字层中的内容 进行修改了:(

＃方便的文字色彩填充功能

Firework将文字作为一种特殊的物件（object），它既能够让Text Editor工具识别，对文字的内容进行修改，又允许用户象编辑普通路径那 样给文字着色、描边（方法详见教程的上一章）。这种特殊的设定给用户 带来了前所未有的方便，甚至当用户使用变形工具（快捷键为“Q”）给 选定的文字进行变形后，聪明的Firewoks仍然能够自动匹配变形后的文字 的大小，依旧允许用户使用Text Editor对文字进行编辑。

＃别出心裁的文字对齐选项

Fireworks 提供了一个矢量绘图软件所特有的文字对齐功能。您只要在画面中文字上单击右键，就可以在随后弹出的菜单中的“Align”一项内选择文字的对齐方式。Fireworks2共提供了八种文字对齐方式：

左对齐（left）；

右对齐（right）；

水平居中（center-1）；

左右扩展（Justified-1，这种方式是通过调节文字的水平间距使文 字按文字框的长度对齐，使用非常广泛）；

左右拉伸（Stretched-1，这种方式是通过拉伸文字的宽度，使之按 文字框的长度对齐）；

顶端对齐（top）；

竖直居中（center-2）；

底对齐（bottom）

上下扩展（Justified-2，这种方式是通过调节文字的垂直间距使文 字按文字框的高度对齐，使用非常广泛）；

上下拉伸（Stretched-2，这种方式是通过拉伸文字的高度，使之按 文字框的高度对齐）；

＃文字的特色效果

Fireworks2 新增一个Style功能面版（“Windows > Styles”快捷键 为Ctrl+Alt+J ）。Style功能提供了近300种内值的路径填充和描边的特效，可以最快捷地生成适用于网页制作的文字特效，当然，Style 也适用于所有普通路径。并且Fireworks2允许用户自由扩充Style，您可以将自己新创的路径定义为一个Style（方法是使用Styles面版的弹出菜单中的“ New Style”命令），以便今后反复使用。

＃文本环绕路径功能

这无疑是Fireworks2的文本功能中最激动人心的效果，这个以前只有在矢量绘图中才可能具备的功能大大缩短了用户制作环绕文本的工序。您只须选定文字和文字要环绕的路径，然后选择“Text > Attach to

Path” （快捷键为 Ctrl+Alt+Y）,就可以将文字结合到特殊的路径上。并且，结合后的文字依旧可以通过Text Editor进行编辑，也可以使用不同的Align 方式定义不同的路径围绕效果，还可以用上述的方法修改文字的填充效果或套用Style。

＃查找和替换功能（Find & Replace）

这样的新增功能听上去似乎是一款文字编辑软件才应该具备的，不过细心macromedia已经为用户考虑到了方方面面，Fireworks2中的Find & Replace功能（“Windows > Find & Replace”）不仅提供了普通的文字查找替换功能，并且可以修改文件中使用的颜色、字体、URL！这些匠心独具的设计使Firework2成为最具创造力的图象设计软件， 它完全体现了macromedia的设计决心——让您的工作更具效率（Productivty）。

网页配色表

制作主页对色彩需要有一定的感觉，许多网友总是配不好颜色。

阿捷教你一个窍门：就是用同一色系的色彩，色彩丰富但不花。

.

.

#FFFFFF

#FFFAFA

#FFF68F

#FFFFF0

#FFFAF0

#FFF5EE

#FFFFE0

#FFFACD

#FFF0F5

#FFFF00

#FFF8DC

#FFEFDB

#FFEFD5

#FFE4E1

#FFDEAD

#FFC1C1

#FFB90F

#FFA54F

#FF8C00

#FF7F50

#FF6EB4

#FF4500

#FF3030

#FDF5E6

#FAF0E6

#F7F7F7

#F5DEB3

#F0FFFF

#F0E68C

#EEEE00

#EEE8AA

#EEDFCC

#EED5B7

#EEC900

#EEAEEE

#EE9A49

#EE8262

#EE7621

#FFEC8B

#FFE4C4

#FFDAB9

#FFC125

#FFB6C1

#FFA500

#FF83FA

#FF7F24

#FF6A6A

#FF4040

#FF1493

#FCFCFC

#FAEBD7

#F5FFFA

#F4F4F4

#F0FFF0

#F08080

#EEE9E9

#EEE685

#EEDC82

#EED2EE

#EEC591

#EEAD0E

#EE9A00

#EE7AE9

#EE7600

#FFEBCD

#FFE4B5

#FFD700

#FFC0CB

#FFB5C5

#FFA07A

#FF82AB

#FF7F00

#FF69B4

#FF3E96

#FF00FF

#FAFAFA

#FA8072

#F5F5F5

#F4A460

#F0F8FF

#EEEEE0

#EEE9BF

#EEE5DE

#EED8AE

#EECFA1

#EEB4B4

#EEA9B8

#EE9572

#EE799F

#EE6AA7

#FFE7BA

#FFE1FF

#FFD39B

#FFBBFF

#FFAEB9

#FF8C69

#FF8247

#FF7256

#FF6347

#FF34B3

#FF0000

#FAFAD2

#F8F8FF

#F5F5DC

#F2F2F2

#F0F0F0

#EEEED1

#EEE8CD

#EEE0E5

#EED5D2

#EECBAD

#EEB422

#EEA2AD

#EE82EE

#EE7942

#EE6A50

#EE6363

#EE3A8C

#EE00EE

#EAEAEA

#E5E5E5

#E0EEE0

#DEB887

#DBDBDB

#D9D9D9

#D3D3D3

#D1D1D1

#CDCDC1

#CDC9A5

#CDC1C5

#CDB7B5

#CDAF95

#CD9B1D

#CD8C95

#CD7054

#CD661D

#CD5B45

#CD3333

#CD1076

#CAFF70

#C71585

#C4C4C4

#EE5C42

#EE30A7

#EE0000

#E9967A

#E3E3E3

#E0E0E0

#DDA0DD

#DB7093

#D8BFD8

#D2B48C

#D15FEE

#CDCDB4

#CDC8B1

#CDC0B0

#CDB79E

#CDAD00

#CD96CD

#CD853F

#CD69C9

#CD6600

#CD5555

#CD3278

#CD00CD

#CAE1FF

#C6E2FF

#C2C2C2

#EE4000

#EE2C2C

#EDEDED

#E8E8E8

#E0FFFF

#E066FF

#DCDCDC

#DAA520

#D6D6D6

#D2691E

#D02090

#CDCD00

#CDC673

#CDBE70

#CDB5CD

#CDAA7D

#CD950C

#CD8500

#CD6889

#CD6090

#CD4F39

#CD2990

#CD0000

#C9C9C9

#C67171

#C1FFC1

#EE3B3B

#EE1289

#EBEBEB

#E6E6FA

#E0EEEE

#DEDEDE

#DC143C

#DA70D6

#D4D4D4

#D1EEEE

#CFCFCF

#CDC9C9

#CDC5BF

#CDBA96

#CDB38B

#CD9B9B

#CD919E

#CD8162

#CD6839

#CD5C5C

#CD3700

#CD2626

#CCCCCC

#C7C7C7

#C5C1AA

#C1CDCD

#C1CDC1

#BFBFBF

#BDB76B

#BBFFFF

#B8B8B8

#B4EEB4

#B3B3B3

#B0E2FF

#B03060

#ADADAD

#A9A9A9

#A4D3EE

#A1A1A1

#9F79EE

#9B30FF

#9A32CD

#98F5FF

#949494

#912CEE

#8EE5EE

#8DEEEE

#8B8B7A

#8B8878

#8B8378

#8B7D6B

#8B7500

#C1C1C1

#BF3EFF

#BCEE68

#BABABA

#B8860B

#B4CDCD

#B2DFEE

#B0E0E6

#AEEEEE

#ABABAB

#A8A8A8

#A3A3A3

#A0522D

#9E9E9E

#9AFF9A

#999999

#97FFFF

#9400D3

#90EE90

#8E8E8E

#8DB6CD

#8B8B00

#8B8682

#8B814C

#8B7B8B

#8B7355

#C0FF3E

#BEBEBE

#BCD2EE

#BA55D3

#B7B7B7

#B452CD

#B23AEE

#B0C4DE

#ADFF2F

#AB82FF

#A6A6A6

#A2CD5A

#A020F0

#9C9C9C

#9ACD32

#9932CC

#96CDCD

#9370DB

#8FBC8F

#8E8E38

#8C8C8C

#8B8989

#8B864E

#8B7E66

#8B795E

#8B6969

#BFEFFF

#BDBDBD

#BC8F8F

#B9D3EE

#B5B5B5

#B3EE3A

#B22222

#B0B0B0

#ADD8E6

#AAAAAA

#A52A2A

#A2B5CD

#9FB6CD

#9BCD9B

#9AC0CD

#98FB98

#969696

#919191

#8F8F8F

#8E388E

#8B8B83

#8B8970

#8B8386

#8B7D7B

#8B7765

#8B6914

#8B668B

#8B5A2B

#8B4789

#8B4500

#8B3626

#8B1C62

#8B0000

#87CEFF

#858585

#838B83

#7FFF00

#7D7D7D

#7B68EE

#7A67EE

#778899

#737373

#707070

#6CA6CD

#6A5ACD

#6959CD

#66CD00

#63B8FF

#5F9EA0

#5C5C5C

#556B2F

#548B54

#8B6508

#8B5A00

#8B475D

#8B3E2F

#8B2500

#8B1A1A

#8A8A8A

#87CEFA

#848484

#836FFF

#7F7F7F

#7D26CD

#7AC5CD

#7A378B

#76EEC6

#71C671

#6E8B3D

#6C7B8B

#698B69

#68838B

#668B8B

#636363

#5E5E5E

#5B5B5B

#555555

#545454

#8B636C

#8B5742

#8B4726

#8B3A62

#8B2323

#8B0A50

#8A2BE2

#87CEEB

#8470FF

#828282

#7EC0EE

#7CFC00

#7A8B8B

#79CDCD

#76EE00

#7171C6

#6E7B8B

#6B8E23

#698B22

#68228B

#666666

#616161

#5D478B

#595959

#551A8B

#53868B

#8B5F65

#8B4C39

#8B4513

#8B3A3A

#8B2252

#8B008B

#8968CD

#878787

#838B8B

#7FFFD4

#7D9EC0

#7CCD7C

#7A7A7A

#787878

#757575

#708090

#6E6E6E

#6B6B6B

#696969

#66CDAA

#6495ED

#607B8B

#5CACEE

#575757

#54FF9F

#528B8B

#525252

#4EEE94

#4A4A4A

#474747

#458B00

#424242

#3D3D3D

#388E8E

#333333

#2E8B57

#282828

#228B22

#1F1F1F

#1C1C1C

#171717

#0F0F0F

#050505

#00FF00

#00EE76

#00CDCD

#00BFFF

#008B45

#006400

#0000AA

#515151

#4D4D4D

#48D1CC

#473C8B

#454545

#4169E1

#3CB371

#383838

#32CD32

#2E2E2E

#27408B

#218868

#1E90FF

#1A1A1A

#141414

#0D0D0D

#030303

#00FA9A

#00EE00

#00CD66

#00B2EE

#008B00

#0000FF

#00008B

#4F94CD

#4B0082

#4876FF

#4682B4

#43CD80

#40E0D0

#3B3B3B

#36648B

#303030

#2B2B2B

#262626

#212121

#1E1E1E

#191970

#121212

#0A0A0A

#00FFFF

#00F5FF

#00E5EE

#00CD00

#009ACD

#00868B

#0000EE

#000080

#4F4F4F

#4A708B

#483D8B

#458B74

#436EEE

#404040

#3A5FCD

#363636

#2F4F4F

#292929

#242424

#20B2AA

#1C86EE

#1874CD

#104E8B

#080808

#00FF7F

#00EEEE

#00CED1

#00C5CD

#008B8B

#00688B

#0000CD

#000000

/homepage/43/

网页设计配色基础：色彩三属性与实例剖析

2006-08-22 04:00 作者： 黎芳 原创 出处： 天极设计在线 责任编辑：Shiny

许多初学者对色彩的属性和原色概念模糊，容易混淆，下面我们就先从几个概念入手。今天介绍色彩的三个属性。

颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色，而其他所有颜色均属于彩色。从心理学和视觉的角度出发，彩色具有三个属性：色相、明度、纯度（彩度）。

■ 色相（Hue）：

也叫色调，指颜色的种类和名称，是指颜色的基本特征，是一种颜色区别于其他颜色的因素。色相和色彩的强弱及明暗没有关系，只是纯粹表示色彩相貌的差异。如红、黄、绿、蓝、紫等为不同的基本色相。

基本色相环

■ 明度（Value）：

也叫亮度，指颜色的深浅、明暗程度，没有色相和饱和度的区别。不同的颜色，反射的光量强弱不一，因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。

明度的递增

→ 明度网页例图：

明度分析：

从上图网页所选取的4个主要色块的RGB数值来看，这4块色彩组合显示的RGB数值很高，接近于最高值255。RGB相互间的数值相近，由于有RG的高数值与B高数值混合，整个网页给人的感觉非常协调，柔和雅致，心情愉悦。

结论：

RGB同时呈现相近的高数值时，相近等量的色彩相互混合，页面呈高明度灰色段，协调的柔和状态，令人遐想，对视觉刺激是缓慢的，适合长时间观看。但由于数值接近，因此色阶平稳，同时存在着不够醒目的状态。

常用配色基本概念及精彩相关实例剖析

2006-08-23 04:00 作者： redfall 原创 出处： 天极设计在线 责任编辑：Shiny

在实用美术中，常有"远看色彩近看花，先看颜色后看花，七分颜色三分花"的说法。

这也就说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。因此，对色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。

前面我们介绍了常用的电脑色彩模式RGB、HSB，以及色彩的三大属性，今天我们介绍常用配色的基本概念和相关实例剖析。

色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色，就可以得到一个色彩环。色环通常包括12种不同的颜色。

色环

■ 原色：

也叫"三原色"。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。除白色外，把三原色相互混合，可以调和出其他种颜色。

根据三原色的特性做出相应的色彩搭配，有最迅速最有力最强烈的传达视觉信息效果。

三原色

→ 黄色网页例图：/studienart/i_

黄色分析：

选取了主色调黄色为示例。我们看到RGB数值中RG呈现最高值255时，HSB数值中的SB也呈现最高值100%，页面呈现最高纯度亮度——纯黄色。因此黄色在三原色中也是亮度最高的颜色。

结论：

HSB中SB呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，由于黄色是亮度最高的颜色这一特性，也给人视觉产生强烈刺激的状态，对视觉刺激是迅速的、警戒、醒目的效果，但不易于长时间观看。

→ 红色网页例图：

红色分析：

我们看到RGB中R的数值是227，混合了G30、B40，因此红色的纯度轻微降低，颜色稍偏深红。HSB数值中S显示的饱和度为87%，B为89%，因此颜色还是较为饱和明亮。

结论：

主色R227数值较高的时候，由于混合了G30、B40少许颜色，饱和度明度稍微降低，视觉刺激减弱，红色特性显得较沉稳。但由于红色是最温暖最有视觉冲击力的颜色特性，该网页整体看来仍然厚重而热烈的表达了主题。

→ 蓝色网页例图：

■ 纯度(Chroma）：

也叫饱和度，指色彩的鲜艳程度。原色最纯，颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色，加入了白色或者黑色，使得它的纯度低，颜色趋于柔和、沉稳。

加入黑色的纯度变化和加入白色的纯度变化

→ 纯度网页例图：

纯度分析：

上图网页中选取了主要的两种色系为组合。运用HBS数值模式更易于理解分析该网页的纯度情况。

我们看到蓝色S数值呈现99％具有相当高的饱和度，B明度为79%，玫瑰色S饱和度数值为85%，B明度为97％。当饱和度和明度同时呈最高值时，色彩对视觉的刺激强度到达最高状态。由于蓝色的明度稍低，饱和度较高，而玫瑰色的明度较高，该颜色纯度随之加强，因此玫瑰色相对蓝色对人的视觉刺激更强烈。

结论：

HSB模式中S和B呈现的数值越高，饱和度明度越高，页面色彩强烈艳丽，对视觉刺激是迅速的，醒目的效果，但不易于长时间的观看。以上两种颜色的S数值接近，是强烈的状态。H显示的度是代表在色轮表里某个角度所呈现的色相状态，相对于SB来说，意义不大。

蓝色分析：

RGB数值中B蓝色的数值是131与 R2、G83相混合，蓝色的纯度降低。结合HSB中数值H色相目前显示的是203°，而三原色的纯蓝为240°来看，蓝色的色相偏离较大，加上B为51%的明度，颜色偏暗，因此视觉冲击力较弱。页面沉稳、凝重。

结论：

当蓝色色相偏离于三原色的纯蓝时，视觉冲击力削弱。页面呈沉稳、平静的感受。蓝色在三原色里是视觉传递速度最慢的颜色特性，适合用于表达成熟、稳重、安静的网页设计主题。蓝色在网页设计里也是使用得较频繁的颜色。

/peise/

/websj/color/

网页基本配色

颜色绝不会单独存在。事实上，一个颜色的效果是由多种因素来决定的：反射

的光，周边搭配的色彩，或是观看者的欣赏角度。

有十种基本的配色设计，分别叫做：

无色设计(achromatic)、类比设计(analogous)、冲突设计(clash)、

互补设计(complement)、单色设计(monochromatic)、中性设计(neutral)、

分裂补色设计(splitcomplement)、原色设计(primary)、

二次色设计(secondary)以及三次色三色设计(tertiary)。

105

101

98

105

101

98

无色设计

不用彩色，只用黑、

白、灰色。

4

68

4

68

冲突设计

把一个颜色和它补色

左边或右边的色彩配

合起来。

81

85

88

81

85

88

单色设计

把一个颜色和任一个

或它所有的明、暗色

配合起来。。

20

57

73

92

88

73

92

88

73

类比设计

在色相环上任选三个

连续的色彩或其任一

明色和暗色。

92

44

92

44

互补设计

使用色相环上全然相

反的颜色。

17

32

26

17

32

26

中性设计

加入一个颜色的补色

或黑色使它色彩消失

或中性化。

4

36

68

20

57

73

4

36

68

分裂补色设计

把一个颜色和它补色

任一边的颜色组合起

来。

原色设计

把纯原色红、黄、蓝

色结合起来。

53

53

86

86

20

20

57

57

28

28

95

95

二次色设计

把二次色绿、紫、橙

色结合起来。

三次色三色设计

三次色三色设计是下

面二个组合中的一个：

红橙、黄绿、蓝紫色

或是蓝绿，黄橙、红

紫色，并且在色相环

上每个颜色彼此都有

相等的距离。

网页设计思想的中级篇

这篇我们主要说对于企业型网站（也包括机关型）。

首先第一点，你要知道这家企业是做什么的，不同的行业要有不同的颜色和格调。比如是一家科技型企业（信息科学）它的颜色应该偏向蓝，格调应该特别一点，但主要信息的表现一定要强，让浏览者第一眼要看到这家企业不是一个皮包公司，是有真正内容的企业。再比如一家服务型的企业，它的颜色要根据服务类型而表现的轻松一点。拿餐饮业来说，应该以白为主，因为我们都愿意去一家非常干净的餐馆吃饭；再比如汽车服务公司，应该以环保的绿色或悠闲的浅天蓝色为主；如果以女性消费者为主的公司网站，呵呵！太简单了！粉红色或白色，一定要淡！这个应该都知道吧！ B_)

对于网站栏目及功能的安排也是很有讲究的。随着互联网的发展，网页制作越来越复杂与艺术。美观固然重要，但最重要的还是实质的内容。我们去企业网站无非是想了解一下相关产品（包括服务）的信息，所以要做到两者兼顾也是不容易的！下面给点基本建议：

栏目不要设置太多，越简单越好，也不要分散。尽可能的把类似内容放在一个栏目下。没有太大用处和老掉牙的信息建议不要再放了，与互联网这个新鲜事物有点不搭配。

如果企业产品或服务非常多，建议你把首页做简单，不要放进站动画，如果你觉得有个动画漂亮，你可以单独立个小栏目放上这些宣传动画或社频。如果是家很专业的公司可以考虑把产品或服务的小图或导读放在首页，让浏览者第一时间就可以找到想要的信息。

首页上不要做过多的特效，也尽量要安静一点，如果有广告也要看看是否与主体颜色搭配，图片不要太有冲击性，文字也不要有大有小，BANNER尽量放弃或移到其他位置上，要给企业LOGO让开更大的视觉空间。

大栏目尽量不要用FLASH或高级JS特效做链接。你要知道浏览者的浏览器不一定装有FLASH插件，或其版本较低或不是IE怎么办？

各栏目之间的链接一定要有序和简单，也不要打开那么多的窗口。

产品与服务内容一定要清晰有序的排列或有较强的可选择性。我去过许多家电脑硬件生产商的网站，想要找点产品或驱动的信息还真难！这就是失误。

最后再说说企业网站的技术性问题。为企业制作一份美观、实用、安全、易维护的网站是网站制作者一直的追求，但是我们怎么样来做到这一点呢？下面是一点建议：

根据网站的要求，我们要先选择所要用到的技术，哪种在满足各种条件下最容易实现和高效。比如内容显示数据库量大或要交互查询的，这时我们就要考虑安全性和效率性最佳的组合（不过也得根据你所会的多来来决定 :% ）。在不经常需要更新的页面，如果不需要特别的统计程序，使用HTML页面就可以了。

信息列表处不要过多的修饰。GOOGLE、BAIDU虽然不太美观，但我们都很喜欢它不是吗！行行之间可以用底色来区分，这样浏览者比较容易分辨。

后台管理功能不要太复杂。有些同志们为表现自己的编程实力往往会把后台管理做得复杂的让人感到头疼，这是不应的，因为使用大多是不太懂的人，懂的人自己做了也不会用别人的！用户不喜欢的东西，你就算做得再复杂再独一无二也没用！两个字：失败！

如果可以要做到防错功能，也就是误操作后要可以由最高级管理员有办法来还原。这点来说对于一般程序员来说有点困难（我这里说的并不是实实备份数据库或次料来实现，而是要用程序本身和巧妙的设计来实现）。

网站的制作也是一个系统的学习过程。经验最重要。不要想着“要做到最好”，只要客户和浏览者认为“比较好”就是成功的！

以上内容是本人乱七八糟的总结，只能代表个人建议，如果有错误的地方还请高手们指教！

网页设计思想

一笔 发表于 2005-12-11 21:52:36

前言 大家好，我是阿捷。 很荣幸，能在这里和大家一起探讨关于网站设计的问题。目前，网络上有关网页制作的各种教程已经相当多，可以方便地学习到最新的技术和技巧。可是，有关网页的设计,比如设计灵感的实现，风格的确定，发展策略，技术的筛选等的文章却比较少，许多网友往往有好的材料，却苦恼没有好的具有表现力的设计。受到索易主持人的鼓励，阿捷整理了一些网页的设计心得，在这里和大家交流一下，也算抛砖引玉了，希望得到您的指正，如果您有好的建议和心得，也请发稿给我ajie@,在此先道一声谢谢！ 网站设计，包含的内容非常多。大体分两个方面： 一方面是纯网站本身的设计比如文字排版，图片制作，平面设计，三维立体设计，静态无声图文，动态有声影像等； 另一方面是网站的延伸设计，包括网站的

主题定位和浏览群的定位，智能交互，制作策划，形象包装，宣传营销等等。

这两方面相辅相成（感觉有点象写辨证论文：），加之网络技术的飞速发展，要提出一个绝对正确和权威的设计思路是不可能的，要想在一篇文章中概括出来也很难，所以阿捷根据建设一个网站的思路，将自己几年来网站设计制作的心得整理成一个系列“讲座”，告诉给大家（注意：我并不会非常具体地讲某一个技术或制作技巧，重点在于思路）希望能给您一些帮助。下面是大致的提纲： 1.定位你的网站主题和名称； 2.定位你的网站CI形象； 3.确定你的栏目和版块； 4.网站的整体风格创意设计 5.网站的层次结构和链接结构 6.首页的设计 7.版面布局的窍门 8.色彩的搭配 9.效果与速度 10.替浏览者考虑

11.细微之处见功力 12.建设完成度与推出时间 13.交互性与亲和度 14.考虑不同的浏览器和分辨率 15.字体的设置和表格的嵌套 16.新技术的运用取舍

17.设计好你的banner和位置 18.语句文字--融入感情 19.对网站设计初学者的建议 以上是本“系列”文章的提纲，会根据实际撰写情况作些变动。每星期一篇。我们开始之前，首先明确几个前提： 一．网站设计与网站制作。我们说网站“设计”而不是网站“制作”，它们的区别在于设计是一个思考的过程，而制作只是将思考的结果表现出来。一个成功的网站首先需要一个优秀的设计，然后辅之优秀的制作。设计是网站的核心和灵魂，一个相同的设计可以有多种制作表现的方式。 二．我们说的“网站”是指有确定主题和明确目的的实用性站点，不包括纯表现类或者纯文字类网站。 三．在文章中，可能举例说明或点评到某些具体站点。首先申明，阿捷不存在为任何站点作广告的“嫌疑“。好了，废话少说，我们进入正题：

======================================================== 一：定位你的网站主题和名称 设计一个站点，首先遇到的问题就是定位网站主题。

所谓主题也就是你的网站的题材。网络上的网站题材千奇百怪,琳琅满目。只要你想的到，就可以把它制作出来。下面是美国《个人电脑》杂志(PC Magazine)评出的99年度排名前100位的全美知名网站的十类题材，对我们有一些参考价值。 第1类：网上求职 第2类：网上聊天／即时信息/ ICQ 第3类：网上社区／讨论 / 邮件列表 第4类：计算机技术 第5类：网页/ 网站开发 第6类：娱乐网站 第7类：旅行 第8类：参考 /资讯 第9类：家庭/教育 第10类：生活/时尚 每个大类都可以继续细分，比如娱乐类再分为体育 /电影/ 音乐大类，音乐又可以按格式分为MP3，VQF，Ra，按表现形式分古典，现代，摇滚等。以上都只是最常见的题材，还有许多专业的，另类的，独特的题材可以选择，比如中医，热带鱼，天气预报等等，同时，各个题材相联系和交叉结合可以产生新得题材，例如旅游论坛（旅游+讨论），经典入球播放（足球+影视）按这样分下去，题材可以有成千上万个，你不会再为题材重复，难以选择而烦恼了吧:) 对于题材的选择，我的建议是： 1.主题要小而精。定位要小，内容要精。如果你想制作一个包罗万象的站点，把所有您认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题，没有特色，样样有却样样都很肤浅，因为您不可能有那么多的精力去维护它。网络的最大特点就是新和快，目前最热门的个人主页都是天天更新甚至几小时更新一次。最新的调查结果也显示，网络上的“主题站”比“万全站”更受人们喜爱，就好比专卖店和百货商店，如果我需要买某方面的东西，肯定会选择专买店。再举个例子，我的一位网友KK希望制作文学方面的题材，但是文学也包括许多许多内容，有小说，诗歌，散文；有科幻，

武侠，推理；阿捷仔细了解了他的擅长和想要提供的主要内容，最后将题材定位在网络文学上，删除了原有的一些无关的文学作品，集中扩大和整理网络文学作品。网站推出后，很快受到大家的喜爱。 2.题材最好是你自己擅长或者喜爱的内容。比如：您对擅长编程，就可以建立一个编程爱好者网站；对足球感兴趣，可以报道最新的战况，球星动态等。这样在制作时，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。 3.题材不要太滥或者目标太高。“太滥”是指到处可见，人人都有的题材；比如软件下载，免费信息。“目标太高”是指在这一题材上已经有非常优秀，知名度很高的站点，你要超过它是很困难的。除非你下决心和有实力竞争并超过它，记住，在互联网上只有第一，人们往往只记得最好的网站，第二第三名的印象则会浅得多。 OK，如果你已经有一个绝妙的主意了，那我们开始为网站起名字。（哎呀，别踢我！）您可能认为起名字与网站设计无关，阿捷在这里浪费时间。其实网站名称也是网站设计的一部分，而且是很关键的一个要素。你来看，“电脑学习室”和“电脑之家”显然是后者简练；“迷笛乐园”和“MIDI乐园”显然是后者明晰；“儿童天地”和“中国幼儿园”显然是后者大气。我们都知道PIIICUP的中文名称“奔腾”，如果改为“奔跑”，可能就没有今天这么“火”了:)。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。一般的建议是： 1. 名称要正。这个“正”是阿捷自己的说法，其实就是要合法，和理，和情。不能用反动的，色情的，迷信的，危害社会安全的名词语句。 2. 名称要易记。根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。例如：beyond studio和超越工作室，后者更亲切好记。另外，网站名称的字数应该控制在六个字（最好四个字）以内，比如“XX阁”“XX设计室”，四个字的可以用成语，如“一网打进”。字数少还有个好处，一般友情链接的小logo尺寸是88X31，而六个字的宽度是78左右，适合于其他站点的链接排版。 3. 名称要有特色。名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。这里举几个阿捷认为很好的名称：音乐前卫，网页陶吧，天籁绝音。在体现出网站主题的同时，能点出特色之处。 总之，定位题材和名称是设计一个网站的第一步，也是很重要的一部分。如果能找到一个满意的名称，花一天时间翻字典也是值得的:) 好，今天的心得就写到这里。因为是第一篇，所以如果您对本系列讲座形式有任何建议，请速来信告诉阿捷，以便阿捷作相应更改。如果您有更好的心得，也请来信，阿捷会择优发表。谢谢大家！下次我们讨论的主题是“定位你的网站CI形象”。

Edit by

Firework8教程/special/000915SN/

其他教程（了解）/special/000915SN/

/special/000915SN/

/special/000915SN/

/special/000915SN/

/special/000915SN/

/special/s/000915SN/

/special/d/000915SN/