小张啊 你要的详情页卖点图标 晋级篇 2024-05-10 18:36:39 (点击图片链接看第一篇)2详情页卖点图标怎么做?上一期详情页卖点图标教程讲了一些ps的图层基础样式应用,这次还是讲下详情页的卖点图标,上次有同学反应图标形式比较单一,所以,在上次的基础上,我们来点不一样的详情页卖点图标案例,先看看本次案例。这次的教程根据目前比较流行图标表现形式我把它归纳为以下四种形式:一、拟物法;二、风格法;三、质感法;四、立体法这四种方法形式。一、拟物法所谓拟物法就是根据产品局部特征或模拟物体外形轮廓来进行图标化,比如:物体轮廓、局部按钮、质感特征等等。二、风格法风格法就是根据品牌调性、当下流行的风格来创作的图标形式,比如极简、国潮风等。三、质感法质感法顾名思义就是模拟物体的一些特殊质感来进行的图标设计,比如金属质感、玻璃质感、水滴质感等等。四、立体法通过c4d、ps、ai3d或者其他软件或者图层样式来塑造出富有立体感的图标。实际上,图标设计风格形式不仅仅本文所提到的这几种形式,但是万变不离其宗,都是以「线性、面性、线面结合」 为主线,结合 「拟物、风格、质感、3d」等表达方式多维度交叉应用而进行设计。/01:拟物法本次案例我们来给我的耳机设计一个详情页卖点图标,拿到产品图片,仔细观察,我决定用耳机①这个部分作为图标的主要外观形象,在整体背景上,我模拟②这个皮质肌理作为详情页整体图标背景。这样设计的好处是,让图标跟产品的关联性更强,整体更协调。看完图标的设计思路,我们来看看本次案例图标成品效果。教程步骤拆分图解介绍首先在做之前,我们对其元素进行拆分,可以主要分成几大块:基底层、底层、镭射层、螺纹层、炫光层,如图(拆分图解)所示。Step 01 背景纹理制作首先,新建一个750x1300~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/02:风格法说完我的耳机,得来秀下我的60块钱的吹风机,我想好好表达这款吹风机的气质,好让它吹乱的我为数不多的秀发,为了配合它的气质,思来想去,咦,最近国潮风格不是深受大众喜欢吗,所以我决定为它配上国潮风格,来做个玉石风格的图标,我们来看下最终效果。教程步骤拆分图解介绍首先在做之前,我们对其元素进行拆分,可以主要分成几大块:金属边框、玉石层、玉石高光层、边缘高光层、icon圆盘层、圆盘透明罩、投影外发光层,如图(拆分图解)所示。Step 01 金属边框制作1、基础图形制作:创建一个140x210的矩形,描边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 加上文案最后加上文案,复制几个,换上不同的小图标,这样一个详情页图标就做好了。/03:质感法嗯,吹完头发,有点饿了,可以坐下来吃个锅,整点儿了。所以,这次的图标整体外形就是根据产品的外形,来做个目前流行的磨砂质感图标,颜色上运用蓝色与橙色这对对比色冤家。好了,不瞎逼逼了,还是看下最终效果吧。教程步骤拆分图解介绍首先在做之前,我们对其元素进行拆分,可以主要分成几大块:底色清晰球、磨砂层、羽化层、边缘高光层、icon层、如图(拆分图解)所示。Step 01底色球制作创建一个180x180的圆形,命名“底色球”,为圆形添加“渐变叠加”图层样式,渐变样式“线性”,如图Step 02 磨砂层(画重点,要考)创建240x140的圆角矩形,圆角半径30px,命名“磨砂层”,为了使卡片有半透明的效果,“磨砂层”填充改为10%。利用“内阴影”图层样式为它增加高光、阴影、反光,来模拟制作磨砂材质。可以多尝试不同的参数和混合模式带来的不同效果)①为磨砂层添加纹理杂色,图层样式的“内阴影”降低“透明度”,增加“距离”和“大小”的参数,为其再添加一层白色半透明的颜色,再添加杂色。②为磨砂层添加厚度和高光,模拟卡片本身厚度和高光。③为磨砂层添加厚度和高光,模拟卡片受地下圆形反光,所以颜色上为橙色④卡片投影为了使“磨砂层”更有质感与背景更好的融合,我们把“磨砂层”图层混合模式改为“正片叠低”。是不是很简单!大家做的时候可以多尝试不同的参数和混合模式带来的不同效果。不用死记参数。Step 03 羽化层复制“底色球”图层,命名“羽化层”,转换成智能对象,然后执行高斯模糊,模糊数值根据实际效果设定。咦,是不是突然发现模糊效果看不出来,怎么肥事?这是因为磨砂层我们的填充透明度10%,几乎是半透明的,所以羽化层和底色球图层重合了,所以,这个时候我们就要把底色球图层和磨砂层交叉的地方用蒙版遮掉。Step 04 边缘高光层到这一步,磨砂玻璃的效果基本出来了,但是自信观察,发现磨砂层和底层交接处的模糊在一起了,没有了玻璃的厚度和边缘高光,所以,我们还要为这部分添加一个边缘高光层。复制“羽化层”图层,命名“边缘高光”,填充改为0%,然后删除添加纹理杂色的“内阴影”图层样式。其他保持不变,结果如图。Step 05 添加文字图标这一次的图标,我决定做个像素风的图标,让其看起来满满的科技感,然后为每个图标加上相应的文案,做个背景,这样一个详情页卖点信息的内容就做好了!/04:立体法这次的案例呢,准备做点立体点的图标,会c4d的可以用c4d直接来做,不会的,也不要紧,方法不唯一,手是唯一,除了c4d,ai软件的3d工具,ps的3d工具都是可以完成的,这次呢,我就用ps的3d工具来做几个图标。做3d图标呢,建议先构思好你的图形,不建议太复杂,尽量简单点好!嗯,我就弄了个简单的,看栗子。教程步骤拆分图解介绍首先在做之前,我们对其元素进行拆分,可以主要分成几大块:圆环﹙ps3d工具)、按钮﹙ps3d工具)、高光、阴影,icon、如图(拆分图解)所示。在开始之前,我们先了解下ps 3d的基本界面,本案例只是运用“从所选图层创建3d模型”的做个立体按钮图标,更多的3d功能等待大家探索。创建物体有2种途径,一种预设形状(上面:从预设创建网格),一种平面转立体(自己绘制图形创建,本案例)。Step 01 按钮制作1、案例采用平面转立体,新建图层,命名“按钮”,新建一个圆形,填充#f1d02f,然后:3d-从所选图层创建3d模型。2、选择属性面板,可以在形状预设里面选择适合自己的形状,通过顶视图观察,凸出深度来调节模型厚度,无限光图标控制光源方向。如图3、调整光源至适合位置,无限光的参数:预设:模拟各种环境下的光,类型:点光、无限光、聚光灯。阴影:物体照射后投影的柔和度,适当设置光影更真实。等高线这个跟图层样式的等高线一样,不同的等高线产生不同的立体效果,大家可以自行测试。4、各项参数调整的差不后,回到图层,给按钮图层转换为智能对象,用曲线调整按钮颜色,用前面1、2步的方式给圆环立体化。高光不明显的情况下,我们单独再加上高光。Step 02 阴影制作1、创建跟圆环大小的圆形,填充颜色#131b2f,执行滤镜-模糊-动态模糊。然后再高斯模糊0.2px。蒙板遮掉不想要的部分即可。2、做阴影的做2层,1层是按钮投影在圆环上的,1层是整个图标投影在地面的Step 03 加icon和文案最后为图标上icon和文案,一个详情页图标就好了。写在最后,本案例只是使用了3d功能中从图层创建3d模型,所写的东西也比较片面,此案例只是提供一个制作图标的新思路,不会三维软件,也可以用这个快速创建比较立体的图标。让自己的图标与众不同。大家有空的时候可以多做尝试。- END - 赞 (0) 相关推荐 优漫动游教育分享一个UI图标设计教程范例 这次我们选择UC标题图标作为原型重新设计. UC头图标被选为原型,因为UC头菜单的五个图标相对比较有代表性,即圆形图标的垂直长图标和反向图标.因为只有一个方块图标丢失,所以我们将主图标改成了方 ... 详情页卖点图标怎么做?(基础篇) 但是,往往在实际的详情页设计中.很多人对产品卖点图标设计进行了忽视,草草了事,-个好的产品卖点图标对于整个产品详情页会增色不少. 图标类型千变万化,但是万变不离其宗,都是以「线性.面性.线面结合」为主 ... PS教程:逼真的玉石 图层样式功能比想象的强大,学习一下. 效果图: 教程开始 1.新建纯白色画布 尺寸适合即可 2.创建纯色的图层 3.填充颜色- 认为的玉石颜色 4.新建一个圆角矩形 5.圆角矩形的颜色 6,ctrl+ ... 小张啊 详情页卖点图标还不会做 看看这篇~ 随着电商的发展,详情页的设计在营销体系扮演着越来越重要的角色,在详情页设计中,除了详情页首屏重要性外,产品卖点的重要性也毋庸置疑,能让消费者快速了解产品并关注产品. 但是,往往在实际的详情页设计中.很 ... 小鹅草私密茶详情页 小鹅草私密茶详情页 产品详情页卖点文案3个黄金法则 这是周恩勇丨第07篇文章 爱学习.爱思考,持续原创 我看了近100张产品详情页,总结了卖点描述的3个黄金法则. 当然,方法有很多,我把最重要以及最实用的方法提取出来分享给你,在之前的文章中我也分享 ... 【淘宝美工教程】15个小技巧,教你如何设计好详情页设计细节! 作者:FFF丨三 前言:这是一篇扫盲式的手机详情页的设计细节文章,主要写给0基础的小白设计师的,大佬们笑一笑就好了,当然有错误的地方也恳求指正,不仅能让我学习到知识,还能避免把人带弯. 目的:做详情之 ... 《凌亲王的小宠妃》-详情页 她是21世纪隐族的小公主,天赋异禀,身怀独门奇技,在一次任务时莫名丧命: 一朝魂穿,成为了白府千金,和凌亲王莫云卿成婚后,一直过着幸福的生活. 但-- 这个男人每年都会出远门一次,回来的时候,身体就会 ... 南阳市第二完全学校初中部小升初数学试卷真题 一本小说,小张3天读27页,33天读完。根据条件,求33天可以读多少页的比例是( )。A.B.C. 南阳市第二完全学校初中部小升初数学试卷真题 一本小说,小张3天读27页,33天读完.根据条件,求33天可以读多少页的比例是( ).A.B.C. 一般(0.65) 微信小程序实例:详情页数据动态实现的方法介绍 时间:2020-09-15 18:30:07 作者:重庆seo小潘 来源: 本篇文章给大家带来的内容是关于微信小程序实例:detail详情页数据动态展示的方法介绍 ,有一定的参考价值,有需要的朋友可以 ... 微信小程序之分类详情页 上期我们写了静态分类的普通界面了,现在我们需要写跳转进入书籍详细信息页的静态页面了. 如果你想设置顶部导航标题栏的话,可以在json里设置 这样点进去的话就导航栏就会显示出书本详情的标题了. 好了,言 ...