运用Photoshop创建网页翻转按钮

作者:课课家教育更新于： 2017-04-06 18:43:48

　　这次我们所教大家的交情是关于网页的制作，那么网页制作中我们所需要的翻转按钮，在网页中按钮的使用是非常常见的，并且按钮按下，弹起或将光标放在按钮上都会出现不同的效果，这就是翻转，要创建翻转，至少需要两个图像，一个用于表示处于正常状态的图像，而另一个则用于表示处在更改状态的图像。常见的按钮翻转效果有很多，如改变按钮，颜色改变按钮方向以及改变按钮内容。这次小编就来为大家带来的是：运用photoshop创建网页翻转按钮。希望大家喜欢。

　　步骤1：首先我们打开photoshop软件。然后我们首先来制作主图像，即翻转前的图像，使用横排文字工具，在图像上输入“start”，栅格化文字图层。然后按Ctrl+T组合键进入自由变换状态，调整好文字与按钮之间的透视关系，在图层面板中，设置文字图层的“混合模式”为叠加，主按钮制作完成之后，我们就要执行“文件—存储为”命令，将该“按钮”存储为文件，并命名为“按钮1”如下图所示：

　　步骤2：主按钮制作完成并储存完后。然后我们就来自做次图像，即翻转后的图像，同样使用之前的素材，执行“编辑—变换—水平翻转”命令，为了使翻转效果更加直观，我们可以执行“图像—调整—色相饱和度”命令，在弹出了“色相/饱和度”对话框中设置“色相”为29，使按钮由橙色变为金黄色。如下图所示：

　　步骤3：制作完成次图像之后，我们可以使用横排文字工具，在图像上输入文字进行变换后设置文字的图层“混合模式”为叠加，执行“文件—存储为”命令，将该按钮存储为按钮2，两个按钮制作完成之后，我们翻转的按钮就创建完成后需要在Dreamweaver中将按钮图像置入到网页内并自动翻转动作添加代码以后才能翻转。如下图所示：

　　最终效果：

　　小编结语：其实我们在制作完成之后，如果要存储为web所用的格式，那么就可以创建切片后对图像进行优化，可以减小图像的大小，而较小的图像可以使服务是更加高效地存储，传输和下载图像，执行“文件—存储为Web所用格式”命令，在“打开—存储为—所用格式”对话框中可以对图像进行优化和输出。如果大家还有什么不明白的地方，欢迎咨询小编哦，感谢大家的支持。