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

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

发表于: 网页设计 & 灵感. 评论 (164)
赞助商链接

设计达人

我们介绍过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群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,欢迎转载。
  1. 应该是分析了图片的颜色的分布区域后得出相应的颜色值,再以三角形的填充色按大概的分布规律去排列。单纯用ps制作的话,分析图片的色块组成不难,滤镜(例如染色玻璃)可以直接实现,主要是后面的三角形排列,这是一个算法问题,所以只能手动一个一个的拼凑了。

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

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

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

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

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

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