网页设计 & 灵感 » 网页设计趋势:尝鲜多边形风格设计

网页设计趋势:尝鲜多边形风格设计

发表于: 网页设计 & 灵感. 评论 (164)
Sponsor

设计达人

我们介绍过2013年的网页设计趋势有扁平化设计(Flat Design)、条纹式网页设计等等,其中Flat Design最为流行,不过最近,设计达人网又发现了新的设计趋势——多边形风格,什么是多边形风格呢?其实它有点像白纸风格一样,如果不懂,下面我们为大家介绍一个制作多边形图像的网页工具。

Low Poly低多边形在线工具:http://www.shejidaren.com/examples/tools/low-poly/

工具由somestuff提供:点击这里进入下载页(找到download sources here的链接),有很多用户说下载不了,好吧,我直接分享至微盘:微盘下载 (如果下载不了的请加设计QQ群:131268611下载,或留下邮箱)

使用方法很简单,下载后用支持html5的浏览器打开,拖动一张图片到”Drop your bitmap here”区域,如下图:

polygon-photography-tools

拖进去后,你可以随意单击鼠标来制作多边形,也可以点击Randomly来快速生成,还有一个好处就是能生成SVG图片,这样能可以在AI在随意修改了。

生成SVG方法:点击 Export ,然后在 this link 右击另存为,保存的时候记得添加”.svg”后缀哦!

polygon-svg

制作一个多边形风格背景

全屏网页设计最近不也很流行吗?所以设计达人网尝试使用这个工具来制作一个背景。

原图:(图片来源未知,很多年前收藏的,有版权问题请告知我)

bg

使用多边形工具制作,并简单PS了一下,整个过程大概3-5分钟左右就完成了,效果如下:

如果你喜欢这图片,点这里下载高清大图:原图 | 效果图

多边形风格的网页设计作品欣赏

接下来我们一起看看有那些网站使用了多边形风格,还有就是他们那些元素使用了多边形来制作,Enjoy!

JOMMANS

国内设计师JOMMANS的个人博客,多边形风格主要应用在Logo & Banner上。

jommans

查看网站

Aires Cintra Arquitetura

Aires-Cintra-Arquitetura 多边形网页设计Polygon web desig

查看网站

BeoPlay

BeoPlay 多边形网页设计Polygon web desig

查看网站

upon a fold

upon-a-fold 多边形网页设计Polygon web desig

查看网站

Dare with us 2013

Dare with us 2013 多边形网页设计Polygon web design

查看网站

Mokhtar SAGHAFI

Mokhtar SAGHAFI 多边形网页设计Polygon web design

查看网站

Android Analyze

Android Analyze 多边形网页设计Polygon web design

查看网站

Sanissimo greets

Sanissimo 多边形网页设计Polygon web design

查看网站

Yosoygil

Yosoygil 多边形网页设计Polygon web design

查看网站

Made by Vadim

Made by Vadim 多边形网页设计Polygon web design

查看网站

Pinpoint Design

Pinpoint Design 多边形网页设计Polygon web design

查看网站

Send me to SouthPole

SouthPole 多边形网页设计Polygon web design

查看网站

Filidor Weise

Filidor Weise 多边形网页设计Polygon web design

查看网站

Equilibrium

Equilibrium 多边形网页设计Polygon web design

查看网站

HushFlow

HushFlow 多边形网页设计Polygon web design

查看网站

GoodTwin

GoodTwin 多边形网页设计Polygon web design

查看网站

Letters, Inc

Letters Inc. 多边形网页设计Polygon web design

查看网站

Healthshare

Aires and Cintra Arquitetura 多边形网页设计Polygon web design

查看网站

MostWanted Wild Digital Agency

MostWanted Wild Digital Agency 多边形网页设计Polygon web design

查看网站

Agencja Reklamowa

Agencja Reklamowa 多边形网页设计Polygon web design

查看网站

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论164 Responses to “网页设计趋势:尝鲜多边形风格设计”

  1. Hey-Kz - 回复

    下载不了,麻烦发送402423516@qq.com,非常感谢!

  2. Ibelieve - 回复

    下载不了,麻烦发邮箱826492767@qq.com谢谢大牛!

  3. 空U空 - 回复

    下载不了,麻烦发邮箱1434740208@qq.com
    谢谢大牛!

  4. 追馨源 - 回复

    下载不了,麻烦发邮箱:2398569700@qq.com 谢谢谢谢n(*≧▽≦*)n

    • 追馨源 -

      谢谢,已经收到了

  5.  S. - 回复

    下载不了,麻烦发邮箱:735013511@live.com 谢谢谢谢n(*≧▽≦*)n

  6. 李显鹏 - 回复

    下载不了,麻烦发我一下:574008921@qq.com

  7. Lsot - 回复

    下载不了,请发:717640076@qq.com 灰常感谢!!

  8. 一树 - 回复

    下载不了,请发:2365062760@qq.com 灰常感谢!!

  9. 韩诺 - 回复

    1239774140@qq.com 谢谢

  10. 果书萱 - 回复

    2312607863@qq.com谢谢!

  11. 欢子 - 回复

    1593867384@qq.com

  12. 双鱼尾的白羊 - 回复

    1570014406@qq.com 谢谢!

  13. ps爱好者联盟 - 回复

    群已满,发个给我吧,1575588688@qq.com,谢谢

  14. 麦兜 - 回复

    921156503@qq.com

    • 麦兜 -

      谢谢哈

    • 麦兜 -

      谢谢哈

    • 麦兜 -

      在线版的存不到SUV格式呀

  15. paney - 回复

    272267218@qq.com 帮发下邮箱,谢谢

  16. 小川 - 回复

    1455201811@qq.com 谢谢

  17. 三度传媒-张L - 回复

    下载不了,能帮忙发我邮箱吗。1655024996@qq.com,非常感谢!

  18. 摆方块 - 回复

    我让别人帮我下载了 但是好像要能连FACEBOOK才能用。。

  19. 西街 - 回复

    2966260543@qq.com 谢谢!

  20. 伸缩自在的爱 - 回复

    zp870218@163.com 谢谢

  21. 约定简单就是幸福 - 回复

    下载不了,麻烦发邮箱:839429519@qq.com,3Q!

  22. 首领大人 - 回复

    下载不了,敝人下载不了啊,能麻烦发到我的邮箱吗2691873911@qq.com

  23. 于武强 - 回复

    下载不了麻烦给我发一个 745460498@qq.com 谢谢

  24. 小毛驴 - 回复

    2417698250@qq.com 好人一生平安

  25. Howie - 回复

    chenhong_4888@qq.com好人一生平安

  26. 咪叨 - 回复

    下载不了,麻烦发1532969061@qq.com,灰常感谢思密达~

  27. 雁儿fei飞 - 回复

    214593061@qq.com谢谢大人~~~

  28. carmenmjm - 回复

    642023645@qq.com,谢谢!

  29. vividare要认真学习-GAFA - 回复

    809411694@qq.com,麻烦给我一个~谢谢~

  30. 摆方块 - 回复

    463490941@qq.com 谢谢

  31. 漫羽 - 回复

    兄台给我一个1164726674@qq.com

  32. 妖业蛋 - 回复

    学习 一下

  33. 激萌板栗 - 回复

    987394277@qq.com谢了,大神

  34. phoebe - 回复

    837474099@qq.com,亲,有空发一下

  35. Fan - 回复

    397263537@qq.com

  36. 伊诺 - 回复

    我的QQ邮箱2549553560@qq.com 我也正在学习平面设计。。。谢谢亲了

  37. 梓茵 - 回复

    736365539@qq.com 谢谢啊!!!!大神~

  38. Rapheallux - 回复

    305141491@qq.com,微盘挂掉了,麻烦发邮箱,谢谢~

  39. 张枫载 - 回复

    2314123275@qq.com 谢谢

  40. yang - 回复

    1269090012@qq.com

  41. 爽lorna - 回复

    微盘没资源了!麻烦发下邮箱1830613839@qq.com!非常感谢!

  42. wan - 回复

    为什么把图片拽到虚线框中,图片会在另一个页面单独打开呢?

  43. ning - 回复

    下载不了 可以麻烦发邮箱里么 谢谢啊 554693283@qq.com

  44. LIN - 回复

    为什么网盘我下载了,求大神给下载 QQ/微信:454217045。谢谢!

  45. f小楠n - 回复

    为什么弄完了不能另存啊?请楼主解答!QQ/微信:784951246

  46. 我怎么就不知道呢 - 回复

    QQ群加不进去,加了一个进去没看到可以下载的,麻烦你发我邮箱:835364156@qq.com谢谢

  47. 伟平 - 回复

    996351510@qq.com 谢谢 我的群里 加不了啊啊啊啊啊

  48. 可爱的恶趣味 - 回复

    QQ群加不进去,麻烦你发我邮箱:469221960@qq.com谢谢

  49. Tigerer - 回复

    121377405@qq.com 加群了回答问题正确了但没有反应???? 微盘里边的下载了不知道怎么使用  没看到安装文件啊

  50. Lerry - 回复

    QQ群加不进去,麻烦你发我邮箱:2355717197@qq.com 谢谢

  51. 小骄傲i - 回复

    下不了啊,2247605806@qq.com谢谢了

  52. Cherry - 回复

    下载不了 麻烦了 谢谢呀~332587800@qq.com

  53. 黎洪 - 回复

    649820010@qq.com 谢谢了

  54. Mr.J - 回复

    651879720@qq.com 谢谢啊~~

  55. 昌航青协刘乐 - 回复

    下载不了了 谢谢啊 627044972@qq.com

  56. 胡俊伟同學 - 回复

    249901485@qq.com 谢谢

  57. 王子臣 - 回复

    1835624285@qq.com 谢了

  58. Quietly - 回复

    爱设计

  59. 何旭阳 - 回复

    你好,我用这个工具的时候,得出的图片里,三角形都是有白边的,我不要那些白边呀,怎么弄呢?

  60. TTTTTTTT - 回复

    邮箱747212968@qq.com、、、谢啦

  61. Q - 回复

    610323984@qq.com 求软件 谢谢啊

  62. jt - 回复

    437314507@qq.com

  63. sam - 回复

    871956462@qq.com 求软件

  64. salzkw - 回复

    下载不了,麻烦可以发个到邮箱 459792602@qq.com,谢谢!

  65. yanzi - 回复

    现在根本不能下载啊,求发邮箱:2833872904@qq.com

  66. 尛尛尛 - 回复

    现在微盘不能看分享了,不知道是否还有其它盘可以看到

  67. 李不正经 - 回复

    有白边

  68. OriginNight - 回复

    为什么点击右键另存为 是空白的文件呢?

  69. 王祥贵 - 回复

    是不是要苹果电脑才可以哦

  70. 丫头 - 回复

    保存不了啊?怎么回事?

  71. wwww - 回复

    楼主讲的不是很详细,第一步都没说谁知道啊。

  72. wwww - 回复

    我下载好了,怎么用呢,求指教?谢谢

  73. BLUE ICE - 回复

    不错

  74. supergirl - 回复

    可以试试看

  75. 单骑go - 回复

    没有问题,很顺利做出来了,但是最后打开图片,多边形之间会有白边,特别明显,不是很美观啊,这个是怎么回事呢,制作的时候能去掉这些白边吗

    • heydi_baby -

      我也是这个问题 解决了没

  76. flypig - 回复

    我按照上面说的那样做也是保存不了哦,是怎么回事呢

  77. CENTAURY - 回复

    亲。我怎么保存不了呢》》》???

  78. 我腐 - 回复

    赞一个~ 多谢! 分享~ !

    • salzkw -

      可以发我一份吗?万分感谢!459792602@qq.com

  79. spectre77 - 回复

    啊啊啊啊啊啊,弄了好久,终于弄出来了,好激动,激动的都流眼泪了,真心找这种软件好久好久,竟然在这看到,真心谢谢可爱的亲!

    • 梁太_我喺濤仔 -

      怎么弄啊?我点击 this link 之后怎么没有跳出保存路径的窗口啊,

  80. 嗨安定 - 回复

    为什么另存为打开是空白的 有知道原因的没 分享下 感谢

  81. F-Sunshin - 回复

    你好,点击 Export 后 右键 目标另存为 怎么保存呢

    • action -

      是啊,我的也保存不了啊

  82. 芊含韵 - 回复

    亲啊,我点击 this link 之后怎么没有跳出保存路径的窗口啊,

    • action -

      我的也是呢

    • 梁太_我喺濤仔 -

      对啊!我点击 this link 之后也是没有跳出保存路径的窗口啊,我用的是360浏览器!是浏览器的问题吗?

    • leuang -

      换个浏览器试试,比如firefox或chrome

  83. 麻雀 - 回复

    下载了解压显示文件错误,求发邮箱:121901722@qq.com

  84. 周誉 - 回复

    是不错的工具

    • CUWHkkk -

      为什么我用谷歌打开没有那个界面,只有三行英文呢?求解!!

  85. 我就是刘磊啊 - 回复

    为什么他说我的浏览器不支持 file api support呢,我用谷歌浏览器和ie9试过了,都不行

  86. 娓娓 - 回复

    还是不大明白

  87. lindy - 回复

    哈哈,根据我测试的结果是:图片太大,引起横向导航后,就不能编辑了。在FF浏览器中,调出自适应设计视图,分辨率宽度改得比图片宽后就可以编辑了!

    • carcompany -

      厉害啊,这都被人发现了。

    • carcompany -

      厉害啊,这都被人发现了。

  88. lindy - 回复

    大张的图片好像不行耶。网上上面提供的素材,我下载下来,就不行。。。

  89. lindy - 回复

    大张的图片好像不行耶。网上上面提供的素材,我下载下来,就不行。。。

  90. 天水 - 回复

    很不错的东西,赞一个

  91. Bob Lee - 回复

    请问怎样用多边形工具做出这样的效果

  92. 着魔的依子喵 - 回复

    好好玩哦,收下鸟

  93. hiiishare - 回复

    很不错的教程,谢了!

  94. 信骚扰魔人 - 回复

    赞!

  95. 小王子 - 回复

    求大神指教下怎么使用啊

  96. 小王子 - 回复

    下载下来 图片也放进去了 但是没用 不知道怎么用 可以教我下吗 大神

    • Win7en乐园 -

      有的图片貌似是不能处理的,试试换一张图片试试看呗。

  97. 25学堂 - 回复

    我发评论都删 太小鸡肚肠了吧

  98. 25学堂 - 回复

    不错!很漂亮

  99. sunny_sun - 回复

    请教下:我的目标另存为之后,用AI打开是空白文件

    • momogou -

      我的也是这个问题、求解啊!

  100. Selina - 回复

    补充一个:http://www.appneta.com/

  101. Chris_shern - 回复

    怎么一保存就是黑色的 求解释 谢谢

    • 花落灬相离 -

      我也是一点击保存就变成黑色

    • 花落灬相离 -

      我也是一保存就变成黑色 我已经用了360激素浏览器 到底怎么保存呢~~你的问题解决了吗 能不能告诉我一下

    • carcompany -

      用火狐(Firefox)浏览器试试,这浏览器很好用

    • carcompany -

      用火狐(Firefox)浏览器试试,这浏览器很好用

  102. Tang_Monk_ - 回复

    你原来那篇【CSS JS HACK汇总】页面现在打不开了,求解决

    • Tang_Monk_ -

      谢了,可以访问了

  103. 浮笙渃懜 - 回复

    下不了啊 可以发邮件吗 641294882@qq.com

  104. 萫夕 - 回复

    微盘也下载不了捏···方便发邮件么941101204@qq.com

  105. your_franck_60293 - 回复

    楼主,下载不了呢,帮忙发下邮件哈,万分感谢629715765@qq.com

  106. mo_xg - 回复

    为啥一保存就成了黑色的

  107. 杨颖YINbabyring - 回复

    感谢楼主…OK了..

  108. 杨颖YINbabyring - 回复

    楼主下载不了啊。。都试过了。。可以发邮箱么。。。279763738@qq.com 感谢啊啊

  109. CTL_lg - 回复

    chrome导入不了图片.

  110. 小梅子 - 回复

    我为什么在微盘下载下来后解压解压不了啊?亲,能告诉我吗

  111. 小梅子 - 回复

    在吗

  112. JHS流浪的萝卜 - 回复

    win7 x64 IE 打不开图片 CHROME 无法生成文件 看楼下说 只有360可以使用 想问一下怎么能保存JPG图片呢 保存下来的不是有分界点 就是有白色的分界线

    • 芊含韵 -

      我也遇到这样的问题了,您现在解决了吗?如果解决了,也教我一下,谢谢哈

    • 芊含韵 -

      亲,我解决了,我用的狐火浏览器,点击export 然后是 < 右击 > this link ,然后链接另存为,就弹出保存窗口了

    • 嗨安定 -

      我也是火狐 连接另存后 打开是空白的 这是为什么呢

  113. Cheny米鱼 - 回复

    托不进去图片是什么原因呢?

    • carcompany -

      浏览器是chrome吗?360极速浏览器也可以,反正要支持HTML5的,拖到“drop your bitmap here”区域即可

  114. PL梅Er - 回复

    很喜欢多边形网格的风格 但是为什么在The link这里没办法另存为.svg格式

    • PL梅Er -

      但是the link这里没有另存为或保存,只有目标另存为和网页另存为,这里保存的都是网址;我试过右键不行,左键也不行。。。纠结啊。。

    • carcompany -

      我在Chrome浏览器是这样操作的,右击“The link”然后链接另存为,保存的时候把名字改成name.svg保存。

    • PL梅Er -

      下载了Chrome浏览器果然可以保存了 谢谢谢谢

  115. T-T的个性Q版漫画小店 - 回复

    为什么保存不

  116. T-T的个性Q版漫画小店 - 回复

    保存不了,为什么

  117. wmtimes - 回复

    其实我不喜欢这种效果。

  118. 抽离陌生 - 回复

    为什么微盘里的我下载了解压还是出错不能用呢?楼主

  119. 张冬雪 - 回复

    我下载下来了,可是里面什么都没有~~谁有解决办法?

  120. loongsoon - 回复

    求大神啊 我不知道怎么下载 发我邮箱好吗?471489834@qq.com

  121. CARTAION - 回复

    我的浏览器支持html 5 但是为什么不出现Export 的工具呢?

  122. 丨丶嵘心灬 - 回复

    学习了 留名。

  123. 呵呵 - 回复

    易迅的专题设计常常出现多边形

  124. 老赵 - 回复

    应该是分析了图片的颜色的分布区域后得出相应的颜色值,再以三角形的填充色按大概的分布规律去排列。单纯用ps制作的话,分析图片的色块组成不难,滤镜(例如染色玻璃)可以直接实现,主要是后面的三角形排列,这是一个算法问题,所以只能手动一个一个的拼凑了。

  125. 老赵 - 回复

    应该是分析了图片的颜色的分布区域后得出相应的颜色值,再以三角形的填充色按大概的分布规律去排列。单纯用ps制作的话,分析图片的色块组成不难,滤镜(例如染色玻璃)可以直接实现,主要是后面的三角形排列,这是一个算法问题,所以只能手动一个一个的拼凑了。

  126. 老赵 - 回复

    应该是分析了图片的颜色的分布区域后得出相应的颜色值,再以三角形的填充色按大概的分布规律去排列。单纯用ps制作的话,分析图片的色块组成不难,滤镜(例如染色玻璃)可以直接实现,主要是后面的三角形排列,这是一个算法问题,所以只能手动一个一个的拼凑了。

  127. 乾坤 - 回复

    其实我很好奇,博主是做设计的,还是做web前端的?

  128. Pretty_YuanBaby - 回复

    这个分享很好啊,好有创意,看完之后我发现自己真的是个小小小鸟,鸟都算不上,但是那个制作多边形背景的工具不能下载了

    • Pretty_YuanBaby -

      谢谢楼主

    • 1213179416_3ea222 -

      谢谢,我下了半天也没下来,才看到老大,已经把他分享了,早就给我们考虑周全了,谢谢

    • peter -

      你好·我下载下来·解压会出错··这个怎么弄的?~只有mac可以么·

    • 39 -

      是怎么存的啊 我真是搞不懂 摸了一中午了 跪求楼主告知 可否截个图看看 在线等

    • yanzi -

      下载不了,求发邮箱2833872904@qq.com

  129. shangrenxi - 回复

    求ps制作这风格的方法.

  130. shangrenxi - 回复

    求ps的做法….


{ 发表评论 }