请问上海时时乐
当前位置: 请问上海时时乐 > 设计教程 > 网页设计教程 > 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-05-23
  • 中央环保督察组:石家庄市无极县“敷衍整改” 2019-05-15
  • 五彩丝缠角粽 民族团结一家亲 2019-05-12
  • 鹿晗全新Remix专辑《Re:Play》发布 首支单曲全球上线鹿晗 专辑 2019-05-12
  • 英国新锐航母下水 将取代中国成为世界第二航母强国? 2019-05-06
  • 凤凰公映礼之《绣春刀2》 2019-05-06
  • 美军轰炸机威胁“摧毁南海岛礁” 中国怎么办? 2019-05-04
  • 回复@老老保老张工:各级计委啊!虽然有时候也征求企业的意见,但仅仅是作为制订计划的参考,权重微乎其微…… 2019-05-03
  • 【光明网专论】鞠立新:习近平新时代中国特色社会主义经济思想的内涵、逻辑和特质 2019-05-03
  • 图片故事:人民日报编辑部的一天 2019-04-29
  • 欢动市北 青岛CBD之夏足球啤酒狂欢节启幕(美图) 2019-04-29
  • 广电总局严控主持人资质 访谈节目禁用"嘉宾主持" 2019-04-26
  • 高温“烤验”,品读这些自带凉意的避暑诗词 2019-04-26
  • 珠海市香洲区:以居民需求为导向的“议治相济” 2019-04-20
  • 【记者直击】花莲地震已确认有两名失踪人员被困同一地点 2019-04-19
  • 799| 856| 662| 605| 36| 745| 172| 238| 936| 728| 983| 770| 165| 316| 355|