优艾设计网

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

优艾设计网 https://www.uibq.com 2020-09-14 00:00 出处:网络 作者:woshifuyun
前段时间有朋友问导航鼠标悬停状态效果怎样实现的,今天我简单写一下教程,希望对大家有用,还有如果大家对页面中的什么效果感到疑惑,就请留言给我,我会尽力发上教程来和大家分享的。

前段时间有朋友问导航鼠标悬停状态效果怎样实现的,今天我简单写一下教程,希望对大家有用,还有如果大家对页面中的什么效果感到疑惑,就请留言给我,我会尽力发上教程来和大家分享的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

提示:键盘也能翻页,试试"← →"键
0

精彩评论

暂无评论...
验证码 换一张
取 消