制作网站水晶风格按钮

日期: 2013年04月06日 阅读次数: 1,013 次 评论次数: 没有评论

  简单精致的按钮在网页或软件中是比较常见的,也是最常用到的设计,他必须在很小的范围内有序的排列字体和图标,以及颜色的搭配等内容。在制作的过程中,要考虑观看者的视觉感受,不需要过于花哨,字体的设计简单明了即可。
本例素材下载:点击下载

第一步
  执行“文件,新建”命令,在弹出的对话框中设置宽度400px,高度200px,单击确定按钮完成新建一个文档。选择“圆角矩形工具”,设置“前景色”为RGB(0,103,146),在画布中绘制圆角矩形,效果如下图所示
制作网站水晶风格按钮

第二步
  双击刚才制作的图层,进入图层样式面板,根据下面的图片设置图层投影样式、渐变叠加样式(渐变范围为RGB(0,80,162) to RGB(0,141,234))、描边样式(渐变范围为RGB(0,41,82) to RGB(56,172,239))。
制作网站水晶风格按钮
制作网站水晶风格按钮
制作网站水晶风格按钮

完成图层样式效果设置后,可以看到如下效果
制作网站水晶风格按钮

第三步
选择“圆角矩形工具”,在选项栏上单击“形状图层”按钮,设置半径为5px,前景色为白色,在画布中绘制一个如下的圆角矩形
制作网站水晶风格按钮

第四步
依然选择“圆角矩形工具”,在如下图中的样式列表中选择“减去顶层形状”
制作网站水晶风格按钮
然后在画布中按照下图继续绘制一个圆角矩形,完成后的效果如下图所示。
制作网站水晶风格按钮

第五步
选择第三步中创建的形状图层,双击图层进入图层样式,按下图设置其渐变叠加样式和描边图层样式(渐变范围为RGB(159,197,73) to RGB(255,255,255),透明度范围为0% TO 100%)
制作网站水晶风格按钮
制作网站水晶风格按钮
完成以上设置后,设置该图层的“混合模式”为“叠加”,不透明度为53%,“填充”为0%,完成后效果如下图所示
制作网站水晶风格按钮
制作网站水晶风格按钮

友荐云推荐