教你制作拟物风格图标教程

笑面桃花 · 发表于 2016-4-24 21:42:37

您需要登录才可以下载或查看，没有账号？注册

x

今天跟大家一起来练习一下怎么设计一枚拟物风格的UI图标，整个教程难度是麦克风中的发光镂空图案，教程十分详细，新手也能跟着一起做出来。做完交作业。这是我们的最终效果：

这个是原图：

作者：P大点S 出处：pdadians

笑面桃花 · 发表于 2016-4-24 21:42:37

下面开始我的制作过程。为了后面的工作更加轻松便捷，所以我把新建的画布尺寸设成一个比较好计算的整数"

笑面桃花 · 发表于 2016-4-24 21:42:37

原图的背景过于简单，我画蛇添足，制作一个iOS风格的背景。新建一层纯黑色填充层。

笑面桃花 · 发表于 2016-4-24 21:42:37

新建一层，填充白色。执行“滤镜-杂色-添加杂色”，参数如图"

笑面桃花 · 发表于 2016-4-24 21:42:37

“滤镜-模糊-动感模糊”

笑面桃花 · 发表于 2016-4-24 21:42:37

把这个动感模糊层的透明度调到45%。

笑面桃花 · 发表于 2016-4-24 21:42:37

复制一层，CTRL+T自由变化旋转90度，把透明度调回100%，图层混合模式改为“叠加”。

笑面桃花 · 发表于 2016-4-24 21:42:37

画布四周的“毛边”看着很不和谐，选中这两个动感模糊层，CTRL+T自由变化，放大一些，直至毛边不见为止，背景完成。

笑面桃花 · 发表于 2016-4-24 21:42:37

ctrl+r开启标尺，在标尺上右键选择百分比。按ALT+V+E快速布置水平和垂直两条处于中心位置的参考线。

笑面桃花 · 发表于 2016-4-24 21:42:37

为了图层栏的简洁以及照顾到以后临摹方便起见，我把属于背景的三个图层打包成组且隐藏。选择“编辑-首选项-参考线.网格和切片”，把间隔单位设为20个像素，子网格设为2，单纯设为10像素的话觉得密密麻麻的不舒服。

笑面桃花 · 发表于 2016-4-24 21:42:37

用“椭圆工具”画一个直径为840像素的圆形。为了让它跟白色的背景区分开来，我给它设了一个85%的灰色。

笑面桃花 · 发表于 2016-4-24 21:42:37

按ctrl+’隐藏网格。双击这个形状层，添加投影。我稍微调整了一下“等高线”，让这个投影是边缘收缩一些，再加一点点杂色。

笑面桃花 · 发表于 2016-4-24 21:42:37

再加一个人见人爱的角度渐变，用它来模拟圆形金属是最好用了"

笑面桃花 · 发表于 2016-4-24 21:42:37

最后是这个金属圆盘的倒角，斜面浮雕是不二之选"

笑面桃花 · 发表于 2016-4-24 21:42:37

我仔细观察了原图，金属圆盘上似乎有“拉丝”的效果，但不是我们大家习惯使用的杂色+径向模糊的那种。而是类似于很细很密的同心圆。按D恢复前景色和背景色。新建一层填充白色。选择滤镜素描中的半调图案。

账号		自动登录	找回密码
密码			注册

[UI设计] 教你制作拟物风格图标教程