以后地位: 首页 > 设计教程 > 网页设计教程 > Photoshop设计导航鼠标悬停状况效果

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

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

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教程:设计导航鼠标悬停状况小效果

分享到: 
Photoshop设计简洁慷慨的网页UI
photoshop制作绿色下载按钮
友情链接:思维工坊语言培训网  电动汽车技术网  广州美容在线学习网  碎石土地知识网  C9C炒股票网  中国太阳能光伏网  中国美容美发网  亚海展会网  华人科技资讯网  广东校园招聘人才网