zoukankan      html  css  js  c++  java
  • 水晶按钮最终效果图

    水晶按钮最终效果图

     
    新建一个图层大小如图。

     

    圆角矩形工具拉出这样的形状,圆角半径为5

    双击形状打开图层样式面板,首先进行渐变叠加,颜色数值从左往右依次为:5DD3FF    206E8C    042A39   66767C  效果如图 

    双击形状打开图层样式面板,下面是描边,颜色为151515

    最后是内发光,颜色数值为96A4BB 

    然后新建图层,按住CTRL点击最初的形状图层建立选区,然后内部2PX的白色描边,描边后把填充透明度降到0

    双击这个图层打开图层样式面板,给它一个白色的透明的渐变,就形成上面的光感,向下渐隐。 

    制作水晶按钮

    继续新建一个图层,用椭圆选区建立如左上图的选区,然后羽化3PX,保证下面的渐变边缘不是很生硬,用黑色到白色拉出一个左下图的渐变 

    现在把刚才的渐变图层更改为光,效果如左图,停下,位置什么的和刚才做的白色描边层一样整体效果出来以且再调整。

    按照前面的做法再建立最初的形状选区,拉出黑色到白色渐变,如左上显示,更改图层为光,效果如下 

    复制一个图层3,进行水平翻转,得到左边的黑色阴影部分 

    制作水晶按钮

    然后新建立一个调整图层,CTRL+G让其对下一个图层编组,再进行色相饱和度的调整,也可以先按照边上的数值调整好,再进行编组,自己进行创作的时候最好是先编组再调色

    编组后的图层面板如左上,此时大部分的效果已经完成,开始调整,先是回到那个椭圆渐变层,用小键盘的方向键向下移动4---5个PX,交果如左下。

    我们再找到白色的描边层,给渐变把透明度降到35%,降低光泽,让它显得更柔和

    最后再回到两个可爱的横条黑白渐变上,调整色介,使之颜色加深,效果如下。

    如果想给底下添加阴影的话,最好不要用图层样式的阴影,那个阴影带角度,我的做法是在背景层上新建一个图层,建立最初形状的选取填充上一个深蓝色后取消掉选区,把这个兰色的条形高斯模糊3PX,这样的阴影分布比较均匀。

  • 相关阅读:
    收录
    查看表结构(数据字段说明等)
    JS 转换日期UTC类型
    Vue项目搭建
    win10 解决端口被占用
    mybatis 生成代码配置 mybatis-generator:generate 的使用详解
    mybatis-generator:generate 生成代码配置踩坑详解
    Spring boot 集成 Druid 数据源
    Spring Boot跨域解决方案
    Sublime Text 实用方法
  • 原文地址:https://www.cnblogs.com/happyday56/p/1424152.html
Copyright © 2011-2022 走看看