• 按作者
  • 按标题
  • 按老师

制作网页黑色按钮


提问



   本教程中我们介绍如何利用photoshop绘制一款质感漂亮的黑色网页导航按钮,效果图是比较简单的,但也要用心去做,尤其是按钮的高光和倒影部分。

  完成效果

  

 

  一,创建一120 * 50的文档,背景填充色彩:#838383,选取圆角矩形工具,半径设定为10像素。之后拉曳出一大小恰当的圆角矩形,地方偏上,由于最终把加上投影。圆角矩形的色彩为:#111111。

  

 

  二,双击外形图层或通过右键菜单进入图层样式选项,参数设定见下图。

  

 

  

 

  

 

  

 

  

 

  大概完成图。

  

 

  三,创建一图层,选取铅笔工具,设定铅笔大小为2像素,前景色彩设定为:#eee1cd,见下图画一条高光芒。

  

 

  双击或者右键此图层进入图层样式选项,参数及此时效果图如下。

  

 

  

 

  

 

  四,依然选中铅笔图层,单击图层下方的蒙蔽按钮,加上图层蒙板,之后选取渐变工具,色彩设定及渐变方式见下图,由中间朝左拖出透明渐变,此时效果图如下。

  

 

  五,选取钢笔工具,绘制下图的梯形,运行:滤镜 > 模糊 > 高斯模糊,这个时候被询问“是否栅格化图层”。选取“是”,之后键入设定值:0.6。

  

 

  六,按住Ctrl 的同时点击外形1,这个时候出现外形1的选区,按Ctrl + Shift + I 反选选区,之后按Delete 删除外形2图层的多余部分,此时效果图如下。用拷贝 + 水平翻转获得另一半的圆形,此时效果图如下。

  

 

  六,按住Ctrl 的同时点击外形1,这个时候出现外形1的选区,按Ctrl + Shift + I 反选选区,之后按Delete 删除外形2图层的多余部分,此时效果图如下。用拷贝 + 水平翻转获得另一半的圆形,此时效果图如下。

  

 

  七,在最顶部创建一图层,按Ctrl + 点击外形1获得选区,之后选取菜单:编辑 > 描边,参数设定见下图。

  

 

  取消选区,之后运用和过程4一样的手法设定蒙板之后见下图拖渐变。确认后将图层不透明度改成:55%,此时效果图如下。

  

 

  八,接下来做文字图层。选取文字工具,打上文字,字体色彩为:#e7e7e7,然后设定图层样式,参数设定见下图。

  

 

  

 

  九,此时整个按钮的主体已经做做完了,假如你想要还可添加倒影。详细手法是:选取除了文本图层以外的所有图层(由于你今后可能想要重新编辑文本的内容),拼合它们,之后拷贝一副本,垂直翻转,运用过程4中的加上蒙板的手法用渐变盖遮下端部分,最终调节透明度,处理完成效果图。

  

 

  



分享到:新浪微博新浪微博 | 腾讯微博腾讯微博 | QQ空间QQ空间 | 人人网人人网