<dd id="rcs5i"><tr id="rcs5i"></tr></dd>
    <div id="rcs5i"></div>

    <div id="rcs5i"></div>

      1. <div id="rcs5i"></div>

        当前位置: 首页 > 设计教程 > 网页设计教程 > Photoshop设计导航鼠标悬停状态效果

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

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

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

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

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

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

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

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

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

        4?#39068;?#20010;图层的混合模式设置为“叠加”现在看起来过于亮可以降低一下?#35813;取?#28982;后把超出下面图形的白色去掉如图

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

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

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

        6将此描边图层的混合模式设置为叠加?#35813;?#24230;设置为40%视效果而定如图

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

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

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

        分享到: 
        Photoshop设计简洁大方的网页UI
        photoshop制作绿色下载按钮
        ڿ¡

        <dd id="rcs5i"><tr id="rcs5i"></tr></dd>
          <div id="rcs5i"></div>

          <div id="rcs5i"></div>

            1. <div id="rcs5i"></div>

              <dd id="rcs5i"><tr id="rcs5i"></tr></dd>
                <div id="rcs5i"></div>

                <div id="rcs5i"></div>

                  1. <div id="rcs5i"></div>