锤子科技方迟的这个写实图标是怎么实现的？

有关回应 · 2021-5-30 00:13:24

刚刚用 Photoshop 画的，要实现这个效果需要画三个部分：外面的气泡框，水和锤子科技的 Logo 。

气泡框的绘制

1.首先建立一个 800*600 的画布，先用渐变工具在中心靠上的位置拉一个径向渐变（注意颜色是偏蓝的灰色），然后复制图层，在新的图层上使用杂色滤镜（具体参数可以自己尝试出来）制作出纹理，接着再加一个图层，由上至下拉一个线性渐变，颜色是纯白到纯黑，调节一下各个图层的透明度到理想的效果。另外，建议在杂色的图层上加一个蒙板，把中间位置的杂色遮住，看起来会更精致。

2. 用钢笔工具画出外框和底面这两个轮廓。

3. 把外框放置在底的图层上方，给外框添加描边和斜面浮雕的混合选项，给底面添加内阴影，各种参数可以自己尝试得出。

4. 因为现实中的阴影都是不均匀渐变的，所以需要多层阴影重叠，将底面原地复制两个图层，将另外两个图层的填充设置为 0%，然后依次给这三个图层设置投影：底层的阴影为黑色，较长且比较淡，中间的阴影也是黑色，比图标稍微低一点，顶层的阴影为红色，离图标最近，颜色非常淡。

水的绘制

1. 用钢笔工具画出水的轮廓。

2. 找一张水的纹理图片，比如这张：

3. 将纹理图片放在刚刚画好的水的轮廓上方，调整色相至红色然后创建剪贴蒙板。

4. 将水放在画好的气泡框上，将水的轮廓图层复制一份，放在上方，在混合选项中选择渐变叠加，混合模式为线性光，颜色由黑到白，透明度调低。接着再将轮廓图层复制一次放在上面，将填充调为 0%，然后增加内阴影的混合选项，调到水与气泡框交界的地方有一条很窄但是较重的阴影。

5. 将水的轮廓复制两份，将其中一份向下移动一点，然后用它得到选区再剪掉另一份中的这一部分，得到水面很窄的那一条轮廓。

给轮廓添加由上到下的线性渐变叠加，另外在轮廓下方用相同的方法制作出一道高光，用蒙版遮住靠右的部分。

有些图层做过些调整，为了方便做动画效果啦~所以看起来和原图有那么点区别吧~
下图线稿：

做完了放入AE实现了让水波动起来的效果，当然手动调整似乎有一点不自然，懒得调整啦~

（也许有点卡。。。特么并不知道社区能不能gif，如果不行就转到个人公众号咯：
锤子论坛icon练习，并用AE实现动效演示——poupo）
谈谈自己的看法吧~我觉得拟物化图标吧，也就是花很多图层去做它的质感，阴影吧，比起质感，这个icon不算复杂吧~但是当然很精美咯，比较用于手机图标icon都会做很多细节处理~
---------------------------华丽丽分割线------------------------
想起前几天画的一个鸡蛋。。细节比这个复杂多啦~当然没细调整的~：

它的线条咯！！

阿勒！这是我自己的画法吧~~反正每个设计师都有自己的习惯咯~有人喜欢贴图，也有像我这样闲着蛋疼质感要自己用形状工具去勾画。。。
总之，画出来就OK吧~

--------------------------------华丽丽分割线------------------------------
个人微信公众号：poupo是名设计师
这公众号也就没事几乎每天会发点小图，晚安~

有关回应 · 2021-5-30 00:13:25

我只是来交个作业而已（逃 ~

锤子科技方迟的这个写实图标是怎么实现的？

2 个回复

浏览过的版块