详情页卖点图标怎么做?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

留下评论