最近做了一个水果转盘抽奖的H5活动页，在本次设计过程中，为了提高设计效率，我们运用ai辅助我们前期生成一些水果图标。今天给大家分享一下整个设计过程中的几个知识点，希望对大家能有帮助！
    讲干货前，先一起看看活动页的最终效果吧：

    水果转盘抽奖的H5活动页 - 图1

    接下来我们会从①水果的生成及选择→②通透质感调整→③通透质感容器绘制，三个方面来进行分享。
    1.水果的生成及选择 甲方大大给过来的要求有两点：一是马卡龙色系，二是整体颜色质感通透。基于此需求，我们要做的水果图标，整体的质感就需要往通透方面处理，所以在用mj生成的时候会往玻璃质感的方向靠。
    以苹果为例，这里生成用的关键词：
    apple,icon,3d icon,cartoon,Glass texture,luminous 3d objects,Smooth and rounded surface,Nintendo,isometric,studio light,white background,3d rendering,high resolution —niji 5
    以下就是生成的一些苹果的图片：

    水果转盘抽奖的H5活动页 - 图2


    从上图可以看出苹果的造型各式各样，有圆的有扁的。结合我们的需求，我们要选择的是符合马卡龙色系，质感通透以及造型饱满的苹果：

    水果转盘抽奖的H5活动页 - 图3


    对于造型饱满度这一点，其他水果也要符合，以香蕉为例：

    水果转盘抽奖的H5活动页 - 图4


    香蕉本身的造型是细长的，整体的负空间会比较多，
    这里就可以选择图片中是两根的香蕉，通过增加数量来实现画面的饱满度，减少负空间。

    水果转盘抽奖的H5活动页 - 图5


    关于造型带透视效果的选择，以铃铛图为例：

    水果转盘抽奖的H5活动页 - 图6


    以下两张图都是带有一些透视效果的，这里我们选择的右边图二铃铛，能看到铃铛底部的一些效果，整体的造型会更完整饱满：

    水果转盘抽奖的H5活动页 - 图7


    以上就是关于生成的图标如何通过质感通透、造型饱满度、造型带透视这几点来进行筛选。
    2.通透质感的调整 需求方需要的质感是通透的，但是有些生成的水果图标在质感方面并不符合要求，所以需要通过后期调整来达到质感通透的目标，那这个通透度要怎么拿捏呢？
    一般通过“通透”二字我们能联想到的物体就是玻璃、水珠等等，我们一起看看找的两张参考图：

    水果转盘抽奖的H5活动页 - 图8


    底部的反光很白，反光感比较强烈，而且不管是玻璃材质的圆球还是水珠，越靠近底部反光颜色都会开始逐渐明度增加，白色增多，通透感瞬间就有了，如下图效果所示：

    水果转盘抽奖的H5活动页 - 图9


    那么我们可以根据观察到的这个小知识点来处理剩下的水果，在这里我们以葡萄举例：

    水果转盘抽奖的H5活动页 - 图10


    通过关键词生成的葡萄样式多种多样，不过还是有张不错的（图三的右上角），于是将其继续生成，得到了如下图片，最终选择了左上角这个：

    水果转盘抽奖的H5活动页 - 图11


    这串葡萄还不错，光影过渡比较通透自然，而且造型饱满，但还是有几处需要优化：

    水果转盘抽奖的H5活动页 - 图12


    知道需要优化的地方，那就开整。先把叶子的部分单独抠出来重新整体上个颜色，简单铺个明暗关系，然后用画笔画上叶子纹理：

    水果转盘抽奖的H5活动页 - 图13


    图层模式改为颜色减淡，使用画笔涂抹叶子，加强明暗关系对比，然后叶子边缘加上反光以及高光点：

    水果转盘抽奖的H5活动页 - 图14


    叶子的部分调整完了，再就是葡萄底部反光加强。同样也是图层模式颜色减淡，用画笔刻画底部反光的部分，反光可以有些色相的变化，添加淡蓝色，让葡萄看上去有冷暖颜色的对比，同时也丰富颜色层次：

    水果转盘抽奖的H5活动页 - 图15


    再来看看整体调整完前后的对比吧：

    水果转盘抽奖的H5活动页 - 图16


    然后以同样的思路来调整一下生成的草莓：

    水果转盘抽奖的H5活动页 - 图17


    再次开整，叶子的部分抠出来，现在叶子的颜色黄黄的，一整个不新鲜的感觉，可以通过色相饱和度将叶子的颜色调整的偏绿：

    水果转盘抽奖的H5活动页 - 图18


    叶子底部靠近草莓的部分应该是一个暗部，这里使用绿色画笔，然后正片叠底将这个暗部效果加强：

    水果转盘抽奖的H5活动页 - 图19


    现在整体颜色还有些偏黄绿，考虑到所有图标整体效果呈现的统一性，参考前面葡萄的叶子颜色，把草莓叶子的颜色偏青调整，同时加强一下叶子顶部的反光：

    水果转盘抽奖的H5活动页 - 图20


    叶子的部分结束，开始草莓的身子部分，首先调整草莓身子的色相饱和度，让整体的红色不要那么高：

    水果转盘抽奖的H5活动页 - 图21


    然后根据我们前面观察到的小点，靠近底部反光颜色都会开始逐渐明度增加，白色增多，来调整整体草莓整体的通透效果，这里主要是画笔配合图层模式的叠加，叠加过程效果如下：

    水果转盘抽奖的H5活动页 - 图22


    整体看下调整前后的变化：

    水果转盘抽奖的H5活动页 - 图23


    剩余所有的水果调整思路都可以按以上两种处理方式，为保持水果的整体统一性，所有的反光都在底部。以下就是所有的水果在图中的效果：

    水果转盘抽奖的H5活动页 - 图24


    3.通透质感容器绘制 作为水果图标的容器，起初质感是这样子的：

    水果转盘抽奖的H5活动页 - 图25


    有一丝通透的感觉，但是整体的通透程度还是不太够，于是找了一张比较通透的玻璃瓶图标的参考图，可以观察到以下的信息：

    水果转盘抽奖的H5活动页 - 图26


    那我们就可以在目前的基础上，在里面也再加一层结构，并且之前的圆角不够圆润，同时也可以调整一下圆角的角度。 里面的结构怎么处理呢，首先圆角矩形加上内发光的效果，然后结合蒙版画出里面的结构：

    水果转盘抽奖的H5活动页 - 图27


    然后画个矩形羽化，增加底部的厚度，然后再在底部加上高光：

    水果转盘抽奖的H5活动页 - 图28


    最后上半部分加上高光，以及整体按钮添加投影：

    水果转盘抽奖的H5活动页 - 图29


    一个质感通透的容器就完成了，让我们看下前后的变化吧：

    水果转盘抽奖的H5活动页 - 图30


    最后，再一起看下页面的整体效果吧！

    水果转盘抽奖的H5活动页 - 图31

    总结

    1.选择图标造型时主要看造型的饱满度，减少图形的负空间；

    2.通过观察通透质感的物体，提取通透质感的特征，越靠近底部反光颜色会开始逐渐明度增加，白色增多，通透感开始增强，根据提取的特征来处理质感图标； 3.转化：不管是通透质感的水果图标，还是通透质感的容器，在不知道怎么处理的情况下，可以寻找相同特征的物体，然后提取你所观察到的点来运用到你想做的东西上。很多同学对待这一步都会有些困难，所以多留意，多观察，你所看到的每一个小点，都能丰富画面的精致度。
    今天的分享就到这里啦，希望大家今天也是收货满满的一天呀！

    原文链接：https://mp.weixin.qq.com/s/tTL9LZIugUeVADnz6LtZTw