如何使用JavaScript生成lowpoly在线生成风格图像

你现在的位置:
& 五分钟教你明白高大上LOW-POLY风格图片生成术
有没有看到看到效果高大上的图片,觉得离自己很远,望而生畏?今天给大家介绍一种名为LOW-POLY的风格图片,让所有人都一起来LOW-POLY一把,高大上一把!
感谢新浪微博朋友@创意农民 授权分享。本文提到的下载地址(长按文字可以复制)
神器下载:/s/CcdgCyAPRyDGW
lowpoly风格的背景图片下载:/flat-surface-shader/
首先让我们一起来感受下LOW-POLY风格带给我们的冲击吧!
制作LOW-POLY风格图片的步骤,我们分为七步,如下:
第一步:下载神器
下载神器请直接拉到文章末尾!
第二步:解压神器并打开
解压,打开index.html文件(注意,由于默认浏览器不一样,图标不一样,用自己的浏览器打开即可)
第三步:打开后是这个样子的
第四步:拖进来是这样子的
第五步:带你的差不多就可以了
第六步:点击转化后, 多了一个按钮
第七步:下载,结束
第八步:小结
先从封面的头像说起吧,这个,这个头像不是我做的,是抄袭的,因为这个用“神奇”做不出来,只能用ai一个一个的画,比较耗时间,繁琐,且需要一定的绘画和抽象的功底。
关于这个效果我个人第一眼看到就觉得很是高大上,很是适合做背景,后来一想,做图表也可以啊,用这个图形的图片填充就OK。
Low poly效果可以追溯为“分形”这一概念。Low poly来讲就是把一个图片分成四个三角形填充,把每个三角形分成四个小三角形,不停迭代就出来了。神器就是基于某种算法来实现的,不过由于用网页代码编写的处理能力不够细致。 最后一句Low poly分格的图片大都是用C4D做的,一款优秀的3D建模软件,所以我等PS,PPT党借鉴一下就好了。不要强求太多。(从PPT中看出,大都是3D作品)
low poly分格对色彩要求比较高,不要试用到饱和度、高亮度的配色
关于Low poly风格的背景图片,你可以去这个网站下载:/flat-surface-shader/
还有大神出品一种PS做Low poly分格字体的教程,效果图如PPT(其实我觉得直接用Low poly分格的图片填充文字就OK)
还是没有忍住,发一张自己的头像吧,先用“神奇”做了大致, 后来导入ai中修改的,做的不好欢迎大家吐槽。最后,谢谢关注啦,如果你喜欢,就@创意农民 啦!
Low-poly神器——I?△ 演示教程
你也许还感兴趣
转载请注明出处!
本文来自PPTfans网:
原文地址:
欢迎来到最专业的PPT教程网
我会告诉你还有更猛料?答应我,不许私藏哦!
如果您有能力编写PPT教程,欢迎投稿(有偿)。若您在经营其他自媒体并长期有写教程的打算,PPTfans邀您共谋发展!
PPTfans交流群
刚刚发布的
对网站有任何建议?
PPTfans(PPT设计教程网)会员所发布展示PPT素材/图片/文章”版权归原作者所有,任何商业用途均须联系作者。如未经授权用作他处,作者将保留追究侵权者法律责任的权利。
<!-- hyper cache如何用 Photoshop 等工具制作 Low Poly 低多边形风格的背景_百度知道
如何用 Photoshop 等工具制作 Low Poly 低多边形风格的背景
  Low Poly 低多边形风格  给题主上几个生成器  1.mage Triangulator App(运行TriangulateImage5.bat程序打开软件)  Image Triangulator 让你可以轻松把任何图片制作成多边形图像,多边形的抽象级别取决于你添加的顶点数量。应用允许你保存顶点为文本文件并保存最终图像为 PDF 文件。你可以在 Adobe Illustrator 或 Photoshop 中继续编辑图像。  Low Poly 低多边形风格图像生成器使用视频教程  (4.25更新一个视频教程)  下载地址:  链接: 百度云 请输入提取密码 密码: dsjy  2.Triangulator  使用方法  将本地图片拖到 [Drop your bitmap here] 的虚线区域内加载图片  进入编辑模式后,直接在图片上点击以添加顶点,顶点可以拖动  点击右上角的 &randomly& 可以随机添加25个顶点  点击 &Delete all vertices& 移除所有顶点  拖动左上角的滑块可以调节多边形的透明度  点击 &Export& 导出为 SVG 文件  Low-poly神器——I&#10084;△ 演示教程    (4.25更新一个视频教程)  下载地址:  链接: 百度云 请输入提取密码 密码: eh97  3.Flat Surface Shader  Flat Surface Shader 同样也是一款轻量级的网页工具,不过这个工具并不能用来处理图片,而是用来生成低多边形风格的背景图。工具使用 JavaScript 编写,支持 WebGL, Canvas 2D 和 SVG 三种技术。  使用方法  网页右上角有个控制面板,你可以完全自由的控制网格(Mesh)和光源(Light)设置,并且可以轻松地导出(Export)为 PNG 格式图片。  在线版:  Flat Surface Shader  源码:  wagerfield&#47;flat-surface-shader · GitHub
其他类似问题
为您推荐:
放张图上来
多边形的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁Low Poly 低多边形风格图像生成器使用视频教程_土豆_高清视频在线观看Low poly风格生成器_firefox吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名:今日本吧第个签到,本吧因你更精彩,明天继续来努力!
本吧签到人数:0成为超级会员,使用一键签到本月漏签0次!成为超级会员,赠送8张补签卡连续签到:天&&累计签到:天超级会员单次开通12个月以上,赠送连续签到卡3张
关注:69,153贴子:
Low poly风格生成器收藏
自动生成的效果不是很好,肯定不如亲自手工绘制。Low poly教程:
大神能把我头像做成那种风格的吗 感激不尽
不好看。。
一个字: 丑
加密三角网
容我算下土方量····
怎么跟皱纸一样扩展与插件的关系:扩展负责扩开来,插件负责插进去。
我曰,没那个耐性
长个本屌录制的傻爪教程吧!视频来自:
哆啦c梦的哥哥是不是楼主?
这个不错可以有 !
密集恐惧表示略恶心
手工累哭我
楼主怎么下载都是英文
楼下说的对
楼上是基佬
我用ps笨办法弄的自己头像
gimp吧早有了
不是很喜欢这种风格。
登录百度帐号推荐应用
为兴趣而生,贴吧更懂你。或80后/
天蝎座/
理工男/
完美主义/
软件:Photoshop+Adobe Illustrator
前言:Low Poly 原是 3D 建模中的术语,指使用相对较少的点线面来制作的低精度模型,一般网游中的模型都属于低模。而现在,Low Poly 进入了平面设计领域,继扁平化(Flat Design)、长阴影(Long Shadow)之后,低多边形(Low Poly)火速掀起了一个新的设计风潮。
制作过程:先找好一副像素较高的图片,截取想要的部分。然后在PS中根据人像轮廓画出三角形及多边形组合,完成后倒入到AI中,再用钢笔按照手绘的图形绘制矢量网格。最后把每个网格的图形填充相应区域颜色的中间值即可。&(其实这是个手法简单,过程枯燥的过程)
1、首先你需要一张高质量的照片。这里需要特意提醒一下各位网友的是,这里是用透视法来表现深度,因此照片需要有良好的高光和阴影,同时确保模特有一些硬件配饰,这些硬件配饰可与模特的皮肤、衣物等形成对比(好似眼镜、珠宝或笔挺的衣领)。接下来,我们需要从拍摄好的照片中选择其中最好的部分来合成我们所需要的素材照片。以下图为例,笔者就从不同的照片中选择了脸、眼镜以及其他细节。在这个步骤中,即使眼光挑剔一点,都是不碍事的。选定需要的部分,大致裁剪出需要的部分。然后在Photoshop中创建一个底色为黑色的画布,并将你所选定的部分作为单独图层元素置于该Photoshop画布中。
2、现在,我们需要将选定好的部分结合起来创建完美的素材照片。删除掉不需要的部分,同时将选定的局部拼贴在一起,这里主要使用蒙版和混合模式。这里,你不用完全按照最初的原始图片来进行拼贴。事实上,你只要按照你最喜欢的样子来拼贴即可。
3、现在在合成的图像上,调整对比度、色彩平衡、色阶等来创建一个更加动态的形象。笔者确实经常使用Photoshop中的自动对比度、自动颜色和自动色阶功能(在图像菜单中)。这些自动功能是相当实用的,尤其是在你不想手动修正合成的形象时。
4、笔者希望自己最后的成品的色调比素材照片要暖色调一些,因此笔者这里做了一些调色处理,主要是添加了一个紫色的滤色混合模式图层。
5、做到这里,我们就进入到最耗时的一部分了——三角网格。这里没有什么捷径可走,只能靠手工完成。为什么?因为在绘制脸部轮廓时,你的大脑比任何脚本或自动工具都要好用。当然,这里笔者也还是有一些心得。小地方使用小的三角形,永远不要使用四边形——它们看上去会很糟糕。一定要坚持使用三角形。如果你的目标对象和笔者一样拥有挺直的鼻子会容易一些,圆圆的鼻子会复杂一些。使用一个小笔刷在图像上的空白图层中创建网格。使用浅色可以与肖像形成对比。笔者偏向于使用蓝色或绿色,因为这两种颜色头很少出现在肖像的脸上(除非脖子上有纹身)。
6、走到这一步,你可以拍拍自己的胸膛,因为已经完成了许多艰苦的工作(但并非全部)。现在是时候来修复有错误的三角形。这里你需要把注意力放在网格上,因此先隐藏图像,然后寻找忘记创建三角形网格的地方。一旦改善了三角形网格,将其颜色改为白色,使其与黑色背景形成鲜明对比,然后保存为jpg。随后打开Illustrator。
7、将你的网格图拖进画板,锁定它,然后用钢笔来绘制矢量网格。这里笔者建议使用有对比的颜色(笔者习惯使用亮紫色)。当然,这一个步骤也是个耗时的步骤,因此笔者特意打开了喜欢的音乐并备好了咖啡,从而减缓这个耗时步骤所带来的烦躁心情。这里,笔者给大家一些技巧:你并不需要关闭三角形,只要用钢笔标记三点。这听上去或许有点傻,但它确实能帮你节省大量的时间,尤其在你需要创建数百上千个三角形的时候。工作量确实比较大,但要有信心一定能做好。做到这一步,你可以先休息一下,但一定要记得保存。切记!切记。
8、该步骤可使所有的点完全对齐在正确的位置上。这是一个简单的程序,不过你需要重复它的次数和你图片上的三角形一样多。使用直接选择工具,选择本应在同一个地方的一组点。打开对齐面板,点击水平居中对齐锚点。然后点击垂直居中对齐,你所有的锚点都会出现在相同的地方。现在移动周围的锚点来纠正它们的位置,如果有需要的话。然后为所有的点重复本步骤。
9、这里隐藏你在Photoshop中创建的网格,并再次检查你的网格有没有任何遗漏的三角形(笔者每次总是要忘记至少10多个三角形)。要做到这一点,最好的办法就是选择你所有的向量(命令/Ctrl+A),然后切换到填充和描边(Shift+x)。如果你发现有三角形被遗漏,回到填充和描边(再次按Shift+x),添加三角形,然后再检查一次。当你完成一副完整的网格时,就可以进行下一个步骤了。
10、将你的图片素材放在一个图层上,同时将该图层放置于矢量网格下方,然后将二者完美对齐。这样你可以为你的图像选出合适的颜色。记得要锁定图片素材图层(不锁定连上面的三角形对其都会出错的)。
11、这一步是最有趣的一步——添加颜色。依次选择每个三角形,使用吸管工具(I),然后选择每个三角形中间的颜色来填充它。
12、最后,把照片导出png,再进入PS进行进一步细节调色和改善,最终成图。
很喜欢此文字
&&&|&Powered by}

我要回帖

更多关于 lowpoly风格游戏 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信