Photoshop设计导航鼠标悬停状态效果

2016-02-19 13:58 5 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的Photoshop设计导航鼠标悬停状态效果,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - 状态 】

首先看一下最终效果和分层:

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

1、 背景色设置为#280021,新建图层,利用钢笔工具画如下图形,填充颜色,然后图层样式中的渐变叠加设置如下:

Photoshop教程:设计导航鼠标悬停状态小效果

2、 新建图层,用椭圆工具在图形上面建一个选区,然后填充白色,如图。

Photoshop教程:设计导航鼠标悬停状态小效果

3、取消选区,选择滤镜高斯模糊把白色进行模糊。具体数值视效果而定,效果如图。

Photoshop教程:设计导航鼠标悬停状态小效果

4、把这个图层的混合模式设置为叠加,现在看起来过于亮,可以降低一下透明度。然后把超出下面图形的白色去掉。如图。

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

5、新建图层,按住ctrl单击图形图层得到图形选区,然后选择编辑-描边对它进行描边设置,如图。

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

6、将此描边图层的混合模式设置为叠加,透明度设置为40%,视效果而定。如图。

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

7、接下来先添加上部高光。用钢笔工具新建选区,然后ctrl+enter转换成选区,然后按住ctrl+alt+shift再点击下面图形的图层,使他们两个的选区进行重合,用渐变工具(白色到透明)进行由左上到右下的拖动(这里在拖动的时候要注意,不要拖动的太大,从左上边缘开始拖动到左下边缘为止即可),适当调节透明度为80%。如图所示。

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

8、希望再把上面高光再真实一些,可以先把这个图层混合样式设置为叠加,然后再复制一层,把复制的这一层混合样式设置为正常,再稍微调低复制层的透明度为70%.如图。

Photoshop教程:设计导航鼠标悬停状态小效果

9、下面进行底部高光的处理,新建图层,选择铅笔工具,白色,在图层的下边缘画出一条直线,如图。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)

Photoshop教程:设计导航鼠标悬停状态小效果

10、然后,将此图层的混合样式设置为叠加,然后单击图层面板的蒙版图标,如图,图层此时显示下面这个样子。然后选择渐变工具,设置为黑白黑,然后从左到右进行拖拉,如图

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

11、新建图层,选择柔性笔刷,颜色白色,设置大小为14左右,在图形的下边缘处点击一下,如图。然后ctrl+T将它变长,如图。然后将此图层混合模式设置为叠加,把超出图形边缘的光删掉,如图。

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

Photoshop教程:设计导航鼠标悬停状态小效果

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)

12、同样如同上面第9,10步操作,所不同的就是图层混合样式为正常而不是叠加,然后适当降低透明度,让其有一条亮线。如图

Photoshop教程:设计导航鼠标悬停状态小效果

13、同样如上面11步一样操作,不同的是,笔刷大小设置为10,比上面的14小一点,然后图层混合模式设置为正常,并且适当降低一点点透明度。如图所示。

Photoshop教程:设计导航鼠标悬停状态小效果

到此为止,这个小效果就完成了,在做类似光效时,最主要的应用就是高斯模糊和叠加,合理运用这两个功能会给作品增色不少。

来源:https://www.tulaoshi.com/n/20160219/1605858.html

延伸阅读
          超链接,一般的做法是给一个title属性,这样用户的鼠标悬停在超链接上的时候,它会显示title的内容。但是,你是否厌倦了千篇一律的鼠标悬停效果呢?        当然,也有这方面很炫的代码,但是才跨浏览器方面功夫还是不够,呵呵。我遇到一个不错的css,...
设计背景 先看看最终效果图 第一步建立新文件,设置如下图 下一步设置前景色为#e6e0d5,背景色为#cec5af 制作顶部区域,确保之前设置的颜色正确,然后使用滤镜渲染云彩! 开始设计导航按钮,新建图层,使用矩形工具,制作如下图形 再次新建图层,制作#ac2a2a颜色矩形 再用单行选区工具制作按钮鼠标移动上后的...
标签: 电脑入门
Dock上的文件夹有着多种显示方式,可以供我们选择。使用不同的方式可以满足不同的用户的需求,现在就让图老师小编再教你一种Dock上的文件夹显示方式的设置方法吧。 通常情况下我们使用网格显示的时候, 当鼠标悬停在一个图标或者文件上时, 是不会有灰色透明阴影提示的! 其实开启这个功能也是十分的简单! 打开终端输入: defaults write...
很简单很实用的导航制作方法:Photoshop设计导航:圆角矩形导航 形状工具画一个圆角矩形: 添加一个锚点并删除这个新添加的锚点: 选择左下角的2个锚点: CTRL+T并将中心点定位到左边线: 右键,水平翻转: 同理翻转右边: 适用: 图老师
photoshop设计导航条:黑色蓝色光影效果,提示,简单入门,适合新手练习 最终效果 第一步:基本要领 创建新的psd文档,宽度700px,高度160px,背景色以黑灰色(#2b2b2b)填充。 新建图层,图层属性为“导航条”,选择圆角矩形工具,设置前景色为黑色(#000000)如下图一样画一矩形条(长度和宽度可自行处理)。 第二步:设置tulaoshi.c...

经验教程

531

收藏

8
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部