您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

折紙多邊形網(wǎng)頁(yè)背景效果制作教程

新的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)——多邊形折紙風(fēng)格,什么是多邊形風(fēng)格呢?其實(shí)它有點(diǎn)像折紙風(fēng)格一樣,如果不懂,

圖趣之前剛剛分享了一個(gè)在線多邊形制作網(wǎng)站--flat surface shader

下面圖趣為大家介紹一個(gè)制作多邊形圖像的網(wǎng)頁(yè)工具。

工具由somestuff提供:點(diǎn)擊這里進(jìn)入下載頁(yè)(找到download sources here的鏈接),有很多用戶說(shuō)下載不了,好吧,我直接分享至微盤:微盤下載

使用方法很簡(jiǎn)單,下載后用支持html5的瀏覽器打開,拖動(dòng)一張圖片到"Drop your bitmap here"區(qū)域,如下圖:

polygon-photography-tools

拖進(jìn)去后,你可以隨意單擊鼠標(biāo)來(lái)制作多邊形,也可以點(diǎn)擊Randomly來(lái)快速生成,還有一個(gè)好處就是能生成SVG圖片,這樣能可以在AI在隨意修改了。

生成SVG方法:點(diǎn)擊 Export ,然后在 this link 右擊另存為,保存的時(shí)候記得添加".svg"后綴哦!

polygon-svg

制作一個(gè)多邊形風(fēng)格背景

全屏網(wǎng)頁(yè)設(shè)計(jì)最近不也很流行嗎?所以可以使用這個(gè)工具來(lái)制作一個(gè)背景。

原圖:(圖片來(lái)源未知,很多年前收藏的,有版權(quán)問(wèn)題請(qǐng)告知我)

 

bg

 

使用多邊形工具制作,并簡(jiǎn)單PS了一下,整個(gè)過(guò)程大概3-5分鐘左右就完成了,效果如下:

 

 

如果你喜歡這圖片,點(diǎn)這里下載高清大圖:原圖 | 效果圖

多邊形風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)作品欣賞

接下來(lái)我們一起看看有那些網(wǎng)站使用了多邊形風(fēng)格,還有就是他們那些元素使用了多邊形來(lái)制作,Enjoy!

JOMMANS

國(guó)內(nèi)設(shè)計(jì)師JOMMANS的個(gè)人博客,多邊形風(fēng)格主要應(yīng)用在Logo & Banner上。

jommans

查看網(wǎng)站

Aires Cintra Arquitetura

Aires-Cintra-Arquitetura 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web desig

查看網(wǎng)站

BeoPlay

BeoPlay 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web desig

查看網(wǎng)站

upon a fold

upon-a-fold 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web desig

查看網(wǎng)站

Dare with us 2013

Dare with us 2013 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Mokhtar SAGHAFI

Mokhtar SAGHAFI 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Android Analyze

Android Analyze 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Sanissimo greets

Sanissimo 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Yosoygil

Yosoygil 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Made by Vadim

Made by Vadim 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Pinpoint Design

Pinpoint Design 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Send me to SouthPole

SouthPole 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Filidor Weise

Filidor Weise 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Equilibrium

Equilibrium 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

HushFlow

HushFlow 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

GoodTwin

GoodTwin 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Letters, Inc

Letters Inc. 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Healthshare

Aires and Cintra Arquitetura 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

MostWanted Wild Digital Agency

MostWanted Wild Digital Agency 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

Agencja Reklamowa

Agencja Reklamowa 多邊形網(wǎng)頁(yè)設(shè)計(jì)Polygon web design

查看網(wǎng)站

via:www.shejidaren.com

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://www.irelandcustomcontracting.com/tutorial/di1786.html
詳析無(wú)邊框按鈕的優(yōu)缺點(diǎn)
淘寶UED-一張圖解釋手機(jī)端8px原理
圖趣網(wǎng)微信
建議反饋
×