|
系列教程#06
本页操作速查
使用样式调板0614
使用修整命令0615 从Photoshop跳转到ImageReady0616 新建ImageReady的翻转状态0617 在ImageReady中预览最终效果0618 将ImageReady制作的效果保存为网页0619 |
大家经常在一些网页中看到一种会随着鼠标的接触而变色的按钮,参见范例网页。这称之为鼠标翻转效果,这是根据英文rollover翻译而来的,其实不是很符合中文的语境。其原理是利用两张图片,平时显示一幅,当鼠标接触后换成另外一幅图片。如下图。这样看起来好像是鼠标接触的时候按钮变亮了。现在我们来动手制作,首先在Photoshop中将它们制作成图片,然后再做成网页。 首先新建一个400×300的白底图像,新建一层,利用形状工具椭圆〖U/SHIFT U〗,在公共栏选择第3种绘图方式(填充像素),调出信息调板〖F8〗观看数值,用任意颜色在新建层中间位置画一个直径40左右的正圆(按住SHIFT保持正圆)。如下 左图。
接着将背景图层复制一层,对复制出来的图层使用曲线工具,合并高光和暗调区域(高光点229,255;暗调点60,0),形成加亮按钮的效果。如下左图。完成后我们得到两个图层,分别是暗色按钮的背景层,和亮色按钮的背景复制层。如果以上步骤无法完成,点此下载范例文件
在完成以上5个步骤后,我们就可以开始制作鼠标翻转效果了。开始之前我们先简要介绍一下制作的原理。范例网页大家也看过,是随着鼠标的接触而发生的。这里涉及一种概念,叫事件和方法。我们的日常生活就是由许多事件和方法组成的,比如口渴是事件,喝水就是解决这个事件的方法。肚子饿是事件,吃东西就是方法。想学习是事件,看《大师之路》就是方法等等。 0617点击Web内容调板下方的新建按钮,将建立一个翻转设定。位于上方的s06 01 01代表正常状态,因此我们要在图层调板中隐藏背景副本层,如下左图。
0618好,这样我们就已经完成了制作,主要保存文件。现在点击工具栏上的按钮即可在ImageReady中预览将来做成网页后的实际效果。在图象窗口可能出现如下 左图的橙色外框并标有序号。这是切片的序号。如果觉得不好看可点击工具栏中的按钮隐藏切片。有关切片的概念和使用我们将在以后介绍。现在大家不必深究。
这样的操作就成为输出操作,将Photoshop中的图象输出成为了其他的格式。同时大家也要保存好这个图像的原始psd格式,因为以后我们还要“老瓶装新酒”,在这个范例的基础上增加动画效果。参见范例网页。大家也可自行打开s06 03.psd文件研究一下。注意要退出预览模式(按钮)才可以保存文件。ImageReady可以直接保存psd格式,动画设定也会随之保存。 虽然曲线工具在这一小节只占有很少的部分,但也是很重要的,没有曲线的加亮效果,后面的一切也都无从谈起。曲线的类型运用在网页设计制作中是很常见的。 事实上Photoshop和ImageReady在网页制作方面来说功能十分有限,如果要有更多更好的功能,还是要使用专门的网页制作软件才行。我们在以后课程将学习到一个专门与Photoshop和ImageReady配合的网页制作软件GoLive,它可以完全兼容ImageReady产生的网页代码。在其中我们也可以创建以上的翻转效果,并且还能有更多的变化。 在文字教程发布之前,大家可以先通过GoLiveCS2视频教程来学习。 自愿点击您喜好的广告内容,可同时使教程作者受益。 |
|
1997-2005 保留所有著作权 闽ICP备05016442号 | |