按钮制作一小例

UI / UI设计教程 /      

uimaker
UI设计师 / 江苏 南京

来源:blog.19ued.com   作者:秩名

关键词

 

以下为最终效果图:

下面讲一下大致的步骤;

    1.在photoshop中新建文件,宽度200、高度200px,白色背景。

    2.我们准备一个简单的背景。我倾向于用亮灰色做渐变填充。使用大、小柔角画笔,大画笔绘制中上方的光影,小画笔用来绘制画布正中间偏上的光影,

  

     3.按快捷键U调出圆角矩形工具,圆角半径设为10px,沿着参考线绘制圆角矩形。

渐变叠加,效果如下:

   4.现在让我们为按钮增加些阴影和高光。在按钮上一层新建图层,使用矩形工具绘制矩形选区并填充深灰色。

滤镜-模糊-高斯模糊

置于所有图层的顶端,混合模式设为“叠加”,使用白色柔角画笔绘制按钮的顶部

复制图层,改变混合模式为“正常”,调整大小,位置略高于按钮的上边缘。

最终效果如下:

 收藏