当前位置:首页 > PS教程 > 网页设计

photoshop绘制碳纤维风格的网页导航按钮

  • 2022-12-24 23:49:54
  • 来源/作者:互联网/佚名
  • 己被围观

制作背景 新建1200 x 600px,透明背景的文档。设置前景色为#bebebf,背景色为#d2d2d2。





创建导航球

选取”椭圆选框工具”,新建图层,在第一个链接上方拖出一小型椭圆。如下所示:



选取”渐变工具”,在上述的椭圆选区中拖出一个从黑(#000000)到灰(#828282)的线性渐变。如下所示:



再一次使用”椭圆选框工具”,在刚刚创建的椭圆里新建一个圆形的选区。如下所示:



以颜色#8e8e8e填充此圆形选区,保持此选区为激活状态,并在灰色圆形图层上创建新图层,设置前景色为白色,用渐变工具从左上角拖出一个从白到透明的径向渐变。如下所示:



改变渐变类型为线性渐变,仍然保持选区为激活状态,再新建图层,从底部向上拖出此渐变。如下所示:



改变每个图层的透明度和渐变的位置,以增加球体的高光点。如下所示:



复制球体到每个按钮上方。
创建按钮激活状态

选择某按钮添加激活状态,简单的给此按钮的球体添加渐变叠加(我没有这样操作,只是合并创建球体的所有图层,然后添加调整图层- 色相/饱和度,并着色),选择你觉得合适的颜色。如下所示:



使用”矩形选框工具”选中此按钮,不要包括分隔线。如下所示:



创建新图层,保持选区不变,以颜色#dddddd填充此选区,然后设置图层混合模式为”叠加”。



最后,使用”多边形套索工具”创建三角形,三角形的颜色和背景色是一样的,然后添加图层样式阴影,如下所示:



最后,按钮激活状态效果如下:





 

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • APP展示图,教你怎么用PS制作APP的界面图片 APP展示图,教你怎么用PS制作APP的界面图片
  • 用ps制作大拇指胜利手势logo 用ps制作大拇指胜利手势logo
  • 用ps制作金属质感徽章 用ps制作金属质感徽章
  • 用ps制作绿色环保Logo 用ps制作绿色环保Logo
  • 用ps制作放大缩小logo 用ps制作放大缩小logo
  • ps cs6设计火箭UI图标 ps cs6设计火箭UI图标
  • 教你用PS打造网页效果图全过程 教你用PS打造网页效果图全过程
  • 进度条,设计一个彩色进度条 进度条,设计一个彩色进度条