制作网页翻转按钮

首先,创建一个新的400×新建一个图层,使用形状工具椭圆U /转变,选择第三个图方法(填充像素)在公共栏,信息面板F8视图的价值,画一个圆,直径约40中间的新图层与任何颜色(新闻转向保持圆)。如图左边所示。

0614 [Window > style]调出样式面板，点击右上角的三角形按钮，选择“替换样式”，在样式列表目录中选择“web翻转样式”，确认新图层当前被选中，然后使用“已选蓝色胶体按钮”样式。红色箭头如下图所示。你也可以选择其他颜色。

0615将新图层与背景图层合并，然后[Image > trim]，如图右图。确认操作后，图像将被裁剪成与所画圆相同的大小。该命令的作用是基于左上角第一个像素或右下角最后一个像素的颜色。在我们的图像中，这两个地方是白色的。然后切掉画面上连续的白色部分。这就像在现实中把图像打印出来后剪去纸张的边缘。

然后将背景图层复制到另一个图层，使用曲线工具合并高亮和暗区域(高亮点229255;暗点60、0)形成高亮按钮的效果。如图左边所示。完成后，我们得到两个层:深色按钮的背景层和浅色按钮的背景复制层。

完成以上五个步骤后，就可以开始制作鼠标翻转效果了。在开始之前，让我们简单介绍一下生产原理。我们还看到了使用鼠标接触的网页示例。这涉及到一个称为事件和方法的概念。我们的日常生活由许多事件和方法组成。例如，口渴是一个事件，而喝水是解决这个事件的方法。饥饿是一种事件，而吃是一种方式。想学是件大事，看“师傅之道”是方法等等。

这实际上是一种编程思想。和人一样，计算机也是一个由事件和方法组成的逻辑系统。所以我们应该遵循这个想法去创造一个事件和一个解决方案。此事件为鼠标接触事件。通常鼠标不碰，我们只显示黑色按钮层(背景层)。鼠标接触事件后，亮按钮层(背景复制层)显示。

0617单击web内容面板下的new按钮来创建翻转设置。上面的s060101表示正常状态，所以我们需要在图层调色板中隐藏背景复制层，如图左图所示。

底部的上方代表鼠标接触事件，所以我们在图层面板中显示背景复制层，并隐藏背景层(在本例中，由于图层的覆盖关系，即使不隐藏，也不会影响最终效果)。如图右侧所示。从web内容面板，我们可以看到两种不同的效果:正常和鼠标接触。

好了，我们制作完成了，记得保存文件。现在点击工具栏上的按钮，在ImageReady中预览未来网页的实际效果。注意，有一种可能性，下图所示的带有序列号的橙色框可能出现在图像窗口中，这是切片的序列号。如果您觉得它在视觉上受损，请单击工具栏上的按钮隐藏该切片。我们将在将来介绍切片的概念和使用。现在我们不用深究了。

0619如果你想制作一个可以在web浏览器中打开的网页，你需要使用File > store optimization results as ctrlaltshift。在出现的保存对话框中，保存类型选择为HTML和图像，设置选项为默认，切片选项为所有切片。文件名可以自己确定，但不能用中文。默认情况下，保存的位置是个人文档的位置，可以自行更改(例如桌面)。确认后，会出现如下图中的警告框，提示文件名兼容性问题。你可以忽略它。按OK按钮。这将在指定的目录中生成一个a.Html文件和一个images目录。如果你想移动目录位置，你必须同时移动两者，否则图片将无法在网页中显示。因为web文件不能包含图片，所以图片被存储在images目录下。

该操作变为输出操作，Photoshop中的图像输出变为其他格式。同时我们也需要保存这张图片的原始PSD格式，因为以后我们需要在这个例子的基础上添加动画效果。参见示例页面。您也可以打开s0603。PSD文件研究。注意，您需要退出预览模式(按钮)来保存文件。ImageReady可以直接保存PSD格式，动画设置也可以保存。

虽然曲线工具只占这部分的一小部分，但它也是非常重要的。没有曲线的突出效果，后面的一切都是不可能的。在网页设计中使用的曲线类型是非常常见的。

这是我们第一次把我们的作品做成网页格式。肯定有很多你不明白的。没关系。随着更多关于网页的知识逐渐加入到本系列教程中，迷雾会逐渐消散，你会发现你将来到一个更广阔的世界。

事实上，Photoshop和ImageReady在网页制作方面的功能非常有限。如果你想拥有更多更好的功能，你仍然需要使用专门的网页制作软件。在未来，我们将学习一个专门结合Photoshop和ImageReady的网页制作软件，golive。它完全兼容由ImageReady生成的网页代码。在其中我们也可以创建上面的翻转效果，并且可以有更多的改变。在文本教程发布之前，您可以通过golivecs2视频教程学习。