新绝技：“卖点图标”设计教程

10月 30, 2021 发表于: 视觉设计. 评论

Sponsor

上一期详情页卖点图标教程讲了一些ps的图层基础样式应用，这次还是讲下详情页的卖点图标，上次有同学反应图标形式比较单一，所以，在上次的基础上，我们来点不一样的详情页卖点图标案例，先看看本次案例。

这次的教程根据目前比较流行图标表现形式我把它归纳为以下四种形式：一、拟物法；二、风格法；三、质感法；四、立体法这四种方法形式。

一、拟物法

所谓拟物法就是根据产品局部特征或模拟物体外形轮廓来进行图标化，比如：物体轮廓、局部按钮、质感特征等等。

二、风格法

风格法就是根据品牌调性、当下流行的风格来创作的图标形式，比如极简、国潮风等。

三、质感法

质感法顾名思义就是模拟物体的一些特殊质感来进行的图标设计，比如金属质感、玻璃质感、水滴质感等等。

四、立体法

通过c4d、ps、ai3d或者其他软件或者图层样式来塑造出富有立体感的图标。

实际上，图标设计风格形式不仅仅本文所提到的这几种形式，但是万变不离其宗，都是以「线性、面性、线面结合」为主线，结合「拟物、风格、质感、3d」等表达方式多维度交叉应用而进行设计。

一、拟物法

本次案例我们来给我的耳机设计一个详情页卖点图标，拿到产品图片，仔细观察，我决定用耳机①这个部分作为图标的主要外观形象，在整体背景上，我模拟②这个皮质肌理作为详情页整体图标背景。这样设计的好处是，让图标跟产品的关联性更强，整体更协调。

看完图标的设计思路，我们来看看本次案例图标成品效果。

教程步骤

拆分图解介绍

首先在做之前，我们对其元素进行拆分，可以主要分成几大块：基底层、底层、镭射层、螺纹层、炫光层，如图（拆分图解）所示。

Step 01 背景纹理制作

首先，新建一个750×1300~1500px的文档,用矩形工具拉一个从深到浅的渐变层，命名“背景”，然后再叠加一个皮质肌理，模式为叠加，并适当降低透明度。

Step 02 基底层

新建260x260px的圆角矩形,颜色填充黑色，添加图层样式“斜面与浮雕”，选择内斜面，具体见图。然后添加内阴影图层样式，添加基底层暗部边缘亮度，见②，这样基底层就完成了。

Step 03 底层

复制基底层，命名“底层”，等比缩小，比基底层稍小即可。添加图层样式“斜面与浮雕”，选择内斜面，具体见图。然后添加一个渐变叠加，来让底层表面有个深浅的颜色变化，混合模式“正片叠加”，这样底层也完成了，是不是很简单。

Step 04 镭射层

复制底层，等比缩小道比底层稍小即可，命名“镭射层”。添加图层样式“斜面与浮雕”，样式选择“枕装浮雕”，并添加1个像素的描边，让镭射层与底层的接缝更明显，具体参数见图。下面我们来做镭射渐变的效果了。添加一个“渐变叠加”样式，渐变样式选择角度，设置渐变的时候保持2端的颜色保持一致。

Step 05 螺纹层

圆纹我们在ai用混合工具来，画大小2个同心圆。描边2px。选中大小2个圆，然后:对象-混合-建立，双击工具栏的混合工具，设置合适混合步数，然后拷贝到ps，放到镭射层上方，保持和镭射层大小一致。这时发现螺纹效果太生硬，把镭射和螺纹ctrl+g群组，然后用双曲线工具对镭射螺纹组调节，让对比更明显。到这一步，图标基本图形就好了！是不是非常简单。

Step 06 炫光层

图标做到这一步，其实也差不多了，但总觉得还缺点啥，为了让它有点科技和未来感，所以我在此基础上加了一点变化，一点吸睛的东西。这样更易让视线集中……

①创建一个圆形，底色：#0072ff，命名“炫光底层”，填充为10，然后为圆形添加2个”内阴影“样式一个高光，一个暗部和一个“渐变叠加”样式，让其有一个从受光面到暗部的变化。具体参数见图

②复制“炫光底层”，底色：#0072ff，填充为10，利用图层样式“内阴影”为它增加四周深中间浅的光感。透明70，大小60，数值按实际效果调整，不必参照一摸一样的参数。然后增加一个“内发光”和“外发光”的样式，“内发光”和“外发光”的2个颜色要有所区分变化，让他看起来像个发光的玻璃。然后添加一个阴影，使其更立体。

Step 07 加上小图标

画个小图标，添加一个阴影，duang、duang、duang加上文字，排版下，这个详情页卖点就做好了。实在不想画图标的话，推荐2个网站，可以取下载现有的。

1、阿里巴巴图标网，https://www.iconfont.cn；

2、https://iconpark.oceanengine.com/official

2、风格法

说完我的耳机，得来秀下我的60块钱的吹风机，我想好好表达这款吹风机的气质，好让它吹乱的我为数不多的秀发，为了配合它的气质，思来想去，咦，最近国潮风格不是深受大众喜欢吗，所以我决定为它配上国潮风格，来做个玉石风格的图标，我们来看下最终效果。

教程步骤

拆分图解介绍

首先在做之前，我们对其元素进行拆分，可以主要分成几大块：金属边框、玉石层、玉石高光层、边缘高光层、icon圆盘层、圆盘透明罩、投影外发光层，如图（拆分图解）所示。

Step 01 金属边框制作

1、基础图形制作：创建一个140×210的矩形，描边6px,圆角70px，复制圆角矩形，翻转90度，ctrl+e，合并2个图层，命名“金属边框”，合并形状组件，如①

2、金属边框制作：金属边框图层创建3个图层样式，“斜面与浮雕”“颜色叠加”“投影”。“斜面与浮雕”创建边框立体厚度，这里要注意多尝试“角度和光泽等高线”，会有意外的效果哦！记得多尝试！“颜色叠加”控制边框金属颜色，“投影”给边框增加投影，就这么简单，一个金属边框就做好了。

Step 02 玉石制作

玉石层是有玉石边框+玉石层2个图层组合而成，复制金属边框图层，等比缩小到比金属边框稍小即可，命名“玉石边框”，为了让其有透明感，设置图层填充为0，再复制“玉石边框”图层，命名“玉石”，图层填充为0，见①、②

①玉石边框：给“玉石边框”图层添加“斜面与浮雕样式”样式内斜面，为了让边缘有光泽质感，注意调整光泽等高线。

②玉石：给“玉石”图层添加3层“内阴影”和“外发光”样式，通过内阴影和外发光来塑造玉石的通透感。﹙我们在临摹的时候可以多尝试不同的参数和混合模式带来的不同效果﹚

Step 03 玉石高光

玉石高光是有边缘+内部高光2个图层组合而成，复制step2步的玉石图层，命名“边缘高光”，见下图①、②

①边缘高光：设置边缘高光图层描边厚度，厚度=“玉石边框”，本文描边粗细10px，描边对齐方式：对内。描边颜色：白色，适当降低一点点透明度，然后给图层添加图层蒙板，从下到上拉一个黑色到透明的渐变。局部的地方比如转角的地方，也可以橡皮擦掉。具体效果见上图①

②内部高光：新建空白图层，命名“边缘高光”，用柔性画笔，颜色：#96f896，，在高光位置点击﹙如图），并适当降低透明度，提取“边缘高光图层”选区，给“边缘高光”图层做蒙板，内部高光也完成。

最后把边缘高光和内部高光群组，放到“玉石”图层上，适当降低透明度，图层模式“颜色减淡”。

Step 04 玉石边缘高光

复制玉石图层路径，描边1px，颜色白色，高斯模糊0.2px,适当降低透明度。

Step 05 icon圆盘

创建圆形，命名“icon圆盘”,图层填充0，添加图层样式，如图，添加2层阴影的目的是，1个是圆盘阴影，1个是圆盘反光。

Step 06 圆盘透明罩

透明罩的制作见分解图

Step 07 投影外发光

为玉石添加投影和外发光

Step 08 添加玉絮和图标

为了更真实模拟玉石里面的玉絮，找一张大理石图片去色，曲线加深对比，然后叠加到玉石上，透明度降低到15。图标直接拷贝粘贴金属边框的图层样式即可。

Step 09 加上文案

最后加上文案，复制几个，换上不同的小图标，这样一个详情页图标就做好了。

3、质感法

嗯，吹完头发，有点饿了，可以坐下来吃个锅，整点儿了。所以，这次的图标整体外形就是根据产品的外形，来做个目前流行的磨砂质感图标，颜色上运用蓝色与橙色这对对比色冤家。好了，不瞎逼逼了，还是看下最终效果吧。

教程步骤

拆分图解介绍

首先在做之前，我们对其元素进行拆分，可以主要分成几大块：底色清晰球、磨砂层、羽化层、边缘高光层、icon层、如图（拆分图解）所示。

Step 01底色球制作

创建一个180×180的圆形，命名“底色球”，为圆形添加“渐变叠加”图层样式，渐变样式“线性”，如图

Step 02 磨砂层（画重点，要考）

创建240×140的圆角矩形，圆角半径30px,命名“磨砂层”，为了使卡片有半透明的效果，“磨砂层”填充改为10%。利用“内阴影”图层样式为它增加高光、阴影、反光，来模拟制作磨砂材质。可以多尝试不同的参数和混合模式带来的不同效果）

①为磨砂层添加纹理杂色，图层样式的“内阴影”降低“透明度”，增加“距离”和“大小”的参数，为其再添加一层白色半透明的颜色，再添加杂色。

②为磨砂层添加厚度和高光，模拟卡片本身厚度和高光。

③为磨砂层添加厚度和高光，模拟卡片受地下圆形反光，所以颜色上为橙色

④卡片投影

为了使“磨砂层”更有质感与背景更好的融合，我们把“磨砂层”图层混合模式改为“正片叠低”。是不是很简单！大家做的时候可以多尝试不同的参数和混合模式带来的不同效果。不用死记参数。

Step 03 羽化层

复制“底色球”图层，命名“羽化层”，转换成智能对象，然后执行高斯模糊，模糊数值根据实际效果设定。咦，是不是突然发现模糊效果看不出来，怎么肥事？这是因为磨砂层我们的填充透明度10%，几乎是半透明的，所以羽化层和底色球图层重合了，所以，这个时候我们就要把底色球图层和磨砂层交叉的地方用蒙版遮掉。

Step 04 边缘高光层

到这一步，磨砂玻璃的效果基本出来了，但是自信观察，发现磨砂层和底层交接处的模糊在一起了，没有了玻璃的厚度和边缘高光，所以，我们还要为这部分添加一个边缘高光层。

复制“羽化层”图层，命名“边缘高光”，填充改为0%，然后删除添加纹理杂色的“内阴影”图层样式。其他保持不变，结果如图。

Step 05 添加文字图标

这一次的图标，我决定做个像素风的图标，让其看起来满满的科技感，然后为每个图标加上相应的文案，做个背景，这样一个详情页卖点信息的内容就做好了！

4、立体法

这次的案例呢，准备做点立体点的图标，会c4d的可以用c4d直接来做，不会的，也不要紧，方法不唯一，手是唯一，除了c4d，ai软件的3d工具，ps的3d工具都是可以完成的，这次呢，我就用ps的3d工具来做几个图标。做3d图标呢，建议先构思好你的图形，不建议太复杂，尽量简单点好！嗯，我就弄了个简单的，看栗子。