UI设计教程-超酷科技感电源按钮(2)

UI / UI设计教程 / UI图标教程 /      

uimaker
UI设计师 / 江苏 南京

来源:uimaker.com   作者:Uimaker.com整理

关键词

15.我们先只创建这样一个新的对象,它只是一半。

AI精品教程!手把手教你绘制一个高科技电源按钮

16.使用镜像工具,(在旋转工具里面),按住Shift+Alt,复制,翻转。得到一个对称图像。

AI精品教程!手把手教你绘制一个高科技电源按钮

17.现在我们使用路径选择工具,合并两个图像,你也可以用 删除锚点工具,将两个图像结合。

AI精品教程!手把手教你绘制一个高科技电源按钮

18.与之前复制第一个对象的步骤相同,第一个旋转120°,第二个Ctrl+D。如果遗忘怎么做,回到6-7步骤看一下。

AI精品教程!手把手教你绘制一个高科技电源按钮

19.最后我们建立一个圆形,这将用作指示灯,将点亮在其悬停状态的按钮。

我们将完成在Photoshop中添加蒙版进行下一步的处理。

AI精品教程!手把手教你绘制一个高科技电源按钮

20.现在选择所有的矢量图形,Ctrl+C,将它们复制到剪贴板里。

AI精品教程!手把手教你绘制一个高科技电源按钮

21.打开Photoshop。建立一个1024x768px大小的图层。

AI精品教程!手把手教你绘制一个高科技电源按钮

22.将背景设置为黑色,然后选择背景图层,在图层混合模式里,渐变叠加。

AI精品教程!手把手教你绘制一个高科技电源按钮

23.渐变叠加参数设置如下:#333333、#000000,径向渐变,范围在130-150%之间。

你可以拖动渐变的中心,直到最后效果是你想要的。

AI精品教程!手把手教你绘制一个高科技电源按钮

24.Ctrl+V或者编辑>粘贴 将图形粘贴到ps里。

AI精品教程!手把手教你绘制一个高科技电源按钮

25.我们现在只有一个形状图层在ps里,我们必须要将它分成不同的图层。

复制四个,减去不必要的形状,留下组成的部分。

AI精品教程!手把手教你绘制一个高科技电源按钮

26.效果和图层排序如下图所示 。别忘了给每个图层命名。之后我们将在Photoshop里添加图层样式。

AI精品教程!手把手教你绘制一个高科技电源按钮

27.主按键(也就是1-12步骤里做出来的图形)。打开图层样式,在“混合选项:默认”,

为了看到我们的图层效果,降低透明度为零。

首先,渐变叠加,颜色#333333(暗灰色)和#000000(黑色。

径向渐变,范围120%。

AI精品教程!手把手教你绘制一个高科技电源按钮

28.内阴影,取消全局光。正片叠底,-90°。参数设置如下图所示:

AI精品教程!手把手教你绘制一个高科技电源按钮

29.我们已结束按钮编辑过程的第一部分,现在,我们要做它的正面部分,这一个不透明的表面,我们将在之后添加的光泽度和3D凸出效果。

 收藏