大家经常在一些网页中看到一种会随着鼠标的接触而变色的按钮,参见范例网页。这称之为鼠标翻转效果,这是根据英文rollover翻译而来的,其实不是很符合中文的语境。其原理是利用两张图片,平时显示一幅,当鼠标接触后换成另外一幅图片。如下图。这样看起来好像是鼠标接触的时候按钮变亮了。现在我们来动手制作,首先在Photoshop中将它们制作成图片,然后再做成网页。

6-8 制作网页翻转按钮

首先新建一个400×300的白底图像,新建一层,利用形状工具椭圆〖U/SHIFTU〗,在公共栏选择第3种绘图方式(填充像素),调出信息调板〖F8〗观看数值,用任意颜色在新建层中间位置画一个直径40左右的正圆(按住SHIFT保持正圆)。如下左图。

【窗口>样式】调出样式调板,点击右上角圆三角按钮,选择“替换样式”,在出来的样式列表目录中选择“Web翻转样式”,确认目前选择的是新建层,然后使用“选中状态的蓝色胶体按钮”样式。如下中图红色箭头处。大家也可以自己选择其他颜色的。

将新建层与背景层合并,然后【图像>修整】,如下右图所示。确定操作后图像将被裁剪为和所画的圆同等大小。这个命令的作用是根据左上角第一个像素处,或右下角最后一个像素处的颜色,在我们这幅图像中这两个地方都是白色。然后就将画面中连续的白色部分裁剪掉。这就好像现实中打印图像之后将纸张的边缘裁剪掉一样。

6-8 制作网页翻转按钮6-8 制作网页翻转按钮6-8 制作网页翻转按钮

接着将背景图层复制一层,对复制出来的图层使用曲线工具,合并高光和暗调区域(高光点229,255;暗调点60,0),形成加亮按钮的效果。如下左图。完成后我们得到两个图层,分别是暗色按钮的背景层,和亮色按钮的背景复制层。

使用【文件>在ImageReady中编辑】〖CTRLSHIFTM〗,或点击工具栏最下方6-8 制作网页翻转按钮按钮,将会跳转到ImageReady中,这是Photoshop附带的一个软件,用来制作动画和网页。我们找到Web内容和图层两个调板,如下右图。后面的操作就是由这两个调板配合完成。

6-8 制作网页翻转按钮-6-8 制作网页翻转按钮