记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[UI教程] 视觉逼格指南:几何抽象风格神器[含19P]

[复制链接]
发表于 2017-5-29 22:18:31 | 显示全部楼层 |阅读模式
在这纸醉金迷的广告时代,用户最看重什么?

毋庸置疑,视觉刺激

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

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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433gne0ah40jdapahff 1


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

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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433bn0oo0o61z1o2ggp 2


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


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


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




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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433o6bm1ixs19kpxx9b 3


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

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

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

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


二、前期准备

1.在PS里载入动作


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433s1coeok080o8e073 4


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

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


2.预设几何画笔&图案


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433t9l6zbjhh2rz222j 5


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


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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433l7w577ku7e7ueue5 6

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


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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433aszppskdsxm9dpka 7


三、开始你的表演

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

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


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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433um7zukbk7atfy6wk 8


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

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

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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433aw8d5y5fyd025d5f 9


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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433uaa84l3zlvq3bbov 10


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


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

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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433kkewm0m8dhml89g0 11


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


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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433g5ziobzqj15zpp6w 12


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

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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433zpgvc5c5xvccsvxy 13


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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433edpt99tklyvctj9m 14


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

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


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433me4ek9k3kcke5h98 15


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

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

效果调整前后对比:


视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433x9zs9e9kpu9bebrt 16
瞬间高大上了有没有!


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

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


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



    比如将图像主体归在了Base Group组里;
    几何碎片归在了Particles Group组里;
    背景归在了Background Elements组里。
    视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433j51dqdd77d4455n5 17


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


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


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


    用这几何抽象背景去切片做全景背景;
    再比如配合滑动时间轴,将各个素材做成滑动视差效果,也是蛮不错的选择。


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


    视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433xkoiiysgk2dr2kbk 18


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


    几何抽象风格神器下载:


    视觉逼格指南:几何抽象风格神器 平面设计,视觉刺激,神马,设计师,图片 【UI】 222433zsxyeooy2a1f4j5h 19


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


    一起耍起来噜~
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
发表于 2017-5-29 22:29:05 | 显示全部楼层
也是cc2017中文版
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
回复

使用道具 举报

发表于 2017-5-29 22:39:39 | 显示全部楼层
好棒,试做了下,果然美美哒~
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
回复

使用道具 举报

快速回复 返回顶部 返回列表