价值上万的活动页UI原来是这么做出来的！【杰视帮】
今天，就跟大家分享一个年货节风格的UI小教程吧！
虽然视频教程已经发布了，但是图文版的也不能缺席了，对吧？
不同于双十一双十二这样的纯大促节日，年货节在大促之外带着一种年味的风情。
如何权衡大促、品牌与过年这三方元素，对设计师来说也颇具挑战。
而体现年味最好的方式，就是在场景中加入更多具有中华古典味道的年货元素。
比如我们一位学员之前的一张年货节风格的练习作品，红色的色调搭配上福袋、红包、春联等元素，成功地将年味气息视觉化。
今天，我们就聚焦到这些充满年货节气息的元素上，给大家从0到1演示一下这种红包福袋的制作方法。
首先，我们先用套索工具大概勾出红包的形状，填充一个纯色。
下一步，我们在花瓣或站酷海洛上找一个布纹的贴图纹理。
将图层模式改为正片叠底，并用ctrl+T打开操纵变形，点击上面的透视变形按钮，匹配红包的弧度，对贴图纹理进行变形。
处理好后，运用剪切蒙版将纹理叠入福袋即可。
接下来该干什么？
塑造福袋的立体感？
对于没有做过类似素材的同学，直接上手塑造立体感可能会比较困难，所以咱们先把捆绑福袋的绳子放上去。
如果找不到合适弧度的绳子，我们可以直接找一段笔直的素材，像调整纹理幅度一样的手法，用ctrl+T，打开变形模式进行调整。
再通过蒙版删去不需要的部分，并新建图层补全缺失的细小转折结构。
为了增加细节度和逻辑感，我们可以再增加一个绳结，如果找不到可以直接用的素材，也可以通过拼接的方式完成。
不过，拼接的方式需要大家用色彩平衡工具做好整个绳子的色彩统一。
绳子的摆放完成了，先不急着进行细节处理，我们先回到福袋本体的立体感塑造上。
对福袋结构不清晰的同学，可以先找一些真实的福袋，参考它捆绑的形态和阴影的分布。
由于绳子的捆绑，在捆绑出会由于褶皱形成明显的明暗变化，我们新建图层，用套索工具随意的勾出一些形态，不用苛求完美，大致就好。
填充福袋颜色后，将图层模式改为正片叠底，同时用高斯模糊或羽化对边缘做一些模糊处理。
同样，对福袋底部也做一些阴影处理，让中间鼓起来。
第一层阴影做好了，接下来对阴影进行进一步的强化。
用套索工具，选中绳结与福袋的接触面，勾出一些由于捆绑陷入更深的区域。
将图层模式改为正片叠底，填充一个更深的颜色，并用动感模糊工具做好阴影边缘的过渡。
底部也是同样的逻辑，强化四周由于中间的鼓起形成的阴影。
如果觉得阴影依然不够明显，就按照同样的方法用正片叠底再叠加一层，同时可以在底部做一些类似的褶皱，强化真实感。
阴影处理好后，我们对福袋的受光面也要做相应的强化。
新建滤色图层，在福袋鼓起处和捆绑的阴影相对处，用画笔强化光感，增加立体感。
接下来，我们来制作福袋的顶面。
由于受到捆绑，福袋的顶面会呈现不规则的波浪形。
我们根据下方的阴影分布，阴影深的位置向内凹，高光处向外延伸，将大致的顶面形状绘制出来，填充颜色。
填充好后，还是用正片叠底，将布纹的贴图叠入顶面。
用福袋表面立体感塑造同样的逻辑，新建正片叠底图层，用套索配合高斯模糊工具绘制福袋内面阴影。
在底部的接缝处，进一步强化阴影区，延伸福袋内部的空间感。
阴影强化完，也不要忘了新建滤色图层强化高光区。
下一步，ctrl+鼠标左键选中顶部轮廓，编辑，描边2像素，制作福袋厚度。
新建图层，模式改为正片叠底，在厚度边缘的下方绘制阴影。
对于凹陷处的阴影，可以再新建一个正片叠底图层，用更深的色彩叠加一层。
下一步，大家应该也猜到了，强化高光。
新建图层，模式改为滤色，在厚度边缘的上方绘制高光。
你看，在厚度和封边的处理后，整个福袋的质感与体积感已经基本显现了。
但是不是感觉还差点意思？
我们的顶面设计完成后，要对顶面和侧面的衔接处做进一步的强化处理。
新建正片叠底图层，用画笔绘制出转折处的闭塞阴影，强化福袋的真实感。
现在，我们就可以回到绳子的细节处理了。
强化绳子的立体感，我们可以用和处理福袋一样的方式，但像绳子这样细小的元素，用套索难免工作量过于繁琐。
这里，教大家一个快速的处理方式。
对于这类本身自带光影的素材，我们新建一根曲线，将图层模式改为正片叠底，反向蒙版后，用画笔涂抹绳子本身的阴影部位，即可快速完成绳子的阴影强化。
而对受光区的强化，再建一根曲线，将图层模式改为滤色，反向蒙版后用画笔涂抹受光区即可。
对于绳子和福袋交互产生的闭塞，我们可以另外建一根曲线，图层模式改为正片叠底后从中间下压，增加对比度，反向蒙版后，在绳子与福袋接缝处适当增加阴影。
之后，用色彩平衡工具，根据画面的调性对绳子进行一个整体的偏色即可。
最后，加上我们的logo，一个电商福袋的制作就完成了？
不过，这只能算完成了80%。
目前为止，我们只是对一个福袋的基本体积感完成了塑造，但当把福袋放入场景时，福袋会受到场景中的光照进一步强化光感。
比如说，如果我们假定场景中是左侧来光。
那我们就要根据光照，对福袋右侧压暗，并对左侧的受光进行提亮。
新建图层，图层模式改为滤色，根据球体受光的明暗规律，以弧形的方式绘制右下方进行压暗。
另外，再新建一个滤色图层，强化左侧的受光区域。
另外，不要忘了边缘受光形成的轮廓光以及阴影部受地面反射形成的反光。
如果觉得色彩不够喜庆，也可以借助色彩平衡和色相饱和度工具调整色彩的参数。
至此，一个福袋的制作就完成了~
不过，都2022年了，没点儿特效怎么价值上万？
我们可以在素材网上，找一些类似的光晕素材。
将图层模式改为滤色，仅保留光晕效果。
调整大小后，覆盖到福袋的转角或高光区，强化福袋的视觉质感。
至此，一张价值上万的年货节页面元素才算彻底完成。
很多同学都在问，如何能让自己的设计更值钱？
当你在你的设计中，将一个几乎不起眼的装饰元素都做到这种精致度时，你的设计自然就值钱了。
同时，今天的文章，除了实打实的技法教学，相信大家也发现了更深的内核。
在福袋的案例制作中，侧面顶面甚至绳结的体积塑造，其实都是一样的逻辑，区分明暗面，强化阴影，强化暗部，制作闭塞，制造高光点...
其实绝大多数物体体积感的塑造都是共通的，只要你掌握了这个思维，完全可以做到一通百通。
我们不希望教大家固定的风格，固定的技法，甚至让大家背下每种风格对应的色彩高光参数，这样的教学是没有意义的。
我们可以分享出福袋制作过程中调色和调明暗的每一项参数，但依靠数值做设计，即使今天学会了设计这款福袋，隔天如果要设计一款红包，是不是又得重学了？
这并不是我们推崇的教学模式。
给大家分享多年总结下来的方法论，以案例的方式引导学员，掌握底层逻辑的方法论，学会举一反三，能更灵活地实战中运用这一套技法。
说直白一点，或许，从年货节元素的制作教程中，你能提炼出运用到今年双十一项目里的方法论。
这才是我们一贯坚持的教学方式。
