请问上海时时乐
当前位置: 请问上海时时乐 > 设计教程 > 网页设计教程 > Photoshop设计导航鼠标悬停状态效果

上海时时乐七码万能:Photoshop设计导航鼠标悬停状态效果

请问上海时时乐 www.i7b7.com.cn 首先看一下最终效果和分层:

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制作绿色下载按钮

热门推荐

  • 用剩豆渣做丸子 人人都爱吃起来就停不住嘴-美食资讯 2019-03-19
  • 新时代迎来新峰会(钟声) 2019-03-12
  • 【学习时刻】中央党校徐浩然:把“人民”二字镌刻在党的旗帜上 2019-03-12
  • 世界杯打破孤立预言,开启俄罗斯荣耀时刻,普京献词“地球盛会”——感受足球的力量……巩固世界和平,促进相互了解。 2019-03-07
  • 个人信息保护的政府监管模式探析 2019-03-07
  • 中国城市信用建设高峰论坛 2019-03-05
  • 中关村科技公民论坛创新全民科学素质建设 2019-03-04
  • 美国的目的是获取朝鲜的利益,以退为进,或声东击西,是完全可能的,美国不可能放弃自己的利益让朝鲜安然的 2019-03-04
  • 精打细算会过日子 这三款小型SUV保养很便宜 2019-02-26
  • 冰川旅行地中国国家地理网 2019-02-26
  • 吕梁:临县青塘“粽叶香”非遗艺术节开幕 乡土节目很吸睛 2019-02-21
  • 张德江:着力加强重点领域立法,完善以宪法为核心的中国特色社会主义法律体系 2019-02-21
  • 香港山西商会胡晓明会长一行在右玉县考察“旅游+”项目 2019-02-20
  • 数说版 “获得感”是种什么感?数数民生“大红包”! 2019-02-20
  • 北京进入旅游旺季 警察提示游客需防揽客者连环设套忽悠购物 2019-02-17
  • 84| 326| 903| 394| 70| 579| 911| 982| 266| 36| 531| 569| 456| 273| 252|