下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

运用Photoshop创建网页翻转按钮

作者:课课家教育     来源: http://www.kokojia.com点击数:1461发布时间: 2017-05-07 08:27:51

标签: PS设计PS制作网页设计

想学设计?来看看大师是如何完成作品的?

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

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

运用Photoshop创建网页翻转按钮_PS设计_PS制作_网页设计_课课家

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

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

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

  最终效果:

最终的效果展示

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

赞(10)
踩(1)
分享到:
华为认证网络工程师 HCIE直播课视频教程