第14章 创建站点常用元素 重点内容： 制作网站Logo 制作网站Banner 制作网页按钮.

Presentation on theme: "第14章 创建站点常用元素 重点内容： 制作网站Logo 制作网站Banner 制作网页按钮."— Presentation transcript:

1 第14章 创建站点常用元素 重点内容： 制作网站Logo 制作网站Banner 制作网页按钮

2 一、 制作网站Logo 1、网站Logo的设计思路与表现形式

3 一、 制作网站Logo 2、网络Logo的设计与制作规范
网络Logo的设计中，大量的采用合成文字的设计方式，如YAHOO，AMAZON等的文字Logo和国内几乎所有ISP ，通过低成本大量反复浏览，即可产生需要图形保持提升的那部分印象记忆。所以网络Logo对于合成文字的追求已渐成网络Logo的一种事实规范。 设计Logo时，面向应用的各种条件做出相应规范，对指导网站的整体建设有着极现实的意义。须规范Logo的标准色、设计可能被应用的恰当的背景配色体系、反白、在清晰表现Logo的前提下制订Logo最小的显示尺寸。

4 一、 制作网站Logo 3、具体Logo制作 下面具体介绍下图所示Logo的制作方法。
首先运行Fireworks 8，在工具箱中选择“文本”工具，在舞台中输入文字BZYUM，并设置其属性。如右上图所示。 再按Ctrl+Shift+D组合键，将该文本复制4次。分别设置4个路径的笔触描边为：白色2 px，黑色5 px，白色7 px，黑色12 px 。

5 一、 制作网站Logo 3、具体Logo制作 接下来为最底层的路径加一个投影效果，距离7 px，柔化为0， “属性”面板中的其他参数值 如左下图所示。 然后选中最上层的路径，按Ctrl+J组合键将其合并，并设置其填充方式为线性填充，填充的具体颜色配置如右下图所示。

6 一、 制作网站Logo 3、具体Logo制作 接着选中最上层的路径再复制一次，并设置笔触为空，设置内阴影效果，指定“距离”为3 px，“柔化”为2 px，“不透明度”为75％，这时就可以得到左下图所示的效果。 最后复制最上层的路径，新建一层，粘贴并复制的内容后，并将其填充为白色。在层2中绘制一条黑色水平直线，将其转换为元件并复制多个，使其均匀分布在文字上 。入右下图所示。组合后即可得到前面所示效果。

7 二、 制作网站Banner 1、Banner的尺寸与设计思路
由于网络本身的特点，Banner的设计与创作有一些特别之处值得注意。一个经过精心设计的Banner和一个创意平淡的Banner在单击率上将会相差很大。 Banner的大小是有规定的，右图列出了目前常用的几种Banner的尺寸。

8 二、 制作网站Banner 2、具体Banner的制作
首先新建一个宽468，高60的画布，并用工具箱中的“矩形”工具，创建一个与画布一样大小的矩形。在“属性”面板中，把刚刚拉出的矩形的填充类型改为“波纹”，并按左下所示的样式进行设置。 当对矩形完成填充后，就会出现右下图所示的填充控制手柄，调节成如图所示效果。

9 二、 制作网站Banner 2、具体Banner的制作
然后在“层”面板中，选中第1帧并单击右侧的选项按钮，从弹出的下拉菜单中选择“重制帧”命令，如右下图所示。这时会在当前帧之后创建第2帧。

10 二、 制作网站Banner 2、具体Banner的制作
最后在“层”面板中选中第2帧，并拖动矩形框中填充样式上的2个控制手柄，使其向上和向右拉长一些，如下图所示。 选中“层”面板中的第2帧，并单击右侧的选项按钮，从弹出的下拉菜单中选择“重制帧”命令，在2帧之后创建第3帧。按照相同的方法进行拖动，最终完成制作。

11 三、 制作网页按钮 1、制作普通网页按钮 接下来介绍制作按钮的操作过程。首先在文档中按住Shift键拖动鼠标绘制一个圆，在“属性”面板中将填充颜色设置为#009999，将填充颜色设置为白色，再次在文档中绘制一个圆，覆盖在原有的圆上，大小约是原来的2/3，将位置调整到上半部分，如下图所示。

12 三、 制作网页按钮 1、制作普通网页按钮 然后使用“指针”工具选中小圆，在“属性”面板的“填充类别”下拉列表框，选择“渐变”|“线性”命令。拖动渐变效果的起点（圆形黑点）到小圆的顶端，拖动渐变效果的终点（方形黑点）到小圆的底部， 如下图所示。

13 三、 制作网页按钮 1、制作普通网页按钮 接下来单击“属性”面板中的“颜色”色块，打开调色板，单击起点颜色的色标，打开颜色拾取器，选择“白色”作为渐变起始的颜色，如下图所示。同样，将终点的颜色也设置为白色。单击调色板右上方的“不透明度”色标，在弹出的窗口中，拖动滑块至最左侧，将“不透明度”参数设置为0。在“属性”面板中的“不透明度”文本框中输入70 。

14 三、 制作网页按钮 1、制作普通网页按钮 然后使用“指针”工具鼠标单击选中白色渐变的图层，选择“编辑”|“复制”命令，复制渐变所在的图层。在文档中选中渐变图形，选择“修改”|“变形”|“旋转 180度”命令，倒转该图层。将倒转的渐变图移动到圆的下方，选择“修改”|“变形”|“缩放”命令，稍微放大该渐变图，效果如下图所示。

15 三、 制作网页按钮 1、制作普通网页按钮 再选中该图层，选择“修改”|“平面化所选”命令，将该矢量图转换为位图。使用“指针”工具选中该图层，选择“滤镜”|“模糊”|“高斯模糊”命令，拖动“模糊范围”滑块调整到6.0的位置，单击“确定”按钮应用该滤镜 。

16 三、 制作网页按钮 1、制作普通网页按钮 最后选中背景的圆形图层，在“属性”面板单击“添加效果或选择预设”按钮，在弹出的菜单中选择“阴影和光晕”|“内侧阴影”命令，打开参数配置对话框。在参数配置对话框中，设置“距离”为0，“不透明度”为70%，“柔化”为30，“角度”为315。设置完成后按下Enter键应用该效果。至此，一个网页按钮素材制作完成 。

17 四、 思考 五、 动手练习 Banner的制作主要考虑哪些因素。 网络Logo的设计思路与表现形式是什么。

18 本章小结： 掌握Logo与Banner的制作方法和技巧。 了解Logo与Banner的设计思路与表现形式。