所有分类
  • 所有分类
用 PS制作一个UI旋钮图标

用 PS制作一个UI旋钮图标

大家好,这次给大家带来一个关于UI、交互设计的图标教程。这次是一个功能旋钮的UI图标。 本次教程不涉及基础的photoshop软件操作,如有需要Photoshop基础软件操作教程的,可以关注我的头条,给我发私信,我赠送免费教程。 我们先来看看这个UI旋钮图标的最终效果吧...

大家好,这次给大家带来一个关于UI、交互设计的图标教程。这次是一个功能旋钮的UI图标。

本次教程不涉及基础的photoshop软件操作,如有需要Photoshop基础软件操作教程的,可以关注我的头条,给我发私信,我赠送免费教程。

我们先来看看这个UI旋钮图标的最终效果吧。

大家觉得怎么样?本例讲解的是功能旋钮制作,功能旋钮的制作重点在于对功能选择上的明确性,通过合理的区域功能图像的绘制及易读的指示信息,打造出本例中这样一款出色的功能旋钮。

首先,先制作背景。我们首先打开PS,新建一个文档,500*600像素,72分辨率,如下图所示。

我们将前景色设为蓝色(R:177,G:184,B:192),然后将画布填充前景色,如下图所示。

我们在工具箱中选择圆角矩形工具,在选项栏中将填充改为蓝色(R:36,G:43,B:50),描边为无,半径改为60像素,我们按住Shift键绘制一个圆角矩形,此时将生成一个“圆角矩形1”图层,如下图所示。

我们在图层面板选中圆角矩形1然后按两次Ctrl+J复制2个图层,然后将三个图层名称分别命名为高光、底座、阴影,如下图所示。

我们在图层面板选中高光图层,将颜色改为灰色(R:220,G:220,B:223),然后等比例缩小,详情见下图。

然后对高光图层执行滤镜>模糊>高斯模糊的命令,在弹出的面板中将半径改为6像素,完成之后点击确定。然后我们为高光图层添加图层蒙版。接着我们使用画笔工具,将画笔前景色改为黑色,硬度改为0%,在图像 上涂抹,进行隐藏,详情见下图。

我们将高光图层的图层混合模式改为浅色,不透明度改为80%。

我们在图层面板选中底座图层,为其添加图层样式,添加内发光的图层样式,参数见下图。

此时将内发光的图层样式生成为新图层,如下图所示。

然后我们为内发光添加蒙版。我们选择画笔工具,将硬度改为0%,前景色改为黑色,在画布中图像上涂抹,对部分进行隐藏,详情见下图。

我们在对阴影图层执行高斯模糊命令,半径设为6像素。

我们在工具箱中选择椭圆工具,在选项栏中将填充改为蓝色(R:0,G:80,B:98),描边改为深蓝色(R:0,G:17,B:20),大小改为0.5,然后在画布中绘制一个正圆,,此时将生成一个“椭圆1”图层,详情见下图。

我们将椭圆1图层复制两个,将生成“椭圆1 拷贝”及“椭圆1 拷贝2”图层。

我们为椭圆1拷贝图层添加渐变叠加的图层样式,其中参数“渐变”更改为青色(R:110,G:243,B:252)到蓝色(R:11,G:122,B:142),具体参数见下图。

我们接着椭圆1拷贝进行等比例缩小,具体效果见下图。

我们在图层面板中选中椭圆1拷贝2图层对其等比例缩小,然后添加渐变叠加的图层样式,“渐变”更改为灰色(R:42,G:50,B:55)到灰色(R:157,G:164,B:174),具体参数见下图。

我们在工具箱中选择圆角矩形工具,在选项栏中将填充改为蓝色,描边为无,半径为5像素,在图形上方绘制一个圆角矩形,此时将生成一个“圆角矩形1”图层,详情见下图中红色矩形标注。

我们为圆角矩形1添加内阴影的图层样式,具体参数见下图。

我们用椭圆工具绘制一个白色椭圆,将生成椭圆2图层,详情见下图。

我们接着对椭圆2添加外发光的图层样式,在对话框中将颜色改为蓝色(R:106,G:238,B:248),具体参数见下图。

我们在工具箱中选择椭圆工具,在选项栏中,将填充改为黑色,描边为无,在图形下方再次绘制一个椭圆,此时将生成一个“椭圆3”图层,将椭圆3图层移到椭圆1图层下方,具体效果见下图。

我们对椭圆3执行高斯模糊命令,半径更改为13像素,接着执行动感模糊命令,在弹出的面板中将角度该为90度,距离该为30像素。

我们在图形上方再次绘制一个白色矩形,此时会生成椭圆4,将椭圆4移到椭圆1下方,详情见下图。

我们对椭圆4执行高斯模糊命令,半径改为6像素,接着在图层面板中将不透明度70%,并为其添加蒙版,然后用画笔工具涂抹进行隐藏,详情见下图。

我们在工具箱中选择椭圆工具,在选项栏中将填充改为无,描边改为蓝色,大小改为3,图形上绘制一个正圆,此时将生成一个“椭圆5”图层,详情见下图。

然后我们为椭圆5添加蒙版,用渐变工具渐变设为黑白,从下向上拖动将部分图像隐藏,并为其添加内阴影的图层样式,具体参数见下图。

这时我们来看一看整体效果。

现在我们要来绘制指示图形。

我们用椭圆工具绘制一个蓝色(R:44,G:128,B:152)椭圆,此时将生成一个“椭圆 6”图层,详情见下图。

我们在图层面板选中椭圆6,复制一个,再向右上角稍微移动,如下图所示。

我们将椭圆6拷贝将其载入选区,执行菜单栏中的“选择”|“修改”|“扩展”命令,在弹出的对话框中将“扩展量”更改为1像素,完成之后单击“确定”按钮,然后在单击“椭圆 5”图层蒙版缩览图,在画布中将选区填充为黑色将部分图像隐藏,完成之后按Ctrl+D组合键将选区取消。

然后我们使用上述方法复制数份并移动隐藏,具体效果见下图。

我们将椭圆2的图层样式粘贴到中间一个小椭圆上,然后修改参数,参数见下图。

我们用横排文字工具,在每个小椭圆上添加文字,具体效果见下图。

我们在图层面板选中其中一个文字,为其添加投影的图层样式,参数见下图

然后我们将文字的图层样式粘贴到其余文字上。

我们选中除“背景”和“阴影”之外的所有图层,按Ctrl+G组合键将其编组,此时将生成一个“组1”,将“组1”复制一份。我们在“图层”面板中,选中“组1 拷贝”组,将其图层混合模式设置为“叠加”,“不透明度”更改为20%,这样就完成了效果制作。

我们来看看最终的效果。

这样我们的一个UI图标就绘制完成了。

大家觉得怎么样呢?有问题可以在评论区提出来。大家也可以关注我,我会持续更新更多的教程的。大家也可以帮忙转发一下,十分感谢

本次教程不涉及基础的photoshop软件操作,如有需要Photoshop基础软件操作教程的,可以关注我的头条,给我发私信,我赠送免费教程。

本页地址:http://www.uiya.cn/26795.html; 所有素材均来自于互联网,经网友投稿后发布,仅供学习请勿商用。如有侵权,请联系 3147141550@qq.com 或 提交工单

分享海报

评论0

站点公告

 

新注册用户福利,免费领取7~90天VIP会员

点击领取

没有账号? 注册  忘记密码?