网站Banner设计实例.pdf

精品文档 网站 Banner 设计实例 一、 网站 Banner 设计实例 Banner 也称为横幅广告， 是互联网广告中最基本的广告形式。 网站 Banner 可以位于网页 顶部、中部或底部的任意一处。可以是 GIF、JPG等格式的图像文件，同时还可使用 Java 等 语言使其产生交互性，用 Shockwave等插件工具增强表现力。 二级页面 Banner 最终效果如图所示。 二级页面 Banner 具体的操作步骤。 （1）执行“文件” | “新建”命令，新建文档。 （2 ）执行“视图” | “标尺”命令，显示出标尺，鼠标移动到标尺上，在图像的中间位置 拖出标尺辅助线。 （3 ）工具箱中选择“钢笔工具” ，在路径面板上新建“路径 1”，绘制路径。 （闭合路径） （4 ）新建“图层 1”，设置前景色为 #e4fd7e ，在“路径 1”上单击右键，在快捷菜单中选 择“填充路径”，设置填充路径效果如图所示。 。 1欢迎下载 精品文档 （5 ）工具箱中选择“钢笔工具” ，在路径面板上新建“路径 2 ”，绘制路径。在图层面板 上新建“图层 2”，设置前景色为 #f68e15 ，填充“路径 2 ”。 填充效果如图所示。 （6 ）工具箱中选择 “钢笔工具”，在路径面板上新建 “路径3”，绘制路径。 新建 “图层3”， 工具箱中选择“渐变工具” ，编辑渐变色，选择直线方式填充渐变色，方向从左到右，填充效 果如图所示。 。 2欢迎下载 精品文档 （7 ）图层面板上新建“图层 4 ”，工具箱中选择“椭圆形选框工具” ，按【 shift 】键绘制 正圆形选区，在选区中填充白色，调整图层 4 的不透明度。 （8 ）同理绘制其它正圆形选区，填充白色并调整图层的不透明度，效果如图所示。 （9 ）设置前景色为 #90090f ，工具箱中选择“文字工具” ，输入文字。复制 LOGO图标。 （10）执行“文件” | “存储”命令，文件名： banner ，扩展名：jpg ，单击“保存”按钮。 二、网页按钮和导航栏设计实例 导航栏是组成网页的元素之一，它的任务是帮助浏览者在网站上方便地查找信息。同时， 合理的导航栏可以让浏览者清楚自己浏览的网页在网站中的位置。导航栏的样式多样，常见 的是简单的文字、图片、按钮，还可以是下拉菜单导航。 1. 按钮设计 按钮在网页中的应用较广泛，很多导航栏由按钮组成，先介绍一下常见的按钮设计方法。 【案例】水晶按钮设计 （1）执行“文件” | “新建”命令，新建文档。 （图像大小 200 ×50 像素） （2 ）新建“图层 1”，重命名为“按钮”。工具箱中选择“矩形工具” ，选项卡栏选择“填 充像素”，绘制矩形图像。 （3 ）双击“按钮”图层，弹出“图层样式”对话框选择“渐变叠加”选项，对该选项进 行相应的设置，如图所示。 。 3欢迎下载 精品文档 （4 ）在对话框中的“样式”列表框中选择“内发光”选项，对该选项进行相应的设置， 如图所示。 5）在对话