第6章网页设计中按钮的制作及应用与呈现.ppt

第6章网页设计中按钮的制作及应用 第6章网页设计中按钮的制作及应用 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 一、按钮与网页的关系 二、文字按钮的制作 二、文字按钮的制作 二、文字按钮的制作 二、文字按钮的制作 二、文字按钮的制作 二、文字按钮的制作 二、文字按钮的制作 二、文字按钮的制作 二、文字按钮的制作 二、文字按钮的制作 二、文字按钮的制作 三、图形按钮的制作 三、图形按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 四、动态按钮的制作 二、文字按钮的制作 五、综合实例 五、综合实例 五、综合实例 五、综合实例 五、综合实例 五、综合实例 五、综合实例 五、综合实例 五、综合实例 五、综合实例 五、综合实例 最终效果 步骤： 投影 动态按钮在网页中具有不可替代的作用，它的特点是醒目，能丰富活跃页面，吸引浏览者。能传达更多的信息，对浏览者有导向作用。 那么怎样才能使按钮动起来？在PhotoshopCS中要切换到ImageReady界面制作Gif动画，或者利用“翻转”命令的6种状态制作翻转按钮，下面举两个例子来说明动态按钮的制作以及在网页中的运用。 1、翻转按钮的制作 最终效果 1、翻转按钮的制作 步骤： 1、翻转按钮的制作 步骤： 图层样式内发光 1、翻转按钮的制作 步骤： 图层样式描边 1、翻转按钮的制作 步骤： 复制 1、翻转按钮的制作 步骤：切换到ImageReady界面，制作翻转按钮，翻转按钮可以根据不同的情况制作六种不同 的图像。 Normal：初始化图像。 Over：鼠标指针移入翻转按钮区域时显示的图像。 Down：按下鼠标左键时显示的图像。 Click：单击鼠标时显示的图像。 Out：鼠标指针移出翻转按钮区域时显示的图像。 Up：单击鼠标右键或双击鼠标时显示的图像。 在翻转按钮制作时使用几个状态取决于页面风格的需求。 1、翻转按钮的制作 步骤：用切片工具，分割出五个按钮区域，我们选择其中一个切片区域，进行状态设置，在翻转面板中设置Over状态，切换到Photoshop界面，在“图层样式”对话框中调整按钮颜色，效果如图4-56所示。 1、翻转按钮的制作 步骤：设置Down状态，如图4-57所示，切换到Photoshop界面，在“图层样式”对话框中调整按钮颜色，去掉“渐变叠加”选项，勾选“颜色叠加”选项，设置参数如图4-58所示。 1、翻转按钮的制作 步骤：依次把其他按钮制作好，在ImageReady界面中，执行“文件”→“存储优化结果”命令保存，就可以在IE浏览器观看翻转按钮的效果了。用在网页中的效果如图4-60所示。 2、GIF动态按钮的制作 使用GIF动画制作动态按钮是网页中经常用到的手法，一般在ImageReady中进行编辑，它是利用两张以上的图片进行简单的转换，循环播放，从而使网页具有动感和活力。 步骤：1/调入网页背景图片 2、GIF动态按钮的制作 步骤：选择与反相 4、动态按钮的制作 (2) GIF动态按钮的制作 步骤：编辑动画祯后存储优化结果 最终效果 步骤： 背景填充颜色 （R:2、G:124、B:110） 矩形填充颜色 （R:117、G:195、B:162） 描边2像素填充色 （R:3、G:100、B:89） 渐变（R:240、G:245、B:244） 步骤： 白色描边3像素 步骤： 图层样式投影 步骤： 步骤： 投影与描边（R:104、G:21、B:46） 步骤： 步骤：标识的制作。新建图层后单击（自定形状）工具，在属性栏上单击形状后的下三角按钮，在形状下拉列表中选择“月亮”形状，在网页中拖出该形状，在“路径”面板上转换为选区，填充颜色为（R:70、G:210、B:144）。 双击标识图层，在弹出的“图层样式”对话框中勾选“投影”、“斜面和浮雕”复选框，得到如图4-86所示的效果。 * LOGO 按钮与网页的关系 1 文字按钮的制作 2 动态按钮的制作 4 综合实例 5 图形按钮的制作 3 按钮是网页中必不可少的基本控制部件，在各种网页中都少不了按钮的参与。因此在网页设计中按钮的设计也是十分重要的，通过它可