讓人上癮的設計神器2 之 大氣星球

來自專欄 GitHub開源項目更新精選15 人贊了文章

來源：阿文； 已獲授權

因為在平日做設計的時候，我們經常會遇到一些神客戶要求：

經過無數次被虐哭後，我發現原來他們想要大氣啊，原來是這樣子的~

於是，我總結了一個規律

給出了大氣的設計...

是不是很大氣

？

大氣不大氣？？？

做大氣如何才能像我一樣優秀，那今天給大家整理了9個大氣的神器，全文185圖，6000字，友情提示：請勿蹲廁翻閱，以防腿麻摔跤

，神器走起~

AlteredQualia

一句話描述：柔軟得想捏它一下

網 址：http://alteredqualia.com

這是一款簡單到爆的在線星球生成器

由於沒有參數可調，編輯性不強，操作起來十分隨意。左右移動滑鼠，可以旋轉星球：

上下移動滑鼠，可以縮放星球：

為什麼叫液態星球？當滑鼠划過時，你會發現這個 「太陽」 居然是水做的！（有種想去伸手進屏幕捏下的衝動

）

換色彩也是很炫：

直接右鍵就能另存圖片，圖片的大小取決於你屏幕的解析度。看，這不就解鎖了一個宇宙星空圖庫還天天不重樣么？

案例應用

這些星球都是表面非常光滑的，我們保存圖片就直接可以去用！

即使作為主角，這些星球也超級百搭：

隱藏彩蛋：

作者 Altered Qualia 其實大有來頭，他是最早一批接觸 WebGL 的編程藝術家之一，寫了無數對行業影響深遠的牛逼例子，前文提到的星球生成器只是他眾多小玩具中的一個：

他有多強？當年，大部分同行還停留在這種水平的時候：

他已經寫出這樣的例子了：

以至於很多後來崛起的 WebGL 大神，都是看著他的代碼和例子長大的。例如我們的老朋友 @pissang ，當年就被殘忍地……

如果你有興趣，不妨關注一下這位始祖級的 WebGL 大神，個人主頁：http://alteredqualia.com

decrooks

一句話描述：妄想用代碼拯救脫髮危機

網 址：http://www.decrooks.com

這是編程藝術家 David Crooks 的一個 p5.js 小練習。（你可以粗暴地把 p5.js 理解為 Processing 的網頁版，反正就是可以做很多很屌的創意編程啦~）

這個練習作品的效果就是能自動生成一團毛線 ……等一下，別走，人家的毛可是非常有質感的！

由於是編程練習，不僅沒有參數配置，而且還有一個小bug：默認的邊距太小，導致毛球在生成過程中會被邊緣切割……

怎麼辦？改代碼。別慌，超簡單。

切換到代碼窗口，直接修改第49行代碼的 width 參數就可以調整邊距了，數字越大越遠，這樣毛球的邊緣就不會被裁掉啦~

修改完後，重新點擊中間的運行按鈕，現在你就擁有一顆完整的毛球了！

What！毛球太小？告訴你直接在第4行修改 CreateCanvas 里的參數，就能修改毛球的大小，兩個紫色數字分別代表他的長和寬：

案例應用

掌握了這兩個參數後你想讓毛線有多大就多大啦~~！而且你會發現，無論放大多少倍，每一根毛兒都清晰可見，然後根據板式裁剪，我們就有了一組巨有質感的背景素材了：

隱藏彩蛋

有同學可能說，難道我想改個顏色也要改代碼嗎？

不用！！！

由於這個球只用了黑白兩種顏色，這意味著我們只要修改這兩種顏色，就能達到重新著色的效果這裡告訴大家直接丟進 Duotone ：http://duotone.shapefactory.co/

也可以丟進 PhotoMosh ：http://photomosh.com/

大家要懂的工具直接的靈活配合使用！

Play a Ball

一句話描述：學AI不如玩個球

網 址：http://wangyasai.github.io/Play-a-ball

據了解不少同學在剛學 Ai 的時候，可能看過教程過這些的抽象球體：環形，波紋，網格……

雖然教程簡單易懂，但很多同學還是過目就忘……現在，懶癌的福音來了！

設計師之光 @亞賽大人 為大家製作了一個在線生成器：Play a Ball (玩個球)，讓你連門都不用入就能做出這樣的抽象圖形，我的媽鴨！

比起前面介紹的那兩個生成器，這個生成器的可編輯性高的懷疑人生。例如，你可以隨心所欲更改他的花紋：

拖動相應參數就可以調節球體的平滑度

當然，每種花紋的疏密以及大小都是可以調節：

懶得去調參數？

那就直接點擊隨機生成好了

你以為這就完了？仔細看看參數面板，你會發現還藏著一個小功能：

YES

你甚至可以上傳自己的圖片

作為圖形的紋理！

LOOK一秒鐘自製星球,

是不是很棒棒鴨

！

應用案例

然後直接右鍵就可以另存圖片，如果你想要動態效果，直接用錄屏工具錄製導出GIF即可。趕緊去試玩吧，我先打卡為敬啦！

隱藏彩蛋

不知不覺， @亞賽大人 已經陸續推出了 6 款超好玩的設計神器了，不僅顏值超高，而且每款都能巧妙地切中設計師的痛點。

更酷的是，所有生成器的產物免費可商用，還沒上車的同學趕緊關注吧：微博 @亞賽大人

Polygonal Planet

一句話描述：像玩遊戲一樣製作星球

網 址：http://oskarstalberg.com

這個是國外一個獨立遊戲開發者 Oskar St?lberg 弄得一款又萌又酷的星球生成器，你只需要動下滑鼠就能生成這樣的萌化的球球！

工具欄排版的也很明顯，總共分為三個區：

模塊類型、模塊大小、星球大小

操作也十分簡單，選中一個模塊類型（比如森林），在星球上隨意點擊即可：左鍵生成，右鍵消除，就是這麼簡單。

同一模塊，還可以疊加多層增加高度，看這拔地而起的氣勢：

如果想要更精細的效果，建議在右側直接把工具欄裡面的星球設置到最大，這樣就能有更多發揮空間了：

除了在線版，作者還貼心地提供了更高清更流暢的客戶端下載！早就幫你打包好了，在我公眾號回復：星球，即可獲取。

此外，這個星球還被收錄到 Steam 平台上的著名分心壁紙應用 Wallpaper Engine ：

安裝後，這個星球就會被鑲嵌在桌面背景，有多分心你們感受一下：

應用案例

遺憾的是，由於這枚星球的定位是小遊戲，並不能導出圖片甚至視頻，更不可能商用，那隻能截屏或者錄屏來做做飛機稿了：

隱藏彩蛋

作為一位天才遊戲設計師，Oskar 還開發了很多好玩的小工具，再推薦大家兩個。

Brick Block

這是一個小型建築生成器，只要點擊【隨機】按鈕就會自動生成一個磚型小區：

你甚至可以自己添加或刪除樓層，操作依然是熟悉的左鍵生成，右鍵消除：

City Generator

街道生成器，直接在空白地方點擊就會隨機生成一個街區：

已經喜歡上這個大神了？那就去追星吧~~個人主頁：http://twitter.com/OskSta

Little big city

一句話描述：零基礎製作3D星球你敢信？

網 址：http://pissang.github.io

你有沒有想過某一天什麼軟體都不用去學，就直接打開瀏覽器就能做出這樣的3D星球嗎？

是的，說的就是它：Little Big City，並且他還會自！己！動！是不是更棒！

星球上的這些3D建築並不是隨機生成的，而是對接了 MAPTALKS 上的真實數據，直接拖拽右下角的地圖，就會實時刷新：

最酷的是，你看到的整個3D星球都是可拆分的：土地，道路，建築，水域，雲層都可以分別設置是否可見，以及調整顏色：

這意味著我們可以通過圖層和顏色的排列組合，創造出不同風格的星球！比如，只有公路和土地的 3D 星球，有種奇特的科幻感：

比如，純道路的鏤空星球：

又比如，純建築的鏤空星球：

製作好的星球直接右鍵就能下載高清圖片；如果你想下載透明背景的PNG，請先關閉【sky】選項。

應用參考

這樣，我們就有了用之不盡的超優質3D星球素材了，而且素材還免費可商用！繼續拋磚：

隱藏彩蛋

只要你點擊左上角的切換按鈕，就可以把星球一鍵轉換成一座立體的懸浮城市！！！

同樣的簡易操作，拖拽地圖即刷新建築：

同樣的360度無死角實時渲染：

真是越玩越手癢，繼續打卡為敬：

另外，這個神器甚至可以導出 OBJ 三維格式喔~~~想像一下，結合 PPT 的 3D 功能還能玩出什麼花樣？又到你告訴我啦~

已經忘了第幾次推薦@pissang 的神器了，每一次都驚為天人。

那個5年前被 Altered Qualia 大神 「爆出翔」 的中二少年，早已蛻變成了別人眼中的大神，以致敬的方式追趕著自己的偶像。

他的個人主頁，我推薦一百遍都不會膩：

http://twitter.com/pissang1

EARTH

一句話描述：在酷炫的地球上興風作浪

網 址：http://earth.nullschool.net

Earth 他是一個在線氣象可視化工具，能夠展示天氣、洋流、海面溫度、大氣污染……等等一些數據，由於可讀性超強，長期以來受到數據新聞領域的追捧，是全球最知名的數據可視化項目之一。

但比起這些專業的數據監測，我們更關注的可能是 —— 顏值。是的，這顆地球長得超好看：

不僅可以隨意轉動，還可以隨意縮放還不失真，這不就是絕佳的星球素材么？

除了默認展示的氣象圖，你還可以切換到其他模式，得到不同形式的地球：

海洋模式：

化學污染物：

還有我們熟悉的 PM2.5 分布情況：

每一種展示模式下還有不同的覆蓋模式。反正，通過排列組合，你又一下子解鎖了幾十款酷炫的數據地球了，有一種科幻的異星感：

應用參考

遺憾的是，這個工具沒辦法直接保存圖片，手癢的同學只能截圖玩玩了。

隱藏彩蛋

其實這個神器除了我們常見的球體之外，他還提供各種專業的投影模式供我們使用修改。

我自己比較喜歡：沃特曼蝴蝶投影（Waterman Butterfly Projection），不用說選擇他你可以得到一張蝴蝶形態的地圖~~

腦洞大開，這不就意味著我們可以用它來製作各種花紋蝴蝶嗎？而且花紋位置還可以用滑鼠拖拽變動：

look me「標本」：

PlanetMaker

一句話描述：星球製造機

網 址：http://planetmaker.wthr.us

Planet Maker 這是一款在線星球生成器，雖然界面看上去有一點點的不高大上，但是功能還是十分強大。就光是地球，就有9種樣式可以選擇：

除了我們的家園地球，還有其他數十種星球的紋理，讓你1秒穿越外星球：

除了切換星球，你還可以配置各種各樣的參數。比如，太陽直射的角度：

比如，雲層的設置，從他的厚度、高度、亮度……再到透明度，參數多到到讓人開心的跳跳！

你天真的就以為完了嗎

？右側還有一大堆參數在等著你調節呢！

個人比較喜歡的就是【星環】，可以讓星球憑空生出一個可隨意編輯的環；每一項展開同樣有超多參數：

應用參考

就這樣，我們今天又收穫了一大堆寫實風格的星球素材啦！如果你經常做設計什麼的，肯定這組夜空素材不陌生，現在你都可以隨心所欲保存360度的星球了

應用效果可以看下

隱藏彩蛋

細心的同學肯定會發現，右下角有一行文字：This is a Chrome Experiments，不妨點進去看看~

在之前推出的神器裡面推薦過一個馬卡龍色體素生成器Biomes:

https://demo.marpi.pl/biomes/

此外，還有很多AR，VR，AI……等其他領域的酷炫實驗，你會發現其實就是 Google 的黑科技實驗室！

Space Engine

一句話描述：讓你承包整個宇宙

下 載：http://spaceengine.org

吶，這是一個非常炫酷的太空模擬器，你可以用它探索宇宙天體：比如、行星、恆星、中子星、星團、星雲和星系、小行星、衛星……不過這個不是個在線生成的，因為他功能很多需要下載他的客戶端

怎麼玩？

首先安裝完後。只要在浩瀚的宇宙中滑鼠點選一坨星雲或者一顆星星，然後按鍵G就可以瞬間穿越了

如果你想探索其他星系也可以通過搜星器，直接搜索想去的星球，例如，直接輸入我們的地球：

其中，你也可以在任何一顆星球上都能調節星球參數參數：

點擊【F11】鍵，就能存儲超清的截圖（不帶界面的截圖哦）。每一幀，每一個角度，每一個體位都是大片，隨機欣賞一下！

應用參考

其實我平常所設計時用到的大部分星空素材圖片都直接可以從這裡生成~~

隱藏彩蛋

其實這裡還有一個【著陸】功能，可以著陸到任意一個星球，如果你安裝了官方的超清素材包，而且可以看到這些星球上面的超細緻紋理！

look，多麼漂亮的圖

Microsoft Office

一句話描述：一直被你忽視的小可憐

地 址：http://www.office.com

在之前就預告過，在以後的PPT裡面可能會推出3D，那麼現在預言實現了，他的3D模型庫來了

直接點擊PPT裡面的按鈕就會出現一個 3D 素材庫，而其中一大類，就是我們要找的星球素材：

隨選一張都可以用，並且提供多角度圖片選用

如果在PPT兩頁之間加上一個【平滑】切換動畫效果，模型就可以自動過渡！

2017年 Office 還專門為 3D 模型量身定製作了一系列動畫效果！

你的球球可以自轉啦！

這麼調皮，還會蹦蹦跳跳

應用案例

學到這些技巧你還擔心做不好設計嗎？

隱藏彩蛋1

在之前教程裡面，教過大家用 Paint 3D 來製作星球：

你會發現製作這樣的星球，都是五分鐘的事情：

同樣地，結合【平滑】切換動畫，又可以打開新世界大門啦~

隱藏彩蛋2

不止 PPT， 其實在Excel裡面也藏著一個地球，他就在【插入】的工具欄裡面

這個【三維地圖】功能，可以直接把你的地理數據標註在一個地球上，你能想像 Excel 中居然打開了一個數據地球么，還能換各種主題：

還有類似 PPT 的【平滑】切換功能：

看球如果看膩了？也可以展開為平面地圖看看，依舊酷炫到底：

感謝居然能堅持看到這的你。以上就是今天所講的9個神器，神器3再見

相關神器收閱：

10個讓人上癮的設計神器1

H5十大雲端神器「仙」界有名

相關文章

我要進群

iOS設計尺寸規範

Android設計尺寸規範

平面設計基礎常識匯總

令人驚嘆的網頁設計長什麼樣？

超贊的27個高質量免費圖片網站

120G頂級C4D教程強勢來襲

Web UI 網頁設計規範

iPhone X 人機交互指南及其設計細節

一款APP從設計到切圖標註適配全記錄

2018年網頁設計的19個趨勢！

21世紀最強設計配色方法

7種UI設計趨勢超流行

8大史詩級海報設計技巧

WUI | 極簡網頁界面設計

2018現役最全的14種平面設計風格

設計報價 | 一個LOGO該如何報價？

全鏈路UI設計師了解一下

萬字乾貨！這可能是最全面的交互基礎知識總結

近兩萬字的乾貨！最全面的網頁設計基礎知識全攻略