在这纸醉金迷的广告时代，用户最看重什么？

毋庸置疑，视觉刺激。

毕竟大家都很忙，唯有视觉上足够酷炫有意思，才能让用户停下脚步瞅一瞅。

H5也是如此，假如画面视觉差劲，该怎么拯救它？

那么有没有独门秘方，让H5瞬间拥有视觉炸裂的画面效果，逼格提高十倍？

有！今天给大家介绍的设计神器，只需一分钟，就能将普通素材转换成酷炫的几何抽象艺术效果——

你绝对想不到，小编制作上面这四张几何抽象风格的电影海报，前前后后仅花了10分钟，效果不俗又高效！

用它们做平面设计，或H5，想想看是多惊艳！

特别适合想偷懒的专业设计师&设计小白，这种几何抽象风格的应用场景很广，强烈建议大家下载！（文末有下载方法）

一、这酷炫的神器究竟是神马？

它其实是一个预设好的PS动作，只要在PS里执行它就能自动调整素材，不费吹灰之力制作几何抽象风格的图片。

简直是傻瓜式的操作，大神级别的效果。

[注] 这个神器来之不易，感谢免费分享的设计师—— Lil_Bro、三根设计骨。

下面开始全方位揭秘这个神器，附上完整的使用教程。

二、前期准备

1.在PS里载入动作

进入PS编辑界面后（最好使用CC 2017版），打开工作窗口（Alt+F9），按右上角的菜单按钮，选择载入动作，将动作1、动作2按顺序载入，顺序不能调乱，不然后续转换过程会出错。

载入完成后，可以得到上面的两组动作了。

2.预设几何画笔&图案

进入PS的预设管理器（编辑——预设——预设管理器），在预设类型为画笔时，载入画笔文件，载入后会看到菱形几何画笔形状。

用相似的操作方法，在预设类型下拉菜单中选中图案，载入图案文件，得到几个彩色图案：

此时，动作跟预设已经准备好啦。

为了方便给大家演示，在网上随便找来一张图片——

三、开始你的表演

1.用钢笔工具抠出大概轮廓

在PS里打开图片素材，用钢笔工具勾勒出素材主体的外部轮廓，然后将钢笔工具的路径转换成选区，将选区复制为一个新的图层（Ctrl+J）。

复制后，将这个轮廓图层填充任意颜色，并重命名为mask。

[注] 该图层的重命名必须是mask，否则后续动作执行会出错。

2.变形开始！让图片变成抽象风格

打开动作窗口，选中第一个动作Geometric Abstract Colorful Art，上下左右四个动作，是代表生成的几何色块朝向。

比如在演示图像中，主角是往右边奔跑，那么色块应该是在他背后朝左走，于是我们选择朝左的动作，点击开始按钮开始执行，完成初阶效果：

[注] 转换过程是全自动的，无需做任何操作，因为动作比较复杂，过程可能导致PS暂时卡顿，一会就好。

3.给局部加光，明暗色清楚

在第二个动作Re-Style中，我们可以看到一系列方向动作，目的在于增强画面光源。它的光源角度对应如下：

简单地说，你选哪个方位，就代表哪个方位变亮（向光位），其反方向变暗（背光位），让图像整体更具强烈的色彩对比。

这个根据自己想要的光源方向选择合适的角度即可，然后执行动作。增强光源后效果如下：

4.选出最酷炫的颜色搭配

同样在Re-Style动作下，执行Add Color Styles动作，下面我们就可以通过色相饱和度图层调整下颜色：

隐藏/显示上面标注的三个图层，图像的整体色调会变，选出看起来最酷炫的就OK了。

5.微调颜色之间比例（不想调颜色的可以跳过）

这是最后一步了，在Re-Style动作下还有几个名为Color Object 的动作，这是用于调整颜色之间的比例，以让画面看起来更加温和，大家可以逐个试试效果：

这是执行了Style2调整出的效果，画面的颜色确实比没调整前温和了不少。

至于其他没提及的动作，可用可不用，影响不大。如果有强迫症的话，大家可以自行逐个捣鼓~

效果调整前后对比：

瞬间高大上了有没有！

四、咱们该怎么将它应用到H5设计里？

“感觉很难将它用到H5上...”

这点完全不用顾虑，因为这个神器已经人性化地帮大家将每层元素划分好组了。

1. 比如将图像主体归在了Base Group组里；
2. 几何碎片归在了Particles Group组里；
3. 背景归在了Background Elements组里。

这样我们就能先隐藏其他分组，将他们逐个保存成PNG，就可以去捣鼓H5啦~

大家都知道，H5是离不开交互的，视觉只是最重要的加分项之一。纵观去年淘宝的720°全景H5，假如它只剩下一张手绘的张图，没有了全景交互，你猜它还会火吗？

所以呢，我们可以利用iH5提供的720°全景、物理引擎、滑动时间轴、时间轴动画等高级交互功能进行交互实现，给这些几何抽象素材加上高级交互，比如：

用这几何抽象背景去切片做全景背景；

再比如配合滑动时间轴，将各个素材做成滑动视差效果，也是蛮不错的选择。

这里简单地做了一个H5，大家可以凑合着瞅瞅几何抽象风格在移动端上的效果——

反正神器都送你们了，具体怎么用，还得靠大家去尝试和挖掘呐。

几何抽象风格神器下载：

网盘地址：https://pan.baidu.com/s/1hs5PnPM

一起耍起来噜~