折紙多邊形網(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ō)下載不了,好吧,我直接分享至微盤(pán):微盤(pán)下載
使用方法很簡(jiǎn)單,下載后用支持html5的瀏覽器打開(kāi),拖動(dòng)一張圖片到"Drop your bitmap here"區(qū)域,如下圖:
拖進(jìn)去后,你可以隨意單擊鼠標(biāo)來(lái)制作多邊形,也可以點(diǎn)擊Randomly來(lái)快速生成,還有一個(gè)好處就是能生成SVG圖片,這樣能可以在AI在隨意修改了。
生成SVG方法:點(diǎn)擊 Export ,然后在 this link 右擊另存為,保存的時(shí)候記得添加".svg"后綴哦!
制作一個(gè)多邊形風(fēng)格背景
全屏網(wǎng)頁(yè)設(shè)計(jì)最近不也很流行嗎?所以可以使用這個(gè)工具來(lái)制作一個(gè)背景。
原圖:(圖片來(lái)源未知,很多年前收藏的,有版權(quán)問(wèn)題請(qǐng)告知我)
使用多邊形工具制作,并簡(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上。
Aires Cintra Arquitetura
BeoPlay
upon a fold
Dare with us 2013
Mokhtar SAGHAFI
Android Analyze
Sanissimo greets
Yosoygil
Made by Vadim
Pinpoint Design
Send me to SouthPole
Filidor Weise
Equilibrium
HushFlow
GoodTwin
Letters, Inc
Healthshare
MostWanted Wild Digital Agency
Agencja Reklamowa
本文地址:http://m.likemindfilms.com/tutorial/di1786.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏