今天带着大家一起来做一枚最有代表性特征的一枚 Messages 图标,希望大家可以从中得到一些做写实图标的思路。所以,咱们开始吧。
———————————————————————————————
一、基本步骤
首先,我们要对写实图标的绘制有一个大体的步骤概念,有了顺畅的流程之后,才能事半功倍。对于写实图标的绘制,我都遵循着:「先形,再色,再样式」的步骤原则。
「先形,再色,再样式」,或者直接就是先「形色」再「样式」
「形」指的就是形状、形态,我们首先用钢笔工具勾勒出外形,这是一枚图标好看与否的基础;
「色」在有了基本形的基础上,再填充上固有色(这一步重要的是定好图标的色调,不需要纠结太多的色彩细节);
「样式」最后我们再根据现有的形色基础,去调整它细微的色彩和层次变化,主要通过渐变和图层样式来实现。
有了具体的步骤和思路之后,我们把目光聚焦到这枚 Messages 图标上,具体来分析一下苹果的这枚新图标具体有哪些样式和特征。
———————————————————————————————
二、Messages 图标图形分析
特点:新版 Icon 全部框进了圆角矩形当中,视觉美感和识别度确实是大大降低,但是整体变得更写实了。写实图标实际上是 mac OS一贯的设计语言:该拟物的拟物,该扁平的扁平,让操作更符合直觉的。这也是为什么很多按钮,图标还保留阴影的原因。只是这次在减少了中间过度之后,这种反差变得更为强烈了。关于更多新版本 Icon 的分析可以看查看之前的文章:《关于 macOS Big Sur 新 UI 的一些思考》
iOS 13和 macOS Big Sur 版 Messages Icon 效果对比
我们要对图形有一个大体的分析,从光源、难点、规范三个方面简单看一下:
图形光影分析
光源:上顶光线,我们需要重点是刻画一下明暗交界线,以及反光部分的颜色细节,再加上反多层投影样式就可以让气泡形状鼓起来(如果你画过石膏球体,做起来应该很容易理解) ;
难点:气泡小尾巴的样式,需要再画两层图形来辅助完成样式;
圆角对比
规范:需要注意的是,这次 macOS 采用了和 iOS、iPad OS 一致的曲率连续矩形,为了让图标更准确,可以直接在官方的 macOS Big Sur 官方控件资源基础上进行绘制。
———————————————————————————————
关于图层样式的一点总结:(以 PS 为例)如果你对图层样式已经很熟悉了,可以直接看绘制部分
外浮效果:本体色比环境色亮本体渐变上亮下暗投影+内阴影上亮下暗
内嵌效果:本体色比环境色暗本体渐变上暗下亮投影+内阴影上亮下暗
斜面与浮雕:让图层呈现凸起或凹下的立体效果;
描边:作用于图层边缘轮廓,可叠加多个描边;
内阴影:从图层边缘轮廓向内部投影,投影方位与角度有关,可叠加多个内阴影;
内发光:从图层边缘轮廓向中心均匀扩散;光泽:作用于图层上,与轮廓有关系,呈现出光泽感,不常用,要具体看呈现的效果设置;
颜色叠加:给图层叠加一层纯色,可添加多个颜色叠加,以图层面板中排列顺序为呈现顺序;
渐变叠加:给图层叠加一层渐变色,可添加多个渐变叠加,以图层面板中排列顺序为呈现顺序;图案叠加:给图层叠加一层图案;
外发光:从图层边缘轮廓向中心均匀扩散;
投影:从图层边缘轮廓向外部投影,投影方位与角度有关,可叠加多个投影。
不同软件基本都能做到这些效果,比如sketch、figma都有相似的属性,可以作出基本一样的效果,PS做出来的效果会更精细一些。
———————————————————————————————
三、具体步骤
1.「形」
我们需要在官方规范底板的基础上绘制出消息气泡的形状,在这一步,如果你钢笔工具够熟练,可以尽量用最精简的锚点来完成图标的外轮廓形状。顺便给大家推荐个网站:贝塞尔游戏(https://bezier.method.ac/ 可以让你通过游戏通关的方式来练习钢笔工具的使用)。我们也可以分成两个步骤来完成这个形状:圆形工具绘制椭圆+钢笔工具绘制的小尾巴,最后将两个形状通过布尔运算进行合并就可以了。
分别绘制椭圆和小尾巴,通过布尔运算合并,尽量保证少的锚点
2.「色」
填充底板的颜色(渐变色,角度90度,色值:#4cf46e-#06c838 ),气泡的颜色我们暂时保留纯白色就可以了,后续用图层样式来实现凸起效果。
3.「样式」
3-1 基础明暗:通过两层内阴影(#a3a3a3/正片叠底/透明度72%/-90/137/0/218)(#96f3a9/柔光/透明度90%/-143/35/0/73) 来作出基础的明暗反光关系,注意调整一下等高线的坡度,让整体过度更平缓。/
/
/
3-2 增强凸起:通过辅助形状的图层样式强化球体效果,绘制一个宽 612px 高 428px的椭圆形,置于气泡图形的中下部分,增加投影和本体的渐变色,并增加羽化效果(21像素)让整体过度更柔和,从而增强气泡的凸起效果。
/
/
/
3-3 增强反光质感:通过内阴影(#96f3a9/柔光/透明度 90%/35/0/73)增加底部的反光效果,增加内发光(#d1f3d7/正常/透明度 35%/0/51),让气泡的球体效果更浑圆一体。
/
/
3-4 小尾巴细节:通过钢笔绘制两个辅助图形,填充颜色(左:#ffffff/透明度100%—#ffffff/透明度 0% / 角度90度)(右:#83cc7c 100%—#afddaf-#c8d9c9 100% / 角度65度),加羽化效果(两个图形左到右分别是2.1和2.8)柔和边缘。
/
/
/
3-5 小尾巴细节:将两个形状组合并,通过蒙版放置进气泡尾巴的位置上。
/
/
/
3-6 增加投影:(#001a00/正常/透明度 50%/90度/60/0/120)(#00a22c/正片叠底/透明度 64%/90度/55/0/87)
/
/
/
3-7 增强亮部:绘制一个476px*276px的圆形,填充白色,放置在气泡图形中上部。至此,气泡图形的整体效果已经完成了。
/
/
/
3-8 最后一步:增强底板图形的厚度(这是我的个人习惯,如果想更好接近真实的图标效果的话,可以省略最后这一步)复制背景图层,填充改为0%,位置整体上移10px,增加内阴影(#ffffff/正常/透明度 99%/90度/15/0/16)
/
/
/
3-9 最终完成:顺便再跟之前的 iOS 图标做一个对比。
———————————————————————————————
四、总结
总的来说,这枚 Messages 图标的绘制难度并不大,但很有代表性。希望大家可以通过这枚图标的绘制,能体会到一些 macOS Big Sur 系统图标的设计规则,同时得到一些关于写实图标的绘制步骤的思路。后续还会再更新几期关于图标设计的思路的文章,敬请期待。(附件可以下载 Messages 源文件,方便大家查看)
———————————————————————————————
大感谢
Powered by Froala Editor