恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
视觉逼格指南:几何抽象风格神器
0.0°
2017-05-24 原创文章 教程 举报 13759 403 205 64

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

 

毋庸置疑,视觉刺激

 

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

 

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


Image title


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

 

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


Image title


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


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


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



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


Image title


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

 

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

 

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

 

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


二、前期准备

 

1.在PS里载入动作


Image title


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

 

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


2.预设几何画笔&图案


Image title


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


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


Image title


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


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


Image title


三、开始你的表演

 

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

 

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


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


Image title


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

 

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

 

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


Image title


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


Image title


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


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

 

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


Image title


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


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


Image title


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

 

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


Image title


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


Image title


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

 

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


Image title


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

 

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

 

效果调整前后对比:


Image title

瞬间高大上了有没有!


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

 

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


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


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

Image title


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


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


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


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

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


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


Image title


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


几何抽象风格神器下载:


Image title


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


一起耍起来噜~



更新:2017-05-24

收藏

403人已收藏

尼姑拉丝赵四

世界大奇,保持好奇心,才有乐趣。H5爱好者。

  • 27

    作品

  • 2292

    粉丝

  • 8

    关注

  • 震惊!这个H5居然是在线聊天室!(内附完整教程)
  • 网易的爆款H5,手把手教你做!
  • 3个小时150万UV!网易的童年 H5刷屏了!
  • 4月精品H5盘点,Top20

    猜你喜欢

      2017-05-24 原创文章 教程 举报 13759 403 205 64

      视觉逼格指南:几何抽象风格神器

      0.0°

      你确定要举报视觉逼格指南:几何抽象风格神器

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年05月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      205
      403
      64

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录