平面设计-网站导航栏的设计案例教程.ppt

网站导航栏设计 平面设计案例 所有权：长沙新华电脑学院 平面设计典型实例 实验名称：网站导航栏设计 实验编号：XHJC-SY-016-11 实验目的： 1. 熟练掌握Photoshop的常用操作方法及技巧 2. 了解网站导航栏的设计规范及注意事项 考核点： 1. 滤镜效果的应用 2. 图层样式的应用 平面设计典型实例 实验要求 （1）启动Photoshop CS2，然后按组合键【Ctrl＋N】打开【新建】对话框进行如图11-1的参数设置。 平面设计典型实例 （2）单击工具箱中前景色按钮，打开【拾色器】对话框选择蓝色。如图11-2所示。 平面设计典型实例 （3）首先将背景层填充为蓝色，再选择【矩形选框】工具绘制矩形并填充为黑色，如图11-3所示。 平面设计典型实例 （4）选择并打开“导航栏/01.psd”文件，在工具箱中选择【移动】工具，调整图像大小和位置，如图11-4所示。 平面设计典型实例 （5）选择并打开“导航栏/02.psd”文件，选择【移动】工具调整图像大小和位置，如图11-5所示。 平面设计典型实例 （6）选择并打开“导航栏/03.psd”文件，使用【移动】工具，调整图像大小和位置，如图11-6所示。 平面设计典型实例 （7）新建“图层1”，选择工具箱中【矩形选框】工具，绘制矩形并填充灰色，复制图层1，调整对象大小和位置，如图11-7所示。 平面设计典型实例 （8）依次绘制一个三角型和圆型并填充渐变色，调整大小和位置，如图11-8所示。 平面设计典型实例 （9）单击工具箱中【矩形选框】工具，在页面中绘制矩形并填充渐变颜色，调整合适位置，如图11-9所示。 平面设计典型实例 （10）单击工具箱中【矩形选框】工具，绘制矩形并填充【径向渐变】，设置不透明度为“90%”，调整大小和位置，如图11-10所示。 平面设计典型实例 （11）选择工具箱中【文字工具】输入文字所需文字，调整大小和位置，所图11-11所示。 平面设计典型实例 （12）选择【矩形选框】工具，绘制其余的几何图形，如图11-12所示。 平面设计典型实例 （13）选择工具箱中【圆角矩形】工具绘制圆角矩形，设置不透明度为“60%”，执行菜单命令【滤镜】→【渲染】→【镜头光晕】，如图11-13所示。 平面设计典型实例 （14）最后输入文字，效果如图11-14所示。 平面设计典型实例 实验要点与注意事项 【渐变】编辑器参数的设置 【滤镜】菜单【渲染】命令【镜头光晕】效果 * * 图11-1 【新建】对话框 图11-2 【拾色器】对话框 图11-3 绘制矩形 图11-4 调整图像 图11-5 调整图像 图11-6 调整图像 图11-7 绘制矩形 图11-8 绘制的几何图形 图11-9 渐变的矩形 图11-10 透明的矩形 图11-11 输入文字 图11-12 绘制几何图形 图11-13 【镜头光晕】对话框 图11-14 最终效果 *