30分钟绘制苹果WWDC2022图标~文字+保姆级视频教程来啦!

2022-05-23 11:39:00 浏览数 (1)

静电说:上周,苹果WWDC2022开发者大会的消息放出,虽然这个只是针对开发者的一个大会,但有时候我们会在发布会上get到很多关于设计趋势的消息,比如新的操作系统,新的风格等等,当然,还有新的软件或者硬件。

目前距离WWDC2022还有两个月的时间,而让静电眼前一亮的,就是这样一个图标,Swift大家已经众所周知了,那么这个图标也经历了不断的进化。其实它的原型就是雨燕了。今天,咱们就通过文字讲解 视频详尽操作的方式,为大家解析这个图标的绘制过程。

此图标风格锐利,也符合苹果对于Swift的定义,就是快捷,简易。

而真实的雨燕是怎样的呢?看图!

通过这些我们可以了解到这幅图所传达的含义,快速,便捷,所以在设计上要强调颜色的锐利程度,画面干净利落。

在了解了这些后,我们就开始做吧。设计过程中有几个重点 1. 通过渐变描边的方式表达颜色的变化和锐利的高光效果;2.高光和阴影凸显雨燕的立体感;3.背景与前景颜色的对比。

Step.01 绘制渐变

简单通过描边就可以实现锐利的高光和渐变效果,但是要保证渐变更自然的话,我们需要添加更多的颜色节点,特别是左上角的白色部分,我们要大胆加入更亮的颜色,这样会形成一个高光点的效果。而在暗处的渐变,则是通过其它颜色过渡到黑色的方式实现,不要吝啬节点的使用,必要的时候可以加入多个节点。

最终效果如下。

我们可以为这个圆盘添加光源效果

Step02.雨燕形状绘制

雨燕的形状绘制考验大家钢笔的用法,如何用最少的点让图形更加平滑,这是我们需要特别注意的点。雨燕设计完成后,请再复制一层并做偏移,下面一层全部填充黑色,上面一层填充渐变色如上图所示,然后将两个图层做5-8个像素的偏移,形成雨燕的厚度效果。

接下来绘制高光效果,最简单的方式就是用钢笔去勾出亮光效果。

绘制眼睛部分

Step.03 光照效果和文字

光照效果这里我们采用的是位图的素材,你可以在Photoshop中使用光照滤镜来实现此效果。

最后加上文字效果,整个图就绘制完成了。

更多的操作细节,静电为大家录制了视频教程,已经放在B站上啦

欢迎大家在朋友圈展示你的设计效果哈~

0 人点赞