色块拼接神器:Low Poly神器实战篇

分享到:更多 ()

啦啦啦进入实战了,还没动手的同学去挑一张帅气的图片,将它做成Low Poly风格的图吧。

之前译了一篇《Low Poly神器,带你飞》,貌似大家很感兴趣,文中给大家介绍了一个本地Web App,也就是Low Poly神器(下载附件),说神器虽然有点夸大成分,但却是可以帮助大家轻易地完成一张Low-poly图片,而且过程亲力亲为。十分有成就感哦!

虽然上一篇译文中作者也用一个案例教大家怎么使用了,但有些地方还是没说明白。这里我再写一个接地气的经验分享

只要你手速够快,电脑不卡,一个小时基本就能完成下面这张图,是不是很兴奋!看看是怎么做的吧。

(下面内容默认读者已经阅读过上一篇带你飞的教程~)

总共分3步。首先,

选图(得到一张建模的底图)

挑选一张自己喜欢的帅气的高清图片,对,帅气的才有动力。

因为忍者神龟电影要上映了,童年啊,遂选择一张很帅的Leo图片。

这里选图尺寸尽量大一点,在一些细节的地方点密集的点会很困难,点与点之间的距离是有个限制的,不能太密集。

高清图片壁纸推荐到10wallpaper.com上搜索。

挑完图片的第一件事不是直接开搞,而是要用PS或美图秀秀的软件调整一下图片的亮度、对比度,颜色的饱和度,尽量让图片对比度、色彩饱和度更高,这样才能突出明暗分界,颜色分界。

小技巧:先想好最终作品的构图,只需截取你构图大一点的图作为底图就行,不必用完整的大图。我就是用了这么一张完整的图。点了复杂的藤甲和盔甲,最后作品都没有用上,白点了><

而且,应该是算法的问题,到了后面顶点越来越多得时候,会变得很卡。我一半的时间花在等待上。

开搞! (得到Low Poly风格的SVG图片产出)

首先,用浏览器打开神器 I❤△ 里的index.html(直接拖过去,推荐Chrome)。

小技巧:因为是一个没有保存进度功能的Web App。不要用你正在上网的浏览器打开,因为你可能浏览一下网页后顺手点击了关闭,然后,你辛辛苦苦点了半天的图就悲剧了。新打开一个浏览器窗口来专门给这个Web App用。

调整到一个适合的透明度,找个线条分明的目标,开始点击“建模”。我是从眼罩开始,凭感觉,沿着线条点击(准确来讲是“颜色分界线”),就像平时使用PS里的钢笔工具一样。

不要用随机添加,因为不可控。纯手工的意义就在于创作时我们经过了“思考”。

根据色彩分界线,例如头顶那一块阴影,就要“圈”住它。想象着很好看来着,但你圈完会发现很难看,都是三角形长条,没有那种建模的感觉。

因为一个“曲面”由很多个小平面组成,所以要再这个大阴影里面再点上几个点。

不清楚怎么点,没关系,我们可以采用“随缘点击法”,喜欢哪里点哪里,凭感觉。

点完后你会发现,头部好看多了。

好了,方法知道了吧,只有两步,一沿边界点,二在“面”里面随缘点。接下来考验手速的时候到了,拿出你们apm200的手速出来,将其与部分点完。(这个时候旁人听到肯定以为你在打机了XD)

小技巧:在一些细节的地方例如眼睛,用ctrl和+-键控制页面放大缩小,可以很好地绘制细节哦。整个过程就想象自己在3D建模。

大致点完后,会成为这样子:

觉得细节还不够吧,那就再用前面的“两步秘诀”,加强细节。

因为是根据3点位置的颜色获取三角的颜色的,过程中不用在意颜色外溢到了其他地方,因为这个倒AI里可以调整颜色。

这里处女座会死得很惨~~如下(观察一下我调整细节的过程):

就快变成原图了喂!点了大半天的盔甲和藤甲最后还没用上,差点哭晕在厕所……

小技巧:随时点击“导出”。然后用鼠标右键点击右边的“此链接”,选择“在新标签中打开”。千万千万不要手残鼠标左键单击啊,这样你点了半天的成果就没了….新标签打开后你可以直观看到你建模的进度,而且这是会保存在历史记录里的哦,翻查浏览器历史记录,会看到data:开头的网页链接,打开就可以看到你在那个时候新标签打开的SVG图了。(我的GIF图就是这样做出来的!)

而且你一不小心关闭了浏览器就不会白白浪费掉劳动成果,即使用不上半成品也能看一眼安慰一下T^T

最后,导出,右键“此链接”保存导出的SVG文件,即弹出的菜单选择“链接另存为”保存到本地(不同浏览器些许不一样)。这就是我们需要的最终SVG图片产出。

 

调整(完成最终的作品)

用AI打开SVG图片。开始调整填充错误的颜色(例如背景和一些地方溢出的颜色),换个合理的颜色,使用吸管工具,在其他地方吸取。(色块之间的白线暂时不用管,后面解决)

小技巧:吸管工具的正确使用姿势是,按快捷键”I”。左手小拇指放在直接选取工具的”A”键上,食指放在I键,A一下选取要换色的色块,再I一下点击其他地方需要获取的颜色,如此反复,鼠标点到哪里换哪里,SO EASY!

然后保存为ai格式文件。

打开PS文件-新建,输入你的作品预期大小,我的是800*600的尺寸。

然后文件-置入,选择刚刚保存的ai文件,然后就置入了一个“智能对象”图层了,随便ctrl+T调整其大小位置,不会出现失真。随时都可以双击智能对象图层的缩略图回到AI修改,AI上保存,PS上这个智能对象就会同步更新了,很方便吧。

现在你PS里的图片应该是这样子的(构图需要的只是部分,果然白白点了很多细节吧~):

色块的颜色还是有点不协调的的,图层-新建调整图层,新建一个曲线或亮度对比度调整图层,稍微加深一下颜色。

然后还可以用钢笔工具绘制几个三角形色块,作为一些点缀。

最后终于到了一直忍着的“白线”了,很简单,在你的智能对象图层,ctrl+J复制图层,多复制几下,白线就没了。

担心还有白线?ctrl+J停不下来的我就是这样的:

做完这3步后,最终成果应该是这样的:

是不是很棒!大家趁着周末也试试吧!

聪明的大家一定会在过程中发现更多的小技巧,玩出更多地花样,在评论里和大家分享吧><~

来源:ui.cn

作者:shengbanx

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 色块拼接神器:Low Poly神器实战篇

0
分享到:更多 ()