绘制一枚高科技按钮.docx

绘制一枚高科技按钮.docx

《绘制一枚高科技按钮.docx》由会员分享，可在线阅读，更多相关《绘制一枚高科技按钮.docx（13页珍藏版）》请在冰豆网上搜索。

绘制一枚高科技按钮

绘制一枚高科技按钮

先看完成效果。

说在之前。

这篇教程的英文原版有71步。

这个实在有点长。

而且前19步也是在AI中做的。

考虑到淋漓本人与各位的耐心。

淋漓翻译的时候将它给简化了一点。

同时全部拿到PS里来做完。

因此这篇汉化教程的介绍与图例都跟原版有所差异。

下面开始。

1.先在PS里新建一1024*768PX的画布。

用渐变工具填充一#333333到纯黑色的径向渐变。

2.创建一层。

用钢笔工具画如下外形。

假如担心左右两方不对称。

那就先画半边。

之后拷贝这半边。

水平翻转过去。

之后拼到一起。

（色彩不重要。

以后还要改。

）

3.将这个东西再拷贝两份。

之后3分拼成如下外形。

拼好然后按住CTRL键点击图层面版的这一图层的缩稍图。

获得图形选区。

运行选取>更改>平滑。

把其平滑30像素左右。

创建一层。

填充灰色。

（什么色彩都行。

以后还要改）这就获得了主按钮的基本外形。

4.将这个主按钮的图层拷贝一份。

缩小。

再平滑。

填充更深色的灰。

获得一主按钮上的小按钮。

基本上就是下图如此。

5.回到主按钮图层。

双击图层打开图层样式面版。

执行如下设定。

下图是描边所用的渐变设定。

从左到右的4个色标的色彩与地方分别是

5B5B5B0%

CCCCCC45%

2C2C2C50%

949494100%

下面是这一层的另外样式设定。

补充一下。

渐变叠加是用的渐变是从#333333到纯黑色。

到目前为止。

我们获得效果如下。

下面我们重新拿到主按钮图层的选区。

把选区收缩15像素所有。

之后羽化2个像素左右。

在主按钮图层上方创建一层。

选取直径在30左右的软头画笔。

用白色在这个选区内的3个顶端的边上。

画上一点白色。

这是给主按钮加上一点高光效果。

补充一些。

画笔的流量要小。

10%左右即可。

之后慢慢的。

反复涂抹。

其他一些是。

3个顶端的高光要有主次。

不能画的都相同。

下面是我做的效果。

6.下面我们开始搞主按钮上方的小按钮。

设定图层样式前面我更改了下这个小按钮的外形。

详细手法就是平滑与CTRL+T。

这一步我就稍过了。

好。

选定小按钮图层。

执行见下图层样式设定。

补充。

内发光运用的灰色是#333333

经过如上设定。

效果基本如下。

7.下面我们在小按钮的中心添加一电源ICON。

这个小东西你可在这儿下载到。

这是一字体文件。

安装好以后在PS中调出。

按Q键。

就获得这个ICON了。

实际上这很麻烦。

我是在那个下载页面径直将这个ICON抓图了。

之后最这个ICON层也使用一点图层样式。

比如投影啦。

渐变叠加啦。

斜面浮雕等等吧。

详细设定我就稍过了。

各位个人来吧。

下图是我所做的效果。

8.到目前为止。

这个按钮基本上定型了。

我们接下来要加上一下修饰。

我们在主按钮图层下面创建一层。

画一蓝色的圆形。

大小与地方见下图。

画好以后我们重新拿到主按钮的选区。

之后给蓝色圆的图层添加蒙板。

单击图层面版下面的“加上图层蒙板”按钮就OK。

如此我们就将蓝色圆与主按钮重叠的部分隐蔽了。

接下来我们给蓝色圆这一层设定图层样式。

效果如下。

下面我们将蓝色层拷贝一份。

把这一层的蓝色部分填充为白色。

同时把这一层混合模式设定为浅色。

重新设定图层样式如下。

补充一下。

上面两项设定运用的蓝色要比前面那个蓝色层的蓝色亮一些浅一些。

如此我们获得效果如下。

9.接着往下执行。

执行到这儿。

我发觉背景层拖的渐变好像看不到了。

于是我在背景层上面创建了一层。

画了一灰色的圆上去。

效果如下。

10.到目前为止。

这个按钮已经很有型了。

下面所做的事情就是加上一点装饰了。

比如我给按钮边上加上了一小光线。

其他给背景加上了一纹理。

这些事情各位主动做吧。

我做的完成效果如下。