lowpoly风格插画-LowPoly艺术家
粗粝or别致？低面建模设计大师的Low-Poly作品
低多边形(Low-Poly)是目前流行的一种3D艺术表现形式。不同于细节繁多、棱角平滑、追求真实感的传统多边形3D建模,低多边形的特点是面又多又小,低细节,高精度渲染,后期再配以柔和的光效。因为低多边形作品摆脱了写实的“枷锁”,在表现效果上也更为自由和多样化。
从艺术角度来讲,3D画面的呈现整体上来说是往越来越拟真的方向前进,就如同西方古典绘画一样,技术不断的发展带来的是更加逼真的绘画风格。但是在摄影技术产生之后,绘画师们猛然发现,“拟真”已经不再是一个值得追求的目标,于是绘画也就变得更加的抽象而晦涩。
“低多边形”的意义就在于将数字艺术家们从对于现实的徒劳模仿中解放出来,让艺术回归到设计本身上来。毕竟艺术从来就不关乎逼真,而在于表达;当设计师们开始追求对于现实的抽象和对某些元素的强调,捕捉事物的本质,“低多边形”就这样产生了。
—系列A_
TimothyJ.Reynolds是一位极力推崇低面建模设计美学的三维插图师,他的低多边形作品风格大气而严谨,场景感也很强。比起画面的细节,他更关注色彩,在下列的作品中,我们能看到水面在不同的时刻所呈现出的光影色彩变化。
—系列B—
这组作品来自JeremiahShaw和DannyJones的站点GeoADay。这组低多边形作品所呈现出的冷硬的美感来自其简洁,抽象的形体和结构,还有在渲染和光照上先进的处理手法。
—系列C—
JRSchmidt是一位非常有才华的CG艺术家,尤其是他的低多边形场景作品会令所有观赏者都有种耳目一新的感觉。几何风格作品很像是许多小游戏中的场景,色彩明快、内容丰富并且充满了趣味性。
—系列D—
这组作品出自多媒体设计师RunarFinanger之手,他的作品风格以舒适、简约为主。他创作的低多边形浮冰和雪屋有一种现实生活中纸质手工艺品的感觉,这让厚重的冰雪有了一丝轻盈的滋味。
—系列E(密集恐惧症请跳过此系列)—
MatteoGallinelli的这三幅作品其实是三种我们在日常生活中很常见的花卉,向日葵、金鱼草和雏菊。但转换为低多边形风格后,原本圆润饱满的花瓣变得尖锐单薄,像极了一根根硬刺。
向日葵(Helianthusannuus)
金鱼草(AntirrhinummajusL.)
雏菊(BellisperennisL.)
—系列F—
而NúriaMadrid的这组作品不像典型的低多边形风格那样充满了棱角,而是相当圆润。地形仿佛是用一层一层的厚纸板叠起来的,动物和石头也似乎是用粘土捏出来的。但是,简单的建模和单纯的色彩搭配让它看上去也非常出色。
—系列G—
AldoPulella的这组低多边形作品不乏丰富的细节和细致的物件,在色彩选择上也更为单纯清新。岩石和雪山上的棱角,明丽干净的色调和材质,还有四四方方的结构更让景色瞬间变得优雅可爱。
—系列H—
最后这组作品来自波兰三维插画师MatSzulik,他的场景作品别有一番热情的味道。强烈的色彩与光线的搭配,以及对光照和阴影统一性的强调,让整个画面骤然鲜亮起来。
比较复杂的LowPoly插画用什么软件制作比较好感觉用三维软件做这种LOWPOLY风格的作品比较方便。推荐用C4D,因为我用C4D,主要用用减面和置换效果器制作这种风格的场景,网上有教程。比如说树木,做好一个可以克隆出无限个,而且角度,大小,摆放位置等调节很方便。
LowPoly艺术家两个behance上的Lowpoly作品集
pintset上lowpoly合集
1.Mkcreative
主页
美国人;风格:场景为主,山脉,风格比较硬,色彩渲染很好
2.MishaPetrick
主页
俄罗斯;风格:综合性设计师,3D作品不多但很优质,80%以上都是动图(小动画)形式
3.JordanClarke
主页
加拿大;产品设计为主
4.NicolasMilliard
主页
法国;主页非常帅!但是大部分作品色彩感觉一般,艺术性还欠缺,也有一些很优质的作品。
5.TimSmits
主页
荷兰;色彩感觉很好,物体造型都很有特点,之前参考图也选了他的很多作品
6.jeremyedelblut
非常可爱的人物,物体造型
7.TimothyJ.Reynolds
主页
美国人;作品以大型场景为主,城镇街道。
所在工作室网站
8.JesseRiggle
主页
澳大利亚;艺术家;插画师;配色和人物很特别,尤其是人物,有点美漫那种夸张,应该给很多游戏做过场景和造型设计。
9.MichielvandenBerg
主页
小物件做得很精致;画面有种复古产品海报的感觉;风格跨度很大,像素风,波普风,游戏
Zema
主页
意大利;空气感,童话般的作品,很浪漫。
AcevedoRuiz
主页
西班牙;3D场景环境为主
_Urbaski
主页
波兰;商业游戏场景造型
di
主页
阿根廷;风格有点可爱,有很多人物作品
Landscapes
主页
斯洛伐克;作品有很强肌理感,但个人并不感冒
Prusakov
主页
俄罗斯联邦;以建筑物,城镇,房屋为主,氛围感不错,以及作品色调和气氛跨度很大
16.NúriaMadrid
主页
西班牙;厉害了我的哥!超喜欢
Tortora
主页
意大利;小场景和单个小模型还不错
Moek
主页
乌克兰;有很多品牌合作作品,作品非常时尚
19.KuochengLiao
台湾;作者好萌!作品中肌理,纸质的感觉好好
20.OllieHooper
英国;场景有一种戏剧感
21.SattrawutSinlapaanun
泰国;萌坏了!
22.AmrElshamy
埃及;有很多游戏项目;数码电影场景;
23.ErwinKho
荷兰;作品场景和人物有很细腻的情绪感
24.Jean-MichelVerbeeck
作品充斥了大量的流动的线条,几何/色彩与空间关系。
25.JRSchmidt
美国;乐高中毒。。
26.CarlosAlberto
墨西哥;3D人像
27.FriedrichNeumann
德国;透明物体,光感
28.GuillaumeKurkdjian
法国;非常有趣的艺术家,造型到色彩到场景,并且参与了一个我非常喜欢的儿童公益项目。
29.SteveCourtney
场景非常复古(配色上)而时尚
30.Pierre-AbrahamRochat
农场,乡村的场景为主,构图很有趣,常有大块留白,非常大气。
CSS3如何让任意图片lowpoly动画效果的实现分享
本篇文章主要介绍了CSS3实现任意图片lowpoly动画效果实例，这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放
这是一个利用CSS3的动画属性实现的结合lowpoly（低多边形风格）的效果，主要利用了CSS3 transform属性的rotate旋转，translate移动，scale缩放，CSS代码部分非常简单，唯一有趣的是 nth-of-type选择器的使用，这里UI设计师小伙伴不用望而却步，CSS部分完全可以拿来复用并根据自己的要求随意改变参数（所有不能复用的SVG动画代码都是耍流氓），然后，UI设计师再搭配上自己熟悉的AI利器，就可以完美的实现下面的效果了。
分步骤拆解：
1.低多边形风格的图片的制作
我的原图是下面这种：
随手从电脑上找了一张背景图，然后借助一个神器 Image Triangulator，不得不感慨，这个工具真是太好用了，各位设计师需要做的只是在图片上打点（我是为了测试，很粗糙的添加了顶点，如果需要得到很出彩的效果，需要在明暗分隔的边缘精细添加）。
然后导出的pdf格式的文件，就可以用AI打开了。
2.图片的处理
这里在AI里需要一步重要的操作，“释放剪切蒙版”，如果不进行这步操作，生成的SVG代码里会有大量的路径裁剪遮罩标签<clipPath>以及polygon的clip-path属性。
释放剪切路径后选中图形就可以看到此时图片已经由一个个三角形色块组成了。
导出SVG代码可以看到密密麻麻的多边形标签<polygon fill="" points=""/>。
Image Triangulator生成lowpoly风格的图片；AI处理，释放剪切蒙版
此处需注意，这个软件生成的PDF是带未处理的底图的，SVG文件里有<img>标签，所以边缘那里可以多加几个点，或者截取掉一部分，防止边缘出现镂空。
3.在线生成的低多边形背景图片的处理
如果需要的仅是一个背景图，可以自定义尺寸、颜色和晶格大小，支持生成SVG格式。比如下面这种：
利用这个在线工具生成的图片不处理的话里面会是<path>路径标签，并且有描边属性，需要在AI里处理一下，全选，去掉所有的描边属性。此时，再导出的SVG文件就是对应的多边形标签<polygon>了。
截止到这一步，我们的图形处理部分就已经结束了，剩下的是动画效果的实现
4. CSS3动画
先说一下动画实现的初步设想。我希望这些已经生成的多边形碎片进行旋转、位移和尺寸的变化，这对CSS来说，也是很容易实现的一个效果，但我需要的是散布的不同效果，位移的方向不同，距离不同，缩放不同，可我这种JavaScript渣渣又不会写随机函数，还好CSS3提供了一个强大的选择器 nth-of-type(an+b)，利用它，我可以赋予不同的多边形碎片不同的动画属性值。
简单了解一下nth-of-type(an+b)，n从0开始取值，依次加1，所以你会得到第a+b个，2a+b个，3a+b个??元素。
比如，我希望我的<polygon>多边形分成6组，每组设定不同的动画属性，我的写法如下：
polygon:nth-of-type(6n+1){transform: translate(x, y) scale() rotate();}这是顺序为6n+1（即1,7,13,19??）的多边形的动画效果，同理，下一组为polygon:nth-of-type(6n+2)，即选择了第2,8,14,20??个多边形，依次向后推，直到polygon:nth-of-type(6n+6)
现在附上全部的代码及注释
结合下面的全部代码说一下：
<html>
<head>
<style>
/*以下为可复用的CSS代码部分*/
.cover{
position: absolute;
width: 800px;
height: 445px;
top: 20%;
left: 20%;
z-index: 2;
}
/*cover和svg的宽高位置都重合，唯一不同的是z-index属性*/
svg{
position: absolute;
width: 800px;
height: 445px;
top: 20%;
left: 20%;
overflow: visible;
z-index: 1;
}
polygon{
transition:all 1s ease;
transform-origin: 50% 50%;
}
/*以下为设定的6组动画效果*/
.cover:hover+ svg#lowpoly polygon:nth-of-type(6n+1){
transform: translate(-400%,-400%) scale(1.5) rotate(100deg);
opacity:.3
}
.cover:hover+ svg#lowpoly polygon:nth-of-type(6n+2){
transform: translate(800%,-400%) scale(1.1) rotate(200deg);
opacity:.4;
}
.cover:hover+ svg#lowpoly polygon:nth-of-type(6n+3){
transform: translate(-800%, 400%) scale(1.2) rotate(200deg);
opacity:.3;
}
.cover:hover+ svg#lowpoly polygon:nth-of-type(6n+4){
transform: translate(-400%, 800%) scale(1.4) rotate(200deg);
opacity:.4
}
.cover:hover+ svg#lowpoly polygon:nth-of-type(6n+5){
transform: translate(400%, 400%) scale(1.3) rotate(100deg);
opacity:.3
}
.cover:hover+ svg#lowpoly polygon:nth-of-type(6n+6){
transform: translate(800%, 400%) scale(1.2) rotate(200deg);
opacity:.3
}
</style></head>
<body><p class="cover"></p><!--定义的触发区域-->
<svg>
<g id="lowpoly">
??此处为若干<polygon>标签即需要自行替换的部分
</g>
</svg></body></html>由于SVG在执行动画效果后碎成满屏，如果我们的动画要设置成鼠标移入破碎，鼠标移出复原的效果，需要一个区域来进行动作的触发，这就是我们定义cover的意义，且层级属性要高于SVG属性。
关于动画效果的触发，我用的是:hover鼠标经过，需要其他触发事件可以求助前端攻城狮。
svg的 overflow属性一定要定义为可见 visible，以确动画效果后超出svg尺寸的部分可见。
关于polygon的动画属性的设定，这种 transition:all 1s ease表示所有的动画时间为1s，缓动效果。 transform-origin: 50% 50%定义了变换的原点为每个元素自己的center。
关于6组不同的动画效果，我设定了位移translate，缩放scale，选择rotate以及透明度opacity的变化。
这里X轴和Y轴的位移，建议自己划定一个范围，值越大，扩散度越高，比如我的X和Y方向都是-800%~800%。另外关于旋转的角度，rotate()，为了符合物理规律，偏移的路径越远的旋转的角度更大，反之亦然。
如果你想设定更多的不同的效果，只需要改nth-of-type(an+b)中n的系数a就可以了。
如果懒得修改尝试，UI设计师在套用这个模板时，只需要把自己制作（或者自动生成）的<polygon>标签进行替换就可以。比如我们试一下把那张背景图套用进去，就能轻松得到下面这种动画效果。
知识点总结
1.关于低多边形lowpoly风格图片的制作（重点为自己制作任意图形）
2.CSS3选择器nth-of-type(an+b)的使用
AE怎么制作Low Poly风格的连线字效果
AE作为会动的PS，当然是可以做平面设计的喽，设计起字体来那也是非常的方便，好用效果萌萌哒。强大而丰富的第三方插件库，更是让Ae设计如虎添翼，今天就来跟大家分享一个用AE制作适合于Low Poly风格的连线字效果，快来看看吧。
1、新建合成，名称随意如我这里叫做连线字教程，大小根据自己的需求设定、本教程设定为430*430、背景颜色啥的都无所谓，确定即可。导入一张low ploy效果的图片做字体背景，操作方法可以是点击菜单栏的文件导入文件来做，也可以直接将图片拖拽到项目面板。打开合成，把刚才的low ploy图拖入到合成中，缩放到合适大小即可。
2、选择文字工具，输入需要设计的文字比如连线字，选择合适的字体和大小，如图所示为本教程的参数。PS：再说一下，参数的问题，希望教程展示给大家的是想法，参数其实都是根据想要的效果调整出来的，所以大家不必拘泥于参数，尽管大胆地尝试就是了。
3、选中文字连线字图层的基础上，添加Plexus效果。方法既可以从菜单栏的效果中找到该特效，如图所示；也可以直接在效果和预设面板上，搜索到该特效，然后直接拖拽到图层上或直接双击该特效。PS：此步骤中前提是一定要选中文字图层哈。添加完之后，发现文字不见了，别着急，下一步就让它以连线字的形态出来。
4、把视线转移到效果控件面板上来，Plexus特效初始状态如下图1分三个字特效。该教程中，主要由子特效Plexus Toolkit来延伸完成。首先，在参数Add Geometry下line，，点击右侧倒三角，在下拉菜单中选择Path（因为字体属于路径类，所以这里是选择Path），马上就在面板上多了一个Plexus Path Object子特效。其次，回到Plexus Toolkit，然后在Add Renderer上添加面板上又多了Plexus Lines Renderer子特效。这个时候，连线字效果已经初见效果。PS：虽然文字叙述起来很多，但实际上才进行了四次点击即完成了效果。
5、进行微调，完善连线效果。在Plexus Lines Renderer特效这里，可以对连线效果进行调试，常用的三个参数是Max No.of Vertices to（数字越大线条越多，反之亦反）、Maximum Distance（线条距离的，在这个尺寸效果表现并不明显）、Line Thickness（线条宽度，数越大线越宽），本案例参数设置如图所示。依然其实只动了两个参数，动了两下鼠标。
6、其他效果，比如修改字体颜色。点开Plexus Path Object，选择Color参数，弹出的色板上选择想要的颜色即可。
7、Ctrl+Alt+S，保存成图片即可。PS：可以把开头的背景图关闭，然后显示透明图层，渲染时打开阿尔法通道即可保存带透明背景的jpg图层，然后应用到PPT中即可。
文章到此结束，希望我们对于low poly和lowpoly风格插画-LowPoly艺术家的问题能够给您带来一些启发和解决方案。如果您需要更多信息或者有其他问题，请随时联系我们。