UI设计教程之雷达扫描UI图标教程(1)

来源:网络   作者:热心网友   发布时间:2017-01-19    浏览次数:223

今天给大家分享一个UI设计教程之雷达扫描UI图标教程,整个过程制作是非常需要耐心的细活。因为图标的大小相对来说要小很多,不过构造并不简单。尤其在质感和光感方法非常讲究,需要把较小面积的高光和暗调刻画出来,还是要花一定功夫的。

最终效果

1、在Photoshop中新建一个大小为1024×1024 的空白文档。添加一个纹理背景(原作者使用了一个之前教程中制作的类布纹纹理),只要贴合整体风格即可。2、使用 椭圆形选择工具 在画布正中央拖出一个大小为 500×500 左右的圆。然后填充为 黑色。命名为circle。 3、为了创建图标的边框,我们复制刚刚填充的圆,然后缩小到合适的尺寸形成一个内圆,命名为inner circle。 然后,在图层面板上,右键点击inner circle的缩略图,在弹出菜单上选择 选择像素 从而建立一个马上要用到的选区。

<点小图查看大图>

4、隐藏这个图层后,点击circle图层激活,接着执行图层 > 图层蒙版 > 隐藏选区 。这样就以蒙版的形式得到了一个圆环,也就是我们要做的图标的边框。

5、通过调整circle图层的图层样式得到金属质感的边框。样式中要运用到投影、内阴影、斜面和浮雕、颜色叠加。具体设置如下图:


 


123456共6页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/5570.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通