服务时间:8:30-18:00

首页 >UI设计网

如何制作长阴影风格Safari图标

发布时间:2022-11-08 16:40 字数:689字 阅读:140

如何制作长阴影风格Safari图标?长阴影风格Safari图标完成效果如图1所示。

长阴影风格Safari图标完成效果

图1 长阴影风格Safari图标完成效果

案例分析

案例中的Safari图标,与纯扁平化图标最大的区别就是图标右下角的长阴影效果。长阴影效果的制作,一般可通过剪切蒙版实现。

一、长阴影风格图标的特点

1. 光源的位置

长阴影风格图标模拟光线从45°或135°的角度照射物体,并在光源的对面形成长长的阴影。这样的设计给图标增加了一定的厚度,让图标看起来更为立体,如图2所示。

长阴影风格图标的光源射入角度

图2 长阴影风格图标的光源射入角度

2. 抽象的投影

长阴影风格图标中的阴影,并没有严格按照光影逻辑进行设计,是抽象、夸张、简化后的视觉符号。长阴影风格图标有以下几个特点:

第一,阴影边缘轮廓分明,并没有完全模拟现实世界中阴影边缘羽化的特点,是抽象概括后的视觉设计;

第二,阴影与图形之间的长短比例并没有严格的约束限制,部分长阴影图标的投影甚至一直延伸到图标背景的边缘,是适度夸张的视觉设计;

第三,部分长阴影仅通过单一的纯色进行概括,没有色彩明度上的渐变过渡,并未遵循投影近实远虚的特点,是简化处理后的视觉设计,如图3所示。

长阴影风格图标的特点

图3 长阴影风格图标的特点

二、演示案例——制作长阴影风格Safari图标

长阴影风格Safari图标的最终效果如图1所示。实现步骤

(1)在设计图标之前,首先要对其进行分析,将设计思路和元素之间的关系整理清晰,并对其进行拆分,如图4所示。

长阴影风格Safari图标制作步骤

图4 长阴影风格Safari图标制作步骤

(2)使用钢笔工具和矢量工具,对形状图层进行相交和相减,制作长阴影效果,如图5所示。

添加长阴影

图5 添加长阴影